/* ============================================================
   Price details sheet (mobile): slides up from the bottom when the
   price area of the mobile booking bar is tapped. Same backdrop/overlay
   fixed-overlay convention as other modals (dark blurred backdrop,
   content fades/slides in), but anchored to the bottom edge with only the top
   corners rounded, matching the reference bottom-sheet pattern rather
   than a centered modal.

   Two full-height screens live inside the one sheet: a summary screen
   (price breakdown + Dates/Guests rows) and a picker screen. Tapping
   "Change" slides the picker screen up to fully cover the summary,
   its own pinned header (Back) and footer (Apply), with only the
   calendar/guest rows in between scrolling, rather than growing an
   accordion in place or floating the desktop popover on top of the
   sheet. It's still the exact same datePanel/guestPanel DOM + render
   logic as the desktop popover (see initBookingCard in script.js),
   just reparented into #priceSheetPickerSlot and restyled by the
   scoped rules further down instead of opened as a floating panel.
   ============================================================ */
.price-sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(var(--ink-rgb), 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.price-sheet:not([hidden]) {
  display: flex;
}

.price-sheet.is-open {
  opacity: 1;
}

.price-sheet__panel {
  width: 100%;
  max-width: 560px;
  /* No fixed/min height: the panel sizes to whichever screen
     (.price-sheet__views, below) is currently showing, so "Add dates to
     see the total" isn't stretched into a near-full-height sheet with a
     few hundred px of empty space under the CTA. max-height stays as a
     safety cap for genuinely tall content (a 6-row calendar, long
     cancellation copy): see syncSheetHeight() in script.js. */
  max-height: min(88vh, 720px);
  overflow: hidden;
  background: var(--paper);
  border-radius: 20px 20px 0 0;
  transform: translateY(24px);
  transition: transform 0.28s var(--ease);
  position: relative;
  display: flex;
  flex-direction: column;
}

.price-sheet.is-open .price-sheet__panel {
  transform: translateY(0);
}

.price-sheet__views {
  position: relative;
  overflow: hidden;
  /* Height is set explicitly in px by syncSheetHeight() (script.js)
     whenever the active screen's content changes size or the summary/
     picker screen swaps: this transition is what makes the sheet
     visibly grow/shrink instead of snapping. */
  transition: height 0.32s var(--ease);
}

.price-sheet__view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.price-sheet__view--summary {
  overflow-y: auto;
  padding: 22px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  transition: opacity 0.28s var(--ease);
}

.price-sheet__view--picker {
  transform: translateY(100%);
  transition: transform 0.32s var(--ease);
}

.price-sheet__panel.is-picker .price-sheet__view--summary {
  opacity: 0;
  pointer-events: none;
}

.price-sheet__panel.is-picker .price-sheet__view--picker {
  transform: translateY(0);
}

.price-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-shrink: 0;
}

.price-sheet__view--picker .price-sheet__header {
  padding: 22px 22px 0;
  margin-bottom: 12px;
  justify-content: flex-start;
  gap: 12px;
}

.price-sheet__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--ink);
}

.price-sheet__close,
.price-sheet__back {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.price-sheet__close .icon,
.price-sheet__back .icon {
  width: 16px;
  height: 16px;
}

.price-sheet__breakdown {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}

.price-sheet__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.92rem;
  color: var(--ink);
}

.price-sheet__row + .price-sheet__row {
  margin-top: 10px;
}

.price-sheet__row--total {
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--border-soft);
  font-weight: 700;
}

.price-sheet__row-label {
  color: var(--ink-soft);
}

.price-sheet__row--total .price-sheet__row-label {
  color: var(--ink);
}

.price-sheet__empty {
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.price-sheet__section {
  /* These are real <button> elements (Dates/Guests rows both open a
     picker on click), so they need the usual native-chrome reset:
     without it the browser's default button border/background/padding
     shows through as a boxed rectangle instead of a plain flat row. */
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}

.price-sheet__section-label {
  margin: 0 0 2px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.price-sheet__section-value {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

.price-sheet__cancellation {
  margin: 16px 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.price-sheet__footer {
  margin-top: 20px;
  flex-shrink: 0;
}

.price-sheet__footer .btn-primary {
  width: 100%;
}

/* Picker screen's own body + pinned footer: the calendar/guest rows
   scroll independently in the middle, but Apply (and the Back button up
   in the header) always stay put instead of scrolling away with the
   content, unlike the old in-place accordion. */
.price-sheet__picker-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 22px;
}

.price-sheet__picker-footer {
  flex-shrink: 0;
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-soft);
}

.price-sheet__picker-footer .btn-primary {
  width: 100%;
}

@media (min-width: 901px) {
  .price-sheet {
    display: none !important;
  }
}

@media (max-width: 900px) {
  /* Same calendar/stepper DOM the desktop floating popover uses, but
     that popover's fixed pixel sizing (a 280px-wide month, 36px day
     cells, 30px steppers) was tuned for a mouse pointer next to a fixed
     bottom bar. Size everything up for a real full-screen touch picker,
     and strip the floating-popover chrome (card background/border/
     shadow/absolute position) since this panel now IS the screen, not
     an overlay sitting on top of one. */
  #priceSheetPickerSlot .field-panel {
    position: static;
    display: block;
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 12px 0 18px;
    margin: 0;
    border-radius: 0;
  }

  #priceSheetPickerSlot .date-panel__months {
    display: block;
  }

  #priceSheetPickerSlot .cal-month {
    width: 100%;
  }

  #priceSheetPickerSlot .cal-grid {
    row-gap: 4px;
  }

  #priceSheetPickerSlot .cal-cell {
    height: 46px;
  }

  #priceSheetPickerSlot .cal-day {
    width: 44px;
    height: 44px;
    margin: 0 auto;
    font-size: 0.95rem;
  }

  #priceSheetPickerSlot .cal-nav-btn {
    width: 44px;
    height: 44px;
  }

  #priceSheetPickerSlot .stepper {
    gap: 16px;
  }

  #priceSheetPickerSlot .stepper__btn {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }

  #priceSheetPickerSlot .stepper__value {
    font-size: 1rem;
  }

  #priceSheetPickerSlot .segmented__btn {
    padding: 12px 20px;
    min-height: 44px;
    font-size: 0.9rem;
  }

  /* The picker screen's own header Back / footer Apply already cover
     discard + confirm, so the shared panel's built-in Close/Done button
     (built for the desktop popover, where it's the only way to dismiss)
     would just be a redundant second "done" button here; only its
     Clear-dates/Reset link stays, as a lightweight in-place "start over"
     action distinct from backing all the way out. */
  #priceSheetPickerSlot .date-panel__footer {
    justify-content: flex-start;
    border-top: none;
    margin-top: 4px;
    padding-top: 0;
  }

  #priceSheetPickerSlot [data-action="close"] {
    display: none;
  }
}

/* Blocked (booked / host-held) dates inside the booking sidebar's
   calendar: visually distinct from an ordinary disabled past date. */
.cal-day.is-blocked:disabled {
  color: var(--ink-soft);
  text-decoration: line-through;
  background: var(--border-soft);
}

.date-panel__legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.date-panel__legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--paper);
  border: 1px solid var(--border);
}

.date-panel__legend-swatch.is-blocked {
  background: repeating-linear-gradient(45deg, var(--border) 0 3px, transparent 3px 6px);
}

/* ---- Full-page photo tour ----
   Airbnb-style "show all photos": a fixed topbar (back + share) over a
   normally-scrolling page, a thumbnail row that jumps to each room's
   section, and every room's photos two-up below their own heading.
   Clicking a photo opens the separate .lightbox below. ---- */
.photo-tour {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  overflow-y: auto;
  background: var(--paper);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.photo-tour:not([hidden]) {
  display: block;
}

.photo-tour.is-open {
  opacity: 1;
}

.photo-tour__topbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: var(--paper);
}

.photo-tour__back {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.photo-tour__back .icon {
  width: 18px;
  height: 18px;
}

.photo-tour__share {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.photo-tour__share .icon {
  width: 18px;
  height: 18px;
}

.photo-tour__share.is-copied {
  color: var(--accent);
}

.photo-tour__body {
  max-width: 1000px;
  margin: 0 auto;
  padding: 8px 40px 100px;
}

.photo-tour__title {
  margin: 0 0 24px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 2rem;
  color: var(--ink);
}

.photo-tour__nav {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 48px;
}

.photo-tour__nav-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
  width: 140px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.photo-tour__nav-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.photo-tour__nav-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-tour__nav-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.photo-tour__section {
  margin-bottom: 56px;
  scroll-margin-top: 90px;
}

.photo-tour__section-title {
  margin: 0 0 20px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--ink);
}

.photo-tour__grid {
  columns: 2;
  column-gap: 12px;
}

.photo-tour__photo {
  display: block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: 12px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: none;
  cursor: pointer;
}

.photo-tour__photo img {
  width: 100%;
  display: block;
  transition: opacity 0.2s var(--ease);
}

.photo-tour__photo:hover img {
  opacity: 0.85;
}

/* ---- Lightbox (single photo, prev/next) ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  background: var(--ink);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.lightbox:not([hidden]) {
  display: block;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox__topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
}

.lightbox__close,
.lightbox__share {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

.lightbox__close .icon,
.lightbox__share .icon {
  width: 18px;
  height: 18px;
}

.lightbox__counter {
  margin: 0;
  font-size: 0.9rem;
  color: #fff;
}

/* Swipeable strip, not a single fading <img>: .lightbox__track holds one
   .lightbox__slide per photo (see lightboxMarkup() in script.js) and
   shifts by a full stage-width per index, dragged live under the finger
   and snapped by initPhotoTour()'s onLbPointer* handlers. */
.lightbox__stage {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 80px 0;
  touch-action: pan-y;
}

.lightbox__track {
  display: flex;
  height: 100%;
}

.lightbox__slide {
  display: flex;
  flex: 0 0 100%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 0 110px;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.lightbox__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
}

.lightbox__arrow:hover {
  background: rgba(255, 255, 255, 0.25);
}

.lightbox__arrow--prev {
  left: 24px;
}

.lightbox__arrow--next {
  right: 24px;
}

.lightbox__arrow .icon {
  width: 20px;
  height: 20px;
}


/* ---- Responsive (restored from the pre-split monolith's combined
   900px/640px block) ---- */
@media (max-width: 900px) {
  .photo-tour__grid {
    columns: 1;
  }
}

@media (max-width: 640px) {
  .photo-tour__topbar {
    padding: 16px 20px;
  }

  .photo-tour__body {
    padding: 8px 20px 80px;
  }

  .photo-tour__title {
    font-size: 1.75rem;
  }

  .lightbox__stage {
    padding: 70px 0;
  }

  .lightbox__slide {
    padding: 0 56px;
  }

  .lightbox__arrow {
    width: 36px;
    height: 36px;
  }

  .lightbox__arrow--prev {
    left: 8px;
  }

  .lightbox__arrow--next {
    right: 8px;
  }
}