/* Booking controls keep their current position while a selector is open. */
.booking-layer__backdrop {
  background: rgba(7, 50, 74, 0.18);
  backdrop-filter: none;
  touch-action: none;
}

.booking-popover {
  max-height: var(--booking-max-height, calc(100dvh - 32px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  box-shadow: 0 16px 52px rgba(7, 50, 74, 0.2);
  transform: translateY(8px) scale(.99);
  transform-origin: 50% 0;
  transition: opacity 160ms ease, transform 200ms cubic-bezier(.2, .8, .2, 1);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.booking-popover[data-placement="top"] {
  transform: translateY(-8px) scale(.99);
  transform-origin: 50% 100%;
}

.booking-popover[data-placement="left"] { transform-origin: 100% 25%; }
.booking-popover[data-placement="right"] { transform-origin: 0 25%; }
.booking-layer.is-open .booking-popover { transform: none; }

.booking-popover--calendar,
.booking-popover--calendar[data-months="1"],
.booking-popover--guests {
  width: min(400px, calc(var(--booking-viewport-width, 100vw) - 32px));
}

.booking-popover--calendar[data-months="2"] {
  width: min(720px, calc(var(--booking-viewport-width, 100vw) - 32px));
}

.booking-popover--destination {
  width: min(440px, calc(var(--booking-viewport-width, 100vw) - 32px));
}

.booking-popover.is-compact {
  padding: 18px;
  border-radius: 22px;
}

.booking-popover.is-compact .booking-popover__header { align-items: center; }
.booking-popover.is-compact .booking-popover__header h3 { font-size: 1.3rem; }
.booking-popover.is-compact .booking-close { width: 40px; height: 40px; }
.booking-popover .booking-eyebrow { font-size: .65rem; }
.booking-popover.is-compact .calendar-selection { margin-bottom: 6px; }

.calendar-guidance {
  margin: 0 0 17px;
  color: var(--ink-soft);
  font-size: .78rem;
  line-height: 1.4;
}

.booking-popover .calendar-months { gap: 28px; }
.booking-popover.is-compact .calendar-month h4 { margin-bottom: 12px; line-height: 32px; }
.booking-popover.is-compact .calendar-nav { width: 38px; height: 38px; top: -3px; }
.booking-popover.is-compact .calendar-day { height: 38px; }
.booking-popover.is-compact .calendar-day span { width: 34px; height: 34px; }
.booking-popover.is-compact .booking-popover__footer { margin-top: 12px; padding-top: 10px; }
.booking-popover.is-compact .booking-popover__footer > p { font-size: .72rem; line-height: 1.45; }
.booking-popover.is-compact .booking-done { min-height: 42px; padding: 8px 22px; }
.booking-popover .booking-text-button { min-height: 42px; padding-inline: 10px; }
.booking-popover .booking-footer-actions { justify-content: space-between; }
.booking-popover .guest-stepper button { width: 38px; height: 38px; }
.booking-popover .guest-row__label { min-width: 0; }
.booking-popover .guest-capacity { font-size: .74rem; }

.booking-popover :focus-visible {
  outline: 3px solid var(--turquoise-dark);
  outline-offset: 3px;
}

.booking-popover .calendar-day:focus-visible {
  z-index: 2;
  outline-offset: -2px;
  border-radius: 9px;
}

.booking-popover .booking-close:hover,
.booking-popover .calendar-nav:hover:not(:disabled),
.booking-popover .guest-stepper button:hover:not(:disabled) { transform: none; }

@media (max-width: 720px) {
  .booking-layer__backdrop { background: rgba(7, 50, 74, .34); }
  .booking-popover,
  .booking-popover--calendar,
  .booking-popover--calendar[data-months="1"],
  .booking-popover--guests,
  .booking-popover--destination {
    top: var(--booking-top);
    left: var(--booking-left);
    bottom: auto;
    right: auto;
    width: var(--booking-viewport-width, 100vw);
    max-height: var(--booking-max-height, calc(100dvh - 12px));
    border-radius: 24px 24px 0 0;
    transform: translateY(18px);
  }
  .booking-popover.is-compact {
    padding: 18px 16px calc(14px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
  }
  .booking-popover::before { margin-top: -6px; margin-bottom: 12px; }
  .booking-popover.is-compact .calendar-day { height: 40px; }
  .booking-popover.is-compact .calendar-day span { width: 36px; height: 36px; }
  .booking-popover.is-compact .booking-close,
  .booking-popover .guest-stepper button { width: 42px; height: 42px; }
  .booking-popover.is-compact .calendar-nav { width: 42px; height: 42px; top: -5px; }
  .booking-popover.is-compact .booking-done { min-height: 44px; }
  .booking-popover .guest-row { gap: 8px; }
}

@media (max-width: 720px) and (max-height: 620px) {
  .booking-popover.is-compact { padding-top: 14px; }
  .booking-popover .booking-eyebrow { display: none; }
  .booking-popover.is-compact .booking-popover__header { margin-bottom: 6px; }
  .booking-popover.is-compact .calendar-selection { margin-bottom: 4px; }
  .booking-popover .calendar-guidance { margin-bottom: 12px; }
  .booking-popover.is-compact .calendar-day { height: 34px; }
  .booking-popover.is-compact .calendar-day span { width: 30px; height: 30px; }
  .booking-popover.is-compact .booking-popover__footer { margin-top: 8px; padding-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .booking-popover,
  .booking-layer__backdrop { transition: none; }
}