@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:wght@300;400;500;600;700&family=Barlow+Semi+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Forum&display=swap');

/**
 * Josefina booking drawer — Hostinger static embed
 * Scope: avoid resetting global body/html; drawer UI lives under #booking-drawer-root + fixed layers.
 */

#booking-drawer-root {
  --booking-bg: #0a0b0a;
  --booking-surface: #141512;
  --booking-surface-2: #1c1b18;
  --booking-cream: #efe7d2;
  --booking-cream-dim: rgba(239, 231, 210, 0.55);
  --booking-cream-faint: rgba(239, 231, 210, 0.28);
  --booking-border: rgba(239, 231, 210, 0.12);
  --booking-border-hover: rgba(239, 231, 210, 0.24);
  --booking-gold: #cfbe91;
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Hidden Bentral iframe host (sibling of root in page HTML) */
#bentral-host {
  position: fixed !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 4px !important;
  height: 4px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: -1 !important;
}

#bentral-host iframe {
  display: block !important;
  width: 4px !important;
  height: 4px !important;
  border: 0 !important;
}

.booking-drawer-panel.drawer-container {
  width: 720px;
  max-width: min(720px, 100vw);
  background:
    radial-gradient(circle at 18% 0%, rgba(239, 231, 210, 0.055), transparent 28%),
    linear-gradient(180deg, #0c0d0b 0%, #050605 100%) !important;
  box-shadow: -30px 0 90px rgba(0, 0, 0, 0.58);
}

@media (max-width: 699px) {
  .booking-drawer-panel.drawer-container {
    width: 100vw !important;
    width: 100dvw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-left: none !important;
    box-sizing: border-box !important;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

.title-text {
  font-family: 'Forum', 'Times New Roman', Georgia, serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.9;
}

.booking-header-title {
  font-family: 'Barlow Condensed', 'Barlow Semi Condensed', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

@media (min-width: 700px) {
  .title-text {
    font-size: clamp(44px, 5.2vw, 68px);
  }
}

@media (max-width: 699px) {
  .title-text {
    font-size: clamp(38px, 11vw, 54px);
  }
}

.booking-drawer-panel * {
  box-sizing: border-box;
}

.booking-drawer-panel ::selection {
  background: rgba(239, 231, 210, 0.22);
  color: var(--booking-cream);
}

.booking-drawer-panel input::placeholder {
  color: rgba(239, 231, 210, 0.27);
}

.booking-drawer-panel input:focus,
.booking-drawer-panel select:focus {
  border-color: rgba(239, 231, 210, 0.34) !important;
  box-shadow: 0 0 0 3px rgba(239, 231, 210, 0.06) !important;
}

.booking-drawer-panel button {
  -webkit-tap-highlight-color: transparent;
}

.room-expand-toggle {
  width: 38px;
  height: 38px;
  border: 1.5px solid #4a473e;
  border-radius: 999px;
  background: #181814;
  color: #efe7d2;
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.16s ease;
}

.room-expand-toggle:hover {
  border-color: #777367;
  background: #22211c;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
  transform: translateY(-1px) scale(1.03);
}

.room-expand-toggle:active {
  transform: translateY(0) scale(0.94);
  background: #2a281f;
}

.room-expand-toggle__line {
  position: absolute;
  width: 15px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.room-expand-toggle__line--v {
  transform: rotate(90deg);
}

.room-expand-toggle.is-open .room-expand-toggle__line--v {
  opacity: 0;
  transform: rotate(90deg) scaleX(0.2);
}

.booking-leave-confirm {
  /* Pinned to the drawer's strip (right side, 720 px wide on desktop) — NOT
     centered on the full viewport. On phones the drawer is full-width so this
     covers the whole screen via the @media block below. */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 720px;
  max-width: 100vw;
  /* Must sit above the intl-tel-input country dropdown which is portaled to
     <body> with z-index: 12050. If the dropdown is open (or briefly stuck) when
     the user clicks X, the modal would otherwise hide behind it and its buttons
     couldn't be clicked. 99999 keeps the modal on top of anything reasonable. */
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(10px);
  /* Defensive — ensure clicks on this overlay are received even if a parent's CSS
     ever sets pointer-events: none. */
  pointer-events: auto;
}

@media (max-width: 699px) {
  .booking-leave-confirm {
    /* Drawer is full-width on phone; modal covers the whole viewport. */
    width: 100vw;
    width: 100dvw;
  }
}

.booking-leave-confirm__panel {
  width: min(420px, 100%);
  border: 1px solid rgba(239, 231, 210, 0.14);
  border-radius: 20px;
  background:
    radial-gradient(circle at 20% 0%, rgba(239, 231, 210, 0.08), transparent 34%),
    #0d0e0c;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.54);
  padding: 24px;
  /* Defensive pointer events on the panel itself + ensure the buttons inside
     always receive clicks. */
  pointer-events: auto;
}
.booking-leave-confirm__panel button {
  pointer-events: auto;
}

.booking-leave-confirm__panel h3 {
  margin: 0 0 10px;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 24px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #efe7d2;
}

.booking-leave-confirm__panel p {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  color: rgba(239, 231, 210, 0.62);
}

.booking-leave-confirm__actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.booking-leave-confirm__actions button {
  flex: 1;
  border-radius: 999px;
  padding: 13px 18px;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.booking-leave-confirm__secondary {
  border: 1.5px solid rgba(239, 231, 210, 0.16);
  background: rgba(239, 231, 210, 0.04);
  color: #efe7d2;
}

.booking-leave-confirm__primary {
  border: 0;
  background: #efe7d2;
  color: #0a0b0a;
}

.booking-drawer-panel div[style*="overflow-y: auto"] {
  scrollbar-width: thin;
  scrollbar-color: rgba(239, 231, 210, 0.22) transparent;
}

.booking-drawer-panel div[style*="overflow-y: auto"]::-webkit-scrollbar {
  width: 8px;
}

.booking-drawer-panel div[style*="overflow-y: auto"]::-webkit-scrollbar-track {
  background: transparent;
}

.booking-drawer-panel div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
  background: rgba(239, 231, 210, 0.2);
  border-radius: 999px;
}

/* intl-tel-input dark theme (dropdown may append to body — keep global selectors) */
.iti {
  width: 100%;
  display: block;
}

.iti__country-list {
  font-family: 'Barlow Semi Condensed', system-ui, sans-serif;
}

.iti--open input.iti__tel-input {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.iti__selected-country-primary {
  background: transparent !important;
}

.iti__dropdown-content {
  background: #1a1b18 !important;
  border: 1px solid rgba(239, 231, 210, 0.12) !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden;
  z-index: 10050 !important;
  max-width: calc(100vw - 44px);
}

.iti__search-input {
  width: 100% !important;
  border: none !important;
  border-bottom: 1px solid rgba(239, 231, 210, 0.1) !important;
  border-radius: 0 !important;
  background: rgba(239, 231, 210, 0.05) !important;
  padding: 10px 14px !important;
  font-family: 'Barlow Semi Condensed', sans-serif !important;
  font-size: 15px !important;
  height: auto !important;
  box-shadow: none !important;
  outline: none !important;
  color: #efe7d2 !important;
}

.iti__search-input:focus {
  border-bottom-color: rgba(239, 231, 210, 0.34) !important;
  box-shadow: none !important;
}

.iti__country-list {
  max-height: 200px;
  font-size: 15px;
  color: #efe7d2;
  background: #1a1b18;
}

.iti__country {
  padding: 8px 14px !important;
}

.iti__country.iti__highlight {
  background: rgba(239, 231, 210, 0.1) !important;
}

.iti__country-name {
  color: #efe7d2 !important;
}

.iti__dial-code {
  color: rgba(239, 231, 210, 0.5) !important;
}

.iti__flag-box,
.iti__flag {
  border-radius: 3px !important;
  overflow: hidden !important;
}

.booking-drawer-panel .iti .iti__tel-input {
  padding-left: 58px !important;
  padding-right: 16px !important;
}

@media (max-width: 699px) {
  .booking-drawer-panel.drawer-container > div[style*="border-bottom"] {
    padding: 18px 22px 14px !important;
  }

  .booking-drawer-panel.drawer-container > div[style*="border-bottom"] .title-text {
    font-size: clamp(28px, 7.8vw, 32px) !important;
    line-height: 0.94 !important;
    white-space: nowrap !important;
  }

  .booking-drawer-panel.drawer-container > div[style*="border-bottom"] p {
    font-size: 16px !important;
    line-height: 1.32 !important;
    margin-top: 12px !important;
  }

  .booking-drawer-panel.drawer-container > div[style*="overflow-y: auto"] {
    padding: 16px 22px 14px !important;
  }

  .booking-drawer-panel.drawer-container > div[style*="overflow-y: auto"] > div > p:first-child {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  .booking-drawer-panel.drawer-container label {
    font-size: 15px !important;
    margin-bottom: 6px !important;
  }

  .booking-drawer-panel.drawer-container label + div[style*="max-width: 160px"] {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .booking-drawer-panel.drawer-container label + div[style*="max-width: 160px"] button {
    width: 46px !important;
    height: 36px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
  }

  .booking-drawer-panel.drawer-container div[style*="padding: 14px 0px"] {
    gap: 8px !important;
    margin-bottom: 8px !important;
    padding: 6px 0 !important;
  }

  .booking-drawer-panel.drawer-container div[style*="min-width: 120px"] {
    min-width: 104px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  .booking-drawer-panel.drawer-container div[style*="justify-content: space-between"][style*="margin-bottom: 20px"] {
    margin-bottom: 4px !important;
  }

  .booking-drawer-panel.drawer-container div[style*="justify-content: space-between"][style*="margin-bottom: 20px"] button,
  .booking-drawer-panel.drawer-container div[style*="justify-content: space-between"][style*="margin-bottom: 20px"] span {
    width: 30px !important;
    height: 30px !important;
    font-size: 16px !important;
  }

  .booking-drawer-panel.drawer-container div[style*="display: flex"][style*="gap: 0px"] {
    width: 100% !important;
    max-width: min(100%, 620px) !important;
    margin: 0 auto !important;
  }

  .booking-drawer-panel.drawer-container div[style*="display: flex"][style*="gap: 0px"] > div[style*="flex: 1"] {
    margin-bottom: 0 !important;
    transform: scale(1);
    transform-origin: top center;
  }

  .booking-drawer-panel.drawer-container div[style*="text-align: center"][style*="margin-bottom: 16px"] {
    margin-bottom: 8px !important;
    font-size: 17px !important;
    color: #efe7d2 !important;
  }

  .booking-drawer-panel.drawer-container div[style*="gap: 20px"] > button[aria-label$="mesec"] {
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
  }

  .booking-drawer-panel.drawer-container div[style*="grid-template-columns: repeat(7, 1fr)"] > div {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    font-size: 13px !important;
  }

  .booking-drawer-panel.drawer-container div[style*="aspect-ratio: 1 / 1"] span {
    font-size: 16px !important;
  }

  .booking-drawer-panel.drawer-container div[style*="justify-content: center"][style*="margin-top: 14px"] {
    gap: 8px !important;
    margin-top: 4px !important;
  }

  .booking-drawer-panel.drawer-container div[style*="justify-content: center"][style*="margin-top: 14px"] > div {
    font-size: 10px !important;
  }

  .booking-drawer-panel.drawer-container > div[style*="border-top"] {
    padding: 12px 22px 16px !important;
  }

  .booking-drawer-panel.drawer-container > div[style*="border-top"] button {
    padding: 13px 20px !important;
    font-size: 15px !important;
    border-radius: 999px !important;
  }

  .booking-drawer-panel.drawer-container .booking-footer-back {
    width: 92px !important;
    padding: 13px 14px !important;
  }
}