/* ── Kaart + markers (#98 CSS-extractie) ───────────────────────────── */

#map-wrap {
  /* width + max-width zitten in app.css zodat de 768+ media-query override wint. */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
#leaflet-map {
  /* height zit in app.css (mobile-base + 768+ + 480- overrides). */
  width: 100%;
}
.leaflet-control-attribution { font-size: 9px !important; }

/* ── Kaart-klik modus ── */
.map-click-mode #leaflet-map,
.map-click-mode .leaflet-container { cursor: crosshair !important; }
#map-click-hint {
  font-size: 0.82rem; color: #8ab4f8; margin-top: 4px;
  display: none;
}
.map-click-mode #map-click-hint { display: block; }

/* ── Hoofdstad-markering (vierkant) ── */
.capital-marker {
  background: #4a5a80;
  border: 1.5px solid #1a2744;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

/* ── Pulse marker ── */
.pulse-wrap { position: relative; width: 0; height: 0; }
.pulse-ring {
  position: absolute;
  width: 30px; height: 30px;
  border: 3px solid #FF4B4B;
  border-radius: 50%;
  top: -15px; left: -15px;
  animation: pulse 1.4s ease-out infinite;
  pointer-events: none;
}
.pulse-dot {
  position: absolute;
  width: 14px; height: 14px;
  background: #FF4B4B;
  border: 2px solid #fff;
  border-radius: 50%;
  top: -7px; left: -7px;
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
}
@keyframes pulse {
  0%   { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}