body { overflow: hidden; padding-bottom: 0 !important; }
.ftr { display: none; }
.mapapp { display: grid; grid-template-columns: 440px 1fr; height: calc(100svh - var(--hdr-total)); position: relative; z-index: 0; isolation: isolate; }
.maplist { overflow: auto; border-right: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.maplist .head { position: sticky; top: -14px; z-index: 2; background: var(--bg); margin: -14px -14px 0; padding: 14px; border-bottom: 1px solid var(--line); }
#map { height: 100%; background: #0e0c11; }
.map-top { position: absolute; z-index: 500; top: 14px; left: 14px; right: 14px; display: flex; gap: 8px; pointer-events: none; }
.map-top > * { pointer-events: auto; }
.map-top .chip { background: rgba(23, 19, 28, .92); backdrop-filter: blur(10px); }
.map-top .chip.on { background: var(--text); }
.search-area { position: absolute; z-index: 500; top: 64px; left: 50%; transform: translateX(-50%); box-shadow: var(--shadow); }
.pin { width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--red); border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.pin.deal { background: var(--deal); }
.pin-photo { width: 52px; height: 52px; border-radius: 16px; border: 3px solid var(--gold); overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.6), 0 0 0 5px rgba(240,195,106,.18); background: #222; position: relative; }
.pin-photo img { width: 100%; height: 100%; object-fit: cover; }
.pin-photo::after { content: '★'; position: absolute; right: -2px; bottom: -2px; background: var(--gold); color: #1b1203; font-size: 10px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 6px 0 12px 0; }
.pin-label { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 11px var(--font-ui); color: #fff; text-shadow: 0 1px 3px #000; }
/* Cluster bubbles (sp_map.js iconCreateFunction): brand-red disc with a soft halo, count centred. */
.sp-cluster { border-radius: 50%; background: rgba(255, 59, 82, .22); display: grid; place-items: center; transition: transform .15s; }
.sp-cluster div { width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 50%; display: grid; place-items: center; background: var(--red); border: 2px solid rgba(255, 255, 255, .92); box-shadow: 0 3px 10px rgba(0, 0, 0, .45); color: #fff; font: 800 13px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.sp-cluster-m { background: rgba(255, 59, 82, .26); }
.sp-cluster-m div { font-size: 14px; }
.sp-cluster-l { background: rgba(255, 59, 82, .3); }
.sp-cluster-l div { font-size: 15px; }
.sp-cluster:hover { transform: scale(1.08); }
.sp-cluster-feat { background: rgba(240, 195, 106, .28); }
.sp-cluster-feat div { background: var(--gold); color: #1b1203; font-size: 13px; }
/* Zoomed out: smaller Featured photo pins, no name labels (they overlapped). */
.pin-photo { transition: transform .15s; }
.zoom-far .pin-photo { transform: scale(.68); }
.zoom-far .pin-label { display: none; }
/* .leaflet-container prefix: wins over leaflet.min.css, which loads after this file. */
.leaflet-container .leaflet-popup-content-wrapper { background: var(--surface); color: var(--text); border-radius: 16px; padding: 0; overflow: hidden; }
.leaflet-container .leaflet-popup-content { margin: 0; width: 280px !important; font-family: var(--font-ui); }
.leaflet-container .leaflet-popup-tip { background: var(--surface); }
.pop { position: relative; }
.pop-media { position: relative; display: block; }
.pop-media img { display: block; width: 100%; height: 140px; object-fit: cover; }
.pop-badges { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; }
.pop .card-price { position: absolute; left: 10px; bottom: 10px; }
.pop .card-save { position: absolute; right: 10px; top: 10px; }
.pop-body { padding: 12px 14px 14px; display: grid; gap: 6px; }
.pop-title { color: var(--text) !important; font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 6px; text-decoration: none; }
.pop .card-meta { margin: 0; padding: 0; font-size: 12.5px; }
.pop .card-meta svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
.pop .card-deal { padding: 2px 0 0; }
.pop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.pop-actions .btn { justify-content: center; }
.legend { position: absolute; z-index: 500; left: 14px; bottom: 14px; display: flex; gap: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(23,19,28,.92); font-size: 12px; color: var(--text-2); align-items: center; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.mobile-carousel { display: none; }
@media (max-width: 900px) {
  .mapapp { grid-template-columns: 1fr; height: calc(100svh - var(--hdr-total) - 60px - var(--sab)); }
  .maplist { display: none; }
  .maplist.open { display: flex; position: fixed; top: var(--hdr-total); left: 0; right: 0; bottom: calc(60px + var(--sab)); z-index: 600; }
  .mobile-carousel { display: grid; position: absolute; z-index: 500; left: 0; right: 0; bottom: 12px; grid-auto-flow: column; grid-auto-columns: 84%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 12px; scrollbar-width: none; }
  .mobile-carousel::-webkit-scrollbar { display: none; }
  .mobile-carousel .rowcard { scroll-snap-align: center; background: rgba(23, 19, 28, .96); backdrop-filter: blur(10px); }
  .legend { display: none; }
  .search-area { top: 60px; }
}
/* Leaflet colours every popup link #0078A8; keep the site's colours */
.leaflet-container .pop a { color: #fff; }
.leaflet-container .pop .pop-actions .btn-ghost { color: var(--text); }
.pop .card-meta > span { display: inline-flex; align-items: center; gap: 4px; }
/* filter bar over the map: one scrollable row (Filters, quick toggles, price, rating | categories) */
.map-top .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding-bottom: 2px; }
.map-top .chips::-webkit-scrollbar { display: none; }
.map-top .chip { height: 34px; }
.map-top .chip .ico { width: 14px; height: 14px; }
.map-top .chip.on { color: var(--bg); }
.map-top .chip-filters { font-weight: 700; }
.map-top .qn { background: var(--red); color: #fff; border-radius: 99px; padding: 0 6px; font-size: 11px; }
.map-top .chip.on .qn { color: #fff; }
.bar-sep { flex: none; width: 1px; height: 22px; align-self: center; background: rgba(255,255,255,.18); margin: 0 2px; }
#map.loading { filter: saturate(.6) brightness(.8); transition: filter .15s; }
/* the filter sheet (centered panel on desktop, bottom sheet on phones) */
#m-sheet { width: min(460px, calc(100vw - 32px)); }
#m-sheet .filters { position: static; max-height: none; overflow: visible; padding: 0; display: flex; flex-direction: column; }
#m-sheet .f-head { display: none; }
#m-sheet .g-only { order: 1; padding-top: 0; } #m-sheet .g-price { order: 2; } #m-sheet .g-rate { order: 3; } #m-sheet .g-cat { order: 4; } #m-sheet .g-loc { order: 5; }
@media (max-width: 900px) {
  #m-sheet { width: 100%; }
  #m-sheet .fcheck, #m-sheet .toggle-row { min-height: 44px; font-size: 15px; }
  #m-sheet .seg button { height: 42px; font-size: 14px; }
}

/* phone swipe cards over the map */
@media (max-width: 900px) {
  .mobile-carousel { grid-auto-columns: calc(100% - 48px); gap: 10px; padding: 0 16px 4px; scroll-padding: 0 16px; bottom: 10px; }
  .mcard { position: relative; scroll-snap-align: start; display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 8px; border-radius: 18px; background: rgba(20, 17, 25, .97); border: 1px solid var(--line-2); box-shadow: 0 10px 30px rgba(0,0,0,.45); color: var(--text); min-width: 0; }
  .mcard.on { border-color: rgba(255,255,255,.35); }
  .mc-media { position: relative; display: block; }
  .mc-media img { display: block; width: 104px; height: 116px; object-fit: cover; border-radius: 12px; }
  .mc-badges { position: absolute; left: 6px; top: 6px; display: flex; gap: 4px; }
  .mc-badges .badge { height: 20px; min-width: 20px; padding: 0 5px; justify-content: center; font-size: 11px; }
  .mc-price { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 8px; background: rgba(0,0,0,.7); font-size: 12px; font-weight: 700; color: #fff; }
  .mc-body { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
  .mc-title { display: flex; align-items: center; gap: 5px; min-width: 0; }
  .mc-title b { font-size: 15px; font-weight: 750; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mc-title .verified-tick { width: 15px; height: 15px; flex: none; color: var(--blue); }
  .mc-meta { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; }
  .mc-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); flex: none; }
  .mc-meta .star { width: 12px; height: 12px; }
  .mc-meta .is-open { color: var(--deal); font-weight: 600; }
  .mc-meta .is-closed { color: var(--muted); }
  .mc-deal { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650; color: var(--deal); min-width: 0; }
  .mc-deal span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mc-deal .ico { width: 13px; height: 13px; flex: none; }
  .mc-save { position: absolute; right: 5px; top: 5px; width: 28px !important; height: 28px !important; }
  .mc-save .ico { width: 15px; height: 15px; }
  /* pinch to zoom on phones; keep the map credit small and above the cards */
  .leaflet-control-zoom { display: none; }
  .leaflet-control-attribution { font-size: 9px !important; padding: 0 4px !important; }
  .leaflet-bottom.leaflet-right { bottom: 146px; }
  .legend { display: none; }
}