/* ==========================================================================
   RealyBee — Map View (full-screen application mode)
   Loaded only on properties/map.blade.php, on top of style.css + extra.css.
   ========================================================================== */

html:has(body.is-map-app){ height:100%; }

body.is-map-app{
  height:100dvh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
body.is-map-app .site-header{ flex:0 0 auto; }
body.is-map-app .map-app{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:#eef1f4;
}

/* ---------------------------------------------------------------------- */
/* Floating brand / account pills (replace the classic site-header)       */
/* ---------------------------------------------------------------------- */
body.is-map-app .map-app{ position:relative; }

/* Top floating UI is horizontally constrained to the same .container the rest
   of the site uses (reused directly, not reinvented) — this inner box is the
   positioning context for every pill/row below, so they align with the site's
   gutters instead of sprawling edge-to-edge on wide viewports. */
.map-ui-inner{ position:relative; height:100%; }

.map-brand-pill{
  position:absolute; top:16px; left:0; z-index:50;
  display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 16px;
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 22px rgba(16,24,39,.1);
  font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--ink); text-decoration:none;
}
.map-brand-pill span{ color:var(--orange); }
.map-brand-mark{ color:var(--orange); display:inline-flex; }
.map-brand-mark svg{ stroke:currentColor; fill:none; stroke-width:1.9; }

.map-account-row{ position:absolute; top:16px; right:0; z-index:50; display:flex; align-items:center; gap:9px; }
.map-icon-pill{
  position:relative; height:46px; min-width:46px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 14px;
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 22px rgba(16,24,39,.1);
  color:var(--ink); cursor:pointer; text-decoration:none; font-size:13.5px; font-weight:700;
}
.map-icon-pill:hover{ border-color:#c9d0db; }
.map-icon-pill svg{ stroke:currentColor; fill:none; stroke-width:1.9; }
.map-icon-pill-badge{
  position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px; border-radius:999px;
  background:var(--orange); color:#fff; font-size:10px; font-weight:800; display:grid; place-items:center;
}
.map-lang-pill span{ font-size:12.5px; }
.map-cta-pill{
  height:46px; display:inline-flex; align-items:center; gap:7px; padding:0 18px; border-radius:12px; border:0;
  background:var(--orange); color:#fff; font-weight:750; font-size:13.5px; text-decoration:none;
  box-shadow:0 10px 24px rgba(255,90,31,.32); white-space:nowrap;
}
.map-cta-pill:hover{ background:var(--orange-dark,#ee4f18); }
.map-cta-pill svg{ stroke:currentColor; fill:none; stroke-width:2.2; }

/* ---------------------------------------------------------------------- */
/* Toolbar — floating pill rows over the map, not a solid bar             */
/* ---------------------------------------------------------------------- */
.map-toolbar{
  position:absolute; inset:0; z-index:45;
  pointer-events:none; /* wrapper itself is transparent/click-through; children opt back in */
}
.map-ui-inner{ pointer-events:none; }
.map-ui-inner > *{ pointer-events:auto; }

/* Row 1 (shares its vertical position with the brand pill / account row):
   the search bar sits centered between them. Row 2 (filters + list-view) is
   anchored lower, spanning the same left/right margins as the brand/account
   pills so the whole thing reads as one floating interface, not two. */
.map-search-pill{
  /* Confirmed live: without an explicit z-index here, this element (and its
     z-index:60 suggest dropdown child) has no stacking context of its own,
     so it painted BELOW .mt-controls (row 2 of the same floating toolbar,
     z-index:45, later in DOM order) whenever the two overlapped — the
     autocomplete dropdown was visually on top but clicks on its top rows
     were silently swallowed by the filter pills underneath it. */
  z-index:61;
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  width:min(440px, calc(100% - 420px)); min-width:260px; height:46px; padding:0 18px;
  background:rgba(255,255,255,.97); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 22px rgba(16,24,39,.1);
}
.map-search-pill svg{ flex:0 0 auto; stroke:#8a95a6; fill:none; stroke-width:1.9; }
.map-search-pill input{
  flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:14.5px; color:var(--ink);
}
.map-search-suggest{
  position:absolute; top:calc(100% + 8px); left:0; right:0; max-height:320px; overflow-y:auto;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 40px rgba(16,24,39,.16);
  padding:6px; z-index:60;
}
.mss-item{ padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer; }
.mss-item:hover, .mss-item.is-focused{ background:#f4f5f7; }
.mss-item small{ display:block; font-weight:500; color:#8a95a6; font-size:11.5px; margin-top:1px; }
.mss-empty{ padding:14px 12px; font-size:12.5px; color:#8a95a6; text-align:center; }

.mt-controls{
  position:absolute; top:74px; left:0; right:210px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0;
}
.mt-right{
  position:absolute; top:74px; right:0;
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
}

.mt-deal-toggle{ display:flex; gap:6px; padding:0 4px 8px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.mt-deal-toggle button{
  flex:1; height:36px; border:1px solid var(--line); border-radius:8px; background:#fff; font-weight:700; font-size:13px; cursor:pointer; color:var(--ink);
}
.mt-deal-toggle button.is-selected{ background:var(--orange); border-color:var(--orange); color:#fff; }
.mt-dd-list--icons li{ gap:10px; justify-content:flex-start; }
.mt-dd-list--icons li svg{ flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.8; color:#6b7688; }
.mt-dd-list--icons li.is-selected svg{ color:var(--orange); }
.mt-dd-list--icons li::after{ display:none; }
.mt-more-badge{
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:999px;
  background:var(--orange); color:#fff; font-size:10.5px; font-weight:800;
}
.mt-more-scroll{ max-height:min(60vh, 480px); overflow-y:auto; padding-right:2px; }

.mt-dd{ position:relative; flex:0 0 auto; }
.mt-dd-trigger{
  height:44px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(16,24,39,.1);
  color:var(--ink);
  font-size:13.5px;
  font-weight:650;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.mt-dd-trigger:hover{ border-color:#c9d0db; }
.mt-dd-trigger:focus-visible{ outline:2px solid var(--orange); outline-offset:1px; }
.mt-dd-trigger svg{ flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.9; color:#6b7688; }
.mt-dd-chev{ transition:transform .18s ease; color:#8a95a6 !important; }
.mt-dd.is-open .mt-dd-trigger{ border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,90,31,.12); }
.mt-dd.is-open .mt-dd-chev{ transform:rotate(180deg); }
.mt-dd.has-value .mt-dd-trigger{ border-color:#d7ccc0; background:#fff9f6; }
.mt-dd-label{ max-width:140px; overflow:hidden; text-overflow:ellipsis; }

.mt-more-trigger span{ display:inline; }

.mt-dd-panel{
  position:absolute; top:calc(100% + 8px); left:0;
  min-width:240px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 18px 40px rgba(16,24,39,.16);
  padding:8px;
  z-index:60;
  display:none;
  animation:mtPop .15s ease;
}
@keyframes mtPop{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:translateY(0);} }
.mt-dd.is-open .mt-dd-panel{ display:block; }
.mt-dd-panel--sm{ min-width:160px; }
.mt-dd-panel--wide{ min-width:420px; padding:16px; }
.mt-dd-panel--form{ min-width:260px; padding:14px; }

.mt-dd-search{ padding:4px 6px 8px; }
.mt-dd-search input{
  width:100%; height:38px; border:1px solid var(--line); border-radius:8px;
  padding:0 10px; font:inherit; font-size:13px;
}
.mt-dd-search input:focus{ outline:0; border-color:var(--orange); }

.mt-dd-list{ list-style:none; margin:0; padding:0; max-height:280px; overflow-y:auto; }
.mt-dd-list li{
  padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:550;
  cursor:pointer; color:var(--ink); display:flex; align-items:center; justify-content:space-between;
}
.mt-dd-list li:hover, .mt-dd-list li.is-focused{ background:#f4f5f7; }
.mt-dd-list li.is-selected{ color:var(--orange); font-weight:750; background:#fff3ec; }
.mt-dd-list li.is-selected::after{ content:''; width:7px; height:7px; border-radius:50%; background:var(--orange); }
.mt-dd-list li[hidden]{ display:none; }

.mt-price-row{ display:flex; gap:10px; padding:4px; }
.mt-price-row label{ display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:#8a95a6; font-weight:650; flex:1; }
.mt-price-row input{ height:40px; border:1px solid var(--line); border-radius:8px; padding:0 10px; font:inherit; font-size:13.5px; color:var(--ink); }
.mt-price-row input:focus{ outline:0; border-color:var(--orange); }
.mt-dd-apply{
  width:100%; height:40px; margin-top:10px; border:0; border-radius:9px;
  background:var(--orange); color:#fff; font-weight:700; font-size:13.5px; cursor:pointer;
}
.mt-dd-apply:hover{ background:var(--orange-dark,#ee4f18); }

.mt-more-panel{ width:560px; }
.mt-more-head{ display:none; } /* desktop: the dd already has a visible trigger + click-outside close */
.mt-more-section{ padding:14px 2px; border-bottom:1px solid var(--line); }
.mt-more-section:first-child{ padding-top:2px; }
.mt-more-section h4{
  display:flex; align-items:center; gap:8px; margin:0 0 12px;
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#8a95a6;
}
.mt-more-section h4 svg{ color:#c2c8d3; }
.mt-more-chiprow{ display:flex; flex-wrap:wrap; gap:8px; }
.mt-chip-check{
  display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px; border:1px solid var(--line);
  border-radius:999px; font-size:12.5px; font-weight:650; cursor:pointer; color:var(--ink);
}
.mt-chip-check:has(input:checked){ border-color:var(--orange); color:var(--orange); background:#fff3ec; }

.mt-more-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mt-more-grid .field{ display:flex; flex-direction:column; gap:5px; }
.mt-more-grid .field small{ font-size:11px; color:#8a95a6; font-weight:650; }
.mt-more-grid select, .mt-more-grid input[type=number]{
  height:40px; border:1px solid var(--line); border-radius:8px; padding:0 10px; font:inherit; font-size:13px;
}
.mt-more-check{ flex-direction:row !important; align-items:center; gap:8px !important; }
.mt-more-amenities{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.mt-more-amenities label{
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px;
  padding:7px 12px; font-size:12.5px; cursor:pointer;
}
.mt-more-actions{
  display:flex; justify-content:space-between; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
}
.mt-more-actions button{ height:42px; padding:0 18px; border-radius:9px; font-weight:700; font-size:13.5px; cursor:pointer; }
.mt-more-actions .reset{ background:#fff; border:1px solid var(--line); color:var(--ink); }
.mt-more-actions .apply{ background:var(--orange); border:0; color:#fff; margin-top:0; width:auto; flex:1; }

/* Custom pill-group control — same visual language/interaction as the public
   listing filters (properties/index.blade.php + property-filters.js), reused
   here for EPC and price-period instead of a native <select>. */
.rb-pill-group{ display:flex; flex-wrap:wrap; gap:6px; }
.rb-pill{
  height:34px; padding:0 13px; border:1px solid var(--line); border-radius:8px; background:#fff;
  font-size:12.5px; font-weight:650; color:var(--ink); cursor:pointer; transition:border-color .12s ease, color .12s ease, background .12s ease;
}
.rb-pill:hover{ border-color:#c9d0db; }
.rb-pill.is-selected{ border-color:var(--orange); color:var(--orange); background:#fff3ec; }

.mt-save-search{
  height:44px; display:inline-flex; align-items:center; gap:7px; padding:0 16px;
  border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.97); color:var(--ink);
  font-size:13.5px; font-weight:650; white-space:nowrap; cursor:pointer;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 6px 18px rgba(16,24,39,.1);
}
.mt-save-search:hover{ border-color:#c9d0db; }
.mt-save-search svg{ stroke:currentColor; fill:none; stroke-width:1.9; }
.mt-save-search.is-saved{ border-color:var(--orange); color:var(--orange); background:#fff3ec; }

.mt-segment{
  display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; height:44px;
  background:rgba(255,255,255,.97); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 6px 18px rgba(16,24,39,.1);
}
.mt-seg-btn{
  display:inline-flex; align-items:center; gap:6px; padding:0 16px; font-size:13.5px; font-weight:700;
  color:var(--ink); text-decoration:none; cursor:pointer; background:#fff; border:0;
}
.mt-seg-btn + .mt-seg-btn{ border-left:1px solid var(--line); }
.mt-seg-btn svg{ stroke:currentColor; fill:none; stroke-width:1.9; }
.mt-seg-btn.is-active{ color:var(--orange); background:#fff9f6; }

/* ---------------------------------------------------------------------- */
/* Stage: map is always full-bleed; results panel floats on top of it     */
/* ---------------------------------------------------------------------- */
.map-stage{ flex:1 1 auto; min-height:0; position:relative; }

.map-results{
  position:absolute; z-index:20;
  top:130px; left:20px; bottom:20px; width:392px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 14px 34px rgba(16,24,39,.14);
  display:flex;
  flex-direction:column;
  min-height:0;
  transition:transform .22s ease, opacity .22s ease;
}
.map-results.is-collapsed{ transform:translateX(-24px) scale(.98); opacity:0; pointer-events:none; }
.mr-expand-btn{
  position:absolute; z-index:20; top:130px; left:20px;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff;
  box-shadow:0 8px 22px rgba(16,24,39,.16); display:grid; place-items:center; cursor:pointer; color:var(--ink);
}
.mr-expand-btn svg{ stroke:currentColor; fill:none; stroke-width:2; }
.mr-head{ display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:8px 10px; padding:16px 16px 10px; }
.mr-head strong{ display:block; font-size:15px; letter-spacing:-.01em; }
.mr-head span{ display:block; margin-top:2px; font-size:12.5px; color:#8a95a6; }
.mr-collapse{
  flex:0 0 auto; width:32px; height:32px; border:1px solid var(--line); border-radius:8px; background:#fff;
  display:grid; place-items:center; cursor:pointer; color:#6b7688;
}
.mr-sort{ display:flex; align-items:center; }
.mt-dd--sort .mt-dd-trigger{ height:32px; padding:0 10px; font-size:12px; border-radius:8px; box-shadow:none; background:#f4f5f7; border-color:transparent; }

.mr-list{ flex:1 1 auto; overflow-y:auto; padding:0 14px 10px; }
.mr-skeleton{ display:flex; flex-direction:column; gap:12px; padding:8px; }
.mr-skeleton span{ height:110px; border-radius:14px; background:linear-gradient(90deg,#f1f2f4 25%,#e7e9ec 37%,#f1f2f4 63%); background-size:400% 100%; animation:mrShimmer 1.3s ease infinite; }
@keyframes mrShimmer{ from{ background-position:100% 0;} to{ background-position:0 0;} }

.mr-card{
  display:flex; gap:12px; padding:10px; border-radius:14px; cursor:pointer;
  border:1px solid transparent; margin-bottom:4px; transition:background .12s ease, border-color .12s ease;
}
.mr-card:hover, .mr-card.is-hovered{ background:#f7f8fa; }
.mr-card.is-selected{ background:#fff3ec; border-color:#ffd9c4; }
.mr-card-media{ position:relative; flex:0 0 108px; width:108px; height:82px; border-radius:10px; overflow:hidden; background:#eceef1; }
.mr-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.mr-card-heart{
  position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:0;
  background:rgba(255,255,255,.92); display:grid; place-items:center; cursor:pointer; color:#6b7688;
}
.mr-card-heart.is-active{ color:var(--orange); }
.mr-card-heart.is-active svg{ fill:var(--orange); }
.mr-card-heart svg{ stroke:currentColor; fill:none; stroke-width:2; }
.mr-card-body{ min-width:0; flex:1; }
.mr-card-price{ font-size:15.5px; font-weight:800; letter-spacing:-.01em; }
.mr-card-price small{ font-size:11.5px; font-weight:600; color:#8a95a6; margin-left:2px; }
.mr-card-title{ margin:3px 0 2px; font-size:13px; font-weight:650; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mr-card-loc{ font-size:12px; color:#8a95a6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mr-card-specs{ display:flex; gap:10px; margin-top:6px; font-size:12.5px; font-weight:600; color:#516070; line-height:1; }
.mr-card-specs span{ display:inline-flex; align-items:center; gap:5px; }
.mr-card-specs svg{ width:16px; height:16px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.8; vertical-align:middle; }
.mr-card-tag{ display:inline-flex; gap:6px; margin-top:6px; }
.mr-card-tag span{ padding:3px 8px; border-radius:6px; background:#eef2f6; font-size:10.5px; font-weight:650; color:#516070; }
.mr-card-tag span.epc{ background:#e6f7ec; color:#1a9a53; }
.mr-empty{ padding:60px 20px; text-align:center; color:#8a95a6; }
.mr-empty svg{ width:44px; height:44px; color:#c7cedb; margin:0 auto 12px; }
.mr-empty h4{ margin:0 0 4px; color:var(--ink); font-size:14.5px; }
.mr-empty p{ margin:0; font-size:12.5px; }

.mr-alerts{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px; border-top:1px solid var(--line); font-size:13px; font-weight:600; color:var(--ink); cursor:pointer;
}
.mr-alerts span:first-child{ display:inline-flex; align-items:center; gap:8px; }
.mr-alerts svg{ stroke:currentColor; fill:none; stroke-width:1.8; color:#6b7688; }
.mr-switch{ position:relative; display:inline-block; width:38px; height:22px; flex:0 0 auto; }
.mr-switch input{ opacity:0; width:0; height:0; }
.mr-switch i{ position:absolute; inset:0; background:#dde2e9; border-radius:999px; transition:.15s; }
.mr-switch i::before{ content:''; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.mr-switch input:checked + i{ background:var(--orange); }
.mr-switch input:checked + i::before{ transform:translateX(16px); }

/* ---------------------------------------------------------------------- */
/* Map canvas                                                              */
/* ---------------------------------------------------------------------- */
.map-canvas-wrap{ position:absolute; inset:0; }
#mapCanvas{ position:absolute; inset:0; }
/* the RealyBee design system sets a global img{width:100%;display:block} reset —
   neutralise it inside MapLibre's own DOM so its logo/attribution stay their
   intended size instead of stretching to fill their container. */
#mapCanvas img{ width:auto; display:inline; max-width:none; }
.maplibregl-ctrl-attrib{ font-size:10px !important; }
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right{ z-index:15; }

.map-loading-pill{
  position:absolute; left:50%; top:130px; transform:translate(-50%,-8px);
  background:#101827; color:#fff; padding:9px 18px; border-radius:999px; font-size:12.5px; font-weight:700;
  opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:45;
  box-shadow:0 10px 24px rgba(16,24,39,.25);
}
.map-loading-pill.show{ opacity:1; transform:translate(-50%,0); }

/* Cancel "×" control for a finished drawn area — a real MapLibre Marker
   anchored to the polygon's own closing point (not a fixed-position UI
   element), so it stays exactly on the shape through pan/zoom. Created and
   positioned entirely from map-app.js via maplibregl.Marker. */
.rb-area-cancel-marker{
  width:34px; height:34px; border-radius:50%; border:2px solid #fff; background:var(--orange); color:#fff;
  display:grid; place-items:center; cursor:pointer; box-shadow:0 10px 22px rgba(255,90,31,.45);
}
.rb-area-cancel-marker svg{ stroke:currentColor; fill:none; stroke-width:2.6; pointer-events:none; }
.rb-area-cancel-marker:hover{ background:var(--orange-dark,#ee4f18); }

.map-controls-br{ position:absolute; right:18px; bottom:22px; z-index:30; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
/* Confirmed live: the property preview card and this control stack both sit
   at the exact same bottom-right corner — with no adjustment, selecting a
   property (opening the preview) completely covers the zoom/locate/draw/3D
   buttons underneath it (preview has the higher z-index), making them
   unclickable. Shift the controls up out of the way whenever the preview is
   open, the same way the mobile breakpoint already shifts them above the
   results bottom-sheet. Desktop-only (min-width matches the inverse of the
   existing max-width:860px mobile block below, which already repositions
   both elements its own way and must not be overridden by this). */
@media(min-width:861px){
  .map-stage:has(#mapPreview:not([hidden])) .map-controls-br{ bottom:calc(22px + 480px); }
}
.map-ctrl-group{ display:flex; flex-direction:column; border-radius:10px; overflow:hidden; box-shadow:0 6px 18px rgba(16,24,39,.12); }
.map-ctrl{
  width:40px; height:40px; display:grid; place-items:center; background:#fff; border:1px solid var(--line);
  color:var(--ink); cursor:pointer;
}
.map-ctrl-group .map-ctrl + .map-ctrl{ border-top:1px solid var(--line); }
.map-ctrl:not(.map-ctrl-group .map-ctrl){ border-radius:10px; box-shadow:0 6px 18px rgba(16,24,39,.12); }
.map-ctrl svg{ stroke:currentColor; fill:none; stroke-width:2; }
.map-ctrl:hover{ background:#f7f8fa; }
.map-ctrl.is-active{ color:var(--orange); border-color:var(--orange); }
#map3dToggle{ font-size:11px; font-weight:800; letter-spacing:-.01em; }

/* price pins & clusters (rendered as MapLibre Marker DOM elements)
   ------------------------------------------------------------------
   CRITICAL: MapLibre positions a Marker's `element` by writing its own
   inline `transform: translate(...)` on that exact element every time the
   map pans/zooms, so it can re-project the marker's lng/lat to the current
   pixel position. If we ALSO put `transform` (scale on hover/selected) and
   a `transition: transform ...` on that SAME element, the browser tries to
   interpolate between the map's positional transform and our decorative
   one on the same property — during a zoom gesture MapLibre rewrites that
   transform continuously, so the CSS transition makes the marker visibly
   lag behind / overshoot its true geographic position every frame instead
   of snapping there instantly. That lag is the "pins drift on zoom" bug.

   Fix: the element passed to `new maplibregl.Marker({ element })` (the
   "root") carries NO transform/transition of our own — MapLibre owns that
   property exclusively. All visual styling (background, shape, hover
   scale, selected state, transitions) lives on an INNER child element
   that we create ourselves and never let MapLibre touch. Scaling the
   inner element on hover cannot shift the outer element's position. */
.rb-pin-root{ cursor:pointer; }
.rb-cluster-root{ cursor:pointer; }

.rb-pin{
  /* IMPORTANT: the tail below must be a real in-flow element, not an
     absolutely-positioned ::after. MapLibre's `anchor:'bottom'` translates
     this element by -100% of ITS OWN rendered box height to line the
     geographic point up with the element's bottom edge. An absolutely
     positioned pseudo-element doesn't count toward that box, so the visual
     tip would hang a few px below the true anchor — a constant screen-pixel
     error that looks like the pin "drifts" relative to ground features as
     you zoom (the real-world distance it represents shrinks/grows with
     zoom). Stacking the tail in normal flow makes the rendered box include
     it, so bottom-anchor == the tip, exactly, at every zoom level. */
  display:flex; flex-direction:column; align-items:center;
  position:relative; transition:transform .12s ease;
  transform-origin:center bottom; /* scale grows from the pointer tip, which stays anchored */
}
/* Solid RealyBee orange by default — deliberately not white/orange-text: a
   filled orange pill stays legible over any basemap tone (light streets,
   dark water, satellite-style imagery) where a thin orange-on-white label
   can wash out. A 2px white ring gives it a hard edge against orange-toned
   map areas (parks/landuse) so it never blends into the tiles. */
.rb-pin-label{
  display:inline-flex; align-items:center; gap:5px; padding:6px 12px 6px 7px; border-radius:999px;
  background:var(--orange); color:#fff; font-size:12.5px; font-weight:800; white-space:nowrap;
  border:2px solid #fff; box-shadow:0 4px 14px rgba(16,24,39,.22);
  transition:box-shadow .12s ease, background .12s ease, transform .12s ease;
}
.rb-pin-icon{
  display:grid; place-items:center; flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  background:rgba(255,255,255,.24);
}
.rb-pin-icon svg{ stroke:#fff; }
.rb-pin-price{ letter-spacing:-.01em; }
.rb-pin-tail{
  width:9px; height:9px; margin-top:-5px; background:var(--orange);
  border-right:2px solid #fff; border-bottom:2px solid #fff;
  clip-path:polygon(0 0,100% 0,50% 100%);
  transition:background .12s ease;
}
.rb-pin:hover{ transform:scale(1.08); z-index:5; }
.rb-pin:hover .rb-pin-label{ background:var(--orange-dark,#ee4f18); box-shadow:0 8px 22px rgba(255,90,31,.4); }
.rb-pin:hover .rb-pin-tail{ background:var(--orange-dark,#ee4f18); }

/* Selected: a different colour family (dark ink, not just "more orange")
   so the active pin reads clearly against a map that may have a dozen
   other orange pins on it at once. */
.rb-pin.is-selected{ z-index:10; }
.rb-pin.is-selected .rb-pin-label{ background:#101827; box-shadow:0 10px 26px rgba(16,24,39,.4); }
.rb-pin.is-selected .rb-pin-icon{ background:rgba(255,90,31,.9); }
.rb-pin.is-selected .rb-pin-tail{ background:#101827; }
.rb-pin.is-dim{ opacity:.45; }

/* Soft halo fallback for hover-highlight when no real footprint geometry is
   available (land listings, or a building-type listing with no mapped
   footprint under it) — never a fabricated polygon, just a glow at the
   marker's own coordinate. */
.rb-pin.is-halo .rb-pin-label{
  box-shadow: 0 0 0 8px rgba(255,90,31,.16), 0 0 0 16px rgba(255,90,31,.08), 0 4px 14px rgba(16,24,39,.22);
}
/* Persistent (selected) halo — same fallback for land/no-footprint listings,
   stronger and non-fading so it reads as "kept selected" rather than a
   passing hover glow. */
.rb-pin.is-halo-selected .rb-pin-label{
  box-shadow: 0 0 0 4px #fff, 0 0 0 9px rgba(255,90,31,.55), 0 0 0 17px rgba(255,90,31,.22), 0 4px 14px rgba(16,24,39,.22);
}

.rb-cluster{
  display:grid; place-items:center; border-radius:50%; background:var(--orange); color:#fff;
  font-weight:800; box-shadow:0 8px 20px rgba(255,90,31,.35); position:relative;
  transition:transform .12s ease; transform-origin:center;
}
.rb-cluster::before{
  content:''; position:absolute; inset:-6px; border-radius:50%; background:rgba(255,90,31,.16); z-index:-1;
}
.rb-cluster:hover{ transform:scale(1.06); }
.rb-cluster.small{ width:38px; height:38px; font-size:12.5px; }
.rb-cluster.medium{ width:48px; height:48px; font-size:14px; }
.rb-cluster.large{ width:58px; height:58px; font-size:15.5px; }

/* selected property preview card */
.map-preview{
  position:absolute; right:18px; bottom:22px; z-index:40; width:378px; max-width:calc(100% - 36px);
  background:#fff; border-radius:16px; box-shadow:0 22px 50px rgba(16,24,39,.24); overflow:hidden;
}
.mp-close{
  position:absolute; top:10px; right:10px; z-index:2; width:30px; height:30px; border-radius:50%; border:0;
  background:rgba(16,24,39,.55); color:#fff; display:grid; place-items:center; cursor:pointer;
}
.mp-media{ position:relative; height:190px; background:#eceef1; }
.mp-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.mp-expand{
  position:absolute; top:10px; left:10px; width:30px; height:30px; border-radius:8px; border:0;
  background:rgba(16,24,39,.55); color:#fff; display:grid; place-items:center; cursor:pointer;
}
.mp-counter{ position:absolute; left:10px; bottom:10px; background:rgba(16,24,39,.75); color:#fff; font-size:11px; font-weight:700; padding:4px 8px; border-radius:6px; }
.mp-dots{ position:absolute; bottom:9px; left:50%; transform:translateX(-50%); display:flex; gap:4px; }
.mp-dots span{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.55); }
.mp-dots span.is-active{ background:#fff; width:14px; border-radius:3px; }
.mp-body{ padding:14px 16px 16px; }
.mp-price-row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.mp-price-row strong{ font-size:19px; letter-spacing:-.01em; }
.mp-price-row span:not(.mp-available){ font-size:12px; color:#8a95a6; font-weight:600; margin-left:3px; }
.mp-available{ font-size:11.5px; font-weight:700; color:#1a9a53; }
.mp-body h3{ margin:6px 0 3px; font-size:14.5px; font-weight:750; letter-spacing:-.01em; }
.mp-address{ margin:0; display:flex; align-items:center; gap:5px; font-size:12px; color:#8a95a6; }
.mp-address svg{ stroke:currentColor; fill:none; stroke-width:1.9; flex:0 0 auto; }
/* Shown only when a clicked building resolves to more than one listing —
   a compact switcher, not a full second popover. */
.mp-group-note{ margin-top:8px; padding:8px; background:#f7f8fa; border-radius:10px; }
.mp-group-note strong{ display:block; font-size:11px; font-weight:700; color:#6b7688; margin-bottom:6px; }
.mp-group-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.mp-group-chip{ height:28px; padding:0 10px; border-radius:7px; border:1px solid var(--line); background:#fff; font-size:12px; font-weight:700; color:var(--ink); cursor:pointer; }
.mp-group-chip.is-active{ border-color:var(--orange); color:var(--orange); background:#fff3ec; }
.mp-specs{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin:12px 0; }
.mp-specs span{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:12.5px; font-weight:700; color:var(--ink); }
.mp-specs svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; color:#6b7688; }
.mp-specs small{ font-size:10px; font-weight:600; color:#9aa5b5; }
.mp-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.mp-tags span{ padding:5px 9px; border-radius:6px; font-size:10.5px; font-weight:700; background:#eef2f6; color:#516070; }
.mp-tags span.green{ background:#e6f7ec; color:#1a9a53; }
.mp-tags span.blue{ background:#e9f1fd; color:#2f6fd6; }
.mp-tags span.dark{ background:#101827; color:#fff; }
.mp-actions{ display:flex; gap:10px; }
.mp-save{
  flex:0 0 auto; height:44px; padding:0 16px; border-radius:10px; border:1px solid var(--orange); background:#fff;
  color:var(--orange); font-weight:700; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.mp-save svg{ stroke:currentColor; fill:none; stroke-width:1.9; }
.mp-save.is-active svg{ fill:var(--orange); }
.mp-view{
  flex:1 1 auto; height:44px; border-radius:10px; background:var(--orange); color:#fff; font-weight:700;
  font-size:13px; display:flex; align-items:center; justify-content:center; text-decoration:none;
}
.mp-view:hover{ background:var(--orange-dark,#ee4f18); }


.map-toast{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:80; }

/* ---------------------------------------------------------------------- */
/* Tablet                                                                   */
/* ---------------------------------------------------------------------- */
@media(max-width:1100px){
  .map-results{ width:320px; }
  .map-preview{ width:320px; }
  .map-search-pill{ width:min(320px, calc(100% - 380px)); }
  .mt-controls{ right:210px; }
}

/* ---------------------------------------------------------------------- */
/* Mobile: results panel becomes a bottom sheet                            */
/* ---------------------------------------------------------------------- */
@media(max-width:860px){
  body.is-map-app{ height:100dvh; }

  .map-brand-pill{ top:10px; left:10px; height:40px; padding:0 12px; font-size:15px; }
  .map-brand-pill span:not(.map-brand-mark){ display:none; }
  .map-account-row{ top:10px; right:10px; gap:6px; }
  .map-icon-pill{ height:40px; min-width:40px; padding:0 10px; }
  .map-cta-pill span, .map-cta-pill{ font-size:0; padding:0 12px; }
  .map-cta-pill svg{ margin:0; }
  .map-lang-pill span{ display:none; }

  .map-search-pill{ top:56px; left:10px; right:10px; transform:none; width:auto; height:42px; }
  .mt-controls{ top:104px; left:10px; right:10px; }
  .mt-right{ top:104px; right:10px; left:10px; justify-content:flex-end; }
  .mt-save-search span{ display:none; }
  .mt-save-search{ width:40px; height:40px; padding:0; justify-content:center; }
  .mt-segment{ height:40px; }
  .mt-seg-btn span, .mt-seg-btn{ font-size:0; padding:0 13px; }
  .mt-seg-btn svg{ margin:0; }
  .mt-dd-trigger{ height:38px; padding:0 11px; font-size:12.5px; }
  .mt-dd-label{ max-width:80px; }

  .map-stage{ position:relative; }
  .map-canvas-wrap{ position:absolute; inset:0; }

  .map-results{
    position:absolute; left:0; right:0; bottom:0; top:auto; z-index:50;
    width:auto; border:0; border-top-left-radius:20px; border-top-right-radius:20px;
    box-shadow:0 -12px 30px rgba(16,24,39,.18);
    max-height:78dvh; height:230px;
    transition:height .25s ease;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .map-results.is-collapsed{ transform:none; opacity:1; pointer-events:auto; height:120px; }
  .map-results.is-expanded{ height:78dvh; }
  .mr-expand-btn{ display:none !important; }
  .mr-head{ padding:12px 16px 6px; cursor:grab; }
  .mr-head::before{
    content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:36px; height:4px; border-radius:3px; background:#dde2e9;
  }
  .mr-collapse svg{ transform:rotate(-90deg); }
  .map-results.is-expanded .mr-collapse svg{ transform:rotate(90deg); }

  .map-controls-br{ right:12px; bottom:calc(230px + 16px); }
  .map-preview{ left:12px; right:12px; width:auto; max-width:none; bottom:calc(230px + 16px); }

  /* Advanced filters become a real full-screen sheet on mobile, not a
     squeezed-down desktop popover — its own header/close, no "click
     outside to close" since there is no outside once it covers the screen. */
  .mt-dd[data-dd="more"] .mt-dd-panel{
    position:fixed; inset:0; z-index:200; width:100%; max-width:100%; height:100%;
    border-radius:0; margin:0; padding:0; display:none; flex-direction:column; animation:none;
  }
  .mt-dd[data-dd="more"].is-open .mt-dd-panel{ display:flex; }
  .mt-more-head{
    display:flex; align-items:center; justify-content:space-between; flex:0 0 auto;
    padding:16px; border-bottom:1px solid var(--line);
  }
  .mt-more-head strong{ font-size:15px; }
  .mt-more-close{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#fff; display:grid; place-items:center; }
  .mt-more-scroll{ flex:1 1 auto; max-height:none; padding:0 16px; }
  .mt-more-actions{ flex:0 0 auto; padding:14px 16px; padding-bottom:calc(14px + env(safe-area-inset-bottom)); margin-top:0; }

  .mp-specs{ grid-template-columns:repeat(4,1fr); }
}