/* ==========================================================================
   EuropeVignettes.eu — interactieve Leaflet-kaart (map.css)
   Los bestand t.o.v. style.css voor makkelijke integratie. Overschrijft
   Leaflet's default look volledig met het merk: routeblauw, koraal, goud,
   Sora + IBM Plex Mono. Gebruikt dezelfde tokens als style.css
   (--ev-*, --flag-*) — dit bestand moet dus ná style.css geladen worden.
   ========================================================================== */

/* ── Kaart-container: hergebruikt .ev-map-wrap-styling, full-bleed kaart ── */
.ev-map-wrap-live {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--ev-white, #fff);
  border: 2px solid var(--ev-white, #fff);
  border-radius: var(--ev-radius-lg, 18px);
  box-shadow: 0 0 0 1px var(--ev-border, #DFE3EA), 0 20px 50px rgba(10,47,82,.16), 0 6px 16px rgba(10,47,82,.10);
}

#ev-live-map {
  width: 100%;
  height: 500px;
  background: var(--ev-paper, #F7F8FA);
  font-family: var(--ev-font-body, sans-serif);
}

.ev-map-wrap-live .ev-map-caption {
  text-align: center;
  font-size: .78rem;
  color: var(--ev-ink-40, #8992A0);
  margin: 0;
  padding: 10px 0;
}

/* Leaflet zet zelf geen border-radius op de tegel-container — forceren. */
.ev-map-wrap-live .leaflet-container {
  width: 100%;
  height: 100%;
  border-radius: var(--ev-radius-lg, 18px);
  font-family: var(--ev-font-body, sans-serif);
  background: var(--ev-paper, #F7F8FA);
  outline: none;
}
.ev-map-wrap-live .leaflet-container:focus {
  box-shadow: inset 0 0 0 3px rgba(21,138,120,.35);
}

/* CARTO Voyager-tegels zijn al rustig en modern — enkel een lichte
   verzachting, geen sepia-tint meer nodig. */
.ev-map-wrap-live .leaflet-tile-pane {
  filter: saturate(.94) contrast(.99);
}

/* ── Zoomcontrol: gestyled naar het merk ── */
.ev-map-wrap-live .leaflet-control-zoom {
  border: none !important;
  border-radius: var(--ev-radius-md, 10px) !important;
  overflow: hidden;
  box-shadow: var(--ev-shadow-card, 0 1px 2px rgba(31,27,22,.04), 0 8px 24px rgba(31,27,22,.06));
}
.ev-map-wrap-live .leaflet-control-zoom a {
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  background: var(--ev-white, #fff) !important;
  color: var(--ev-blue-900, #0A2F52) !important;
  font-weight: 700;
  border: none !important;
}
.ev-map-wrap-live .leaflet-control-zoom a:hover {
  background: var(--ev-gold, #E2A73C) !important;
  color: var(--ev-blue-900, #0A2F52) !important;
}
.ev-map-wrap-live .leaflet-control-zoom-in {
  border-bottom: 1px solid var(--ev-border, #DFE3EA) !important;
}

/* ── Attributie (verplicht bij OSM) — klein, onopvallend, wel goed leesbaar ── */
.ev-map-wrap-live .leaflet-control-attribution {
  background: rgba(247, 248, 250, .9) !important;
  font-family: var(--ev-font-mono, monospace);
  font-size: 9.5px !important;
  color: var(--ev-ink-60, #545C68);
  padding: 2px 7px;
  border-radius: 999px 0 0 0;
}
.ev-map-wrap-live .leaflet-control-attribution a {
  color: var(--ev-blue-700, #1D5688);
}
/* Vangnet: Leaflet's eigen attributie-vlagicoontje moet klein blijven —
   een oudere, generieke "svg { width:100% }"-regel elders kon dit ooit
   per ongeluk laten opblazen tot een groot blok. */
.ev-map-wrap-live .leaflet-attribution-flag {
  width: 1em !important;
  height: .6669em !important;
  display: inline-block !important;
}

/* ── Interactie-hint overlay ("klik om te verkennen") ── */
.ev-map-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 650;
  background: rgba(10, 47, 82, .88);
  color: var(--ev-white, #fff);
  font-family: var(--ev-font-mono, monospace);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 7px 14px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(10, 47, 82, .28);
  transition: opacity .35s ease, transform .35s ease;
}
.ev-map-hint-hide {
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
}

/* ── Custom landmarkers: ronde badge in vlagkleur, witte rand, landcode ── */
.ev-marker-icon {
  background: transparent;
  border: none;
}
.ev-marker-pin {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--marker-color, var(--ev-blue-900));
  border: 2.5px solid var(--ev-white, #fff);
  box-shadow: 0 2px 6px rgba(20, 16, 10, .28), 0 0 0 3px rgba(255,255,255,.0);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease, box-shadow .15s ease;
  transform-origin: center;
}
.ev-marker-flag {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1.5px solid rgba(255,255,255,.85);
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.ev-marker-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--marker-color, var(--ev-blue-900));
  opacity: 0;
  animation: ev-marker-pulse 2.6s ease-out infinite;
}
/* ── Milieusticker-marker: goudkleurige ruit i.p.v. ronde vlag-pin — direct
   visueel te onderscheiden van de vignetlanden (ander product, geen vignet). ── */
.ev-marker-pin-milieu {
  border-radius: 8px;
  background: var(--ev-gold, #E2A73C);
  transform: rotate(45deg);
  border-width: 2px;
}
.ev-marker-pin-milieu .ev-marker-flag {
  transform: rotate(-45deg);
  width: 17px; height: 17px;
}
.ev-marker-pin-milieu:hover,
.ev-marker-pin-milieu:focus-visible {
  transform: rotate(45deg) scale(1.14);
}
.ev-marker-pin:hover,
.ev-marker-pin:focus-visible {
  transform: scale(1.14);
  box-shadow: 0 4px 12px rgba(20, 16, 10, .35);
  z-index: 2;
}
.ev-marker-pin:focus-visible {
  outline: 2px solid var(--ev-gold, #E2A73C);
  outline-offset: 3px;
}

@keyframes ev-marker-pulse {
  0%   { opacity: .55; transform: scale(.85); }
  70%  { opacity: 0;   transform: scale(1.55); }
  100% { opacity: 0;   transform: scale(1.55); }
}

/* ── Custom popup: merk-typografie i.p.v. standaard Leaflet-look ── */
.ev-popup .leaflet-popup-content-wrapper {
  background: var(--ev-white, #fff);
  border-radius: var(--ev-radius-md, 10px);
  box-shadow: var(--ev-shadow-lift, 0 16px 40px rgba(31,27,22,.14));
  padding: 0;
}
.ev-popup .leaflet-popup-content {
  margin: 0;
  width: auto !important;
}
.ev-popup .leaflet-popup-tip-container {
  width: 24px;
  height: 12px;
}
.ev-popup .leaflet-popup-tip {
  background: var(--ev-white, #fff);
  box-shadow: none;
}
.ev-popup .leaflet-popup-close-button {
  color: var(--ev-ink-40, #8992A0) !important;
  font-size: 18px !important;
  top: 8px !important;
  right: 8px !important;
}
.ev-popup .leaflet-popup-close-button:hover {
  color: var(--ev-coral, #F0623C) !important;
  background: transparent !important;
}

.ev-popup-inner {
  padding: 16px 18px 16px;
  min-width: 190px;
}
.ev-popup-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}
.ev-popup-flag {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1.5px solid var(--ev-border, #DFE3EA);
  flex-shrink: 0;
}
.ev-popup-name {
  font-family: var(--ev-font-display, serif);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--ev-blue-900, #0A2F52);
  letter-spacing: -0.01em;
}
.ev-popup-price {
  font-family: var(--ev-font-mono, monospace);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ev-gold-dark, #B9832A);
  margin: 4px 0 12px;
}
.ev-popup-price-label {
  font-family: var(--ev-font-body, sans-serif);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ev-ink-40, #8992A0);
  margin-right: 5px;
}
.ev-popup-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
  font-family: var(--ev-font-body, sans-serif);
  font-weight: 700;
  font-size: .84rem;
  text-decoration: none;
  color: var(--ev-white, #fff);
  background: var(--ev-blue-900, #0A2F52);
  border-radius: var(--ev-radius-sm, 6px);
  padding: 9px 12px;
  transition: background .15s ease, transform .15s ease;
}
.ev-popup-cta:hover {
  background: var(--ev-coral, #F0623C);
  transform: translateY(-1px);
}

/* ── Milieusticker-popup-varianten — zelfde structuur, goud i.p.v. blauw/koraal
   zodat ook in de popup direct duidelijk is dat dit geen vignet is. ── */
.ev-popup-tag-milieu {
  display: inline-block;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ev-gold-dark, #B9832A);
  background: rgba(226,167,60,.16);
  border-radius: 999px;
  padding: 3px 8px;
  margin-bottom: 8px;
}
.ev-popup-price-milieu { color: var(--ev-gold-dark, #B9832A); }
.ev-popup-cta-milieu { background: var(--ev-gold-dark, #B9832A); }
.ev-popup-cta-milieu:hover { background: var(--ev-gold, #E2A73C); color: var(--ev-blue-900, #0A2F52); }

/* ── Zwevend statistiek-badge op de homepage-kaart ── */
.ev-map-stat-badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 500;
  background: var(--ev-white, #fff);
  border-radius: var(--ev-radius-md, 10px);
  box-shadow: var(--ev-shadow-lift, 0 16px 40px rgba(31,27,22,.14));
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: .7rem; font-weight: 700; line-height: 1.25;
  color: var(--ev-ink-60, #545C68);
  text-transform: uppercase; letter-spacing: .03em;
}
.ev-map-stat-num {
  font-family: var(--ev-font-display, serif);
  font-size: 1.6rem; font-weight: 700;
  color: var(--ev-coral, #F0623C);
  text-transform: none; letter-spacing: normal;
}

/* ── Responsive ── */
@media (max-width: 880px) {
  #ev-live-map { height: 340px; }
}
@media (max-width: 480px) {
  #ev-live-map { height: 300px; }
  .ev-map-hint { font-size: .66rem; padding: 6px 11px; bottom: 10px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .ev-marker-ring { animation: none; opacity: 0; }
  .ev-marker-pin, .ev-popup-cta, .ev-map-hint { transition: none !important; }
}