/* =============================================================================
   redesign-listing-air.css  —  Airbnb-style listing skin (gocamping.ch)
   AGENT-CSS deliverable. Faithful port of
   _redesign/konzept-a-airbnb-listing-interactive.html  (the <style>, lines 10-232).

   EVERY rule is scoped under  body.rdA-air  so nothing leaks to other pages.
   body.rdA-air is added in default.php ONLY when page==check_availability.

   PALETTE  : green #00A057  ·  amber #FFCE3C  (mapped onto the concept's vars).
   FONTS    : Plus Jakarta Sans (display) + Inter (text) — <link> added in
              default.php <head>, guarded to the listing page.

   HEADER OFFSET STRATEGY (see top of §LAYOUT):
   The REAL fixed/sticky theme header is `.hdr--solid` (sticky top:0, ~65px desktop
   / 60px mobile, from redesign-mockup.css --hdr-h). The concept's single
   `--header-h:150px` (its OWN header + catbar) is split here into two vars so the
   catbar sits directly under the real header and the map below the catbar with
   NO overlap:
     --header-h  = real theme header height           (65px / 60px)
     --catbar-h  = our Airbnb category sub-bar height  (~70px / 62px)
   The scroll/sticky math then uses (--header-h + --catbar-h) as the true top
   offset of the split shell.

   LEAFLET: the real map is Leaflet 0.7 in #rda-map inside .maprail. We never put
   overflow:hidden / pointer-events:none on the map itself or its .leaflet-* panes
   & controls — only on the rail wrapper, which is fine for a map that fills it.
   ============================================================================= */

/* ============ TOKENS (scoped) ============ */
body.rdA-air{
  --rd-green:#00A057; --rd-green-700:#008a4c; --rd-green-50:#eaf7f0; --rd-green-100:#cdeeda;
  --rd-navy:#15262f; --rd-navy-soft:#1d3540; --rd-ink:#243239; --rd-muted:#6b7b82;
  --rd-amber:#FFCE3C; --rd-line:#e7eef0; --rd-bg-soft:#f4f8f6;
  --rd-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --rd-text:'Inter',system-ui,sans-serif;
  --rd-r:16px; --rd-r-sm:12px;
  --rd-shadow:0 10px 30px -16px rgba(13,40,30,.28);
  /* real theme header height (redesign-mockup.css --hdr-h = 65px desktop) */
  --header-h:65px;
  /* our category sub-bar height (sits directly under the real header) */
  --catbar-h:70px;
  /* combined offset = where the split shell / scroll area begins */
  --air-top:calc(var(--header-h) + var(--catbar-h));
}

/* base typography on the listing body only (mirrors concept body/h*/a/img/button) */
body.rdA-air{font-family:var(--rd-text);color:var(--rd-ink);-webkit-font-smoothing:antialiased;}
body.rdA-air h1,body.rdA-air h2,body.rdA-air h3{font-family:var(--rd-display);color:var(--rd-navy);letter-spacing:-.01em;margin:0;}
body.rdA-air a{text-decoration:none;}
body.rdA-air img{display:block;max-width:100%;}
body.rdA-air button{font-family:inherit;cursor:pointer;}

/* ============ CATEGORY BAR ============ */
/* .lpage-chrome = sticky wrapper that pins the catbar directly under the real header */
body.rdA-air .lpage-chrome{
  background:#fff; border-bottom:1px solid var(--rd-line);
}
/* the category row is one horizontal bar; its real children live in .catbar-in
   (the outer .catbar only provides max-width/padding), so flex goes here */
body.rdA-air .catbar-in{flex:1; display:flex; align-items:center; gap:8px; min-width:0;}
body.rdA-air .catbar{
  max-width:1760px; margin:0 auto; padding:6px 40px 0;
  display:flex; align-items:center; gap:8px;
}
body.rdA-air .cats{
  display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
  padding:8px 4px 10px; flex:1;
}
body.rdA-air .cats::-webkit-scrollbar{display:none;}
body.rdA-air .cat{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:8px 12px 10px; color:var(--rd-muted);
  border-bottom:2px solid transparent; opacity:.78; transition:.15s;
  background:none; border-top:0; border-left:0; border-right:0;
}
body.rdA-air .cat svg{width:24px; height:24px;}
body.rdA-air .cat span{font-family:var(--rd-display); font-weight:600; font-size:11.5px; white-space:nowrap;}
body.rdA-air .cat:hover{opacity:1; color:var(--rd-navy);}
body.rdA-air .cat.active{opacity:1; color:var(--rd-navy); border-bottom-color:var(--rd-navy);}
/* our catbar .cat is an Airbnb icon button — NOT the home-page category CARD
   (redesign-mockup.css .cat: aspect-ratio/overflow/gradient ::after). Neutralize
   those bleeding-in card styles so the cat sizes to its icon+label (~64px). */
body.rdA-air .catbar .cat{
  aspect-ratio:auto; height:auto; min-height:0; width:auto;
  overflow:visible; border-radius:0; box-shadow:none; background:none;
}
body.rdA-air .catbar .cat::after{content:none; display:none;}
body.rdA-air .filterbtn{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  height:48px; padding:0 18px; border:1px solid var(--rd-line); border-radius:14px;
  background:#fff; font-family:var(--rd-display); font-weight:700; font-size:13px; color:var(--rd-navy);
}
body.rdA-air .filterbtn:hover{border-color:var(--rd-navy);}
body.rdA-air .filterbtn .cnt{
  background:var(--rd-green); color:#fff; border-radius:999px;
  min-width:18px; height:18px; padding:0 5px;
  display:grid; place-items:center; font-size:11px;
}
body.rdA-air .filterbtn .cnt:empty{display:none;}

/* optional summary row — Region · Daten · Gäste (cosmetic, may open the flyout) */
body.rdA-air .searchpill{
  display:flex; align-items:center; border:1px solid var(--rd-line); border-radius:999px;
  box-shadow:0 3px 14px -8px rgba(13,40,30,.25); background:#fff; height:54px; overflow:hidden;
}
body.rdA-air .searchpill:hover{box-shadow:0 6px 20px -10px rgba(13,40,30,.32);}
body.rdA-air .searchpill .sp-seg{
  padding:8px 20px; display:flex; flex-direction:column; justify-content:center;
  border-right:1px solid var(--rd-line); min-width:0; cursor:pointer;
}
body.rdA-air .searchpill .sp-seg:last-of-type{border-right:0;}
body.rdA-air .searchpill .sp-seg .k{font-family:var(--rd-display); font-weight:700; font-size:12px; color:var(--rd-navy);}
body.rdA-air .searchpill .sp-seg .v{font-size:13px; color:var(--rd-muted); white-space:nowrap;}

/* ============ LAYOUT ============ */
/* The split shell. The real header (sticky top:0) + our catbar (sticky
   top:var(--header-h)) form the fixed stack; the shell starts below them.
   >1100: results scroll inside calc(100vh - --air-top); map sticky full height. */
/* FULL-WIDTH = nav: the legacy uHB wrappers (.container = fixed 1170px + .offset-0 left-margin)
   cap the listing and shift it LEFT of the centered nav. Neutralise them to full width, then
   make .rightcontent a nav-matching 1200 wrap (max-width + auto-centered + the nav's side
   padding) so chrome · active-filter bar · shell all line up with the header .wrap at EVERY
   viewport (and never drift left, which was the page-2 / wide-screen breakage). */
body.rdA-air .container.offset-0,
body.rdA-air .container.pagecontainer{max-width:none; width:100%; margin-left:0; margin-right:0; padding-left:0; padding-right:0;}
body.rdA-air .rightcontent{max-width:1200px; width:auto; float:none; margin-left:auto; margin-right:auto; padding:0;}
/* side padding goes on OUR own blocks (the legacy .col-md-12 forces .rightcontent padding-right:0),
   so chrome + shell get the nav's symmetric clamp() inset and align with the header content. */
body.rdA-air .lpage-chrome,
body.rdA-air .shell{padding-left:clamp(20px,3.5vw,44px); padding-right:clamp(20px,3.5vw,44px); box-sizing:border-box;}
body.rdA-air .shell{display:grid; grid-template-columns:1fr 42%; gap:0;}
body.rdA-air .results{padding:0 10px 10px 0; margin:0; min-width:0;}
body.rdA-air .results-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:6px 0 18px;
}
body.rdA-air .results-head .cnt{font-family:var(--rd-display); font-weight:800; font-size:15px; color:var(--rd-navy);}
body.rdA-air .results-head .cnt small{
  display:block; font-family:var(--rd-text); font-weight:400; font-size:13px;
  color:var(--rd-muted); margin-top:2px;
}
body.rdA-air .sortwrap{display:flex; align-items:center; gap:10px; border:0;}   /* drop the legacy .sel border */
body.rdA-air .sortwrap label{font-size:13px; color:var(--rd-muted);}
body.rdA-air .sortwrap select{
  font-family:var(--rd-display); font-weight:600; font-size:13px; color:var(--rd-navy);
  border:1px solid var(--rd-line); border-radius:999px; padding:9px 34px 9px 16px; background:#fff;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2315262f' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
body.rdA-air .sortwrap select:focus{outline:none; border-color:var(--rd-green); box-shadow:0 0 0 3px var(--rd-green-50);}

/* ============ CARD GRID ============ */
/* The cards' real parent is .center_box_content (redesign-listing.js tags it
   .rlist-host) — the card grid must live THERE, not on #grid (whose only child is
   that wrapper). #grid itself MUST be a plain block: the shared mockup `.grid` rule
   makes it a multi-col grid, which collapses .center_box_content to one ~185px column. */
body.rdA-air #grid{display:block; width:auto; max-width:none; padding:0;}
body.rdA-air .rlist-host{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 24px; grid-auto-rows:max-content; align-content:start; align-self:start;}
/* On /camping/{slug} the card list sits inside the mockup #grid wrapper (.grid.rdA-grid, display:grid),
   so .rlist-host becomes a STRETCHED grid item (tall as the shell); grid-auto-rows:1fr then distributes
   that height → ~1280px-tall cards with huge gaps. Neutralise the wrapper to a block (like the hub fix);
   align-self:start above is the belt-and-suspenders so the card grid always sizes to its content. */
body.rdA-air .grid.rdA-grid:has(.rlist-host),
body.rdA-air .grid.rdA-grid:has(.center_box_content){display:block;}
/* The .rlist-host grid must contain ONLY place cards. The native listing interleaves separators
   (.offset-2/hr, .clearfix) between every card AND — on the www PRODUCTION host only (Rooms.class.php
   ~L2866, gated `$subdomain=='www'`) — Google ad slots (gocamping_direct_leaderboard…,
   `<div id="div-gpt-ad-…">`, 728×90 / 300×100). As grid items those span the full row and shove the
   next card into a new row → the "lone card + gap" the user saw ONLY on live (never on the 127.0.0.1
   preview, where subdomain!='www' so NO ads are injected — that's why the preview grid was always
   clean). The redesign is ad-free (same as the home), so hide EVERYTHING in the grid that isn't a
   card. Superset of the old `.clearfix`/`:empty` hide — also kills the ad + separator slots. */
body.rdA-air .rlist-host > *:not(.one-hotel){ display:none !important; }
/* mobile: a place tapped on the map briefly flashes its list card so the user sees where it jumped
   (redesign-listing.js rdaMarkerToList). outline is used so overflow:hidden cards don't clip it. */
@keyframes rdaCardFlash{ 0%,65%{ outline-color:rgba(0,160,88,.9); } 100%{ outline-color:rgba(0,160,88,0); } }
body.rdA-air .one-hotel.rda-card-flash{ outline:3px solid rgba(0,160,88,.9); outline-offset:3px; border-radius:14px; animation:rdaCardFlash 1.7s ease-out forwards; }
/* drop the native .itemlabel3 card border + shadow (custom.css) — Airbnb card is flat/borderless */
body.rdA-air .itemlabel3{border:0; box-shadow:none; padding:0; min-height:0; height:100%;}
/* flat, borderless, equal-height card: fills its grid cell as a flex column */
body.rdA-air .card{position:relative; cursor:pointer; display:flex; flex-direction:column; width:100%; height:100%; border:0; box-shadow:none;}
body.rdA-air .card.dim{opacity:.45;}
body.rdA-air .card.spot .card-media{outline:3px solid var(--rd-green); outline-offset:3px; border-radius:var(--rd-r);}
body.rdA-air .card-media{
  position:relative; border-radius:var(--rd-r); overflow:hidden;
  aspect-ratio:20/19; background:var(--rd-bg-soft); flex:0 0 auto;
}
body.rdA-air .card-media .slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .4s;
}
body.rdA-air .card-media .slide.on{opacity:1;}
/* card hover image-zoom removed per request (no hover effect on cards) */
/* the real photo lives in .slide > a.preview_img > img — make both fill the media
   with object-fit:cover so the image covers the card (no empty space, like the mockup) */
body.rdA-air .card-media .slide > a{position:absolute; inset:0; display:block; width:100%; height:100%;}
body.rdA-air .card-media .slide img{width:100%; height:100%; object-fit:cover; display:block;}
body.rdA-air .badge{
  position:absolute; top:13px; left:13px; z-index:3;
  font-family:var(--rd-display); font-weight:700; font-size:12px;
  padding:6px 12px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 4px 12px -6px rgba(0,0,0,.4);
}
body.rdA-air .badge svg{width:13px; height:13px;}
body.rdA-air .badge--fav{background:#fff; color:var(--rd-navy);}
body.rdA-air .badge--book{background:var(--rd-green); color:#fff;}
body.rdA-air .fav{
  position:absolute; top:11px; right:11px; z-index:3; width:34px; height:34px;
  border:0; background:none; display:grid; place-items:center; color:#fff;
}
body.rdA-air .fav svg{width:24px; height:24px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); fill:rgba(0,0,0,.32); stroke:#fff; stroke-width:2;}
body.rdA-air .fav:hover svg{transform:scale(1.08); fill:rgba(0,0,0,.45);}
body.rdA-air .fav.on svg{fill:var(--rd-green); stroke:#fff;}
body.rdA-air .dots{
  position:absolute; left:0; right:0; bottom:11px; z-index:3;
  display:flex; justify-content:center; gap:5px;
}
body.rdA-air .dot{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.6); transition:.2s;}
body.rdA-air .dot.on{background:#fff; width:7px; height:7px;}
body.rdA-air .cnav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.92);
  border:0; display:none; place-items:center; box-shadow:0 2px 8px -2px rgba(0,0,0,.4);
}
body.rdA-air .cnav svg{width:14px; height:14px; stroke:var(--rd-navy);}
body.rdA-air .cnav.prev{left:10px;}
body.rdA-air .cnav.next{right:10px;}
body.rdA-air .card:hover .cnav{display:grid;}
body.rdA-air .cnav:hover{transform:translateY(-50%) scale(1.08);}
body.rdA-air .card-body{padding:12px 2px 0; flex:1 1 auto; display:flex; flex-direction:column;}
body.rdA-air .card-row1{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
body.rdA-air .card-title{font-family:var(--rd-display); font-weight:700; font-size:15.5px; color:var(--rd-navy); line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
body.rdA-air .card-rate{
  display:inline-flex; align-items:center; gap:4px; font-size:13.5px;
  color:var(--rd-navy); font-weight:600; white-space:nowrap; flex:0 0 auto;
}
body.rdA-air .card-rate svg{width:14px; height:14px; fill:var(--rd-amber);}
body.rdA-air .card-rate .card-revs{color:var(--rd-muted); font-weight:400;}   /* inline "(284)" like the mockup */
/* the campsite name is a real <a> — keep it the navy title style, not the global link green */
body.rdA-air .card-title a{color:inherit; font:inherit; text-decoration:none;}
body.rdA-air .card-meta{color:var(--rd-muted); font-size:13.5px; margin-top:3px; line-height:1.4;}
body.rdA-air .card-meta .dotsep{padding:0 5px;}
/* amenity (Ausstattung) icon row — directly under the Ort/Kanton, tiny, single line */
body.rdA-air .card-amen{display:flex; align-items:center; flex-wrap:nowrap; gap:9px; margin-top:5px; height:17px; overflow:hidden; color:var(--rd-muted);}
body.rdA-air .card-amen .amen-i{flex:0 0 auto; display:inline-flex;}
body.rdA-air .card-amen .amen-i svg{width:15px; height:15px; display:block;}
body.rdA-air .card-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px;}
body.rdA-air .tag{
  font-size:11.5px; font-weight:600; font-family:var(--rd-display);
  color:var(--rd-green-700); background:var(--rd-green-50); border:1px solid var(--rd-green-100);
  padding:3px 9px; border-radius:999px;
}
body.rdA-air .card-price{margin-top:auto; padding-top:10px; font-size:15px; color:var(--rd-navy);}
body.rdA-air .card-price b{font-family:var(--rd-display); font-weight:800; font-size:16px;}
body.rdA-air .card-price .unit{color:var(--rd-muted); font-weight:400; font-size:13.5px;}
body.rdA-air .card-price .anfrage{color:var(--rd-muted); font-style:italic; font-size:13.5px;}
body.rdA-air .noresults{grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--rd-muted);}

/* ============ PAGINATION ============ */
/* enhancePager() lifts .paging out of the card grid into main.results; hide any that
   is still inside the grid (pre-relocation flash) so grid-auto-rows can't stretch it. */
body.rdA-air .rlist-host .paging{display:none;}
body.rdA-air main.results > .paging{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin:30px 0 8px; padding:0; width:auto; height:auto;
}
body.rdA-air .paging .pg-row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:3px; }
/* page numbers = plain text (no box); current page = coral */
body.rdA-air .paging .paging_link{
  display:inline-grid; place-items:center; min-width:34px; height:38px; padding:0 7px;
  border:0; background:none; border-radius:9px;
  font-family:var(--rd-display); font-weight:700; font-size:16px; color:var(--rd-navy,#0d2a26);
  text-decoration:none; cursor:pointer; transition:color .12s, background .12s;
}
body.rdA-air .paging .paging_link:hover{ background:var(--rd-bg-soft,#f3f6f4); }
body.rdA-air .paging .paging_link.on,
body.rdA-air .paging .paging_link.on:hover{ color:#f0625c; background:none; cursor:default; }
body.rdA-air .paging .pg-gap{ min-width:22px; text-align:center; color:var(--rd-muted,#94a39c); font-weight:700; font-size:16px; user-select:none; }
/* prev / next = circular icon buttons */
body.rdA-air .paging .pg-arrow{
  display:inline-grid; place-items:center; width:46px; height:46px; min-width:46px; padding:0;
  border:1px solid var(--rd-line,#e6ece9); border-radius:50%; background:#fff; color:var(--rd-navy,#0d2a26);
  cursor:pointer; transition:border-color .12s, background .12s;
}
body.rdA-air .paging .pg-prev{ margin-right:10px; }
body.rdA-air .paging .pg-next{ margin-left:10px; }
body.rdA-air .paging .pg-arrow:hover{ border-color:var(--rd-navy,#0d2a26); background:var(--rd-bg-soft,#f3f6f4); }
body.rdA-air .paging .pg-arrow.pg-disabled,
body.rdA-air .paging .pg-arrow.pg-disabled:hover{ opacity:.3; cursor:default; border-color:var(--rd-line,#e6ece9); background:#fff; }
body.rdA-air .paging .pg-status{ color:var(--rd-muted,#94a39c); font-size:14px; font-family:var(--rd-display); }
body.rdA-air .pagecontainer{margin-top:0;}
body.rdA-air .noresults h3{font-size:18px; margin-bottom:8px;}

/* ===== Region/canton SEO zones — hoisted to full-width (above/below the cards|map) by
   hoistRegionZones() so /camping/{slug} renders the list exactly like the search page ===== */
body.rdA-air .rdA-region-zone{ padding-left:clamp(20px,3.5vw,44px); padding-right:clamp(20px,3.5vw,44px); box-sizing:border-box; }
body.rdA-air .rdA-region-zone-top{ margin:4px 0 18px !important; }
/* region page: hide the generic listing H1 + intro (the region zone-top is the single H1). The
   lhero breadcrumb (content.php) now shows the region name, so hide the legacy region_zones.php
   breadcrumb (mis-positioned above the nav by its own JS in the redesign DOM). */
body.rdA-air.rdA-region .lhead, body.rdA-air.rdA-region .lintro{ display:none; }
body.rdA-air .region-breadcrumb{ display:none !important; }
body.rdA-air .rdA-region-zone-top h1{ font-family:var(--rd-display); font-weight:800; color:var(--rd-navy,#0d2a26); font-size:25px; line-height:1.18; margin:0 0 10px; }
body.rdA-air .rdA-region-zone-bottom{ margin:26px 0 10px !important; }

/* ============ MAP RAIL (real Leaflet inside) ============ */
/* >1100: sticky full-height rail under the catbar. We keep overflow:hidden on the
   RAIL WRAPPER (rounded clip) but NOT on #rda-map / .leaflet-* — Leaflet panes &
   controls stay visible and interactive (see §LEAFLET below). */
body.rdA-air .maprail{
  position:sticky; top:calc(var(--header-h) + 12px); height:calc(100vh - var(--header-h) - 24px);
  align-self:start; background:#cfe3d6; overflow:hidden; border-radius:var(--rd-r);
}
/* the real Leaflet map fills the rail */
body.rdA-air .maprail #rda-map,
body.rdA-air #rda-map{
  position:absolute; inset:0; width:100%; height:100%;
}

/* price pins — Leaflet markers styled like the concept's .pin b */
body.rdA-air .pin{position:absolute; transform:translate(-50%,-50%); z-index:5;}
body.rdA-air .pin b,
body.rdA-air .rda-pin{
  display:inline-flex; align-items:center;
  font-family:var(--rd-display); font-weight:800; font-size:13px;
  background:#fff; color:var(--rd-navy); padding:7px 13px; border-radius:999px;
  box-shadow:0 3px 10px -2px rgba(13,40,30,.45); border:1px solid rgba(0,0,0,.04);
  white-space:nowrap; cursor:pointer; transition:transform .15s,background .15s,color .15s;
}
body.rdA-air .pin b:hover,
body.rdA-air .rda-pin:hover{transform:scale(1.08);}
body.rdA-air .pin.book b,
body.rdA-air .rda-pin.book{background:var(--rd-green); color:#fff;}
body.rdA-air .pin.book b:hover,
body.rdA-air .rda-pin.book:hover{background:var(--rd-green-700);}
body.rdA-air .pin.active b,
body.rdA-air .rda-pin.active{background:var(--rd-navy); color:#fff; transform:scale(1.12); z-index:20;}
body.rdA-air .pin.active.book b,
body.rdA-air .rda-pin.active.book{background:var(--rd-green-700);}

/* map popup chrome (used by the concept; harmless if Leaflet popups are used) */
body.rdA-air .mappop{
  position:absolute; transform:translate(-50%,calc(-100% - 18px)); z-index:30; width:240px;
  background:#fff; border-radius:14px; box-shadow:0 16px 40px -12px rgba(13,40,30,.5);
  overflow:hidden; animation:rdAir-pop .18s ease;
}
@keyframes rdAir-pop{from{opacity:0; transform:translate(-50%,calc(-100% - 8px));}}
body.rdA-air .mappop .pimg{height:130px; position:relative;}
body.rdA-air .mappop .pclose{
  position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%;
  background:#fff; border:0; display:grid; place-items:center; box-shadow:0 2px 6px rgba(0,0,0,.3);
}
body.rdA-air .mappop .pclose svg{width:13px; height:13px; stroke:var(--rd-navy);}
body.rdA-air .mappop .pbody{padding:11px 13px 13px;}
body.rdA-air .mappop .pttl{font-family:var(--rd-display); font-weight:700; font-size:14px; color:var(--rd-navy);}
body.rdA-air .mappop .pmeta{font-size:12px; color:var(--rd-muted); margin:2px 0 7px;}
body.rdA-air .mappop .prow{display:flex; align-items:center; justify-content:space-between;}
body.rdA-air .mappop .prate{display:inline-flex; align-items:center; gap:3px; font-size:12.5px; font-weight:600;}
body.rdA-air .mappop .prate svg{width:13px; height:13px; fill:var(--rd-amber);}
body.rdA-air .mappop .pprice b{font-family:var(--rd-display); font-weight:800;}

/* zoom buttons + mobile-ish map chrome */
body.rdA-air .map-tools{
  position:absolute; top:18px; right:18px; z-index:40;
  display:flex; flex-direction:column; gap:8px;
}
body.rdA-air .map-tools button{
  width:42px; height:42px; border-radius:11px; background:#fff; border:1px solid var(--rd-line);
  display:grid; place-items:center; box-shadow:var(--rd-shadow);
}
body.rdA-air .map-tools button svg{width:18px; height:18px; stroke:var(--rd-navy);}
body.rdA-air .map-search{
  position:absolute; left:50%; transform:translateX(-50%); bottom:24px; z-index:40;
  display:flex; align-items:center; gap:8px; background:#fff; border-radius:999px; padding:11px 18px;
  box-shadow:0 8px 24px -10px rgba(13,40,30,.5);
  font-family:var(--rd-display); font-weight:700; font-size:13px; color:var(--rd-navy);
}
body.rdA-air .map-search input{accent-color:var(--rd-green); width:16px; height:16px;}
body.rdA-air .map-redo{
  position:absolute; left:50%; top:18px; transform:translateX(-50%); z-index:40;
  display:none; align-items:center; gap:8px; background:var(--rd-navy); color:#fff; border:0;
  border-radius:999px; padding:11px 20px; box-shadow:0 10px 24px -8px rgba(13,40,30,.6);
  font-family:var(--rd-display); font-weight:700; font-size:13px;
}
body.rdA-air .map-redo.show{display:inline-flex;}
body.rdA-air .map-redo svg{width:15px; height:15px;}

/* ============ LEAFLET — keep panes & controls visible / interactive ============ */
/* Defensive: never let an inherited rule hide or disable the real Leaflet map. */
body.rdA-air .maprail .leaflet-container,
body.rdA-air #rda-map.leaflet-container{background:#cfe3d6;}
body.rdA-air .maprail .leaflet-pane,
body.rdA-air .maprail .leaflet-top,
body.rdA-air .maprail .leaflet-bottom,
body.rdA-air .maprail .leaflet-control,
body.rdA-air .maprail .leaflet-marker-icon{pointer-events:auto;}
/* zoom control sits below our .map-tools so they don't collide */
body.rdA-air .maprail .leaflet-control-zoom{display:none;}   /* concept .map-tools (#mapZoomIn/Out) are the single zoom source */

/* ============ FILTER FLYOUT ============ */
body.rdA-air .scrim{
  position:fixed; inset:0; z-index:200; background:rgba(13,40,30,.45);
  opacity:0; visibility:hidden; transition:.25s;
}
body.rdA-air .scrim.open{opacity:1; visibility:visible;}
body.rdA-air .flyout{
  position:fixed; top:0; right:0; bottom:0; z-index:201; width:480px; max-width:100vw;
  background:#fff; display:flex; flex-direction:column;
  box-shadow:-20px 0 60px -20px rgba(13,40,30,.4);
  transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
}
body.rdA-air .flyout.open{transform:translateX(0);}
body.rdA-air .modal-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; border-bottom:1px solid var(--rd-line); flex:0 0 auto;
}
body.rdA-air .modal-hd h2{font-size:18px; font-weight:800;}
body.rdA-air .modal-x{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--rd-line); background:#fff;
  display:grid; place-items:center;
}
body.rdA-air .modal-x:hover{background:var(--rd-bg-soft);}
body.rdA-air .modal-x svg{width:15px; height:15px; stroke:var(--rd-navy);}
body.rdA-air .modal-bd{flex:1; overflow:auto; padding:4px 24px;}
body.rdA-air .fsec{padding:24px 0; border-bottom:1px solid var(--rd-line);}
body.rdA-air .fsec:last-child{border-bottom:0;}
body.rdA-air .fsec h3{font-size:16px; font-weight:700; margin-bottom:4px;}
body.rdA-air .fsec .hint{font-size:12.5px; color:var(--rd-muted); margin-bottom:16px;}
body.rdA-air .fsec h3+.chips,
body.rdA-air .fsec h3+.range,
body.rdA-air .fsec h3+.checks,
body.rdA-air .fsec h3+.dates,
body.rdA-air .fsec h3+#steppers,
body.rdA-air .fsec h3+.rates{margin-top:16px;}

/* dates + steppers */
body.rdA-air .dates{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
body.rdA-air .field{display:flex; flex-direction:column; gap:6px;}
body.rdA-air .field label{font-size:12px; font-weight:700; font-family:var(--rd-display); color:var(--rd-navy);}
body.rdA-air .field input{
  border:1px solid var(--rd-line); border-radius:12px; padding:11px 13px;
  font-family:var(--rd-text); font-size:14px; color:var(--rd-ink);
}
body.rdA-air .field input:focus{outline:none; border-color:var(--rd-green); box-shadow:0 0 0 3px var(--rd-green-50);}
body.rdA-air .stepper{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 0; border-bottom:1px solid var(--rd-line);
}
body.rdA-air .stepper:last-child{border-bottom:0;}
body.rdA-air .stepper .lbl{font-size:14px;}
body.rdA-air .stepper .lbl small{display:block; color:var(--rd-muted); font-size:12px;}
body.rdA-air .stepper .ctrl{display:flex; align-items:center; gap:14px;}
body.rdA-air .stepper .ctrl button{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--rd-line); background:#fff;
  color:var(--rd-navy); font-size:18px; display:grid; place-items:center; line-height:1;
}
body.rdA-air .stepper .ctrl button:hover:not(:disabled){border-color:var(--rd-navy);}
body.rdA-air .stepper .ctrl button:disabled{opacity:.35; cursor:not-allowed;}
body.rdA-air .stepper .ctrl .num{min-width:18px; text-align:center; font-family:var(--rd-display); font-weight:700; font-size:15px;}

/* facility groups */
body.rdA-air .facgroup{margin-top:18px;}
body.rdA-air .facgroup h4{
  font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--rd-muted);
  font-weight:700; margin:0 0 12px; font-family:var(--rd-display);
}
body.rdA-air .morebtn{
  margin-top:16px; background:none; border:0; font-family:var(--rd-display);
  font-weight:700; font-size:13.5px; color:var(--rd-navy); text-decoration:underline;
  padding:6px 0; display:inline-flex; align-items:center; gap:6px;
}
body.rdA-air .morebtn svg{width:14px; height:14px; transition:transform .2s;}
body.rdA-air .morebtn.open svg{transform:rotate(180deg);}
body.rdA-air .facextra{display:none;}
body.rdA-air .facextra.show{display:block;}

/* price slider */
body.rdA-air .priceval{font-size:13px; color:var(--rd-muted); margin-bottom:18px;}
body.rdA-air .priceval b{font-family:var(--rd-display); color:var(--rd-navy);}
body.rdA-air .range{position:relative; height:30px;}
body.rdA-air .range .track{position:absolute; top:13px; left:0; right:0; height:4px; border-radius:4px; background:var(--rd-line);}
body.rdA-air .range .fill{position:absolute; top:13px; height:4px; border-radius:4px; background:var(--rd-green);}
body.rdA-air .range input[type=range]{
  position:absolute; top:0; left:0; width:100%; height:30px; margin:0; background:none;
  pointer-events:none; -webkit-appearance:none; appearance:none;
}
body.rdA-air .range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; pointer-events:auto; width:24px; height:24px; border-radius:50%;
  background:#fff; border:2px solid var(--rd-green); box-shadow:0 2px 6px rgba(13,40,30,.3);
  cursor:pointer; margin-top:0;
}
body.rdA-air .range input[type=range]::-moz-range-thumb{
  pointer-events:auto; width:24px; height:24px; border-radius:50%;
  background:#fff; border:2px solid var(--rd-green); box-shadow:0 2px 6px rgba(13,40,30,.3); cursor:pointer;
}
body.rdA-air .range input[type=range]::-webkit-slider-runnable-track{background:none;}

/* chips */
body.rdA-air .chips{display:flex; flex-wrap:wrap; gap:10px;}
body.rdA-air .chip{
  display:inline-flex; align-items:center; gap:7px; padding:10px 16px;
  border:1px solid var(--rd-line); border-radius:999px; background:#fff;
  font-family:var(--rd-display); font-weight:600; font-size:13px; color:var(--rd-navy); transition:.12s;
}
body.rdA-air .chip svg{width:16px; height:16px;}
body.rdA-air .chip:hover{border-color:var(--rd-navy);}
body.rdA-air .chip.on{background:var(--rd-green-50); border-color:var(--rd-green); color:var(--rd-green-700);}
/* disabled chips (per contract §5: never ship a chip that silently does nothing) */
body.rdA-air .chip:disabled,
body.rdA-air .chip[aria-disabled="true"]{opacity:.4; cursor:not-allowed;}
body.rdA-air .chip:disabled:hover,
body.rdA-air .chip[aria-disabled="true"]:hover{border-color:var(--rd-line);}

/* checkbox list */
body.rdA-air .checks{display:grid; grid-template-columns:1fr 1fr; gap:12px 18px;}
body.rdA-air .check{display:flex; align-items:center; gap:11px; font-size:14px; color:var(--rd-ink); cursor:pointer;}
body.rdA-air .check input{width:20px; height:20px; accent-color:var(--rd-green); cursor:pointer;}

/* flyout footer */
body.rdA-air .modal-ft{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; border-top:1px solid var(--rd-line); background:#fff; flex:0 0 auto;
}
body.rdA-air .linkbtn{
  background:none; border:0; font-family:var(--rd-display); font-weight:700; font-size:14px;
  color:var(--rd-navy); text-decoration:underline; padding:8px;
}
body.rdA-air .linkbtn:hover{color:var(--rd-green-700);}
body.rdA-air .applybtn{
  background:var(--rd-green); color:#fff; border:0; border-radius:13px; padding:15px 28px;
  font-family:var(--rd-display); font-weight:700; font-size:14px;
}
body.rdA-air .applybtn:hover{background:var(--rd-green-700);}

/* ============ MOBILE MAP TOGGLE (hidden on desktop) ============ */
body.rdA-air .maptoggle{display:none;}

/* =============================================================================
   BREAKPOINTS (faithfully reproduced from the concept, scoped)
   ============================================================================= */

/* ≤1100: single column; map becomes a fixed overlay toggled by .maprail.show;
   results auto height; grid 3 cols; mobile .maptoggle visible. */
@media(max-width:1100px){
  body.rdA-air .shell{grid-template-columns:1fr;}
  body.rdA-air .maprail{
    position:fixed; inset:var(--header-h) 0 0; height:auto; border-radius:0; display:none; z-index:55;
    border-radius:0;
  }
  body.rdA-air .maprail.show{display:block;}
  body.rdA-air .results{height:auto; overflow:visible;}
  body.rdA-air .rlist-host{grid-template-columns:repeat(3,minmax(0,1fr));}
  body.rdA-air .searchpill .sp-seg .v{display:none;}
  body.rdA-air .catbar{padding:6px 20px 0;}
  body.rdA-air .results{padding:18px 20px 90px;}
  /* the real header drops to 60px ≤1100 (redesign-mockup.css @media) */
  body.rdA-air{--header-h:60px; --catbar-h:62px;}
  body.rdA-air .maptoggle{
    display:inline-flex; position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:58;
    align-items:center; gap:8px; background:var(--rd-navy); color:#fff; border:0; border-radius:999px;
    padding:13px 22px; font-family:var(--rd-display); font-weight:700; font-size:14px;
    box-shadow:0 10px 30px -8px rgba(13,40,30,.6);
  }
  body.rdA-air .maptoggle svg{width:17px; height:17px;}
}

/* ≤860: grid 2 cols; hide secondary header bits; flyout checks 1 col. */
@media(max-width:860px){
  body.rdA-air .rlist-host{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 18px;}
  body.rdA-air .checks{grid-template-columns:1fr;}
}

/* ≤520: flyout full width; checks 1 col. */
@media(max-width:520px){
  body.rdA-air .flyout{width:100vw;}
  body.rdA-air .checks{grid-template-columns:1fr;}
}

/* ≤560: grid 1 col; card-media 16/11. */
@media(max-width:560px){
  body.rdA-air .rlist-host{grid-template-columns:1fr;}
  body.rdA-air .card-media{aspect-ratio:16/11;}
}

/* ============================================================================
   ACTIVE-FILTER CHIPS ("bubbles") — listing bar + flyout; each removable via ×.
   (Repurposes the green-bubble look that used to sit on the cards.)
   ============================================================================ */
body.rdA-air .rdA-activefilters{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:2px 10px 12px;
}
body.rdA-air #flyoutActiveFilters{ margin:0; }
body.rdA-air #fsecActive[hidden]{ display:none; }
body.rdA-air .afchip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--rd-green-50); color:var(--rd-navy);
  border:1px solid rgba(0,0,0,.07);
  border-radius:999px; padding:6px 8px 6px 14px;
  font-size:13px; font-weight:600; line-height:1; white-space:nowrap;
}
body.rdA-air .afchip .afx{
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; padding:0; border:0; border-radius:50%;
  background:rgba(13,42,38,.10); color:var(--rd-navy); cursor:pointer;
  transition:background .12s, color .12s;
}
body.rdA-air .afchip .afx:hover{ background:var(--rd-green); color:#fff; }
body.rdA-air .afclear{
  border:0; background:none; color:var(--rd-muted); cursor:pointer;
  font-size:13px; font-weight:600; text-decoration:underline; padding:4px;
}
body.rdA-air .afclear:hover{ color:var(--rd-navy); }

/* ============================================================================
   MAP MARKER POPUP — Airbnb-style image card on hover/click (Leaflet popup).
   ============================================================================ */
body.rdA-air .rda-pop2-wrap .leaflet-popup-content-wrapper{
  padding:0; border-radius:18px; overflow:hidden;
  box-shadow:0 8px 26px -6px rgba(16,40,38,.36), 0 2px 8px rgba(16,40,38,.12);
}
body.rdA-air .rda-pop2-wrap .leaflet-popup-content{ margin:0; width:236px !important; line-height:1.3; }
body.rdA-air .rda-pop2-wrap a.leaflet-popup-close-button{ display:none; }
body.rdA-air .rda-pop2-media{
  position:relative; aspect-ratio:20/15; background:#e7edee; overflow:hidden;
}
body.rdA-air .rda-pop2-media.noimg{ background:linear-gradient(135deg,#dfe7e3,#cfe0d8); }
body.rdA-air .rda-pop2-img{ width:100%; height:100%; object-fit:cover; display:block; }
body.rdA-air .rda-pop2-fav,
body.rdA-air .rda-pop2-x{
  position:absolute; top:9px; width:30px; height:30px; border-radius:50%;
  border:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.94); color:var(--rd-navy);
  box-shadow:0 1px 4px rgba(0,0,0,.24); padding:0;
}
body.rdA-air .rda-pop2-fav{ right:46px; }
body.rdA-air .rda-pop2-fav.on{ color:#e23744; }
body.rdA-air .rda-pop2-fav.on svg{ fill:#e23744; }
body.rdA-air .rda-pop2-x{ right:9px; }
body.rdA-air .rda-pop2-body{ display:block; padding:11px 13px 13px; color:var(--rd-navy); text-decoration:none; }
body.rdA-air .rda-pop2-body:hover{ text-decoration:none; }
body.rdA-air .rda-pop2-row{ display:flex; align-items:baseline; gap:8px; justify-content:space-between; }
body.rdA-air .rda-pop2-name{
  font-family:var(--rd-display,inherit); font-weight:800; font-size:15px; color:var(--rd-navy);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.rdA-air .rda-pop2-rate{ font-size:13px; font-weight:600; color:var(--rd-navy); white-space:nowrap; flex:0 0 auto; }
body.rdA-air .rda-pop2-rate svg{ width:13px; height:13px; vertical-align:-2px; }
body.rdA-air .rda-pop2-rate .card-revs{ color:var(--rd-muted); font-weight:400; }
body.rdA-air .rda-pop2-loc{ font-size:13px; color:var(--rd-muted); margin-top:2px; }
body.rdA-air .rda-pop2-price{ font-size:14px; color:var(--rd-navy); margin-top:7px; }
body.rdA-air .rda-pop2-price b{ font-weight:800; }
body.rdA-air .rda-pop2-price--ask{ color:var(--rd-muted); font-weight:600; }

/* ============================================================================
   MAP MARKER = the ORIGINAL green "A" pin + a price tag above it (replaces the bare
   floating price label). On result-card hover the matching pin enlarges (.is-hover).
   ============================================================================ */
body.rdA-air .rda-gpin{ background:none !important; border:0 !important; width:30px; height:41px; overflow:visible; }
body.rdA-air .rda-gpin .rda-gpin-svg{ display:block; width:30px; height:41px; filter:drop-shadow(0 2px 3px rgba(16,40,38,.45)); transition:transform .12s ease; transform-origin:50% 100%; }
body.rdA-air .rda-gpin .rda-gpin-price{
  position:absolute; left:50%; bottom:44px; transform:translateX(-50%);
  background:#fff; color:var(--rd-navy); font-family:var(--rd-display); font-weight:800; font-size:11.5px; line-height:1;
  padding:4px 8px; border-radius:999px; white-space:nowrap; box-shadow:0 2px 8px rgba(16,40,38,.32);
  transition:transform .12s ease, background .12s, color .12s;
}
body.rdA-air .rda-gpin .rda-gpin-price::after{ content:''; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); border:5px solid transparent; border-bottom:0; border-top-color:#fff; }
/* hover-enlarge: scale the INNER bits, not the icon container (Leaflet owns its transform). */
body.rdA-air .rda-gpin.is-hover .rda-gpin-svg{ transform:scale(1.5); }
body.rdA-air .rda-gpin.is-hover .rda-gpin-price{ transform:translateX(-50%) scale(1.14); background:var(--rd-green); color:#fff; }
body.rdA-air .rda-gpin.is-hover .rda-gpin-price::after{ border-top-color:var(--rd-green); }
