html { scroll-behavior: smooth; }
    .breadcrumb { font-size: 0.8rem; color: #616C76; margin-bottom: 12px; }
    .breadcrumb a { color: #0B72D9; text-decoration: none; }
    .badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    /* prop-type-badge removed - property type now shown via the stat cards instead */

    /* Hero toolbar - Back to Search + real share/wishlist actions */
    /* Toolbar moved into .hero-overlay-top (see hero overlay section below) */

    /* Highlight badges over the gallery (real admin flags only - Featured / Recommended) */
    .highlight-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 800; padding: 6px 14px; border-radius: 20px; color: #FFFFFF; box-shadow: 0 3px 10px rgba(0,0,0,0.25); }
    .highlight-badge.featured { background: linear-gradient(135deg, #F2A900, #FB923C); }
    .highlight-badge.recommended { background: linear-gradient(135deg, #9333EA, #EC4899); }
    .highlight-badge.verified { background: linear-gradient(135deg, #00A699, #024F47); }

    /* Quick stat cards - real data only (total rooms, rating, verification, distance) */
    /* Quick stat cards removed - Admin-Verified now shown as a badge in the hero overlay instead */

    /* Redesigned amenities grid - 2-column cards with icon + checkmark, matching the reference */
    .amenity-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    @media (max-width: 700px) { .amenity-card-grid { grid-template-columns: 1fr; } }
    .amenity-card { display: flex; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
    .amenity-card .amenity-icon { width: 38px; height: 38px; border-radius: 8px; background: var(--parchment); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; }
    .amenity-card .amenity-name { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
    .amenity-card .check { margin-left: auto; color: var(--sage); font-weight: 800; }

    /* Location distance pills - real gh.distanceToLandmark / distanceToStation only */
    .distance-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
    .distance-pill { background: var(--parchment); border-radius: 10px; padding: 10px 16px; font-size: 0.82rem; }
    .distance-pill strong { display: block; color: var(--ink); font-size: 0.85rem; }
    .distance-pill span { color: #616C76; font-size: 0.76rem; }

    .gallery-grid { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; border-radius: 10px; overflow: hidden; height: 380px; position: relative; }
    .gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
    .main-photo-wrap { grid-column: 1; grid-row: 1 / 3; position: relative; overflow: hidden; cursor: pointer; }
    .main-photo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(25px) brightness(0.55); transform: scale(1.15); }
    .gallery-grid img.main-photo { position: relative; width: 100%; height: 100%; object-fit: cover; z-index: 1; cursor: pointer; }
    .gallery-top-right { grid-column: 2; grid-row: 1; overflow: hidden; }
    .gallery-bottom-right { grid-column: 2; grid-row: 2; display: flex; gap: 6px; overflow: hidden; }
    .gallery-bottom-right img { flex: 1; min-width: 0; }
    @media (max-width: 800px) {
      .gallery-grid { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
      .gallery-top-right, .gallery-bottom-right { display: none; }
      .main-photo-wrap { height: 240px; }
    }

    /* Hero overlay - toolbar + title/rating float on top of the gallery photos with a
       gradient scrim, like a true hero banner. The gallery-grid itself (and every id/class
       the lightbox JS depends on) is completely untouched - this only wraps it and adds
       absolutely-positioned layers on top. */
    .hero-photo-wrap { position: relative; border-radius: 14px; overflow: hidden; margin-top: 16px; }
    .hero-overlay-top { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 6; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
    .hero-overlay-top > * { pointer-events: auto; }
    .back-to-search-ov { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--ink); text-decoration: none; background: rgba(255,255,255,0.92); padding: 8px 16px; border-radius: 20px; backdrop-filter: blur(3px); }
    .hero-actions-ov { display: flex; gap: 8px; }
    .hero-icon-btn-ov { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.92); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.95rem; color: var(--charcoal); backdrop-filter: blur(3px); }
    .see-all-photos-ov { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.92); border: none; padding: 8px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; cursor: pointer; backdrop-filter: blur(3px); }

    .hero-overlay-bottom {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 70px 24px 20px;
      background: linear-gradient(to top, rgba(6,20,38,0.88) 0%, rgba(6,20,38,0.55) 55%, rgba(6,20,38,0) 100%);
      color: #FFFFFF; pointer-events: none;
    }
    .hero-overlay-bottom > * { pointer-events: auto; }
    .hero-overlay-bottom .badge-row { margin-bottom: 8px; }
    .hero-overlay-bottom h1 { color: #FFFFFF; margin: 0; }
    .hero-overlay-bottom .hero-loc-rating { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 0.9rem; color: rgba(255,255,255,0.92); }
    .hero-overlay-bottom .hero-loc-rating .rating-line { color: #FFFFFF; }
    .hero-overlay-bottom .hero-loc-rating .rc { color: rgba(255,255,255,0.75); }
    @media (max-width: 800px) { .hero-overlay-bottom { padding: 50px 16px 16px; } .hero-overlay-bottom h1 { font-size: 1.5rem; } }

    /* Trust badges */
    /* trust-badge removed - trust signals now live in the stat cards and booking box checklist instead */

    /* Rating strip - redesigned to be the visual highlight of the page */
    .rating-strip { background: var(--secondary-navy); border-radius: 12px; padding: 22px 24px; margin: 0 0 18px; color: #FFFFFF; }
    .rating-strip-top { display: flex; align-items: center; gap: 18px; }
    .rating-strip .score-box { background: #FFFFFF; color: var(--ink); font-weight: 800; font-size: 1.6rem; padding: 10px 16px; border-radius: 10px; min-width: 56px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    .rating-strip .score-label { font-weight: 800; font-size: 1.15rem; color: #FFFFFF; }
    .rating-strip .score-sub { font-size: 0.82rem; color: #CFE3F5; margin-top: 2px; }
    .category-breakdown { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.2); }
    .category-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: #FFFFFF; }
    .category-row span:first-child { min-width: 100px; }
    .category-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.25); border-radius: 3px; margin: 0 12px; overflow: hidden; }
    .category-bar-fill { height: 100%; background: #F2A900; border-radius: 3px; }
    .category-row strong { color: #FFFFFF; min-width: 28px; text-align: right; }

    /* Room selection table */
    .room-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 0.88rem; }
    .room-table th { text-align: left; padding: 10px; background: var(--parchment); font-size: 0.72rem; text-transform: uppercase; color: var(--ink); }
    .room-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
    .room-table .room-price { font-weight: 800; color: var(--ink); font-size: 1rem; }
    .room-select-btn { background: var(--cta-primary); color: #FFFFFF; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 700; font-size: 0.82rem; cursor: pointer; }

    .facility-category { margin-bottom: 20px; }
    .facility-category h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; color: #616C76; margin-bottom: 10px; }
    .amenity-grid-rich { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
    .amenity-grid-rich div { font-size: 0.85rem; color: var(--charcoal); display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
    .amenity-grid-rich div::before { content: "\2713"; color: var(--sage); font-weight: 800; flex-shrink: 0; }

    .rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
    .rules-box { background: var(--parchment); border-radius: 8px; padding: 14px 16px; }
    .rules-box .label { font-size: 0.7rem; text-transform: uppercase; font-weight: 700; color: #616C76; letter-spacing: 0.5px; }
    .rules-box .value { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-top: 4px; }

    .review-card { padding: 16px 0; border-bottom: 1px solid var(--line); }
    .review-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }

    .faq-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
    .faq-item h4 { font-size: 0.92rem; margin: 0 0 6px; }
    .faq-item p { font-size: 0.85rem; color: #556372; margin: 0; }

    .similar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 14px; }
    @media (max-width: 800px) { .similar-grid { grid-template-columns: 1fr; } }

    /* See all photos button */
    /* See all photos button moved into .hero-overlay-top as .see-all-photos-ov */

    /* Full-screen lightbox */
    .lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 1200; align-items: center; justify-content: center; }
    .lightbox-overlay.open { display: flex; }
    .lightbox-img { max-width: 88vw; max-height: 82vh; object-fit: contain; border-radius: 4px; }
    .lightbox-close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: #FFFFFF; font-size: 2.2rem; cursor: pointer; line-height: 1; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
    .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: none; color: #FFFFFF; font-size: 1.3rem; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; }
    .lightbox-nav:hover { background: rgba(255,255,255,0.3); }
    .lightbox-prev { left: 20px; }
    .lightbox-next { right: 20px; }
    .lightbox-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #FFFFFF; font-size: 0.85rem; background: rgba(0,0,0,0.4); padding: 4px 12px; border-radius: 20px; }

    /* Full "see all photos" gallery modal */
    .gallery-modal-overlay { display: none; position: fixed; inset: 0; background: #FFFFFF; z-index: 1100; overflow-y: auto; }
    .gallery-modal-overlay.open { display: block; }
    .gallery-modal { max-width: 1160px; margin: 0 auto; padding: 64px 24px 60px; position: relative; }
    .gallery-modal-close { position: fixed; top: 18px; right: 24px; background: #FFFFFF; border: 1px solid var(--line); width: 40px; height: 40px; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; z-index: 1101; box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
    .gm-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .gm-photo-grid img { width: 100%; height: 220px; object-fit: cover; border-radius: 8px; cursor: pointer; display: block; }
    @media (max-width: 800px) {
      .gm-photo-grid { grid-template-columns: repeat(2, 1fr); }
      .gm-photo-grid img { height: 160px; }
      .gallery-modal { padding: 56px 16px 40px; }
    }

    /* Jump-to-section tab bar */
    .section-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin: 20px 0 0; overflow-x: auto; position: static; background: var(--white); z-index: auto; }
    @media (max-width: 900px) { .section-tabs { position: static; } }
    /* Tighter top margin than the shared .detail-grid rule in style.css (which other pages
       like admin inventory-detail and seller/availability also use, so it's not touched
       globally) - the tab bar's own border already provides visual separation, so the extra
       32px on top of that was reading as an unnecessarily large gap. */
    .detail-grid { margin-top: 14px; }
    .tab-link { font-size: 0.9rem; font-weight: 600; color: #556372; text-decoration: none; padding: 14px 0; border-bottom: 3px solid transparent; white-space: nowrap; }
    .tab-link:hover { color: var(--ink); }
    .tab-link.active { color: var(--blue-mid); border-bottom-color: var(--blue-mid); }

    /* Sticky booking bar - appears once you scroll past the main booking box */
    .sticky-bar {
      position: fixed; bottom: 0; left: 0; right: 0; background: var(--white); border-top: 1px solid var(--line);
      box-shadow: 0 -4px 16px rgba(0,0,0,0.1); padding: 12px 20px; display: none; align-items: center; justify-content: space-between;
      z-index: 100;
    }
    /* Sits just above the persistent mobile bottom tab bar (see style.css) rather than under/
       behind it - bottom:0 would put this booking bar directly beneath the nav, unreachable. */
    @media (max-width: 900px) {
      .sticky-bar { bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom)); }
      /* Always visible on mobile from page load, not gated behind the .visible class the
         scroll listener toggles (which only added it once the whole booking box had scrolled
         past - meaning a visitor had to scroll the entire page before a "Request to Book" CTA
         ever appeared). The scroll listener in the page script still runs and still toggles
         .visible harmlessly; this override just means the bar doesn't need that class to show
         on a phone, where the room-selection/booking form is often the very thing someone
         opened the page for. Desktop is unaffected - it keeps the original scroll-triggered
         behavior, since the standard (non-sticky-below-900px) .booking-box is already visible
         in the sidebar there without needing this. */
      .sticky-bar { display: flex; }
    }
    .sticky-bar.visible { display: flex; }
    .sticky-bar .price { font-size: 1.1rem; font-weight: 800; color: var(--ink); }
    .sticky-bar .price small { font-size: 0.75rem; font-weight: 400; color: #616C76; }
    .sticky-actions { display: flex; align-items: center; gap: 10px; }
    /* Click-to-call - mobile only. A tel: link opens the phone dialer on a phone but does
       nothing useful on a desktop browser, so it's hidden there rather than shown as dead UI. */
    .sticky-call-btn { display: none; }
    /* The full "Request to book" label is fine on desktop where there's room; once the Call
       button joins it on mobile the two together were forcing the label onto two lines. */
    .sticky-book-short { display: none; }
    @media (max-width: 560px) {
      .sticky-call-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; }
      .sticky-book-full { display: none; }
      .sticky-book-short { display: inline; }
      /* Comfortable tap targets on mobile for the gallery overlay icons (share/favorite) -
         38px was fine for a mouse pointer, tight for a thumb. */
      .hero-icon-btn-ov { width: 44px; height: 44px; }

      /* The overlay toolbar is a single flex row of four controls: "Back to Search", "View
         All N Photos", share, favourite. At desktop widths they fit side by side; at ~390px
         they do not, and with no mobile rule the two text buttons wrapped onto multiple lines
         and rendered as mangled overlapping blocks on top of the hero photo (reported from a
         real device). Shortening the labels to icons/short text keeps all four on one row and
         out of each other's way, rather than hiding controls the user needs. */
      .back-to-search-ov, .see-all-photos-ov {
        font-size: 0.75rem; padding: 8px 12px; white-space: nowrap;
      }
      /* Hides only the words, keeping the arrow glyph - still an obvious "go back" affordance,
         and the browser/OS back gesture remains available regardless. */
      .back-to-search-ov { font-size: 0; padding: 0; width: 38px; height: 38px; justify-content: center; border-radius: 50%; }
      .back-to-search-ov::before { content: "\2190"; font-size: 1.1rem; line-height: 1; }
      /* "View All 7 Photos >" -> "7 photos" - same meaning, roughly half the width. */
      .see-all-photos-ov { font-size: 0; padding: 8px 12px; }
      .see-all-photos-ov span { font-size: 0.75rem; }
      .see-all-photos-ov::after { content: " photos"; font-size: 0.75rem; }
      .hero-overlay-top { top: 12px; left: 12px; right: 12px; gap: 8px; }
      .hero-actions-ov { gap: 6px; flex-shrink: 0; }
    }

/* Same min-width:auto shrink trap as style.css's safety net - see the comment on the
   select/input/textarea rule there. "Value for money" in the review score breakdown and the
   rules/similar-property columns were the visible symptoms of this on a real phone. */
.category-breakdown > *, .rules-grid > *, .similar-grid > *,
.amenity-card-grid > *, .amenity-grid-rich > *, .gm-photo-grid > * { min-width: 0; }

/* Modify-search bar removed on mobile for this page specifically - the detail page already
   has its own dates/room-type in the booking box further down, and on a phone this duplicate
   search bar pushed the actual property (photos, description) below the fold before a visitor
   saw any of it. Still shown on desktop, where there's room for it. Wrapper div added in the
   template purely to give this th:replace instance something CSS can target (th:replace
   discards attributes on its own host tag). */
@media (max-width: 900px) { .gh-detail-search-bar { display: none; } }


/* v275 — upfront property location, OpenStreetMap only */
.upfront-location-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.35fr);
  gap: 22px;
  margin: 18px 0 24px;
  padding: 20px;
  border: 1px solid #E6EAF0;
  border-radius: 16px;
  background: #FFFDF8;
  box-shadow: 0 6px 18px rgba(6, 43, 92, 0.04);
}

.upfront-location-copy {
  align-self: center;
  padding: 8px 6px 8px 4px;
}

.upfront-location-eyebrow {
  margin-bottom: 8px;
  color: #F56A00;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.upfront-location-copy h2 {
  margin: 0 0 9px;
  color: #062B5C;
  font-size: 1.35rem;
  line-height: 1.25;
}

.upfront-location-copy p {
  margin: 0 0 14px;
  color: #667085;
  font-size: 0.86rem;
  line-height: 1.55;
}

.upfront-osm-link,
.location-map-reference a {
  color: #062B5C;
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
}

.upfront-osm-link:hover,
.location-map-reference a:hover {
  color: #F56A00;
}

.upfront-map-shell {
  min-height: 270px;
  overflow: hidden;
  border: 1px solid #E6EAF0;
  border-radius: 12px;
  background: #F4F8FC;
}

.upfront-property-map {
  width: 100%;
  min-height: 270px;
  height: 100%;
}

.location-map-reference {
  margin-top: 7px;
  color: #667085;
  font-size: 0.84rem;
}

@media (max-width: 900px) {
  .upfront-location-card {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .upfront-map-shell,
  .upfront-property-map {
    min-height: 240px;
  }
}


/* v276 — LOCATION widget refinements */
.upfront-distance-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 14px 0 13px;
}

.upfront-distance-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid #E6EAF0;
  border-radius: 9px;
  background: #FFFFFF;
  color: #062B5C;
  font-size: 0.78rem;
}

.upfront-distance-pill strong {
  font-weight: 700;
}

.upfront-distance-pill span {
  color: #667085;
  font-weight: 700;
}

/* Keep every Leaflet pane/control inside the map card's own stacking context.
   This prevents the map from painting above the sticky modify-search/header while scrolling. */
.upfront-location-card {
  position: relative;
  z-index: 1;
}

.upfront-map-shell {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
}

.upfront-property-map {
  position: relative;
  z-index: 0;
}

.upfront-map-shell .leaflet-pane,
.upfront-map-shell .leaflet-top,
.upfront-map-shell .leaflet-bottom {
  z-index: auto;
}

@media (max-width: 560px) {
  .upfront-distance-pills {
    display: grid;
    grid-template-columns: 1fr;
  }
}


/* v277 — polished Stay Details booking card */
.ys-booking-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid #DDE5EE;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(6,43,92,0.08);
}

.ys-booking-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 12px;
}

.ys-booking-kicker {
  margin-bottom: 5px;
  color: #667085;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.ys-booking-price {
  display: flex;
  align-items: baseline;
  color: #062B5C;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.ys-booking-price .currency {
  margin-right: 1px;
  font-size: 1.55rem;
}

.ys-booking-price small {
  margin-left: 7px;
  color: #667085;
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0;
}

.ys-booking-contact-price {
  color: #062B5C;
  font-size: 1rem;
  font-weight: 800;
}

.ys-discount-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #FFF1E8;
  color: #B94800;
  font-size: 0.68rem;
  font-weight: 800;
}

.ys-booking-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 22px 16px;
  color: #667085;
  font-size: 0.84rem;
}

.ys-booking-rating .star {
  color: #FFB800;
  font-size: 1rem;
}

.ys-booking-rating strong {
  color: #062B5C;
}

.ys-discount-note {
  margin: -5px 22px 14px;
  color: #B94800;
  font-size: 0.75rem;
  font-weight: 600;
}

.ys-booking-trust {
  margin: 0 22px 18px;
  padding: 14px 15px;
  border: 1px solid #E4EDF5;
  border-radius: 12px;
  background: #F4F8FC;
}

.ys-booking-trust > div,
.ys-booking-footnote {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.ys-booking-trust > div + div {
  margin-top: 10px;
}

.ys-booking-trust > div > span,
.ys-booking-footnote > span {
  margin-top: 1px;
  color: #00A89D;
  font-weight: 900;
}

.ys-booking-trust p,
.ys-booking-footnote p {
  margin: 0;
}

.ys-booking-trust strong,
.ys-booking-footnote strong {
  display: block;
  color: #062B5C;
  font-size: 0.79rem;
  line-height: 1.25;
}

.ys-booking-trust small,
.ys-booking-footnote small {
  display: block;
  margin-top: 2px;
  color: #667085;
  font-size: 0.7rem;
  line-height: 1.35;
}

.ys-booking-panel {
  padding: 18px 22px 22px;
  border-top: 1px solid #E6EAF0;
}

.ys-field {
  display: block;
  min-width: 0;
  margin: 0;
}

.ys-field > span {
  display: block;
  margin-bottom: 6px;
  color: #334E68;
  font-size: 0.72rem;
  font-weight: 700;
}

.ys-field select,
.ys-field input {
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #CDD8E4;
  border-radius: 9px;
  background: #FFFFFF;
  color: #062B5C;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  outline: none;
}

.ys-field select:focus,
.ys-field input:focus {
  border-color: #0B72D9;
  box-shadow: 0 0 0 3px rgba(11,114,217,0.10);
}

.ys-room-field {
  margin-bottom: 14px;
}

.ys-booking-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.ys-guests-field {
  margin-bottom: 14px;
}

.ys-availability-warning {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #E8B8B8;
  border-radius: 9px;
  background: #FCEBEB;
  color: #791F1F;
  font-size: 0.76rem;
  line-height: 1.4;
}

.ys-estimated-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  padding: 14px 0;
  border-top: 1px solid #E6EAF0;
  color: #334E68;
  font-size: 0.8rem;
}

.ys-estimated-total strong {
  color: #062B5C;
  font-size: 1rem;
}

.ys-booking-submit {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  border-radius: 10px;
  font-size: 0.91rem;
  font-weight: 800;
}

.ys-booking-footnote {
  margin-top: 12px;
  padding: 10px 11px;
  border-radius: 9px;
  background: #FFFDF8;
}

@media (max-width: 1000px) and (min-width: 801px) {
  .ys-booking-fields-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .ys-booking-head,
  .ys-booking-panel {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ys-booking-rating {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ys-booking-trust {
    margin-left: 16px;
    margin-right: 16px;
  }

  .ys-booking-fields-row {
    grid-template-columns: 1fr;
  }
}


/* v281 — no-JS fallback only; JavaScript aligns to the real occupied top boundary. */
.detail-section-anchor {
  scroll-margin-top: 150px;
}
@media (max-width: 900px) {
  .detail-section-anchor {
    scroll-margin-top: 62px;
  }
}


/* v280 — room table selection feedback */
.room-select-btn.selected {
  background: #062B5C;
  border-color: #062B5C;
  color: #FFFFFF;
}


/* v283 — Stay Details m-site first-pass: mobile-first travel UX.
   Desktop remains unchanged. */
.msite-property-summary,
.msite-room-list,
.msite-booking-sheet-head,
.msite-booking-overlay {
  display: none;
}

@media (max-width: 800px) {
  /* Keep the page usable above the sticky booking bar. */
  body {
    padding-bottom: 78px;
  }

  /* Hero: image is visual; property identity sits below it instead of over the photo. */
  .hero-photo-wrap {
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 0;
    overflow: hidden;
  }

  .gallery-grid {
    height: 246px !important;
    min-height: 246px !important;
  }

  .main-photo-wrap,
  .main-photo,
  .main-photo-bg {
    height: 246px !important;
    min-height: 246px !important;
  }

  .hero-overlay-bottom {
    display: none !important;
  }

  .hero-overlay-top {
    top: 10px;
    left: 12px;
    right: 12px;
  }

  .hero-icon-btn-ov,
  .back-to-search-ov {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    color: #062B5C;
    border: 1px solid rgba(6,43,92,.08);
    box-shadow: 0 4px 14px rgba(6,43,92,.12);
  }

  .see-all-photos-ov {
    border-radius: 20px;
    background: rgba(255,255,255,.96);
    color: #062B5C;
  }

  .msite-property-summary {
    display: block;
    padding: 16px 0 4px;
  }

  .msite-property-badges {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 9px;
  }

  .msite-property-summary h1 {
    margin: 0;
    color: #062B5C;
    font-size: 1.45rem;
    line-height: 1.2;
    letter-spacing: -.02em;
  }

  .msite-property-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 8px;
    color: #667085;
    font-size: .82rem;
  }

  /* Location: compact decision-support block; keep OpenStreetMap only. */
  .upfront-location-card {
    gap: 12px;
    margin: 14px 0 18px;
    padding: 14px;
    border-radius: 14px;
    background: #FFFDF8;
  }

  .upfront-location-copy {
    padding: 0;
  }

  .upfront-location-copy h2 {
    font-size: 1.08rem;
    margin-bottom: 6px;
  }

  .upfront-location-copy p {
    margin-bottom: 8px;
    font-size: .8rem;
    line-height: 1.45;
  }

  .upfront-distance-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 10px 0 8px;
  }

  .upfront-distance-pill {
    min-height: 32px;
    padding: 6px 9px;
    font-size: .72rem;
  }

  .upfront-osm-link {
    font-size: .78rem;
  }

  .upfront-map-shell,
  .upfront-property-map {
    min-height: 200px !important;
    height: 200px !important;
  }

  /* Mobile primary shortcuts only: Overview / Rooms / Amenities / Reviews. */
  .section-tabs {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px;
    border-bottom: 1px solid #E6EAF0;
  }

  .section-tabs::-webkit-scrollbar { display: none; }

  .section-tabs .tab-mobile-secondary {
    display: none;
  }

  .section-tabs .tab-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    white-space: nowrap;
    font-size: .78rem;
  }

  .section-tabs .tab-mobile-room {
    font-size: 0;
  }
  .section-tabs .tab-mobile-room::after {
    content: 'Rooms';
    font-size: .78rem;
  }

  .section-tabs .tab-mobile-amenities {
    font-size: 0;
  }
  .section-tabs .tab-mobile-amenities::after {
    content: 'Amenities';
    font-size: .78rem;
  }

  .section-tabs .tab-mobile-reviews {
    font-size: 0;
  }
  .section-tabs .tab-mobile-reviews::after {
    content: 'Reviews';
    font-size: .78rem;
  }

  /* Room table becomes room cards on m-site only. */
  .desktop-room-table {
    display: none !important;
  }

  .msite-room-list {
    display: grid;
    gap: 12px;
    margin-top: 12px;
  }

  .msite-room-card {
    padding: 15px;
    border: 1px solid #DDE5EE;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 5px 16px rgba(6,43,92,.05);
  }

  .msite-room-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
  }

  .msite-room-card h4 {
    margin: 0;
    color: #062B5C;
    font-size: .98rem;
  }

  .msite-room-card p {
    margin: 5px 0 0;
    color: #667085;
    font-size: .76rem;
  }

  .msite-room-price {
    flex: 0 0 auto;
    text-align: right;
  }

  .msite-room-price strong {
    display: block;
    color: #062B5C;
    font-size: 1.1rem;
  }

  .msite-room-price span {
    color: #667085;
    font-size: .7rem;
  }

  .msite-room-select {
    width: 100%;
    min-height: 44px;
    margin-top: 13px;
    border-radius: 9px;
    background: #F56A00;
    border: 1px solid #F56A00;
    color: #FFFFFF;
    font-weight: 800;
  }

  .msite-room-select.selected {
    background: #062B5C;
    border-color: #062B5C;
  }

  /* The desktop sidebar booking card becomes a bottom sheet on mobile. */
  .msite-booking-overlay {
    position: fixed;
    inset: 0;
    z-index: 310;
    background: rgba(6,43,92,.45);
  }

  .msite-booking-overlay.open {
    display: block;
  }

  body.msite-booking-open {
    overflow: hidden;
  }

  #bookingBox.ys-booking-card {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto !important;
    z-index: 320;
    width: 100%;
    max-width: none;
    max-height: 84vh;
    overflow-y: auto;
    margin: 0;
    border: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgba(6,43,92,.2);
    transform: translateY(105%);
    transition: transform .25s ease;
    visibility: hidden;
  }

  #bookingBox.ys-booking-card.msite-open {
    transform: translateY(0);
    visibility: visible;
  }

  .msite-booking-sheet-head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 10px 16px;
    background: #FFFFFF;
    border-bottom: 1px solid #E6EAF0;
  }

  .msite-booking-sheet-head strong {
    color: #062B5C;
    font-size: .95rem;
  }

  .msite-booking-sheet-head button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #F4F8FC;
    color: #062B5C;
    font-size: 1.4rem;
    cursor: pointer;
  }

  .ys-booking-head {
    padding-top: 16px;
  }

  .ys-booking-trust {
    display: none;
  }

  .ys-booking-price {
    font-size: 1.7rem;
  }

  .ys-booking-panel {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  /* Sticky booking control is now the primary mobile conversion affordance. */
  .sticky-bar {
    min-height: 68px;
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
    background: #FFFFFF;
    border-top: 1px solid #E6EAF0;
    box-shadow: 0 -8px 24px rgba(6,43,92,.10);
  }

  .sticky-bar .price {
    color: #062B5C;
    font-size: 1rem;
    font-weight: 800;
  }

  .sticky-bar .price small {
    display: block;
    color: #667085;
    font-size: .65rem;
    font-weight: 600;
  }

  .sticky-bar .sticky-actions .btn:not(.ghost) {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 10px;
    background: #F56A00 !important;
    border-color: #F56A00 !important;
    color: #FFFFFF !important;
  }

  .sticky-call-btn {
    width: 44px;
    min-width: 44px;
    padding: 0 !important;
    justify-content: center;
    font-size: 0;
  }

  .sticky-call-btn svg {
    margin: 0;
  }
}

@media (max-width: 420px) {
  .gallery-grid,
  .main-photo-wrap,
  .main-photo,
  .main-photo-bg {
    height: 228px !important;
    min-height: 228px !important;
  }

  .upfront-map-shell,
  .upfront-property-map {
    min-height: 190px !important;
    height: 190px !important;
  }
}
\n\n/* v286 — Stay Details m-site refinements: Location order/tab, simple rating, call button. */\n.msite-rating-simple { display: none; }\n\n@media (max-width: 800px) {\n  /* The full desktop rating breakdown is too heavy for m-site. */\n  .rating-strip { display: none !important; }\n\n  .msite-rating-simple {\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    gap: 12px;\n    margin: 14px 0 18px;\n    padding: 13px 14px;\n    border: 1px solid #E6EAF0;\n    border-radius: 12px;\n    background: #FFFFFF;\n  }\n\n  .msite-rating-score {\n    display: flex;\n    align-items: center;\n    gap: 3px;\n    color: #062B5C;\n    white-space: nowrap;\n  }\n\n  .msite-rating-score .star { color: #FFB800; font-size: 1rem; }\n  .msite-rating-score strong { font-size: 1.08rem; }\n  .msite-rating-score span:last-child { color: #667085; font-size: .7rem; }\n\n  .msite-rating-copy { min-width: 0; }\n  .msite-rating-copy strong { display: block; color: #062B5C; font-size: .8rem; }\n  .msite-rating-copy span { display: block; margin-top: 2px; color: #667085; font-size: .7rem; }\n\n  .msite-rating-simple > a {\n    color: #F56A00;\n    font-size: .72rem;\n    font-weight: 800;\n    text-decoration: none;\n    white-space: nowrap;\n  }\n\n  /* Five useful mobile shortcuts: Overview / Rooms / Amenities / Location / Reviews. */\n  .section-tabs {\n    grid-template-columns: repeat(5, max-content);\n  }\n\n  .section-tabs .tab-mobile-location {\n    display: flex;\n  }\n\n  /* Once relocated before reviews, LOCATION should read like a normal page section. */\n  #location.upfront-location-card {\n    margin-top: 28px;\n    margin-bottom: 22px;\n  }\n\n  /* Clean secondary Call action: visible label, no cramped icon-only treatment. */\n  .sticky-call-btn {\n    display: inline-flex !important;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    width: auto !important;\n    min-width: 72px !important;\n    min-height: 46px;\n    padding: 0 12px !important;\n    border: 1px solid #062B5C !important;\n    border-radius: 10px !important;\n    background: #FFFFFF !important;\n    color: #062B5C !important;\n    font-size: .78rem !important;\n    font-weight: 800 !important;\n    line-height: 1 !important;\n  }\n\n  .sticky-call-btn svg { flex: 0 0 auto; }\n  .sticky-call-label { display: inline !important; }\n\n  .sticky-actions { gap: 8px; }\n}\n\n@media (max-width: 380px) {\n  .sticky-call-btn {\n    min-width: 46px !important;\n    width: 46px !important;\n    padding: 0 !important;\n  }\n  .sticky-call-label { display: none !important; }\n  .msite-rating-simple { grid-template-columns: auto 1fr; }\n  .msite-rating-simple > a { grid-column: 2; justify-self: start; }\n}\n

/* v287 — m-site: remove Call action and keep only the top rating summary. */
@media (max-width: 800px) {
  .rating-strip {
    display: block !important;
    margin: 14px 0 18px;
    padding: 14px 16px;
    border-radius: 12px;
  }

  .rating-strip .category-breakdown {
    display: none !important;
  }

  .rating-strip-top {
    gap: 12px;
  }

  .rating-strip .score-box {
    font-size: 1.25rem;
    padding: 8px 11px;
    min-width: 50px;
  }

  .rating-strip .score-label {
    font-size: .95rem;
  }

  .rating-strip .score-sub {
    font-size: .72rem;
  }

  .sticky-actions {
    width: auto;
  }
}