/* region-map-neon.css — Dark neon theme for SVG Europe map modal.
   Matches Voetbal4All brand: dark bg, gold/neon accents, glass-card style. */

.region-map-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.region-map-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(6px);
}
.region-map-panel {
  position: relative; z-index: 1;
  width: 95vw; max-width: 800px; max-height: 90vh;
  background: #111; border: 1px solid rgba(212,175,55,0.2);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 40px rgba(212,175,55,0.08), 0 8px 32px rgba(0,0,0,0.6);
}
.region-map-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.region-map-title { font-size: 16px; font-weight: 700; color: #fff; margin: 0; }
.region-map-sub { font-size: 11px; color: rgba(255,255,255,0.4); margin: 4px 0 0; }
.region-map-close {
  background: none; border: none; color: rgba(255,255,255,0.5);
  font-size: 20px; cursor: pointer; padding: 4px 8px;
}
.region-map-close:hover { color: #d4af37; }

/* SVG stage */
.region-map-stage {
  padding: 12px 20px; overflow: auto; max-height: 60vh;
}
.region-map-stage svg {
  width: 100%; height: auto;
}
/* Neon paths */
.region-map-stage svg path.europe {
  fill: rgba(255,255,255,0.04);
  stroke: rgba(212,175,55,0.25);
  stroke-width: 0.6;
  transition: fill 0.2s, stroke 0.2s;
  cursor: pointer;
}
.region-map-stage svg path.europe:hover {
  fill: rgba(212,175,55,0.15);
  stroke: rgba(212,175,55,0.6);
  filter: drop-shadow(0 0 4px rgba(212,175,55,0.3));
}
.region-map-stage svg path.europe[data-current="1"] {
  fill: rgba(212,175,55,0.2);
  stroke: #d4af37;
  stroke-width: 1;
}
.region-map-stage svg path.europe.is-selected {
  fill: rgba(74,222,128,0.2);
  stroke: #4ade80;
  stroke-width: 1;
  filter: drop-shadow(0 0 6px rgba(74,222,128,0.3));
}
.region-map-stage svg path[data-unmapped="1"] {
  fill: rgba(255,255,255,0.01);
  stroke: rgba(255,255,255,0.06);
  pointer-events: none;
}

/* Tooltip */
.region-map-tooltip {
  position: absolute; padding: 6px 12px;
  background: rgba(0,0,0,0.9); color: #fff;
  font-size: 12px; border-radius: 6px; pointer-events: none;
  border: 1px solid rgba(212,175,55,0.3);
  box-shadow: 0 0 12px rgba(212,175,55,0.15);
  white-space: nowrap; z-index: 10;
}

/* Count badge overlay */
.region-map-count-badge {
  position: absolute; pointer-events: none;
  background: rgba(212,175,55,0.9); color: #000;
  font-size: 10px; font-weight: 800; padding: 2px 6px;
  border-radius: 10px; line-height: 1.2;
  box-shadow: 0 0 8px rgba(212,175,55,0.4);
  transform: translate(-50%, -50%);
}

/* Footer */
.region-map-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-top: 1px solid rgba(255,255,255,0.06);
}
.region-map-info-pill {
  font-size: 10px; color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.04); padding: 3px 10px;
  border-radius: 12px; margin-right: 6px;
}
.region-map-info-pill--warn { color: #f97316; background: rgba(249,115,22,0.1); }