/* =====================================================================
   MOTOR SITE AIRBNB · mapa.css
   Caixa do mapa, filtros, lista de lugares, alfinetes e balões do Leaflet.
   Os lugares e as cores de cada categoria vêm do site/dados/casa.json.
   Visual de UMA casa: mude no site/css/casa.css do cliente, não aqui.
   ===================================================================== */

/* ---------- 1. caixa: mapa + lista lado a lado no computador ---------- */
/* PARA MUDAR: altura do mapa no celular = #mapa height; no computador = bloco 6 */
.mapa-box{display:grid;border-radius:24px;overflow:hidden;background:var(--m-claro);box-shadow:0 30px 80px -40px rgba(28,63,143,.55)}
#mapa{height:min(62vh,600px);min-height:400px;background:#e8eef2;z-index:1}
.lugares{display:flex;flex-direction:column;gap:12px;padding:20px}

/* ---------- 2. filtros por categoria ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:8px}
.filtros button{border:2px solid var(--m-escuro);background:transparent;border-radius:999px;padding:8px 14px;min-height:42px;cursor:pointer;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.filtros button i{width:12px;height:12px;border-radius:50%;display:inline-block}
.filtros button[aria-pressed="true"]{background:var(--m-escuro);color:var(--m-claro)}

/* ---------- 3. lista de lugares ---------- */
.lista-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;overflow:auto;max-height:420px}
.lista-l button{width:100%;text-align:left;border:0;background:transparent;border-radius:12px;padding:12px;cursor:pointer;display:grid;grid-template-columns:14px 1fr auto;gap:12px;align-items:center}
.lista-l button:hover,.lista-l button.ativo{background:#fff}
.lista-l i{width:14px;height:14px;border-radius:50%}
.lista-l strong{display:block;font-weight:700}
.lista-l small{color:#4B5058;font-size:14px}
.lista-l .km{font-weight:700;font-size:14px;white-space:nowrap}

/* ---------- 4. alfinetes ---------- */
.pin{width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;border:3px solid #fff;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.pin span{transform:rotate(45deg);font-size:14px;line-height:1;color:#fff}
/* a casa: pulsa como um radar */
/* PARA MUDAR: cor do alfinete da casa = --m-acento (no casa.css) */
.casa-pin{width:64px;height:64px;border-radius:50%;background:color-mix(in srgb,var(--m-acento) 35%,transparent);display:grid;place-items:center;animation:radar 2.2s ease-out infinite}
.casa-pin b{width:40px;height:40px;border-radius:50%;background:var(--m-acento);border:3px solid #fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.casa-pin svg{width:20px;height:20px;color:var(--m-escuro)}
@keyframes radar{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--m-acento) 70%,transparent)}100%{box-shadow:0 0 0 30px transparent}}

/* ---------- 5. balões do Leaflet ---------- */
.leaflet-popup-content{font:15px/1.45 var(--m-texto);margin:14px 16px}
.leaflet-popup-content strong{font-family:var(--m-display);font-weight:400;font-size:20px;display:block}
.leaflet-popup-content a{color:var(--m-link);font-weight:700}

/* ---------- 6. computador (por último: sobrescreve as regras acima) ---------- */
@media (min-width:960px){.mapa-box{grid-template-columns:1fr 380px;align-items:stretch}#mapa{height:auto;min-height:660px}.lugares{padding:24px 20px 24px 0}.lista-l{max-height:500px}}