/* Redesign „Konzept A" — HOME page (home-content.php + home-banner.php). Owned by the home subagent.
   Loads after redesign-a.css (which defines the --rd-* tokens).

   STRATEGY: most of the home page is class-method output (search form via
   Rooms::DrawSearchAvailabilityBlock2, featured/top-deal cards via
   Hotels::DrawHotelsByGroup). Those are styled purely with CSS here, targeting
   the REAL classes the PHP emits. Only the hero intro copy and the category
   tiles were added as markup in home-content.php (classes prefixed .rdA-).
   ========================================================================== */

/* ============================================================================
   1) HERO — band behind the search form + intro headline
   ========================================================================== */
.wrap.cstyle03{ background:transparent; }

/* The hero column hosts the (added) intro + the search reservation-form.
   Give it the Konzept-A green gradient band with the rounded white search card
   floating on top, matching _redesign/konzept-a-frische-natur.html. */
.rdA-home-hero{
  position:relative;
  margin:0 0 26px;
  padding:54px clamp(20px,4vw,56px) 58px;
  border-radius:26px;
  background:linear-gradient(120deg,#04323f 0%,#06564a 52%,#0a7d57 100%);
  color:#fff;
  overflow:hidden;
  box-shadow:0 30px 60px -28px rgba(0,50,68,.55);
}
/* subtle radial glow, top-right */
.rdA-home-hero::after{
  content:"";
  position:absolute; right:-90px; top:-120px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(154,240,196,.22),transparent 70%);
  pointer-events:none;
}

.rdA-hero-intro{ position:relative; z-index:2; max-width:760px; margin:0 0 26px; }
.rdA-eyebrow{
  font-family:var(--rd-display); font-weight:700;
  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:#9af0c4; margin:0 0 12px;
}
.rdA-hero-h1{
  font-family:var(--rd-display) !important; color:#fff !important;
  font-weight:800; letter-spacing:-.02em; line-height:1.08;
  font-size:clamp(30px,4.6vw,54px); margin:0;
}
.rdA-hero-h1 em{ font-style:normal; color:#9af0c4; }
.rdA-hero-sub{
  font-size:clamp(15px,2vw,18px); line-height:1.5;
  color:rgba(255,255,255,.92); margin:14px 0 0; max-width:560px;
}

/* ============================================================================
   2) SEARCH / RESERVATION FORM  (Rooms::DrawSearchAvailabilityBlock2 output)
      Markup: .reservation-form > #reservieren_section.customsearchform
              > <table> with <h3>, label + .form-control fields,
                .button-availability submit inside td.check-availability.
   ========================================================================== */
.rdA-home-hero .reservation-form{
  position:relative; z-index:3;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  margin:0;
}

/* white rounded search card */
.reservation-form .customsearchform{
  background:#fff;
  border-radius:22px;
  padding:14px clamp(14px,2vw,20px) 18px;
  box-shadow:0 24px 50px -18px rgba(0,50,68,.45);
}
/* heading inside the card ("Camping-/Stellplatz finden") */
.reservation-form .customsearchform h3{
  font-family:var(--rd-display) !important; color:var(--rd-navy) !important;
  font-size:18px; font-weight:800; letter-spacing:-.01em;
  margin:2px 4px 14px; padding:0;
}
/* the field table: make it a responsive flex row */
.reservation-form .customsearchform table{
  width:100%; border-collapse:separate; border-spacing:0;
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px;
}
.reservation-form .customsearchform tbody,
.reservation-form .customsearchform tr{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; width:100%;
}
.reservation-form .customsearchform td{
  display:flex; flex-direction:column; justify-content:flex-end;
  flex:1 1 180px; min-width:0; padding:0; vertical-align:bottom; position:relative;
}
/* field labels → small green uppercase */
.reservation-form .customsearchform label{
  font-family:var(--rd-display); font-weight:700;
  font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--rd-green-700); margin:0 0 5px 2px; display:block;
}
/* inputs → rounded, soft border, green focus */
.reservation-form .customsearchform input.form-control,
.reservation-form .customsearchform input[type=text],
.reservation-form .customsearchform input[type=textbox]{
  width:100%; height:50px;
  border:1.5px solid var(--rd-line) !important;
  border-radius:14px !important;
  background:var(--rd-bg-soft);
  padding:10px 14px; font-size:15px; color:var(--rd-navy);
  box-shadow:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.reservation-form .customsearchform input.form-control:focus,
.reservation-form .customsearchform input[type=text]:focus{
  background:#fff;
  border-color:var(--rd-green) !important;
  box-shadow:0 0 0 3px var(--rd-green-50) !important;
  outline:0;
}
.reservation-form .customsearchform input::placeholder{ color:var(--rd-muted); }

/* the destination cell can breathe a little wider */
.reservation-form .customsearchform .hereaddress-hotel-field td:first-child,
.reservation-form .customsearchform td:first-child{ flex:1.6 1 220px; }

/* reset (x) button inside the location field — keep it inside the rounded input */
.reservation-form .customsearchform .home_search_reset_button{
  position:absolute; right:10px; bottom:13px;
  width:24px; height:24px; border:0; background:transparent;
  opacity:.5; cursor:pointer;
}
.reservation-form .customsearchform .home_search_reset_button:hover{ opacity:.9; }

/* submit button → big rounded green pill */
.reservation-form td.check-availability,
.reservation-form td.home_search_button{ flex:0 0 auto; justify-content:flex-end; }
.reservation-form .button-availability,
.reservation-form input.button-availability{
  height:50px; min-width:158px;
  background:var(--rd-green) !important; color:#fff !important;
  border:0 !important; border-radius:14px !important;
  font-family:var(--rd-display); font-weight:700; font-size:15.5px; letter-spacing:.01em;
  padding:0 26px; cursor:pointer;
  box-shadow:0 10px 22px -6px rgba(0,160,87,.55);
  transition:transform .12s ease, background .15s ease;
}
.reservation-form .button-availability:hover,
.reservation-form input.button-availability:hover{
  background:var(--rd-green-700) !important; transform:translateY(-1px);
}

/* ============================================================================
   3) CATEGORY TILES  (.rdA-cats — added markup)
      Konzept-A rounded image tiles: "Am See / In den Bergen / Am Fluss /
      Ganze Schweiz". Real links to the search page; no invented counts.
   ========================================================================== */
.rdA-cats-col{ margin-top:6px; }
.rdA-cats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  margin:0 0 8px;
}
.rdA-cat{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  aspect-ratio:1/1.04; padding:18px; border-radius:var(--rd-r);
  overflow:hidden; color:#fff !important; text-decoration:none !important;
  background:linear-gradient(135deg,#0a7d57,#04323f);
  box-shadow:0 10px 26px -16px rgba(16,40,38,.4);
  transition:transform .2s ease, box-shadow .2s ease;
}
/* image via CSS var set inline per tile */
.rdA-cat::before{
  content:""; position:absolute; inset:0;
  background-image:var(--rdA-cat-img); background-size:cover; background-position:center;
  transition:transform .4s ease;
}
.rdA-cat::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 28%,rgba(0,40,50,.8));
}
.rdA-cat:hover{ transform:translateY(-4px); box-shadow:0 16px 34px -16px rgba(16,40,38,.5); }
.rdA-cat:hover::before{ transform:scale(1.06); }
.rdA-cat-label{
  position:relative; z-index:2;
  font-family:var(--rd-display); font-weight:700; font-size:17px; color:#fff;
}
.rdA-cat-sub{
  position:relative; z-index:2; display:block; margin-top:3px;
  font-size:12.5px; color:rgba(255,255,255,.88);
}

/* ============================================================================
   4) FEATURED OFFERS / TOP DEALS  (Hotels::DrawHotelsByGroup output)
      Markup: .hpscroller > .anim3|.anim2 > .hotel-scroll
              > h4 + .wrapper > .list_carousel > ul#foo2|#foo > li
                > a.preview_img > img.image  +  .m1 > h6.lh2.dark (name + location)
   ========================================================================== */
.hpscroller{ margin-top:8px; }
.hotel-scroll{ position:relative; }
.hotel-scroll h4{
  font-family:var(--rd-display) !important; color:var(--rd-navy) !important;
  font-size:clamp(22px,3vw,30px); font-weight:800; letter-spacing:-.01em;
  margin:18px 0 14px;
}

/* carousel list */
.list_carousel ul{ margin:0; padding:0; list-style:none; }
.list_carousel li{
  background:#fff;
  border:1px solid var(--rd-line);
  border-radius:var(--rd-r);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.list_carousel li:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 40px -20px rgba(16,40,38,.45);
  border-color:transparent;
}
/* card image */
.list_carousel li .preview_img{ display:block; position:relative; overflow:hidden; }
.list_carousel li .preview_img img,
.list_carousel li img.image{
  width:100% !important; height:auto !important;
  aspect-ratio:4/3; object-fit:cover;
  border-radius:0 !important; display:block;
  transition:transform .4s ease;
}
.list_carousel li:hover img.image{ transform:scale(1.05); }
/* card body (name + location) */
.list_carousel li .m1{ padding:14px 16px 16px; }
.list_carousel li .m1 h6,
.list_carousel li .lh2{
  margin:0; font-family:var(--rd-display) !important;
  font-size:16px; line-height:1.3; color:var(--rd-navy);
}
.list_carousel li .m1 h6 b:first-child{
  display:block; color:var(--rd-green); font-weight:700; font-size:16.5px;
}
.list_carousel li .m1 h6 b{ font-weight:600; }
.list_carousel li .m1 h6 br + b,
.list_carousel li .lh2.dark b + br + b{
  display:inline-flex; align-items:center; gap:5px;
  color:var(--rd-muted) !important; font-weight:500; font-size:13.5px;
}

/* carousel prev/next controls (if rendered by the script) */
.list_carousel .prev, .list_carousel .next{
  background:#fff !important; border:1px solid var(--rd-line) !important;
  border-radius:999px !important; box-shadow:0 6px 16px -8px rgba(16,40,38,.4);
}

/* ---- Konzept-A card chrome added by redesign-home.js (.rdA-featured) ------ */
.rdA-featured .list_carousel li{ display:flex; flex-direction:column; }
.rdA-featured .card-img{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/3; background:linear-gradient(135deg,#0a7d57,#04323f);
}
.rdA-featured .card-img .preview_img,
.rdA-featured .card-img > a{ display:block; height:100%; }
.rdA-featured .card-img img.image,
.rdA-featured .card-img img{
  width:100% !important; height:100% !important; aspect-ratio:auto;
  object-fit:cover; border-radius:0 !important; display:block;
}
/* badge ("Auf Anfrage") top-left */
.rdA-featured .badge{
  position:absolute; top:12px; left:12px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--rd-display); font-weight:700; font-size:11.5px;
  padding:5px 11px; border-radius:999px;
  box-shadow:0 1px 2px rgba(16,40,38,.06),0 2px 8px rgba(16,40,38,.05);
}
.rdA-featured .badge svg{ fill:currentColor; }
.rdA-featured .badge--anfrage{ background:#fff; color:var(--rd-navy); }
.rdA-featured .badge--buchbar{ background:var(--rd-green); color:#fff; }
/* favourite heart top-right */
.rdA-featured .card-fav{
  position:absolute; top:11px; right:11px; z-index:2;
  width:38px; height:38px; border:0; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--rd-navy);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:color .15s ease, background .15s ease;
}
.rdA-featured .card-fav:hover{ background:#fff; color:#ff6a45; }
.rdA-featured .card-fav.on{ color:#ff6a45; }
.rdA-featured .card-fav svg{ fill:currentColor; }
/* body */
.rdA-featured .card-body{ padding:15px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.rdA-featured .card-loc{
  display:flex; align-items:center; gap:5px;
  font-size:12.5px; color:var(--rd-muted); font-weight:500;
}
.rdA-featured .card-loc svg{ fill:currentColor; flex:0 0 auto; }
.rdA-featured .card-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.rdA-featured .card-row h3{
  margin:0; font-family:var(--rd-display); font-weight:700;
  font-size:17px; line-height:1.25; color:var(--rd-navy);
}
.rdA-featured .card-foot{ margin-top:auto; padding-top:12px; display:flex; align-items:center; justify-content:flex-end; }
.rdA-featured .rdA-card-btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--rd-green); color:#fff !important; text-decoration:none !important;
  font-family:var(--rd-display); font-weight:700; font-size:14px;
  padding:9px 18px; border-radius:999px;
  box-shadow:0 8px 18px -8px rgba(0,160,87,.6); transition:background .15s ease, transform .12s ease;
}
.rdA-featured .rdA-card-btn:hover{ background:var(--rd-green-700); transform:translateY(-1px); }
/* hide the raw carousel prev/next arrows in the grid look */
.rdA-featured--ready .list_carousel .prev,
.rdA-featured--ready .list_carousel .next{ display:none; }
/* lay the cards out as a responsive grid (overrides the horizontal carousel) */
.rdA-featured--ready .list_carousel ul#foo2,
.rdA-featured--ready .list_carousel ul[id^="foo"]{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  width:auto !important; float:none !important; transform:none !important;
}
.rdA-featured--ready .list_carousel li{
  width:auto !important; margin:0 !important; float:none !important;
}

/* ============================================================================
   5) HOME INTRO TEXT + APP BADGES (home_text column)
   ========================================================================== */
.wrap.cstyle03 .col-md-8 p{ color:var(--rd-ink); line-height:1.65; }
.wrap.cstyle03 .col-md-8 strong span{ color:var(--rd-navy); }
.wrap.cstyle03 .col-md-8 a img{ border-radius:8px; }

/* ============================================================================
   6) STATS / TRUST BAR  (.rdA-trust — added markup)
      Konzept-A "trust" strip directly under the hero: real / descriptive items
      (Über 400 Plätze · Am See · In den Bergen · Am Fluss). No fabricated counts.
   ========================================================================== */
.rdA-trust-col{ margin:0 0 6px; }
.rdA-trust{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  background:var(--rd-bg-soft);
  border:1px solid var(--rd-line);
  border-radius:var(--rd-r);
  padding:18px clamp(16px,2.4vw,26px);
}
.rdA-trust-item{ display:flex; align-items:center; gap:12px; min-width:0; }
.rdA-trust-ic{
  width:42px; height:42px; flex:0 0 auto;
  border-radius:12px; background:var(--rd-green-50); color:var(--rd-green-700);
  display:flex; align-items:center; justify-content:center;
}
.rdA-trust-ic svg{ width:21px; height:21px; fill:currentColor; }
.rdA-trust-txt{ display:flex; flex-direction:column; min-width:0; }
.rdA-trust-num{
  font-family:var(--rd-display); font-weight:800; font-size:18px;
  color:var(--rd-navy); line-height:1.1;
}
.rdA-trust-lbl{ font-size:12.5px; color:var(--rd-muted); line-height:1.25; }

/* ============================================================================
   7) SECTION HEADS  (.rdA-shead — added markup over cats + featured)
   ========================================================================== */
.rdA-shead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin:8px 0 18px;
}
.rdA-shead-txt{ max-width:560px; }
.rdA-eyebrow--dark{ color:var(--rd-green-700); display:block; margin:0 0 6px; }
.rdA-shead-h2{
  font-family:var(--rd-display) !important; color:var(--rd-navy) !important;
  font-weight:800; letter-spacing:-.01em; line-height:1.1;
  font-size:clamp(22px,3vw,34px); margin:0;
}
.rdA-shead-sub{ color:var(--rd-muted); margin:8px 0 0; font-size:15px; line-height:1.5; }
.rdA-link-more{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:var(--rd-display); font-weight:700; font-size:14px;
  color:var(--rd-green-700) !important; text-decoration:none !important;
  transition:gap .15s ease;
}
.rdA-link-more:hover{ gap:9px; color:var(--rd-green) !important; }
.rdA-link-more svg{ width:18px; height:18px; }

/* The featured include emits its own <h4> ("Ausgewählte Campingplätze"); the
   .rdA-shead above already states the title, so hide the inner duplicate. */
.rdA-featured .hotel-scroll > h4{ display:none; }
.rdA-featured .hotel-scroll > h4 + br{ display:none; }

/* ============================================================================
   8) RESPONSIVE
   ========================================================================== */
@media (max-width:991px){
  .rdA-cats{ grid-template-columns:repeat(2,1fr); }
  .rdA-trust{ grid-template-columns:1fr 1fr; gap:16px 14px; }
  .rdA-featured--ready .list_carousel ul#foo2,
  .rdA-featured--ready .list_carousel ul[id^="foo"]{ grid-template-columns:1fr 1fr; }
}
@media (max-width:767px){
  .rdA-home-hero{ padding:36px 18px 40px; border-radius:20px; }
  .rdA-hero-intro{ margin-bottom:20px; }

  /* search card → stacked single column */
  .reservation-form .customsearchform table,
  .reservation-form .customsearchform tr{ flex-direction:column; align-items:stretch; gap:10px; }
  .reservation-form .customsearchform td{ flex:1 1 auto; width:100%; }
  .reservation-form td.check-availability,
  .reservation-form td.home_search_button{ width:100%; }
  .reservation-form .button-availability,
  .reservation-form input.button-availability{ width:100%; min-width:0; }

  .rdA-shead{ flex-direction:column; align-items:flex-start; gap:8px; }
  .rdA-cats{ grid-template-columns:1fr 1fr; gap:12px; }
  .rdA-cat{ aspect-ratio:1/0.82; }
  .rdA-featured--ready .list_carousel ul#foo2,
  .rdA-featured--ready .list_carousel ul[id^="foo"]{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .rdA-trust{ grid-template-columns:1fr; }
  .rdA-cats{ grid-template-columns:1fr; }
  .rdA-cat{ aspect-ratio:1/0.5; }
}

/* ============================================================================
   9) 2026 HOME UPGRADE — teasers, reusable slider, regions, full-map view.
      These classes are NEW (not in redesign-mockup.css) so load order is fine.
      Colors come from the mockup tokens (--green / --green-700 / --line …).
   ========================================================================== */

/* --- category & region tiles act as buttons (they submit a hidden POST form) --- */
.rda-cat,
.rda-region{ cursor:pointer; }
.rda-teaser-form{ display:none !important; }

/* --- hero "Karte anzeigen" pill --------------------------------------------- */
a.hero-pill.rda-mapbtn{
  text-decoration:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); color:#fff;
  transition:background .15s ease, transform .12s ease;
}
a.hero-pill.rda-mapbtn:hover{ background:rgba(255,255,255,.3); transform:translateY(-1px); }
a.hero-pill.rda-mapbtn svg{ fill:currentColor; }

/* ============================================================================
   REUSABLE SLIDER (.rda-slider) — used by featured cards AND the 6 regions.
   The inner .rda-slider-track is the horizontal scroller; arrows scroll it.
   ========================================================================== */
/* 10px breathing room below the hero search before the "X Campingplätze" trust stats (request 2026-06-30) */
.trust{ padding-top:10px; }

.rda-slider{ position:relative; }
.rda-slider-track{
  scroll-behavior:smooth;
  scrollbar-width:thin;
}
.rda-slider-track.rda-dragging{ scroll-behavior:auto; cursor:grabbing; user-select:none; }
.rda-slider-track.rda-dragging *{ pointer-events:none; }

/* the regions, in the slider, become a single horizontal row of fixed-width tiles */
.regions.regions-scroll{
  display:flex !important; grid-template-columns:none !important;
  gap:18px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; padding:4px 2px 14px;
  -webkit-overflow-scrolling:touch;
}
.regions.regions-scroll > .region{
  flex:0 0 clamp(240px,26vw,300px); scroll-snap-align:start; height:200px;
}
.regions.regions-scroll::-webkit-scrollbar{ height:8px; }
.regions.regions-scroll::-webkit-scrollbar-thumb{ background:var(--line,#e6ece9); border-radius:99px; }
.regions.regions-scroll::-webkit-scrollbar-track{ background:transparent; }

/* arrow buttons (round, floating over the track edges) */
.rda-slider-arrow{
  position:absolute; top:calc(50% - 12px); transform:translateY(-50%);
  z-index:5; width:46px; height:46px; border-radius:50%;
  background:#fff; color:var(--navy,#0c2b27);
  border:1px solid var(--line,#e6ece9);
  box-shadow:0 8px 22px -8px rgba(16,40,38,.35);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s ease, color .15s ease, opacity .15s ease, transform .12s ease;
}
.rda-slider-arrow:hover:not(:disabled){ background:var(--green,#00A057); color:#fff; transform:translateY(-50%) scale(1.06); }
.rda-slider-arrow:disabled{ opacity:.32; cursor:default; }
.rda-slider-arrow svg{ width:20px; height:20px; fill:currentColor; }
.rda-slider-prev{ left:-10px; }
.rda-slider-next{ right:-10px; }
/* no overflow → no arrows */
.rda-slider--static .rda-slider-arrow{ display:none; }

/* ============================================================================
   GOAL 10 — full-screen MAP-ONLY view (?page=home&view=map)
   ========================================================================== */
.rda-mapview{ position:relative; }
.rda-mapview-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:18px; padding-bottom:18px;
}
.rda-mapview-back,
.rda-mapview-list{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-family:var(--display,inherit); font-weight:700; font-size:14px;
  color:var(--green-700,#00713e);
}
.rda-mapview-back svg,
.rda-mapview-list svg{ width:18px; height:18px; fill:currentColor; }
.rda-mapview-back:hover,
.rda-mapview-list:hover{ color:var(--green,#00A057); }
.rda-mapview-title{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display,inherit); font-weight:700; font-size:15px;
  color:var(--navy,#0c2b27);
}
.rda-mapview-title svg{ width:18px; height:18px; fill:var(--green-700,#00713e); }
.rda-mapview-title b{ font-weight:800; }
/* the map fills the viewport below the header + bar */
.rda-fullmap{
  width:100%;
  height:calc(100vh - var(--hdr-h,72px) - 64px);
  min-height:420px;
  background:var(--bg-soft,#f3f7f4);
}
.rda-fullmap .leaflet-container{ height:100%; width:100%; }

/* Home map pins = the listing map's green teardrop price pins (request 2026-07-01).
   The listing rules live in redesign-listing-air.css scoped to body.rdA-air; the home
   map body is NOT rdA-air, so the SAME styling is repeated here, scoped to .rda-fullmap
   (the .rda-gpin class only ever exists on a Leaflet map, so this can't leak). */
.rda-fullmap .rda-gpin{ background:none !important; border:0 !important; width:30px; height:41px; overflow:visible; }
.rda-fullmap .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%; }
.rda-fullmap .rda-gpin .rda-gpin-price{
  position:absolute; left:50%; bottom:44px; transform:translateX(-50%);
  background:#fff; color:var(--navy,#0c2b27); font-family:var(--display,inherit); 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;
}
.rda-fullmap .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 the pin under the cursor (matches the listing map) */
.rda-fullmap .rda-gpin.is-hover .rda-gpin-svg{ transform:scale(1.5); }
.rda-fullmap .rda-gpin.is-hover .rda-gpin-price{ transform:translateX(-50%) scale(1.14); background:var(--green,#00A057); color:#fff; }
.rda-fullmap .rda-gpin.is-hover .rda-gpin-price::after{ border-top-color:var(--green,#00A057); }

/* Marker flyout — Airbnb-style image card (photo + heart/× + name/region/price), shown on HOVER.
   Same card as the listing map (.rda-pop2 in redesign-listing-air.css, scoped body.rdA-air there);
   repeated here scoped to .rda-fullmap since the home map body is NOT rdA-air (request 2026-07-01). */
.rda-fullmap .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); }
.rda-fullmap .rda-pop2-wrap .leaflet-popup-content{ margin:0; width:236px !important; line-height:1.3; }
.rda-fullmap .rda-pop2-wrap a.leaflet-popup-close-button{ display:none; }
.rda-fullmap .rda-pop2-media{ position:relative; aspect-ratio:20/15; background:#e7edee; overflow:hidden; }
.rda-fullmap .rda-pop2-media.noimg{ background:linear-gradient(135deg,#dfe7e3,#cfe0d8); }
.rda-fullmap .rda-pop2-img{ width:100%; height:100%; object-fit:cover; display:block; }
.rda-fullmap .rda-pop2-fav,
.rda-fullmap .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(--navy,#0c2b27); box-shadow:0 1px 4px rgba(0,0,0,.24); padding:0; }
.rda-fullmap .rda-pop2-fav{ right:46px; }
.rda-fullmap .rda-pop2-fav.on{ color:#e23744; }
.rda-fullmap .rda-pop2-fav.on svg{ fill:#e23744; }
.rda-fullmap .rda-pop2-x{ right:9px; }
.rda-fullmap .rda-pop2-body{ display:block; padding:11px 13px 13px; color:var(--navy,#0c2b27); text-decoration:none; }
.rda-fullmap .rda-pop2-body:hover{ text-decoration:none; }
.rda-fullmap .rda-pop2-row{ display:flex; align-items:baseline; gap:8px; justify-content:space-between; }
.rda-fullmap .rda-pop2-name{ font-family:var(--display,inherit); font-weight:800; font-size:15px; color:var(--navy,#0c2b27); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rda-fullmap .rda-pop2-loc{ font-size:13px; color:var(--muted,#5d7177); margin-top:2px; }
.rda-fullmap .rda-pop2-price{ font-size:14px; color:var(--navy,#0c2b27); margin-top:7px; }
.rda-fullmap .rda-pop2-price b{ font-weight:800; }
.rda-fullmap .rda-pop2-price--ask{ color:var(--muted,#5d7177); font-weight:600; }

/* ============================================================================
   RESPONSIVE (Goal 13) — sliders/teasers/regions/map on phones & tablets.
   Side padding is already provided by the mockup .wrap (clamp(20px,3.5vw,44px))
   and .wrap drops to 16px under 760px — content never touches the edge.
   ========================================================================== */
@media (max-width:760px){
  /* .sec zeroes the horizontal padding on .sec.wrap at mobile, gluing the heading, the
     camping-style grid and the slider cards to the screen edge. Re-apply the SAME 16px
     gutter the search mask (.wrap drops to 16px under 760px) uses, so the section content
     lines up exactly with the search field's left/right edges (request 2026-06-30).
     NOTE the .cats grid was previously NOT in this list, so it alone touched the edge. */
  .sec.wrap > .shead,
  .sec.wrap > .cats,
  .sec.wrap > .rda-slider > .rda-slider-track{ padding-left:16px; padding-right:16px; }
  /* arrows tuck inside on small screens so they don't sit off-canvas */
  .rda-slider-prev{ left:2px; }
  .rda-slider-next{ right:2px; }
  .rda-slider-arrow{ width:40px; height:40px; }
  .regions.regions-scroll > .region{ flex:0 0 80%; height:180px; }
  .rda-mapview-bar{ flex-wrap:wrap; gap:10px; }
  .rda-mapview-title{ order:3; width:100%; }
  .rda-fullmap{ height:calc(100vh - var(--hdr-h,60px) - 120px); }
}
@media (max-width:480px){
  .regions.regions-scroll > .region{ flex:0 0 86%; }
  /* hide arrows on phones — native swipe/scroll is the primary control */
  .rda-slider-arrow{ display:none; }
}

/* ============================================================================
   HOME place cards = LISTING cards. Reuse the detail page's ".rda-lcard" — the
   SAME flat Airbnb card as the listing (rounded image, navy 2-line title, muted
   Ort, amenity icons from the DB facilities, bold price, no border/box). Ported
   here 1:1 (from redesign-detail.css) so the home scrollers render identical
   cards; the sizing rule mirrors `.grid.grid-scroll > .card`.
   ============================================================================ */
.grid.grid-scroll > .rda-lcard{ flex:0 0 clamp(268px,27vw,322px); scroll-snap-align:start; }
.rda-lcard{ display:flex; flex-direction:column; color:var(--rd-navy,#0d2a26); text-decoration:none; cursor:pointer; }
.rda-lcard:hover{ text-decoration:none; }
.rda-lcard-media{ position:relative; aspect-ratio:20/19; border-radius:var(--rd-r,16px); overflow:hidden; background:var(--rd-bg-soft,#eef3f0); }
.rda-lcard-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.rda-lcard-media .badge{ position:absolute; top:12px; left:12px; z-index:2; }
.rda-lcard-fav{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.9); color:var(--rd-navy,#0d2a26);
  box-shadow:0 1px 4px rgba(0,0,0,.18); }
.rda-lcard-fav.on{ color:#e23744; }
.rda-lcard-fav.on svg{ fill:#e23744; }
.rda-lcard-body{ padding:12px 2px 0; display:flex; flex-direction:column; }
.rda-lcard-title{ font-family:var(--rd-display,inherit); font-weight:700; font-size:15.5px; color:var(--rd-navy,#0d2a26); line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rda-lcard-row1{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.rda-lcard-rate{ font-size:13px; font-weight:600; color:var(--rd-navy,#0d2a26); white-space:nowrap; flex:0 0 auto; }
.rda-lcard-rate .revs{ color:var(--rd-muted,#6a7b76); font-weight:400; }
.rda-lcard-meta{ color:var(--rd-muted,#6a7b76); font-size:13.5px; margin-top:3px; line-height:1.4; }
.rda-lcard-amen{ display:flex; align-items:center; gap:9px; margin-top:6px; height:17px; overflow:hidden; color:var(--rd-muted,#6a7b76); }
.rda-lcard-amen svg{ width:15px; height:15px; flex:0 0 auto; }
.rda-lcard-price{ margin-top:8px; font-size:15px; color:var(--rd-navy,#0d2a26); }
.rda-lcard-price b{ font-family:var(--rd-display,inherit); font-weight:800; font-size:16px; }
.rda-lcard-price .unit{ color:var(--rd-muted,#6a7b76); font-weight:400; font-size:13.5px; }
.rda-lcard-price .ask{ color:var(--rd-muted,#6a7b76); font-weight:600; font-size:14px; }