/* "Homes near me" page: list on the left, Leaflet map on the right. */
body.map-page { overflow:hidden; }
.mapapp { display:grid; grid-template-columns:minmax(340px,430px) 1fr; height:calc(100dvh - 57px); }
.mp-panel { display:flex; flex-direction:column; gap:12px; padding:14px 14px 0; background:var(--bg); border-right:1px solid var(--border); min-width:0; min-height:0; z-index:2; }
.mp-search { position:relative; }
.mp-search .searchbox { height:44px; }
.mp-suggest { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:50; margin:0; padding:6px; list-style:none; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:0 14px 34px rgba(15,23,42,.18); max-height:280px; overflow:auto; }
.mp-suggest li { padding:9px 12px; border-radius:10px; cursor:pointer; font-size:.88rem; line-height:1.4; }
.mp-suggest li:hover, .mp-suggest li.active { background:var(--primary-soft); }
.mp-suggest li small { display:block; color:var(--muted); }
.mp-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mp-actions .btn { white-space:nowrap; }
.mp-hint { flex:1; min-width:150px; font-size:.78rem; color:var(--muted); line-height:1.4; }
.mp-hint.err { color:var(--err); }
.mp-filters { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.mp-filters .seg { display:inline-grid; grid-template-columns:repeat(3,1fr); min-width:236px; height:44px; }
.mp-filters .seg label { display:block; min-width:0; }
.mp-filters .seg span:not(.seg-thumb) { height:36px; padding:0 14px; font-size:.9rem; white-space:nowrap; }
.mp-filters .seg-thumb { top:4px; left:4px; height:36px; width:calc((100% - 8px) / 3); }
.mp-filters .seg[data-value="sale"] .seg-thumb { transform:translateX(100%); }
.mp-filters .seg[data-value="rent"] .seg-thumb { transform:translateX(200%); }
.mp-filters .seg input:checked + span { color:#fff; }
.mp-filters .seg label span { color:var(--muted); }
.mp-filters .pill { height:42px; }
.mp-radius { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rchip { padding:5px 13px; border-radius:999px; border:1.5px solid var(--border); background:var(--card); color:var(--fg); font:inherit; font-size:.84rem; font-weight:600; cursor:pointer; transition:transform .2s cubic-bezier(.2,1.5,.3,1), background .2s, border-color .2s, color .2s; }
.rchip:hover { transform:translateY(-2px); border-color:var(--primary); }
.rchip.on { background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 6px 14px rgba(37,99,235,.3); }
.mp-count { font-weight:600; font-size:.92rem; padding-top:2px; }
.mp-list { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:2px 2px 18px; margin:0 -4px; padding-right:6px; }

/* result card */
.nb-card { position:relative; display:flex; gap:12px; padding:10px; border-radius:16px; background:var(--card); border:1.5px solid var(--border); cursor:pointer; text-align:left; transition:transform .2s cubic-bezier(.2,1.4,.3,1), box-shadow .25s, border-color .2s; animation:nb-in .45s cubic-bezier(.2,.9,.2,1) backwards; animation-delay:calc(var(--i,0) * 45ms); }
@keyframes nb-in { from { opacity:0; transform:translateY(14px); } }
.nb-card:hover, .nb-card.on { transform:translateY(-2px); border-color:var(--primary); box-shadow:0 12px 26px rgba(37,99,235,.16); }
.nb-card.on { background:var(--primary-soft); }
.nb-thumb { position:relative; flex:none; display:grid; place-items:center; width:92px; height:92px; border-radius:12px; overflow:hidden; color:rgba(37,99,235,.45); background:linear-gradient(135deg,#dbe8fb,#eef4fd); }
.nb-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.nb-body { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.nb-title { font-weight:700; font-size:.95rem; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nb-loc { font-size:.8rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nb-specs { display:flex; gap:10px; font-size:.78rem; color:var(--grey); }
.nb-specs span { display:inline-flex; align-items:center; gap:4px; }
.nb-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.nb-price { font-size:1.05rem; font-weight:700; color:var(--primary); }
.nb-price small { font-size:.72rem; color:var(--muted); font-weight:500; }
.nb-dist { display:inline-flex; align-items:center; gap:4px; padding:3px 10px 3px 8px; border-radius:999px; background:linear-gradient(90deg,#2563EB,#4F8DF7); color:#fff; font-size:.78rem; font-weight:700; white-space:nowrap; box-shadow:0 4px 10px rgba(37,99,235,.3); }
.nb-actions { position:absolute; top:8px; right:8px; display:flex; gap:6px; opacity:0; transition:opacity .2s; }
.nb-card:hover .nb-actions, .nb-card.on .nb-actions { opacity:1; }
.nb-actions a, .nb-actions button { padding:0; cursor:pointer; font:inherit; }
.nb-actions a, .nb-actions button { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--card); border:1px solid var(--border); color:var(--primary); box-shadow:0 2px 8px rgba(15,23,42,.14); }
.nb-skel { height:112px; border-radius:16px; background:linear-gradient(90deg,var(--card) 25%,var(--primary-soft) 50%,var(--card) 75%); background-size:200% 100%; animation:skel 1.2s linear infinite; }
@keyframes skel { to { background-position:-200% 0; } }
.mp-empty { padding:26px 16px; text-align:center; color:var(--muted); border:1.5px dashed var(--border); border-radius:16px; }

/* map */
.mp-mapwrap { position:relative; min-width:0; min-height:0; }
#map { position:absolute; inset:0; z-index:0; isolation:isolate; background:#dfe8f5; }
.mp-legend { position:absolute; left:12px; bottom:12px; z-index:500; display:flex; gap:14px; flex-wrap:wrap; align-items:center; padding:9px 16px; border-radius:16px; max-width:calc(100% - 90px); font-size:.78rem;
  color:var(--fg); background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(238,244,255,.94) 100%); border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 -1px 0 rgba(37,99,235,.08) inset, 0 2px 4px rgba(15,23,42,.10), 0 10px 26px -6px rgba(37,99,235,.28), 0 18px 40px -12px rgba(15,23,42,.30); }
.mp-legend::before { content:""; position:absolute; left:14px; right:14px; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,1),transparent); }
.lg { display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:5px; vertical-align:-1px; }
.lg.me, .lg.pin { width:13px; height:13px; border:2px solid #fff; vertical-align:-2px; }
.lg.me { background:#2563EB; box-shadow:0 3px 5px rgba(37,99,235,.45), 0 1px 2px rgba(15,23,42,.25); }
.lg.pin { background:#EF4444; box-shadow:0 3px 5px rgba(239,68,68,.45), 0 1px 2px rgba(15,23,42,.25); }

/* leaflet markers */
.leaflet-container { font-family:inherit; }
.pin-wrap { position:relative; width:40px; height:52px; --tilt:0deg; }
.pin-wrap svg { position:absolute; inset:0; display:block; transform-origin:50% 100%; filter:drop-shadow(0 3px 3px rgba(15,23,42,.32));
  transform:translateY(0) rotate(var(--tilt)) scale(1); transition:transform .3s cubic-bezier(.2,1.6,.3,1); }
.pin-shadow { position:absolute; left:50%; bottom:-3px; width:22px; height:8px; margin-left:-11px; border-radius:50%; background:rgba(15,23,42,.5); filter:blur(2px); opacity:.75; transition:transform .3s cubic-bezier(.2,1.2,.3,1), opacity .3s; }
.pin-mk.lift .pin-wrap svg { transform:translateY(-18px) rotate(var(--tilt)) scale(1.16); }
.pin-mk.lift .pin-shadow { transform:scale(.6); opacity:.3; }
.pin-mk.fall svg { animation:pin-fall .7s cubic-bezier(.4,0,.6,1); }
.pin-mk.fall .pin-shadow { animation:shadow-in .7s ease-out; }
.pin-mk.land svg { animation:pin-land .5s cubic-bezier(.3,1.4,.5,1); }
.pin-ripple { position:absolute; left:50%; bottom:-3px; width:16px; height:6px; margin-left:-8px; border:2px solid rgba(37,99,235,.65); border-radius:50%; pointer-events:none; animation:pin-ripple .75s ease-out forwards; }
@keyframes pin-fall { 0% { transform:translateY(-80px) scale(.85); opacity:0; } 18% { opacity:1; } 62% { transform:translateY(0) scale(1,1); } 74% { transform:translateY(0) scale(1.14,.82); } 88% { transform:translateY(-4px) scale(.97,1.05); } 100% { transform:translateY(0) scale(1); } }
@keyframes shadow-in { 0% { transform:scale(.2); opacity:0; } 60% { transform:scale(.5); opacity:.3; } 100% { transform:scale(1); opacity:.75; } }
@keyframes pin-land { 0% { transform:translateY(-18px) scale(1.16); } 45% { transform:translateY(0) scale(1.12,.84); } 72% { transform:translateY(-3px) scale(.98,1.04); } 100% { transform:translateY(0) scale(1); } }
@keyframes pin-ripple { to { transform:scale(6,5); opacity:0; } }
.me-mk { position:relative; width:22px; height:22px; }
.me-mk i { position:absolute; inset:4px; border-radius:50%; background:#2563EB; border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.4); }
.me-mk::before { content:""; position:absolute; inset:0; border-radius:50%; background:rgba(37,99,235,.35); animation:me-pulse 2s ease-out infinite; }
@keyframes me-pulse { from { transform:scale(.6); opacity:1; } to { transform:scale(2.6); opacity:0; } }
.pm { display:inline-block; padding:4px 10px; border-radius:999px; background:var(--card, #fff); color:#0F172A; border:2px solid #2563EB; font-weight:700; font-size:.78rem; white-space:nowrap; box-shadow:0 4px 12px rgba(15,23,42,.3); transform:translate(-50%,-100%); transition:transform .2s cubic-bezier(.2,1.5,.3,1), background .2s, color .2s; position:relative; animation:pm-in .45s cubic-bezier(.2,1.6,.3,1) backwards; animation-delay:calc(var(--i,0) * 40ms); }
.pm::after { content:""; position:absolute; left:50%; bottom:-7px; width:10px; height:10px; background:inherit; border-right:2px solid #2563EB; border-bottom:2px solid #2563EB; transform:translateX(-50%) rotate(45deg); }
.pm.rent { border-color:#D97706; } .pm.rent::after { border-color:#D97706; }
.pm.on, .pm:hover { background:#2563EB; color:#fff; transform:translate(-50%,-100%) scale(1.14); z-index:900 !important; }
@keyframes pm-in { from { opacity:0; transform:translate(-50%,-100%) scale(.3); } }
.leaflet-marker-icon.pm-wrap { background:transparent; border:0; }
.dist-tip { background:#2563EB; color:#fff; border:0; border-radius:999px; font-weight:700; padding:3px 10px; box-shadow:0 4px 10px rgba(0,0,0,.3); }
.dist-tip::before { display:none; }
.leaflet-popup-content-wrapper { border-radius:14px; padding:0; overflow:hidden; }
.leaflet-popup-content { margin:0; width:230px !important; }
.pp { padding:12px 14px; } .pp b { display:block; line-height:1.3; margin-bottom:2px; } .pp .pp-price { color:#2563EB; font-weight:700; } .pp a { display:inline-block; margin-top:8px; font-weight:600; }

@media (max-width:860px) {
  body.map-page { overflow:auto; }
  .mapapp { grid-template-columns:1fr; grid-template-rows:56vh auto; height:auto; }
  .mp-mapwrap { order:-1; height:56vh; }
  .mp-panel { border-right:0; padding-bottom:20px; }
  .mp-list { overflow:visible; }
  .mp-legend { font-size:.7rem; }
}
@media (prefers-reduced-motion: reduce) { .nb-card, .pm, .pin-mk svg, .pin-shadow, .pin-ripple, .me-mk::before, .nb-skel { animation:none !important; transition:none !important; } }

/* while the camera moves, drop the expensive effects so frames stay smooth */
#map.moving .pin-mk svg { filter:none; }
#map.moving .pm { transition:none; animation:none; box-shadow:none; }
#map.moving .leaflet-tooltip, #map.moving .leaflet-popup { opacity:0; transition:none; }
#map.moving .leaflet-interactive { pointer-events:none; }
.leaflet-fade-anim .leaflet-popup { transition:opacity .25s; }

/* map buttons: rounded white tiles like Google Maps */
.mp-mapwrap .leaflet-bar { border:0 !important; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.18), 0 6px 18px -4px rgba(15,23,42,.35); }
.mp-mapwrap .leaflet-bar a, .mp-locate button { display:grid; place-items:center; width:44px; height:44px; line-height:1; border:0; border-radius:0; background:#fff; color:#1F2937; font:inherit; font-size:26px; font-weight:400; cursor:pointer; transition:background .15s, color .2s; }
.mp-mapwrap .leaflet-bar a + a { border-top:1px solid #E5EAF2 !important; }
.mp-mapwrap .leaflet-bar a:hover, .mp-locate button:hover { background:#F3F6FC; }
.mp-mapwrap .leaflet-bar a:active, .mp-locate button:active { background:#E6EDFA; }
.mp-mapwrap .leaflet-bottom.leaflet-right { right:2px; bottom:2px; }
.mp-mapwrap .leaflet-bottom.leaflet-right .leaflet-control { margin-right:10px; margin-bottom:12px; }
.mp-locate button svg { transition:transform .45s cubic-bezier(.2,1.4,.3,1); }
.mp-locate button:hover svg { transform:scale(1.12); }
.mp-locate button.on { color:#2563EB; }
.mp-locate button.on svg circle:first-child { filter:drop-shadow(0 0 4px rgba(37,99,235,.7)); }
.mp-locate button.loading svg { animation:loc-spin 1s linear infinite; color:#2563EB; }
@keyframes loc-spin { to { transform:rotate(360deg); } }
.mp-locate.shake { }
.mp-locate button.shake { animation:loc-shake .5s; }
@keyframes loc-shake { 20%,60% { transform:translateX(-4px); } 40%,80% { transform:translateX(4px); } }
.leaflet-touch .leaflet-bar a { width:44px; height:44px; line-height:44px; }
@media (prefers-reduced-motion: reduce) { .mp-locate button svg, .mp-locate button.loading svg, .mp-locate button.shake { animation:none !important; transition:none !important; } }

/* colour follows the checked option only (the older 2-option rules in style.css key off data-value and would hide a label here) */
#f-listing label span:not(.seg-thumb) { color:var(--muted); }
#f-listing input:checked + span { color:#fff; }

/* quick-view popover (beside the clicked element; becomes a bottom sheet on phones) */
html.qv-lock { overflow:hidden; }
.qv { position:fixed; inset:0; z-index:2000; }
.qv[hidden] { display:none; }
.qv-backdrop { position:absolute; inset:0; background:transparent; transition:background .25s ease; }   /* transparent: only catches outside clicks */
.qv-dialog { position:fixed; left:0; top:0; width:min(380px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); border-radius:20px; background:var(--card); color:var(--fg); outline:0;
  box-shadow:0 24px 60px -16px rgba(8,15,35,.55), 0 0 0 1px var(--border); opacity:0; transform:scale(.86); transition:opacity .18s ease, transform .3s cubic-bezier(.2,1.35,.3,1); }
.qv-dialog .qv-body { max-height:calc(100dvh - 24px); overflow:auto; border-radius:inherit; }
.qv.open .qv-dialog { opacity:1; transform:none; }
.qv-arrow { position:absolute; z-index:2; width:14px; height:14px; background:var(--card); transform:rotate(45deg); border:0 solid var(--border); }
.qv-arrow[data-side="right"] { border-left-width:1px; border-bottom-width:1px; }
.qv-arrow[data-side="left"] { border-top-width:1px; border-right-width:1px; }
.qv-arrow[data-side="below"] { border-top-width:1px; border-left-width:1px; }
.qv-arrow[data-side="above"] { border-bottom-width:1px; border-right-width:1px; }
.qv-x { position:absolute; top:10px; right:10px; z-index:3; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer; background:rgba(15,23,42,.55); color:#fff; transition:transform .25s cubic-bezier(.2,1.6,.3,1), background .2s; }
.qv-x:hover { transform:rotate(90deg) scale(1.1); background:rgba(15,23,42,.8); }
.qv-photo { position:relative; aspect-ratio:21/9; display:grid; place-items:center; overflow:hidden; background:linear-gradient(135deg,#dbe8fb,#eef4fd); border-radius:20px 20px 0 0; }
.qv-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.qv-ph { color:rgba(37,99,235,.4); }
.qv-badge { position:absolute; left:12px; bottom:12px; display:inline-flex; align-items:center; gap:5px; padding:4px 12px 4px 9px; border-radius:999px; background:linear-gradient(90deg,#2563EB,#4F8DF7); color:#fff; font-size:.78rem; font-weight:600; box-shadow:0 4px 12px rgba(37,99,235,.45); }
.qv-main { padding:14px 18px 18px; display:flex; flex-direction:column; gap:9px; }
.qv-tags { display:flex; gap:6px; }
.qv-main h2 { margin:0; font-size:1.15rem; line-height:1.35; }
.qv-loc { display:flex; align-items:center; gap:6px; margin:0; color:var(--grey); font-size:.88rem; }
.qv-price { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.qv-price b { font-size:1.55rem; color:var(--primary); line-height:1.2; }
.qv-price small { color:var(--muted); }
.qv-dist { margin-left:auto; display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:.76rem; font-weight:600; }
.qv-specs { list-style:none; margin:2px 0; padding:10px; display:grid; grid-template-columns:repeat(auto-fit,minmax(68px,1fr)); gap:6px; border-radius:14px; background:var(--bg); border:1px solid var(--border); }
.qv-specs li { display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; color:var(--grey); }
.qv-specs li svg { color:var(--primary); }
.qv-specs b { font-size:1rem; color:var(--fg); } .qv-specs span { font-size:.74rem; }
.qv-agent { display:flex; align-items:center; gap:10px; }
.qv-agent > div { display:flex; flex-direction:column; line-height:1.3; } .qv-agent span:not(.qv-av) { font-size:.78rem; color:var(--muted); }
.qv-av { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; overflow:hidden; background:var(--primary-soft); color:var(--primary); font-weight:700; }
.qv-av img { width:100%; height:100%; object-fit:cover; }
.qv-note { margin:0; font-size:.76rem; color:var(--muted); }
.qv-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
.qv-actions .btn { flex:1 1 auto; justify-content:center; padding:10px 14px; font-size:.9rem; }
.qv-actions .btn:first-child { flex:2 1 170px; }
@media (max-width:520px) {
  .qv-backdrop { background:rgba(8,15,35,.5); }
  .qv-dialog { left:0 !important; right:0; top:auto !important; bottom:0; width:100%; border-radius:22px 22px 0 0; max-height:92dvh; transform:translateY(60px); transform-origin:50% 100% !important; }
  .qv-dialog .qv-body { max-height:92dvh; }
  .qv-photo { border-radius:22px 22px 0 0; }
  .qv-arrow { display:none; }
}
@media (prefers-reduced-motion: reduce) { .qv-backdrop, .qv-dialog, .qv-x { transition:none !important; } }

/* area browse: listings in the current view, shown once the view is <= 50 km across */
.mp-area { position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:700; max-width:calc(100% - 96px); padding:8px 16px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--fg); font-size:.82rem; font-weight:600; text-align:center; box-shadow:0 6px 20px rgba(15,23,42,.14); pointer-events:none; transition:opacity .25s; }
.mp-area.hint { color:var(--muted); font-weight:500; }
.mp-area.busy::after { content:""; display:inline-block; width:10px; height:10px; margin-left:8px; vertical-align:-1px; border-radius:50%; border:2px solid var(--primary); border-top-color:transparent; animation:area-spin .7s linear infinite; }
@keyframes area-spin { to { transform:rotate(360deg); } }
.pm.area { padding:2px 8px; font-size:.72rem; opacity:.92; border-width:1.5px; border-color:#64748B; animation:none; }
.pm.area::after { border-color:#64748B; }
.pm.area.rent { border-color:#D97706; } .pm.area.rent::after { border-color:#D97706; }
@media (prefers-reduced-motion: reduce) { .mp-area.busy::after { animation:none; } }


/* translate button: compact, on the title row, left of the quick-view button */
.nb-body.ugc-has .ugc-tr { top:-2px; right:40px; min-height:22px; padding:0 9px; font-size:.7rem; gap:3px; }
.nb-body.ugc-has .nb-title { padding-right:112px; }