/**
 * Tema visual do Leaflet (mapa interativo) no estilo do site — usado
 * tanto no editor do painel (/admin) quanto na renderização pública em
 * locais.html. Depende das variáveis de cor definidas em style.css.
 */
.gmap-canvas {
  height: 520px;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-alt);
}
.gmap-canvas-lg { height: 600px; }

.gmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.gmap-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.gmap-legend-item input { accent-color: var(--pink); }

.gmap-pin { background: none; border: none; }
.gmap-pin-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--pink);
  font-size: 15px;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.6);
}

/* Marcador personalizado (PNG/SVG enviado pelo admin) — sombra suave pra
   destacar do fundo do mapa, sem impor nenhum formato/moldura fixa. */
.gmap-custom-icon {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--card); color: var(--text); }
.leaflet-popup-close-button { color: var(--text-dim) !important; }
.gmap-popup h3 { font-family: var(--font-display); font-size: 14px; color: #fff; margin: 4px 0 6px; }
.gmap-popup-cat { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; color: var(--text-dimmer); text-transform: uppercase; }
.gmap-popup p { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin: 0 0 8px; }
.gmap-popup-link { color: var(--cyan); font-size: 12px; font-weight: 700; }

@media (max-width: 720px) {
  .gmap-canvas { height: 380px; }
  .gmap-canvas-lg { height: 420px; }
}