/* ============================================================
   map.css — radar de proximidade, mapa real e lista de perto
   ============================================================ */

.maparea{ display:grid; gap:16px; grid-template-columns:1fr }
/* Item de grid tem largura mínima automática: um filho largo (as
   camadas do Leaflet) estica a coluna e faz a página passar da tela.
   min-width:0 é o que prende a coluna na largura disponível. */
.maparea > *{ min-width:0 }

.mapwrap{ position:relative; min-width:0; overflow:hidden; border-radius:20px }

.mapbtn{
  position:absolute; top:10px; right:10px; z-index:20;
  padding:9px 14px; font-size:12.5px; font-weight:800;
  background:var(--card); border:2.5px solid var(--ink);
  border-radius:999px; box-shadow:var(--drop);
  min-height:38px;
}
.mapbtn:hover{ transform:translateY(-2px) }
.mapbtn:disabled{ opacity:.6 }

/* ---------- radar de anéis (estado de reserva) ---------- */
.radar{
  position:relative; aspect-ratio:1;
  background:var(--card); border:var(--line);
  border-radius:20px; overflow:hidden; box-shadow:var(--drop);
}
.ring{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  border:2px dashed var(--ink-14); border-radius:50%;
}
.ring-label{
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:11px; font-weight:700; color:var(--ink-45);
  background:var(--card); padding:0 6px; border-radius:999px;
}
.me{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); z-index:3;
  display:grid; place-items:center;
}
.me i{
  width:16px; height:16px; border-radius:50%;
  background:var(--reunited); border:2.5px solid var(--ink);
  display:block; box-shadow:0 0 0 7px rgba(255,126,156,.18);
}
.me b{
  position:absolute; top:20px;
  font-size:11px; font-weight:800; white-space:nowrap;
  background:var(--card); border:2px solid var(--ink);
  border-radius:999px; padding:1px 8px;
}
.pin{
  position:absolute; transform:translate(-50%,-100%);
  z-index:4; width:30px; height:36px;
  transition:transform .14s cubic-bezier(.2,.9,.3,1.4);
}
.pin:hover{ transform:translate(-50%,-100%) scale(1.25) rotate(-4deg); z-index:6 }
.pin svg{ width:100%; height:100%; overflow:visible }
@media (prefers-reduced-motion: reduce){
  .pin{ transition:none }
  .pin:hover{ transform:translate(-50%,-100%) }
}
.radar-foot{
  position:absolute; bottom:0; left:0; right:0;
  padding:10px; text-align:center;
  font-size:11px; font-weight:700; color:var(--ink-70);
  background:linear-gradient(transparent, rgba(255,255,255,.95) 45%);
}
/* mensagem no lugar do radar quando não há de onde medir */
.radar-ask{
  position:absolute; inset:0;
  display:grid; place-content:center; gap:8px;
  text-align:center; padding:26px;
}
.radar-ask b{ font-family:var(--display); font-weight:800; font-size:20px; line-height:1.15 }
.radar-ask span{ font-size:13px; color:var(--ink-70); max-width:26ch; margin:0 auto }

/* ---------- mapa real (Leaflet) ---------- */
/* isolation:isolate cria um contexto de empilhamento próprio, então os
   z-index internos do Leaflet (que chegam a 1000) ficam presos aqui
   dentro e não sobem por cima do modal. */
.realmap{
  aspect-ratio:1;
  border:var(--line); border-radius:20px;
  overflow:hidden; box-shadow:var(--drop);
  background:var(--soft);
  position:relative; z-index:0; isolation:isolate;
}
.realmap .leaflet-container{
  height:100%; width:100%;
  background:var(--soft);
  font-family:var(--body);
}
.realmap .leaflet-popup-content-wrapper{
  border:2.5px solid var(--ink); border-radius:14px;
  box-shadow:var(--drop);
}
.realmap .leaflet-popup-content{ font-size:13px; margin:10px 14px }
.realmap .leaflet-control-attribution{ font-size:10px }
.mappin{ display:grid; place-items:center }
.mappin svg{ width:28px; height:34px }

/* ---------- lista ordenada por distância ---------- */
.nearlist{
  display:flex; flex-direction:column; gap:10px;
  max-height:none;
  padding:2px;
}
.near{
  display:flex; gap:11px; align-items:center;
  text-align:left; width:100%; min-width:0; padding:9px;
  background:var(--card); border:var(--line);
  border-radius:16px; box-shadow:var(--drop);
  transition:transform .13s ease;
}
.near:hover{ transform:translateX(4px) }
@media (prefers-reduced-motion: reduce){
  .near{ transition:none }
  .near:hover{ transform:none }
}
.near-thumb{
  width:52px; height:52px; flex:none;
  border:2.5px solid var(--ink); border-radius:13px;
  overflow:hidden; display:grid; place-items:center;
  position:relative; background:var(--soft);
}
.near-thumb img{ width:100%; height:100%; object-fit:cover }
.near-thumb .initial{ font-family:var(--display); font-weight:800; font-size:22px; color:var(--ink-14) }
.near-thumb svg{ position:absolute; width:56%; height:56%; opacity:.18 }
.near-text{ min-width:0; flex:1 }
.near-t{ font-family:var(--display); font-weight:800; font-size:18px; line-height:1.1; display:block }
.near-s{
  font-size:12.5px; color:var(--ink-70); margin-top:2px; display:block;
  /* nomes longos de rua não empurram a distância para fora do cartão */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.near-d{ margin-left:auto; font-size:13px; font-weight:800; text-align:right; flex:none }
.near-d small{ display:block; font-size:10px; font-weight:600; color:var(--ink-45) }