/* Cyberpunk + Vapor Bootswatch themed overrides for Mapbox GL
   Scope: map container, controls, markers, clusters, popups, text/labels, transitions
   Palette:
   - Magenta (primary): #ff79c6
   - Cyan (secondary): #8be9fd
   - Neon cyan alt: #00e5ff
   - Neon magenta alt: #EA39B8
   - Dark bg: rgba(10, 10, 20, 0.7)
*/

/* =============== Map Container =============== */
#camp-map.map-container {
  position: relative;
  min-height: 280px;
  border-radius: 16px;
  overflow: hidden; /* rounds the map canvas */
  background: #0a0a14;
  /* Soft neon glow using cyan/magenta */
  box-shadow:
    0 0 0 1px rgba(139, 233, 253, 0.25),
    0 10px 30px rgba(234, 57, 184, 0.25),
    0 0 40px rgba(0, 229, 255, 0.15);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 420ms ease-out, transform 420ms ease-out, box-shadow 240ms ease-out;
}

#camp-map.map-container.is-mounted {
  opacity: 1;
  transform: translateY(0);
}

/* Subtle neon grid overlay: non-interactive */
#camp-map.map-container::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(234, 57, 184, 0.06), transparent 60%),
    radial-gradient(800px 600px at 90% 30%, rgba(0, 229, 255, 0.06), transparent 60%),
    linear-gradient(
      to bottom right,
      rgba(139, 233, 253, 0.025),
      rgba(255, 121, 198, 0.025)
    ),
    repeating-linear-gradient(
      to right,
      rgba(139, 233, 253, 0.06) 0 1px,
      rgba(255, 255, 255, 0) 1px 24px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(234, 57, 184, 0.06) 0 1px,
      rgba(255, 255, 255, 0) 1px 24px
    );
  mix-blend-mode: screen;
}

/* When map fails to load */
#camp-map.map-unavailable {
  background: repeating-linear-gradient(45deg, #141422, #141422 10px, #10101a 10px, #10101a 20px);
  box-shadow: inset 0 0 0 2px rgba(255, 121, 198, 0.25), inset 0 0 60px rgba(234, 57, 184, 0.15);
  min-height: 140px;
}

/* =============== Controls =============== */
/* Group container with blurred glass + rounded */
.mapboxgl-ctrl-group {
  background: rgba(10, 10, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(139, 233, 253, 0.25);
  box-shadow: 0 6px 20px rgba(0, 229, 255, 0.2), 0 0 0 2px rgba(234, 57, 184, 0.08) inset;
  border-radius: 12px;
  overflow: hidden;
}

.mapboxgl-ctrl button {
  background: transparent;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #8be9fd;
  border-radius: 10px;
  transition: color 160ms ease, box-shadow 160ms ease, transform 80ms ease, border-color 160ms ease, background 160ms ease;
  border: 1px solid transparent;
}

.mapboxgl-ctrl button:hover {
  color: #00e5ff;
  border-color: rgba(0, 229, 255, 0.6);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.4), 0 0 1px rgba(0,0,0,0.4) inset;
}

.mapboxgl-ctrl button:active {
  transform: translateY(1px) scale(0.98);
}

/* Replace default icons using SVG masks */
.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon,
.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon,
.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon,
.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
  background: none !important;
  width: 18px;
  height: 18px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: currentColor;
}

/* Icons as data-URI masks */
.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300e5ff"><path d="M11 11V6h2v5h5v2h-5v5h-2v-5H6v-2z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300e5ff"><path d="M11 11V6h2v5h5v2h-5v5h-2v-5H6v-2z"/></svg>');
}
.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300e5ff"><path d="M6 11h12v2H6z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300e5ff"><path d="M6 11h12v2H6z"/></svg>');
}
.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%2300e5ff" d="M11 2h2v3.06A7 7 0 0 1 19.94 11H23v2h-3.06A7 7 0 0 1 13 19.94V23h-2v-3.06A7 7 0 0 1 4.06 13H1v-2h3.06A7 7 0 0 1 11 5.06zM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%2300e5ff" d="M11 2h2v3.06A7 7 0 0 1 19.94 11H23v2h-3.06A7 7 0 0 1 13 19.94V23h-2v-3.06A7 7 0 0 1 4.06 13H1v-2h3.06A7 7 0 0 1 11 5.06zM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/></svg>');
}
.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%238be9fd" d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm3.89 8.11-2.12 5.3a1 1 0 0 1-.58.58l-5.3 2.12 2.12-5.3a1 1 0 0 1 .58-.58l5.3-2.12z"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%238be9fd" d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm3.89 8.11-2.12 5.3a1 1 0 0 1-.58.58l-5.3 2.12 2.12-5.3a1 1 0 0 1 .58-.58l5.3-2.12z"/></svg>');
}

/* =============== Markers =============== */
/* Base neon circle pin; use as custom HTML marker */
.neon-marker {
  --nm-size: 18px;
  --nm-cyan: #8be9fd;
  --nm-magenta: #ff79c6;
  width: var(--nm-size);
  height: var(--nm-size);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--nm-cyan), var(--nm-magenta));
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.85) inset,
    0 0 14px rgba(139, 233, 253, 0.75),
    0 0 26px rgba(234, 57, 184, 0.55);
  border: 1px solid rgba(139, 233, 253, 0.4);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, filter 200ms ease-out;
  cursor: pointer;
}

.neon-marker:hover {
  transform: scale(1.12);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.95) inset,
    0 0 22px rgba(139, 233, 253, 0.9),
    0 0 36px rgba(234, 57, 184, 0.65);
}

/* Selected marker with pulsating glow */
.neon-marker--selected {
  transform: scale(1.25);
  animation: neon-pulse 1.6s ease-in-out infinite;
}

@keyframes neon-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.85) inset,
      0 0 14px rgba(139, 233, 253, 0.75),
      0 0 26px rgba(234, 57, 184, 0.55);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 1) inset,
      0 0 28px rgba(139, 233, 253, 0.95),
      0 0 48px rgba(234, 57, 184, 0.75);
  }
}

/* =============== Clusters (if/when implemented) =============== */
/* These classes can be applied to HTML-based cluster elements; for Mapbox cluster layers, use paint properties in JS. */
.cluster-badge {
  --cb-size: 36px;
  width: var(--cb-size);
  height: var(--cb-size);
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #8be9fd, #ff79c6);
  color: #fff;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.6), 0 0 10px rgba(139, 233, 253, 0.6);
  display: grid;
  place-items: center;
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.6), 0 0 44px rgba(234, 57, 184, 0.45);
  border: 1px solid rgba(255,255,255,0.6);
}

/* =============== Popups =============== */
.mapboxgl-popup {
  /* Slight outward glow */
  filter: drop-shadow(0 12px 24px rgba(0, 229, 255, 0.18)) drop-shadow(0 0 18px rgba(234, 57, 184, 0.12));
}

.mapboxgl-popup-content {
  background: rgba(10, 10, 20, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 14px;
  border: 1px solid rgba(139, 233, 253, 0.5);
  color: #eaeaea;
  padding: 10px 12px;
  box-shadow: 0 0 0 1px rgba(255, 121, 198, 0.35) inset, 0 0 22px rgba(0, 229, 255, 0.18) inset;
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}

.mapboxgl-popup-tip {
  border-top-color: rgba(10, 10, 20, 0.78) !important;
  border-bottom-color: rgba(10, 10, 20, 0.78) !important;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.4));
}

/* Typography inside popup */
.popup-content .fw-bold {
  color: #8be9fd;
  text-shadow: 0 0 6px rgba(139, 233, 253, 0.6);
}

.popup-content .text-muted {
  color: #c9c9c9 !important;
}

.popup-content a {
  color: #ff79c6;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: text-shadow 160ms ease, color 160ms ease;
}

.popup-content a:hover {
  color: #ff8ad1;
  text-shadow: 0 0 8px rgba(255, 121, 198, 0.7);
}

/* =============== Mapbox Attribution & Logo =============== */
.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
  background: rgba(10, 10, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #bfc7cf;
  border: 1px solid rgba(139, 233, 253, 0.2);
  border-radius: 10px;
}
.mapboxgl-ctrl.mapboxgl-ctrl-attrib a { color: #8be9fd; }
.mapboxgl-ctrl.mapboxgl-ctrl-attrib a:hover { color: #00e5ff; text-shadow: 0 0 6px rgba(0, 229, 255, 0.6); }

.mapboxgl-ctrl-logo { filter: hue-rotate(200deg) saturate(1.2) brightness(0.9); }

/* =============== Misc =============== */
/* Improve canvas rounding bleed */
#camp-map.map-container .mapboxgl-canvas {
  border-radius: inherit;
}

/* ========================
   THEME VARIANTS
   Apply one of the following classes to #camp-map.map-container:
   - .map-theme--violet
   - .map-theme--aqua
   - .map-theme--magenta
   - .map-theme--matrix
   These tweak overlay hues, canvas filters, marker accents, and popup tints.
   ======================== */

/* Violet (default-like, cool cyan + purple) */
#camp-map.map-container.map-theme--violet .mapboxgl-canvas, #camps-cluster-map.map-container.map-theme--violet .mapboxgl-canvas, #camps-cluster-map.map-container.map-theme--violet .maplibregl-canvas { filter: hue-rotate(0deg) saturate(1.1) contrast(1.05); }
#camp-map.map-container.map-theme--violet::after, #camps-cluster-map.map-container.map-theme--violet::after {
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(122, 60, 255, 0.08), transparent 60%),
    radial-gradient(800px 600px at 90% 30%, rgba(139, 233, 253, 0.08), transparent 60%),
    linear-gradient(to bottom right, rgba(139, 233, 253, 0.03), rgba(122, 60, 255, 0.03)),
    repeating-linear-gradient(to right, rgba(139, 233, 253, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 24px),
    repeating-linear-gradient(to bottom, rgba(122, 60, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 24px);
}
#camp-map.map-container.map-theme--violet .neon-marker { --nm-cyan:#8be9fd; --nm-magenta:#7a3cff; }
#camp-map.map-container.map-theme--violet .popup-content .fw-bold { color:#8be9fd; }

/* Aqua (teal/cyan emphasis) */
#camp-map.map-container.map-theme--aqua .mapboxgl-canvas, #camps-cluster-map.map-container.map-theme--aqua .mapboxgl-canvas, #camps-cluster-map.map-container.map-theme--aqua .maplibregl-canvas { filter: hue-rotate(-20deg) saturate(1.25) contrast(1.08) brightness(0.98); }
#camp-map.map-container.map-theme--aqua::after, #camps-cluster-map.map-container.map-theme--aqua::after {
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(0, 229, 255, 0.12), transparent 60%),
    radial-gradient(800px 600px at 90% 30%, rgba(11, 205, 244, 0.10), transparent 60%),
    linear-gradient(to bottom right, rgba(0, 229, 255, 0.05), rgba(11, 205, 244, 0.04)),
    repeating-linear-gradient(to right, rgba(0, 229, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 22px),
    repeating-linear-gradient(to bottom, rgba(11, 205, 244, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 22px);
}
#camp-map.map-container.map-theme--aqua .neon-marker { --nm-cyan:#00e5ff; --nm-magenta:#09fbd3; }
#camp-map.map-container.map-theme--aqua .popup-content .fw-bold { color:#00e5ff; }

/* Magenta (pink neon emphasis) */
#camp-map.map-container.map-theme--magenta .mapboxgl-canvas, #camps-cluster-map.map-container.map-theme--magenta .mapboxgl-canvas, #camps-cluster-map.map-container.map-theme--magenta .maplibregl-canvas { filter: hue-rotate(20deg) saturate(1.3) contrast(1.1); }
#camp-map.map-container.map-theme--magenta::after, #camps-cluster-map.map-container.map-theme--magenta::after {
  background:
    radial-gradient(1200px 800px at 15% 15%, rgba(255, 121, 198, 0.12), transparent 60%),
    radial-gradient(800px 600px at 85% 40%, rgba(234, 57, 184, 0.12), transparent 60%),
    linear-gradient(to bottom right, rgba(255, 121, 198, 0.05), rgba(234, 57, 184, 0.04)),
    repeating-linear-gradient(to right, rgba(255, 121, 198, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 22px),
    repeating-linear-gradient(to bottom, rgba(234, 57, 184, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 22px);
}
#camp-map.map-container.map-theme--magenta .neon-marker { --nm-cyan:#ff79c6; --nm-magenta:#ff4fcf; }
#camp-map.map-container.map-theme--magenta .popup-content .fw-bold { color:#ff79c6; }

/* Matrix (green cyber grid) */
#camp-map.map-container.map-theme--matrix .mapboxgl-canvas, #camps-cluster-map.map-container.map-theme--matrix .mapboxgl-canvas, #camps-cluster-map.map-container.map-theme--matrix .maplibregl-canvas { filter: hue-rotate(130deg) saturate(1.2) contrast(1.05) brightness(0.95); }
#camp-map.map-container.map-theme--matrix::after, #camps-cluster-map.map-container.map-theme--matrix::after {
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(0, 255, 153, 0.10), transparent 60%),
    radial-gradient(800px 600px at 90% 30%, rgba(0, 255, 102, 0.08), transparent 60%),
    linear-gradient(to bottom right, rgba(0, 255, 153, 0.04), rgba(0, 255, 102, 0.03)),
    repeating-linear-gradient(to right, rgba(0, 255, 153, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 24px),
    repeating-linear-gradient(to bottom, rgba(0, 255, 102, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 24px);
}
#camp-map.map-container.map-theme--matrix .neon-marker { --nm-cyan:#00ff99; --nm-magenta:#39ff14; }
#camp-map.map-container.map-theme--matrix .popup-content .fw-bold { color:#00ff99; }