/* Scoped to this page only - all classes prefixed "sr-" so nothing here touches the
       shared .filter-card / .result-card / .results-list classes in style.css that the SEO
       landing page and admin pages also rely on. */
    /* Light hero, matching the homepage/shared .hero (see style.css) - this used to be dark
       navy with white/frosted-glass children (pills, search box) designed for that dark
       backdrop. Flipped to match; the pills/search box switch from translucent-white-on-navy
       to solid-white-on-cream since the glass effect only reads as "glass" against a dark or
       busy backdrop - on flat cream it would just look like a faint, washed-out box. */
    .sr-hero { position: relative; overflow: hidden; background: none; padding: 34px 0 40px; min-height: 240px; display: flex; flex-direction: column; justify-content: center; }
    @media (max-width: 800px) { .sr-hero { min-height: 300px; } }
    /* Now mobile-only content (the desktop pills/title/subtitle/free-text box that used to live
       here were removed - the navy .sr-desktop-searchbar-wrap and .sr-breadcrumb cover that job
       on desktop now), so hide the whole section there rather than leaving empty padding. */
    @media (min-width: 900px) { .sr-hero { display: none; } }
    .sr-hero .container { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
    .sr-hero-left { flex: 1; min-width: 280px; }
    .sr-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
    .sr-pill { display: inline-block; background: var(--light-bg); border: 1px solid var(--border); color: var(--ink); font-size: 0.78rem; font-weight: 700; padding: 6px 14px; border-radius: 20px; }
    .sr-title { font-size: 2.1rem; font-weight: 800; color: var(--ink); margin: 0; line-height: 1.1; }
    @media (max-width: 700px) { .sr-title { font-size: 1.6rem; } }
    .sr-sub { font-size: 0.95rem; color: var(--text-secondary); margin: 12px 0 0; max-width: 600px; }
    /* Breadcrumb - plain, matching the reference's small text-link trail */
    .sr-breadcrumb { padding: 14px 0; font-size: 0.82rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .sr-breadcrumb a { color: var(--cta-primary); text-decoration: none; font-weight: 600; }
    .sr-breadcrumb a:hover { text-decoration: underline; }
    .sr-breadcrumb-current { color: var(--ink); font-weight: 600; }

    .sr-search-box { display: flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--border); border-radius: 30px; padding: 14px 22px; box-shadow: 0 12px 35px rgba(6,43,92,0.12); min-width: 300px; }

    /* Full-width navy search bar, matching the reference - separate from .sr-hero (which keeps
       its own title/pills/free-text-search below), same real fields as the mobile form. */
    .sr-desktop-searchbar-wrap { display: none; background: var(--primary-navy); padding: 16px 0; }
    @media (min-width: 900px) { .sr-desktop-searchbar-wrap { display: block; } }
    .sr-desktop-searchbar { display: flex; align-items: stretch; gap: 12px; }
    .sr-dsb-field {
      flex: 1; background: #fff; border-radius: 10px; padding: 8px 14px; display: flex;
      align-items: center; gap: 10px; min-width: 0;
    }
    .sr-dsb-ico { font-size: 1rem; color: var(--text-secondary); flex-shrink: 0; }
    .sr-dsb-field label { display: block; font-size: 0.7rem; color: var(--text-secondary); font-weight: 600; }
    .sr-dsb-field input { border: none; outline: none; font-size: 0.88rem; color: var(--ink); font-weight: 600; width: 100%; padding: 0; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; }
    .sr-dsb-dates { display: flex; align-items: center; gap: 6px; }
    .sr-dsb-dates input { min-width: 0; }
    .sr-dsb-guests-trigger { border: none; background: none; padding: 0; display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; color: var(--ink); cursor: pointer; width: 100%; text-align: left; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; }
    .sr-dsb-guests-popover {
      display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff;
      border-radius: 10px; padding: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.18); z-index: 20; min-width: 220px;
    }
    .sr-dsb-guests-popover.sr-dsb-open { display: block; }
    .sr-dsb-guests-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 0.85rem; color: var(--ink); }
    .sr-dsb-stepper { display: flex; align-items: center; gap: 12px; }
    .sr-dsb-stepper button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: none; cursor: pointer; }
    .sr-dsb-done-btn { width: 100%; background: var(--primary-navy); color: #fff; border: none; border-radius: 8px; padding: 9px; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
    .sr-dsb-search-btn { background: var(--cta-primary); color: #fff; border: none; border-radius: 10px; padding: 0 28px; font-size: 0.92rem; font-weight: 700; cursor: pointer; flex-shrink: 0; }

    .sr-search-box .icon { color: var(--text-secondary); font-size: 1rem; flex-shrink: 0; }
    .sr-search-box input { border: none; background: transparent; flex: 1; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.9rem; color: var(--charcoal); }
    .sr-search-box input::placeholder { color: var(--text-secondary); }
    .sr-search-box input:focus { outline: none; }
    .sr-mobile-searchbox { display: none; } /* mobile-only - see the @media(max-width:900px) block for its real styling */

    .sr-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; padding: 28px 0 60px; }
    @media (max-width: 900px) { .sr-layout { grid-template-columns: 1fr; } }
    /* Same fix as .detail-grid in style.css (see that comment for the full explanation) -
       grid items default to min-width:auto, so this track wouldn't shrink below the intrinsic
       minimum width of whatever's inside .sr-filters (the rating <select>, in particular). */
    .sr-layout > * { min-width: 0; }

    .sr-filters { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 20px; position: sticky; top: 78px; }
    @media (max-width: 900px) { .sr-filters { position: static; } }
    /* Results map - desktop only (mobile's .sr-filters becomes a bottom sheet, where a map
       doesn't make sense) - real property markers, see markup comment for why there's no
       city-center fallback point. */
    .sr-results-map { display: none; }
    @media (min-width: 900px) {
      .sr-results-map { display: block; height: 180px; border-radius: 10px; margin: -20px -20px 16px; width: calc(100% + 40px); }
    }
    .sr-map-pin-inner { background: var(--cta-primary); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.35); cursor: pointer; }
    .sr-filters-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .sr-filters-head h3 { font-size: 1rem; margin: 0; }
    .sr-filters-head a { font-size: 0.8rem; color: var(--cta-primary); font-weight: 700; }
    .sr-filter-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: #8A93A0; margin: 18px 0 10px; }
    .sr-filter-label:first-of-type { margin-top: 0; }
    .sr-type-pills { display: flex; flex-wrap: wrap; gap: 8px; }
    .sr-type-pill { font-size: 0.8rem; font-weight: 600; padding: 7px 14px; border-radius: 20px; border: 1px solid var(--line); color: var(--charcoal); background: var(--white); text-decoration: none; }
    .sr-type-pill.active { background: var(--primary-navy); border-color: transparent; color: #FFFFFF; }
    .sr-price-value { font-size: 0.95rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
    .sr-price-slider { width: 100%; accent-color: var(--cta-primary); }
    .sr-rating-select { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--parchment); font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.85rem; }
    .sr-quick-picks { display: flex; flex-direction: column; gap: 4px; }
    .sr-quick-pick { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 8px; font-size: 0.85rem; color: var(--charcoal); text-decoration: none; }
    .sr-quick-pick:hover { background: var(--parchment); }
    .sr-filters button.btn { width: 100%; margin-top: 18px; }
    .sr-clear-link { display: block; text-align: center; font-size: 0.8rem; color: #616C76; margin-top: 10px; }

    /* Quick controls row (Filters pill + Sort) - lives above .sr-layout on every screen size,
       not just mobile, since the Sort form used to sit inside .sr-results-head-right and now
       lives here instead (one copy of the form, not two - see the mobile media query below for
       the full reasoning). The "Filters" button is desktop-hidden: desktop already has the
       permanent sidebar for that, so showing a redundant button that opens a sheet there would
       be pointless - it's mobile-only, where the sidebar itself becomes the sheet. */
    .sr-quick-controls { display: flex; align-items: center; gap: 10px; padding: 18px 0 0; }
    #srOpenFilters { display: none; }

    .sr-results-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
    .sr-results-head h2 { font-size: 1.15rem; margin: 0; color: var(--ink); }
    .sr-results-head-right { display: flex; align-items: center; gap: 10px; }
    .sr-sort-box { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 24px; padding: 0 16px 0 14px; background: var(--white); }
    .sr-sort-box .icon { font-size: 0.85rem; color: #616C76; }
    .sr-sort-box select { appearance: none; -webkit-appearance: none; border: none; background: transparent; padding: 10px 18px 10px 4px; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.86rem; font-weight: 700; color: var(--ink); cursor: pointer; }
    .sr-sort-box select:focus { outline: none; }
    .sr-sort-box::after { content: '\25BE'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #616C76; font-size: 0.8rem; pointer-events: none; }
    .sr-view-toggle { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
    .sr-view-btn { padding: 0 16px; height: 38px; display: flex; align-items: center; gap: 6px; justify-content: center; background: var(--white); border: none; cursor: pointer; color: #616C76; font-size: 0.82rem; font-weight: 700; }
    .sr-view-btn.active { background: var(--primary-navy); color: #FFFFFF; }
    .sr-inline-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 24px; padding: 0 14px; background: var(--white); height: 38px; }
    .sr-inline-search .icon { color: var(--text-secondary); font-size: 0.85rem; }
    .sr-inline-search input { border: none; outline: none; background: none; font-size: 0.82rem; width: 180px; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; }
    .sr-inline-search input::placeholder { color: var(--text-secondary); }

    .sr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    @media (max-width: 1100px) { .sr-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 620px) { .sr-grid { grid-template-columns: 1fr; } }

    .sr-tile { background: var(--white); border-radius: 18px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,27,62,0.10); text-decoration: none; display: block; transition: transform 0.15s ease, box-shadow 0.15s ease; padding: 8px; }
    .sr-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,27,62,0.18); }
    .sr-tile-photo { position: relative; height: 160px; border-radius: 12px; overflow: hidden; }
    .sr-tile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .sr-tag { position: absolute; top: 10px; left: 10px; padding: 5px 12px; border-radius: 20px; font-size: 0.68rem; font-weight: 800; color: #FFFFFF; box-shadow: 0 3px 8px rgba(0,0,0,0.25); }
    .sr-tag.featured { background: var(--cta-primary); }
    .sr-tag.recommended { background: #1AA251; }
    .sr-tag.discount { background: linear-gradient(135deg, #C0392B, #E74C3C); left: auto; right: 10px; }
    .sr-tag-new { background: #1AA251; top: 44px; }
    .sr-policy-row { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #1AA251; font-weight: 600; margin-top: 4px; }
    .sr-policy-check { color: #1AA251; font-weight: 800; }
    .sr-strike-price { font-size: 0.76rem; color: #B0B8C1; text-decoration: line-through; font-weight: 500; display: block; }
    .sr-fav { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: #616C76; }
    .sr-distance-tag { position: absolute; bottom: 10px; left: 10px; background: rgba(20,20,30,0.55); color: #FFFFFF; font-size: 0.68rem; font-weight: 600; padding: 5px 10px; border-radius: 20px; backdrop-filter: blur(2px); }
    .sr-tile-body { padding: 14px 8px 8px; }
    .sr-tile-body h4 { font-size: 1.02rem; margin: 0 0 3px; color: var(--ink); display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
    .sr-tile-body h4 .rating { background: var(--primary-navy); color: #fff; border-radius: 7px; padding: 5px 7px; display: flex; align-items: center; gap: 3px; font-size: 0.8rem; font-weight: 800; flex-shrink: 0; }
    .sr-tile-body h4 .rating .star { color: #FFC94D; }
    .sr-tile-loc { font-size: 0.78rem; color: #8A93A0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
    .sr-tile-stars { color: #FFC94D; font-size: 0.75rem; letter-spacing: 1px; }
    .sr-show-on-map { background: none; border: none; padding: 0; color: var(--cta-primary); font-size: 0.78rem; font-weight: 700; cursor: pointer; text-decoration: underline; }
    .sr-amenity-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    .sr-amenity-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; color: #616C76; background: var(--parchment); padding: 4px 9px; border-radius: 12px; }
    .sr-tile-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
    .sr-tile-price { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
    .sr-tile-price small { font-weight: 400; font-size: 0.75rem; color: #8A93A0; }
    .sr-view-deal { background: var(--cta-primary); color: #FFFFFF; font-size: 0.78rem; font-weight: 700; padding: 9px 16px; border-radius: 8px; }

    /* List view - toggled by adding .list-view to .sr-grid via JS, no page reload needed */
    .sr-grid.list-view { display: flex; flex-direction: column; gap: 16px; }
    .sr-grid.list-view .sr-tile { display: flex; gap: 20px; padding: 12px; align-items: stretch; }
    .sr-grid.list-view .sr-tile:hover { transform: none; }
    .sr-grid.list-view .sr-tile-photo { width: 260px; height: auto; flex-shrink: 0; }
    .sr-grid.list-view .sr-tile-body { flex: 1; padding: 4px 8px; display: flex; flex-direction: column; }
    .sr-grid.list-view .sr-amenity-row { margin-top: 12px; }
    .sr-grid.list-view .sr-tile-footer { margin-top: auto; padding-top: 14px; }
    .sr-grid.list-view .sr-tile-price { font-size: 1.2rem; }
    /* Third column: score badge + price + CTA, separate from the info column - matches the
       reference layout where these sit in their own right-aligned block, not stacked under the
       amenities. */
    .sr-grid.list-view .sr-tile-price-col {
      width: 160px; flex-shrink: 0; padding: 4px 8px; display: flex; flex-direction: column;
      justify-content: space-between; align-items: flex-end; text-align: right;
      border-left: 1px solid var(--line);
    }
    .sr-tile-score { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
    .sr-tile-score-text { text-align: right; }
    .sr-tile-score-text b { display: block; font-size: 0.8rem; color: var(--ink); }
    .sr-tile-score-text span { font-size: 0.7rem; color: #8A93A0; }
    .sr-tile-score-badge { background: var(--primary-navy); color: #fff; font-size: 0.85rem; font-weight: 800; border-radius: 6px; padding: 5px 8px; }
    .sr-grid.list-view .sr-tile-price-col .sr-tile-price { margin-top: auto; }
    .sr-grid.list-view .sr-tile-price-col .sr-view-deal { width: 100%; margin-top: 10px; text-align: center; }
    @media (max-width: 700px) {
      .sr-grid.list-view .sr-tile-price-col { width: 100%; border-left: none; border-top: 1px solid var(--line); flex-direction: row; align-items: center; margin-top: 10px; padding-top: 12px; }
    }
    @media (max-width: 700px) {
      .sr-grid.list-view .sr-tile { flex-direction: column; }
      .sr-grid.list-view .sr-tile-photo { width: 100%; height: 160px; }
      /* Comfortable tap targets on mobile - both were sized fine for a mouse pointer, tight
         for a thumb. */
      .sr-view-btn { width: 44px; height: 44px; }
      .sr-fav { width: 38px; height: 38px; }
    }

/* See style.css's select/input/textarea safety-net comment - same min-width:auto shrink trap. */
.sr-grid > * { min-width: 0; }

/* ============================================================================
   MOBILE SRP REDESIGN (<=900px) - matches the "yatrisutra-stays.html" prototype
   card-by-card: navy search summary strip, horizontal filter pills, and a
   photo-forward result card with badge/rating/amenities/price+CTA.
   Deliberately scoped to this media query only - desktop keeps its existing
   grid/list toggle and layout completely untouched. Existing classes are
   restyled in place (no HTML/Thymeleaf changes) so every real data binding,
   filter, and link underneath keeps working exactly as before - only the
   paint changes. Colors reuse the site's own --primary-navy/--cta-primary/
   --brand-gold variables (they already match the prototype's navy/orange/
   yellow 1:1), not new hardcoded values, so this stays on the one brand
   palette the rest of the site already draws from.
   ============================================================================ */
@media (max-width: 900px) {

  /* ---- Search summary strip: navy header the prototype uses. The free-text .sr-search-box
     is desktop-only now - .sr-mobile-searchbox (below) replaces it on mobile with the
     prototype's actual 3-row location/dates/guests layout, using the same real city/checkIn/
     checkOut/guests values, rather than restyling a differently-shaped single text input to
     approximate it. ---- */
  .sr-hero { background: var(--primary-navy); padding: 14px 0 16px; }
  .sr-hero .sr-pills { display: none; } /* redundant with the fields below on mobile */
  .sr-hero .sr-title, .sr-hero .sr-sub { display: none; } /* prototype has no page title here - the search fields ARE the header */
  .sr-search-box { display: none; }

  .sr-mobile-searchbox {
    display: block; padding: 0 14px;
  }
  .sr-msb-row {
    background: #fff; border-radius: 12px; padding: 11px 12px; margin-bottom: 8px;
    display: flex; gap: 9px; align-items: center; width: 100%; text-align: left; border: none;
    font-family: inherit;
  }
  .sr-msb-row .grow { flex: 1; min-width: 0; }
  .sr-msb-row b { display: block; font-size: 13px; color: var(--primary-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sr-msb-row small { display: block; color: var(--text-secondary); font-size: 11px; margin-top: 2px; }
  /* Editable fields (Sept 2026: this box became a real search form, not just a link back to
     the homepage) - the input's own typography is set inline to match .sr-msb-row b above, so
     it looks identical whether the row holds static text or a live input. */
  .sr-msb-row input::placeholder { color: var(--text-secondary); font-weight: 500; }
  .sr-msb-search-btn {
    width: 100%; background: var(--cta-primary, #F56A00); color: #fff; border: none;
    border-radius: 12px; padding: 12px; margin-top: 10px; font-size: 13px; font-weight: 700;
    cursor: pointer;
  }

  /* ---- Quick controls row: Filters pill + Sort, one line, matching the prototype's
     ☷ Filters / ↕ Sort row. Both are simple pill buttons; Sort's <select> opens the native
     OS picker on tap (reliable, no custom JS needed), Filters opens .sr-filters as a bottom
     sheet - see the JS at the bottom of search-results.html for that toggle. -->
  .sr-layout { gap: 0; }
  .sr-quick-controls {
    padding: 0 14px 12px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sr-quick-controls::-webkit-scrollbar { display: none; }
  .sr-quick-pill-btn {
    flex-shrink: 0; white-space: nowrap; background: #fff; border: 1px solid var(--line);
    padding: 9px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
    color: var(--primary-navy); margin: 0; cursor: pointer;
  }
  /* !important + higher specificity (not just relying on source-order-after-the-base-rule) -
     the base #srOpenFilters{display:none} rule at the top of this file (desktop-only, by
     design) and this override are both plain ID selectors of equal specificity, which should
     mean this one wins on mobile purely from appearing later in the file - standard CSS. That
     kept NOT holding on the deployed site even after a fresh redeploy, and no code-level cause
     could be found for why, so this removes any possible ambiguity rather than continuing to
     rely on cascade order alone. */
  .sr-quick-controls #srOpenFilters { display: inline-flex !important; align-items: center; }
  .sr-quick-controls .sr-sort-box { padding: 0 12px 0 12px; }
  .sr-quick-controls .sr-sort-box select { font-size: 12px; padding: 9px 16px 9px 2px; }

  /* ---- .sr-filters becomes a bottom sheet on mobile instead of a permanent sidebar column -
     same fixed-sheet pattern as the "More" nav sheet (fragments.html), so there's one visual
     language for "sheet slides up from the bottom" across the site. Hidden by default via
     [hidden] (toggled from JS), not just off-screen-by-position, so it can't be tabbed to or
     accidentally interacted with while closed. The exact same form that scrolls inline on
     desktop is reused here, unchanged - seeing the horizontal-scroll-row version (property
     type/purpose/locality pills + a price slider + a rating <select> + a submit button, all in
     one horizontally-scrolling flex row) was the actual cause of the reported "scrolls in a
     loop, Apply button wraps to the next line" bug: a native <select> and a submit <button>
     inside a horizontal scroll container is a bad combination on iOS. A vertically-scrolling
     sheet with normal document flow doesn't have that problem. */
  .sr-filters {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 220;
    background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px rgba(6,43,92,.22);
    padding: 8px 20px 20px; max-height: 75vh; overflow-y: auto; overscroll-behavior: contain;
    border: none; display: none; /* closed by default on mobile */
  }
  /* Toggled by JS (adds/removes this class on #srFiltersSheet) rather than the HTML [hidden]
     attribute - [hidden] and this rule would have equal CSS specificity, and which one wins on
     desktop (where .sr-filters must NEVER be display:none, it's the permanent sidebar there)
     would come down to stylesheet order rather than being obviously correct. Scoping the open/
     closed state to a class that's only ever referenced inside this @media block sidesteps
     that risk entirely: outside mobile widths, this class does nothing, full stop. */
  .sr-filters.sr-sheet-open { display: block; }
  .sr-filters-head { position: relative; padding-top: 6px; }
  .sr-filters-head h3 { font-size: 1rem; }
  .sr-filters-close {
    position: absolute; top: -2px; right: 0; background: none; border: none;
    font-size: 1.1rem; color: var(--text-secondary); cursor: pointer; padding: 6px;
  }
  .sr-price-value, .sr-price-slider, .sr-quick-picks { display: block; } /* shown again inside the sheet - the old row version hid these, the sheet has room */
  .sr-filter-label { display: block; }

  /* ---- Result count row - just the property count now; Sort moved up into the quick
     controls row above, so this row no longer needs the wrap-fix it used to. ---- */
  .sr-results-head { padding: 0 14px 14px; }
  .sr-results-head h2 { font-size: 15px; color: var(--primary-navy); }
  .sr-results-head-right { display: none; } /* only ever held the view-toggle, already mobile-hidden */

  /* ---- Result cards: this is the prototype's .card/.photo/.cardbody/.price/.cta,
     applied to the real .sr-tile link so every href/th:each underneath is unchanged ---- */
  .sr-grid.list-view, .sr-grid { display: block; }
  .sr-tile {
    display: block; margin: 0 14px 14px; border: 1px solid var(--line); border-radius: 15px;
    overflow: hidden; background: #fff; box-shadow: 0 4px 18px rgba(6,43,92,.08);
  }
  .sr-tile-photo { height: 185px; position: relative; }
  .sr-tile-photo img { width: 100%; height: 100%; object-fit: cover; }
  .sr-tag {
    position: absolute; left: 10px; bottom: 10px; background: #fff; padding: 5px 8px;
    border-radius: 7px; color: var(--sage); font-size: 11px; font-weight: 800;
  }
  .sr-tag.discount { left: auto; right: 10px; bottom: auto; top: 10px; color: #fff; background: var(--cta-primary); }
  .sr-distance-tag {
    position: absolute; right: 10px; bottom: 10px; background: rgba(6,43,92,.85); color: #fff;
    font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 6px;
  }
  .sr-tile-body { padding: 12px; }
  .sr-tile-body h4 {
    margin: 0; font-size: 16px; color: var(--primary-navy); display: flex;
    justify-content: space-between; gap: 8px; align-items: flex-start;
  }
  .sr-tile-body h4 .rating {
    background: var(--primary-navy); color: #fff; border-radius: 7px; padding: 5px 7px;
    font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  }
  .sr-tile-loc { font-size: 12px; color: var(--text-secondary); margin: 5px 0 8px; }
  .sr-amenity-row { display: flex; gap: 5px; flex-wrap: wrap; }
  .sr-amenity-chip {
    background: var(--light-bg); padding: 5px 7px; border-radius: 6px; font-size: 10px;
    color: var(--primary-navy); display: inline-flex; align-items: center; gap: 3px;
  }
  .sr-tile-footer {
    margin-top: 10px; display: flex; justify-content: space-between; align-items: flex-end;
  }
  .sr-tile-price { font-size: 19px; font-weight: 800; color: var(--primary-navy); }
  .sr-tile-price small { display: block; color: var(--text-secondary); font-size: 10px; font-weight: 400; }
  .sr-strike-price { display: block; font-size: 11px; font-weight: 500; color: var(--text-secondary); text-decoration: line-through; }
  .sr-view-deal {
    background: var(--cta-primary); border: 0; color: #fff; font-weight: 800; border-radius: 9px;
    padding: 10px 16px; font-size: 12px;
  }

  /* Overlay behind the filter sheet - toggled together with .sr-filters[hidden] by the JS at
     the bottom of search-results.html. */
  .sr-sheet-overlay {
    position: fixed; inset: 0; background: rgba(6,43,92,.45); z-index: 210;
    display: none;
  }
  .sr-sheet-overlay.sr-sheet-open { display: block; }
}

/* ===== v266 desktop SRP reference-match pass ===== */
@media (min-width: 901px) {
  body { background:#fff; }
  .sr-desktop-searchbar-wrap { background:var(--primary-navy); padding:10px 0 0; }
  .sr-desktop-searchbar { gap:4px; background:#FFB800; border:4px solid #FFB800; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,.14); overflow:visible; }
  .sr-dsb-field { min-height:66px; border-radius:7px; padding:8px 16px; gap:12px; }
  .sr-dsb-field:first-of-type { flex:1.18; } .sr-dsb-field:nth-of-type(2){flex:1.08;} .sr-dsb-field:nth-of-type(3){flex:1.05;}
  .sr-dsb-ico { font-size:1.35rem; color:#4f4f4f; }
  .sr-dsb-field label { font-size:.78rem; font-weight:500; color:#555; margin-bottom:2px; }
  .sr-dsb-field input,.sr-dsb-guests-trigger { font-size:.98rem; font-weight:700; color:#1d1d1f; }
  .sr-dsb-search-btn { min-width:155px; border-radius:7px; padding:0 28px; background:#0A6FE8; font-size:1.05rem; font-weight:800; }
  .sr-breadcrumb { padding:18px 0 16px; font-size:.84rem; gap:10px; } .sr-breadcrumb a{color:#0A6FE8;}
  .sr-quick-controls { position:absolute; left:calc((100% - min(1200px, calc(100% - 32px))) / 2 + 300px); z-index:2; padding-top:76px; }
  .sr-quick-controls .sr-sort-box { border:1px solid #8b8b8b; border-radius:24px; min-height:40px; padding-left:14px; }
  .sr-layout { grid-template-columns:284px 1fr; gap:16px; padding-top:18px; max-width:1200px; }
  .sr-filters { border:1px solid #dedede; border-radius:10px; padding:0 0 18px; overflow:hidden; top:82px; }
  .sr-results-map { height:190px; border-radius:0; margin:0; width:100%; border-bottom:1px solid #ddd; }
  .sr-filters-head { padding:14px; margin:0; border-bottom:1px solid #ddd; }
  .sr-filters-head h3 { font-size:1.02rem; } .sr-filters-head a{margin-left:auto;}
  .sr-filters form,.sr-quick-picks { padding:0 14px; }
  .sr-filter-label { text-transform:none; letter-spacing:0; font-size:.84rem; color:#202124; margin:18px 0 10px; }
  .sr-type-pills { flex-direction:column; gap:5px; }
  .sr-type-pill { border:0; border-radius:6px; padding:7px 8px; font-size:.83rem; background:#fff; }
  .sr-type-pill.active { background:#f3f6fa; color:var(--primary-navy); }
  .sr-price-value { font-size:.9rem; }
  main { padding-top:0; }
  .sr-results-head { min-height:100px; align-items:flex-start; padding:8px 0 50px; margin:0; }
  .sr-results-head h2 { font-size:1.55rem; font-weight:800; color:#202124; line-height:1.2; }
  .sr-inline-search { display:none; } .sr-results-head-right{margin-left:auto;}
  .sr-view-toggle { background:#f5f5f5; border:1px solid #ddd; padding:3px; border-radius:22px; overflow:visible; }
  .sr-view-btn { height:34px; border-radius:18px; padding:0 15px; background:transparent; color:#222; }
  .sr-view-btn.active { background:#fff; color:#222; border:1px solid #888; box-shadow:0 1px 2px rgba(0,0,0,.08); }
  .sr-grid.list-view { gap:14px; }
  .sr-grid.list-view .sr-tile { min-height:286px; gap:16px; padding:16px; border:1px solid #dedede; border-radius:10px; box-shadow:none; align-items:stretch; }
  .sr-grid.list-view .sr-tile:hover { box-shadow:0 3px 12px rgba(0,0,0,.08); }
  .sr-grid.list-view .sr-tile-photo { width:285px; height:254px; border-radius:9px; }
  .sr-fav { width:38px; height:38px; font-size:1.15rem; background:#fff; }
  .sr-tag-new { top:auto; left:auto; right:10px; bottom:10px; background:#FFB800; color:#222; }
  .sr-grid.list-view .sr-tile-body { padding:4px 0; }
  .sr-tile-body h4 { justify-content:flex-start; gap:8px; margin-bottom:8px; font-size:1.32rem; line-height:1.2; color:#0A6FE8; }
  .sr-tile-stars { font-size:.9rem; color:#FFB800; white-space:nowrap; }
  .sr-tile-loc { font-size:.83rem; color:#222; margin-bottom:14px; }
  .sr-tile-loc > span:first-of-type { color:#0A6FE8; text-decoration:underline; font-weight:700; }
  .sr-property-type { color:#222 !important; text-decoration:none !important; font-weight:400 !important; }
  .sr-show-on-map { color:#0A6FE8; font-size:.83rem; }
  .sr-amenity-row { margin-top:12px; padding-left:14px; border-left:3px solid #ececec; gap:5px; }
  .sr-amenity-chip { background:transparent; padding:2px 5px 2px 0; font-size:.78rem; color:#222; }
  .sr-policy-row { font-size:.83rem; margin-top:7px; color:#07852f; }
  .sr-grid.list-view .sr-tile-price-col { width:205px; border-left:0; padding:4px 0 4px 12px; }
  .sr-tile-score { gap:10px; } .sr-tile-score-text b{font-size:.95rem;} .sr-tile-score-text span{font-size:.76rem;}
  .sr-tile-score-badge { background:#064C9E; border-radius:6px 6px 6px 0; padding:9px 10px; font-size:1rem; }
  .sr-grid.list-view .sr-tile-price-col .sr-tile-price { margin-top:auto; font-size:1.42rem; color:#202124; }
  .sr-strike-price { display:inline; margin-right:6px; font-size:.8rem; color:#d22; }
  .sr-tile-price small { display:block; margin-top:3px; font-size:.74rem; }
  .sr-grid.list-view .sr-tile-price-col .sr-view-deal { width:100%; box-sizing:border-box; margin-top:14px; padding:12px 14px; background:#0A6FE8; border-radius:5px; font-size:.9rem; text-align:center; }
}


/* ==========================================================================\n   v270 DESKTOP SRP STABILITY PASS\n   - one 100px body grid\n   - compact header/sort\n   - no blank map area: real markers or city-map fallback\n   - full clickable date controls\n   - robust 3-column result cards\n   ========================================================================== */
@media (min-width: 901px) {
  .sr-desktop-searchbar-wrap > .container,
  .sr-breadcrumb.container,
  section.container {
    width: calc(100% - 200px);
    max-width: none;
    margin-left: 100px;
    margin-right: 100px;
  }

  .sr-desktop-searchbar-wrap { padding: 10px 0; background: var(--primary-navy); }
  .sr-desktop-searchbar {
    width: 100%; display:grid;
    grid-template-columns: minmax(260px,1.25fr) minmax(360px,1.15fr) minmax(260px,1fr) 170px;
    gap:4px; padding:4px; background:#FFB800; border:0; border-radius:9px;
    box-shadow:0 4px 12px rgba(6,43,92,.18);
  }
  .sr-dsb-field { min-height:64px; padding:8px 14px; border-radius:5px; }
  .sr-dsb-field label { font-size:.76rem; color:#555; margin-bottom:3px; }
  .sr-dsb-field input,.sr-dsb-guests-trigger { font-size:.95rem; font-weight:700; color:#1D1D1F; }
  .sr-dsb-search-btn { min-width:0; width:100%; border-radius:5px; font-size:1rem; background:#0A6FE8; }
  .sr-dsb-dates { width:100%; display:grid; grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr); gap:6px; cursor:pointer; }
  .sr-dsb-dates input { min-width:0; width:100%; cursor:pointer; background:transparent; }
  .sr-dsb-dates input::-webkit-calendar-picker-indicator { cursor:pointer; }

  .sr-breadcrumb { padding:14px 0 12px; }
  section.container > .sr-quick-controls { display:none; }
  .sr-layout { grid-template-columns:260px minmax(0,1fr); gap:20px; padding:8px 0 54px; max-width:none; }

  .sr-filters { position:sticky; top:82px; padding:0 0 16px; border:1px solid #DDE3EA; border-radius:9px; overflow:hidden; background:#fff; }
  .sr-results-map,.sr-city-map-fallback { height:184px; width:100%; margin:0; border:0; border-bottom:1px solid #DDE3EA; border-radius:0; position:relative; overflow:hidden; }
  .sr-city-map-fallback iframe { display:block; width:100%; height:100%; border:0; }
  .sr-city-map-link { position:absolute; left:14px; bottom:12px; background:#0A6FE8; color:#fff; font-size:.78rem; font-weight:700; padding:8px 12px; border-radius:6px; text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,.18); }
  .sr-filters-head { margin:0; padding:14px; border-bottom:1px solid #E6EAF0; }
  .sr-filters form,.sr-quick-picks { padding-left:14px; padding-right:14px; }
  .sr-filter-label { margin:15px 0 8px; text-transform:none; letter-spacing:0; color:#202124; font-size:.78rem; }
  .sr-type-pills { flex-direction:column; gap:3px; }
  .sr-type-pill { min-height:36px; display:flex; align-items:center; border:0; border-radius:6px; padding:6px 8px; }
  .sr-type-pill.active { background:#F2F5F9; color:var(--primary-navy); }

  main { min-width:0; }
  .sr-results-head { margin:0 0 12px; padding:2px 0 0; min-height:0; display:flex; flex-wrap:nowrap; align-items:flex-start; justify-content:space-between; gap:18px; }
  .sr-results-head h2 { margin:0; font-size:1.55rem; line-height:1.2; font-weight:800; color:#1D1D1F; }
  .sr-results-sub { margin:6px 0 0; color:#667085; font-size:.9rem; }
  .sr-results-head-right { margin-left:auto; flex-shrink:0; }
  .sr-inline-search { display:none; }
  .sr-view-toggle { background:#F6F7F9; border:1px solid #D8DEE6; border-radius:22px; padding:3px; overflow:visible; }
  .sr-view-btn { height:34px; border-radius:18px; padding:0 14px; color:#222; background:transparent; }
  .sr-view-btn.active { background:#fff; border:1px solid #8B949E; color:#222; }

  .sr-desktop-sort { width:230px; height:42px; margin:0 0 12px; padding:0 13px; border:1px solid #AAB3BE; border-radius:22px; display:flex; align-items:center; gap:8px; background:#fff; }
  .sr-desktop-sort select { width:100%; border:0; outline:0; background:transparent; color:#14213D; font:inherit; font-weight:700; cursor:pointer; }

  .sr-grid.list-view { gap:14px; }
  .sr-grid.list-view .sr-tile { min-height:250px; display:grid; grid-template-columns:300px minmax(0,1fr) 190px; gap:18px; align-items:stretch; padding:14px; border:1px solid #DDE3EA; border-radius:9px; box-shadow:none; background:#fff; }
  .sr-grid.list-view .sr-tile:hover { transform:none; box-shadow:0 4px 14px rgba(6,43,92,.08); }
  .sr-grid.list-view .sr-tile-photo { width:100%; height:220px; border-radius:8px; overflow:hidden; }
  .sr-grid.list-view .sr-tile-photo img { width:100%; height:100%; object-fit:cover; display:block; }
  .sr-grid.list-view .sr-tile-body { min-width:0; padding:4px 0; }
  .sr-tile-body h4 { margin:0 0 8px; justify-content:flex-start; gap:8px; color:#0A6FE8; font-size:1.3rem; line-height:1.2; }
  .sr-tile-loc { margin-bottom:10px; color:#526171; }
  .sr-tile-loc > span:first-of-type { color:#526171; text-decoration:none; font-weight:600; }
  .sr-policy-row { margin-top:6px; color:#07852F; font-size:.82rem; }
  .sr-amenity-row { margin-top:12px; padding:0; border-left:0; gap:6px 12px; }
  .sr-amenity-chip { padding:0; background:transparent; color:#526171; font-size:.78rem; }

  .sr-grid.list-view .sr-tile-price-col { width:auto; padding:4px 0 4px 8px; border-left:0; display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
  .sr-tile-score { justify-content:flex-end; }
  .sr-tile-score-badge { background:#064C9E; border-radius:6px 6px 6px 0; padding:8px 9px; }
  .sr-grid.list-view .sr-tile-price-col .sr-tile-price { margin-top:auto; color:#202124; font-size:1.35rem; }
  .sr-price-on-request { font-size:.95rem !important; color:#667085 !important; }
  .sr-grid.list-view .sr-tile-price-col .sr-view-deal { width:100%; margin-top:11px; padding:11px 10px; border-radius:6px; background:#F56A00; text-align:center; font-size:.86rem; white-space:nowrap; }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .sr-desktop-searchbar-wrap > .container,.sr-breadcrumb.container,section.container { width:calc(100% - 64px); margin-left:32px; margin-right:32px; }
  .sr-desktop-searchbar { grid-template-columns:minmax(220px,1.15fr) minmax(330px,1.2fr) minmax(220px,1fr) 145px; }
  .sr-layout { grid-template-columns:235px minmax(0,1fr); gap:16px; }
  .sr-grid.list-view .sr-tile { grid-template-columns:240px minmax(0,1fr) 165px; gap:14px; }
  .sr-grid.list-view .sr-tile-photo { height:205px; }
}

@media (max-width: 900px) {
  .sr-desktop-sort { display:none; }
  .sr-city-map-fallback { display:none; }
}

/* ===== v271 SRP stability + filter redesign ===== */
@media (min-width: 901px) {
  .sr-city-map-fallback {
    height: 205px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #E6EAF0;
    background: #F4F8FC;
  }
  .sr-city-map-fallback iframe { width:100%; height:100%; border:0; display:block; }
  .sr-city-map-caption {
    position:absolute; left:12px; top:12px; display:flex; align-items:center; gap:5px;
    max-width:calc(100% - 24px); padding:7px 10px; background:rgba(255,255,255,.94);
    border:1px solid #E6EAF0; border-radius:7px; font-size:.78rem; color:#062B5C;
    box-shadow:0 2px 8px rgba(0,0,0,.10);
  }
  .sr-city-map-pin { color:#F56A00; }
  .sr-city-map-link {
    left:12px; bottom:12px; padding:8px 12px; border-radius:6px; background:#0A6FE8;
    color:#fff; font-size:.78rem; font-weight:800;
  }
}

.sr-filter-form { padding-bottom:14px; }
.sr-filter-group {
  border:0; border-bottom:1px solid #E6EAF0; margin:0; padding:15px 14px 14px;
  min-width:0;
}
.sr-filter-group legend {
  width:100%; padding:0; margin:0 0 9px; font-size:.88rem; line-height:1.2;
  font-weight:800; color:#202124;
}
.sr-filter-choice {
  display:flex; align-items:center; gap:9px; min-height:34px; cursor:pointer;
  font-size:.84rem; color:#27384D;
}
.sr-filter-choice input[type="radio"] {
  width:17px; height:17px; margin:0; accent-color:#0A6FE8; flex:0 0 auto;
}
.sr-filter-select {
  width:100%; height:38px; border:1px solid #CDD5DF; border-radius:6px; background:#fff;
  padding:0 9px; color:#27384D; font-size:.83rem;
}
.sr-price-range-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:.8rem; color:#667085; }
.sr-price-range-row strong { color:#062B5C; }
.sr-apply-filters {
  width:calc(100% - 28px); height:42px; margin:14px; border:0; border-radius:6px;
  background:#F56A00; color:#fff; font-size:.88rem; font-weight:800; cursor:pointer;
}
.sr-apply-filters:hover { filter:brightness(.96); }
.sr-amenity-check { color:#079447; font-weight:900; }

@media (max-width: 900px) {
  .sr-filter-form { padding-bottom:84px; }
  .sr-filter-group { padding:16px 18px; }
  .sr-apply-filters {
    position:sticky; bottom:10px; width:calc(100% - 36px); margin:14px 18px 4px;
    z-index:3; box-shadow:0 4px 14px rgba(245,106,0,.25);
  }
}