/* =========================================================
   CYBERPUNK.CSS — final layer, overrides all other modules
   Scope: primarily .show-page elements on show.ejs
   ========================================================= */

/* =========================
   GLOBAL KEYFRAMES (once)
   ========================= */
@keyframes textShimmer {
  0% {
    background-position: 0 center;
  }
  100% {
    background-position: 220% center;
  }
}
@keyframes btn-shimmer {
  0% {
    background-position: 0 50%;
  }
  100% {
    background-position: 320% 50%;
  }
}
@keyframes outlineShimmer {
  0% {
    background-position: 0 center;
  }
  100% {
    background-position: 300% center;
  }
}
@keyframes borderShimmer {
  0% {
    background-position: 0 center;
  }
  100% {
    background-position: 300% center;
  }
}
@keyframes headerShimmer {
  0% {
    background-position: 0 center;
  }
  100% {
    background-position: 220% center;
  }
}
@keyframes rippleExpand {
  to {
    transform: scale(8);
    opacity: 0;
  }
}

/* =========================================================
   LOGIN LINK — SHIMMER TEXT
   Used in show.ejs alert → <a class="login-highlight">
   ========================================================= */
.login-highlight {
  position: relative;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(90deg, #ff4fcf, #0bcdf4, #ff4fcf);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow:
    0 0 6px rgba(255, 79, 207, 0.6),
    0 0 10px rgba(11, 205, 244, 0.4);
  animation: textShimmer 2.2s linear infinite;
}
.login-highlight:hover {
  text-shadow:
    0 0 10px rgba(255, 79, 207, 0.85),
    0 0 18px rgba(11, 205, 244, 0.65);
}

/* =========================================================
   FLASH MESSAGES — Neon variants
   (Lightweight, safe to keep)
   ========================================================= */
.alert-success {
  /* Dark violet panel for normal flash */
  background: rgba(26, 16, 51, 0.9); /* #1a1033 */
  border: 1px solid rgba(122, 60, 255, 0.65);
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(139, 233, 253, 0.35);
  box-shadow:
    0 0 18px rgba(122, 60, 255, 0.35),
    inset 0 0 22px rgba(122, 60, 255, 0.12);
  border-radius: 1rem;
}
.alert-danger {
  /* Dark magenta panel for errors */
  background: rgba(58, 10, 43, 0.9); /* dark magenta */
  border: 1px solid rgba(255, 79, 207, 0.7);
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255, 79, 207, 0.45);
  box-shadow:
    0 0 18px rgba(255, 79, 207, 0.35),
    inset 0 0 22px rgba(255, 79, 207, 0.12);
  border-radius: 1rem;
}
.alert-info {
  background: rgba(15, 20, 35, 0.85);
  border: 1px solid #7a3cff;
  color: #e6f7ff;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(122, 60, 255, 0.5);
  box-shadow:
    0 0 15px rgba(122, 60, 255, 0.3),
    inset 0 0 20px rgba(122, 60, 255, 0.1);
  border-radius: 1rem;
}
.alert-warning {
  background: rgba(35, 25, 10, 0.85);
  border: 1px solid #ffae00;
  color: #fff8e6;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(255, 174, 0, 0.6);
  box-shadow:
    0 0 15px rgba(255, 174, 0, 0.3),
    inset 0 0 20px rgba(255, 174, 0, 0.1);
  border-radius: 1rem;
}

/* =========================================================
   BUTTON SYSTEM — works with buttons.css or standalone
   Used in show.ejs: .btn-cyberpunk, .btn-cyberpunk-danger,
   .btn-cyberpunk-outline (+ ripple)
   ========================================================= */

/* =========================================================
   MAP THEME LINKS — Shimmer text controls (uniform sizing)
   Reuses textShimmer like .login-highlight, with per-theme colors
   ========================================================= */
.theme-links {
  --theme-link-minw: 72px;
}
.theme-link {
  display: inline-block;
  min-width: var(--theme-link-minw);
  text-align: center;
  font-weight: 800;
  text-decoration: none;
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: textShimmer 2.4s linear infinite;
  padding: 2px 6px;
  line-height: 1.25;
  border-radius: 0.25rem;
  transition:
    text-shadow 0.2s ease,
    transform 0.1s ease;
  cursor: pointer;
}
.theme-link:hover,
.theme-link:focus {
  outline: none;
  transform: translateY(-1px);
}
.theme-link.active {
  text-shadow:
    0 0 10px rgba(11, 205, 244, 0.55),
    0 0 18px rgba(255, 79, 207, 0.45);
}
/* Color variants matching map themes */
.theme-link--violet {
  background-image: linear-gradient(90deg, #7a3cff, #8be9fd, #7a3cff);
  text-shadow:
    0 0 6px rgba(122, 60, 255, 0.5),
    0 0 10px rgba(139, 233, 253, 0.4);
}
.theme-link--aqua {
  background-image: linear-gradient(90deg, #00e5ff, #0bcdf4, #00e5ff);
  text-shadow:
    0 0 6px rgba(11, 205, 244, 0.6),
    0 0 10px rgba(0, 229, 255, 0.45);
}
.theme-link--magenta {
  background-image: linear-gradient(90deg, #ff4fcf, #ff79c6, #ff4fcf);
  text-shadow:
    0 0 6px rgba(255, 79, 207, 0.65),
    0 0 10px rgba(255, 121, 198, 0.45);
}
.theme-link--matrix {
  background-image: linear-gradient(90deg, #00ff99, #39ff14, #00ff99);
  text-shadow:
    0 0 6px rgba(0, 255, 153, 0.6),
    0 0 10px rgba(57, 255, 20, 0.45);
}

/* =========================================================
   CYBER FRAME — Shimmer border + neon glow (picture frame)
   Apply to carousel container or image wrapper
   ========================================================= */
.cyber-frame {
  position: relative;
  border: 6px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(0deg, rgba(11, 13, 25, 1), rgba(11, 13, 25, 1)) padding-box,
    linear-gradient(120deg, #ff4fcf, #0bcdf4, #7a3cff, #ff4fcf) border-box;
  background-size:
    100% 100%,
    320% 320%;
  animation: borderShimmer 6s linear infinite;
  box-shadow:
    0 0 30px rgba(11, 205, 244, 0.25),
    0 0 54px rgba(255, 79, 207, 0.2);
  overflow: hidden;
}
.cyber-frame .img-hero-cover,
.cyber-frame .carousel-item img {
  border-radius: 12px; /* inner soft radius */
}

/* Ken Burns effect */
@keyframes kenburns {
  0% {
    transform: scale(1.05) translate(0, 0);
  }
  100% {
    transform: scale(1.18) translate(2%, 2%);
  }
}
/* Animate only the currently visible slide for performance */
.cyber-frame .carousel-item.active .img-hero-cover,
.cyber-frame .carousel-item.active img {
  animation: kenburns 18s ease-in-out infinite alternate;
  will-change: transform;
}
/* Fallback single image */
.cyber-frame > .img-hero-cover {
  animation: kenburns 18s ease-in-out infinite alternate;
  display: block;
}

/* Base reset for our variants (show page only) */
.show-page .btn.btn-cyberpunk,
.show-page .btn.btn-cyberpunk-outline {
  position: relative;
  border-radius: 0.9rem;
  font-weight: 700;
  transition:
    transform 0.15s ease,
    filter 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
  overflow: hidden;
}

/* SOLID / GRADIENT (Submit, Delete) */
.show-page .btn.btn-cyberpunk {
  color: #fff !important;
  border: 1px solid #ff4fcf !important;
  background-image: linear-gradient(
    90deg,
    #7a3cff,
    #ff2fb9,
    #0bcdf4,
    #7a3cff
  ) !important;
  background-size: 320% 100% !important;
  background-repeat: no-repeat;
  animation: btn-shimmer 4s linear infinite !important;
  box-shadow:
    0 6px 18px rgba(122, 60, 255, 0.35),
    0 0 24px rgba(255, 47, 185, 0.28) inset;
  will-change: background-position;
}
/* Danger retains shimmer but hot pink/red ramp */
.show-page .btn.btn-cyberpunk.btn-cyberpunk-danger {
  border-color: #ff3b6b !important;
  background-image: linear-gradient(
    90deg,
    #ff3b6b,
    #ff0062,
    #ff3b6b
  ) !important;
  background-size: 320% 100% !important;

}

/* Solid hover/focus/active */
.show-page .btn.btn-cyberpunk:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 10px 26px rgba(122, 60, 255, 0.45),
    0 0 28px rgba(255, 47, 185, 0.35) inset;
}
.show-page .btn.btn-cyberpunk:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(11, 205, 244, 0.45),
    0 10px 26px rgba(122, 60, 255, 0.45),
    0 0 28px rgba(255, 47, 185, 0.35) inset;
}
.show-page .btn.btn-cyberpunk:active {
  transform: translateY(0);
  filter: brightness(1);
}

/* OUTLINE: TRUE SHIMMER BORDER */
.show-page .btn.btn-cyberpunk-outline {
  z-index: 0;
  color: #ffffff !important;
  font-weight: 700;
  background: transparent !important;
  border: 2px solid transparent !important;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
/* Masked gradient ring (Chromium/Safari) */
 .show-page .btn.btn-cyberpunk-outline::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(90deg, #ff4fcf, #0bcdf4, #ff4fcf);
    background-size: 300% 100%;
    animation: outlineShimmer 4s linear infinite;
    /* noinspection CssInvalidPropertyValue */
    -webkit-mask:
            linear-gradient(to right, #fff 0%, #fff 100%) content-box,
            linear-gradient(to right, #fff 0%, #fff 100%);
    /* noinspection CssInvalidPropertyValue */
    -webkit-mask-composite: xor;
    mask:
            linear-gradient(to right, #fff 0%, #fff 100%) content-box,
            linear-gradient(to right, #fff 0%, #fff 100%);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}
/* Hover/focus effects */
.show-page .btn.btn-cyberpunk-outline:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 18px rgba(255, 79, 207, 0.35),
    0 0 24px rgba(11, 205, 244, 0.25);
}
.show-page .btn.btn-cyberpunk-outline:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 79, 207, 0.35),
    0 0 18px rgba(11, 205, 244, 0.25);
}
.show-page .btn.btn-cyberpunk-outline:active {
  transform: translateY(0);
}

/* Firefox-friendly fallback (no mask-composite support) */
@supports not ((-webkit-mask: none) or (mask-composite: exclude)) {
  .show-page .btn.btn-cyberpunk-outline {
    border: 2px solid transparent !important;
    background:
      linear-gradient(#0d0d15, #0d0d15) padding-box,
      linear-gradient(90deg, #ff4fcf, #0bcdf4, #ff4fcf) border-box !important;
    background-size:
      100% 100%,
      300% 100%;
    background-repeat: no-repeat;
    background-clip: padding-box, border-box;
    animation: outlineShimmer 4s linear infinite;
  }
  .show-page .btn.btn-cyberpunk-outline::before {
    display: none;
  }
}

/* RIPPLE (JS in show.ejs appends <span.ripple>) */
.show-page .ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(255, 79, 207, 0.55);
  border-radius: 50%;
  transform: scale(0);
  animation: rippleExpand 0.6s ease-out;
  pointer-events: none;
}

/* =========================================================
   BADGES — Price & Author (both used on show.ejs)
   ========================================================= */

/* PRICE — stable shimmer fill + outline ring */
.show-page .price-badge {
  position: relative;
  z-index: 0;
  color: #fff !important;
  border: 2px solid transparent !important;
  background: linear-gradient(
    90deg,
    #7a3cff,
    #ff2fb9,
    #0bcdf4,
    #7a3cff,
    #ff2fb9
  ) !important;
  background-size: 320% 100% !important;
  background-repeat: no-repeat;
  animation: btn-shimmer 4s linear infinite !important;
  box-shadow:
    0 6px 18px rgba(122, 60, 255, 0.35),
    0 0 24px rgba(255, 47, 185, 0.28) inset;
  will-change: background-position;
}
/* Shimmer border ring */
.show-page .price-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(90deg, #ff4fcf, #0bcdf4, #ff4fcf);
    background-size: 300% 100%;
    animation: outlineShimmer 4s linear infinite;
    /* noinspection CssInvalidPropertyValue */
    -webkit-mask:
            linear-gradient(to right, #fff 0%, #fff 100%) content-box,
            linear-gradient(to right, #fff 0%, #fff 100%);
    /* noinspection CssInvalidPropertyValue */
    -webkit-mask-composite: xor;
    mask:
            linear-gradient(to right, #fff 0%, #fff 100%) content-box,
            linear-gradient(to right, #fff 0%, #fff 100%);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

/* AUTHOR BADGE polish */
.show-page .author-badge {
  background: linear-gradient(
    180deg,
    rgba(160, 112, 255, 0.12),
    rgba(160, 112, 255, 0.08)
  ) !important;
  border: 1px solid rgba(160, 112, 255, 0.45) !important;
  color: #c0f7ff !important;
  box-shadow: 0 0 10px rgba(160, 112, 255, 0.25);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.show-page .author-badge .fa-user {
  --fa-primary-color: #dd0ed6;
  --fa-secondary-color: #07c3f2;
  --fa-secondary-opacity: 1;
}

/* =========================================================
   NEON CONTAINERS — shimmer border shells
   Used on show.ejs for Location + Reviews headers:
   <div class="card-header ... neon-container neon-location"> ... </div>
   <div class="neon-container neon-reviews card-header ..."> ... </div>
   ========================================================= */

/* =========================================================
   CYBERPUNK — SHIMMER BORDER CONTAINERS
   For Location & Reviews wrappers
   ========================================================= */

.show-page .neon-container {
  position: relative;
  background: transparent !important;
  padding: 1.2rem 1.2rem 0.9rem;
}

.show-page .neon-container::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff4fcf, #0bcdf4, #ff4fcf);
  background-size: 300% 100%;
  animation: borderShimmer 6s linear infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes borderShimmer {
  0% {
    background-position: 0 center;
  }
  100% {
    background-position: 300% center;
  }
}

/* If a Bootstrap card header slipped in, nuke its bg inside the neon container */
.show-page .neon-container .card-header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Location / Reviews header bars become transparent; border shimmer stays on the container */
.show-page .neon-container .neon-header--location,
.show-page .neon-container .neon-header--reviews {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0.5rem 0 !important;
  margin: 0 !important;
}

/* Restore/force shimmer on the header text itself */
.show-page .neon-container .neon-header--location h2,
.show-page .neon-container .neon-header--reviews h2 {
  background: linear-gradient(90deg, #ff4fcf, #0bcdf4, #ff4fcf);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: headerShimmer 3s linear infinite;
  text-shadow:
    0 0 6px rgba(255, 79, 207, 0.55),
    0 0 12px rgba(11, 205, 244, 0.45);
}

@keyframes headerShimmer {
  0% {
    background-position: 0 center;
  }
  100% {
    background-position: 220% center;
  }
}

/* Keep your FA duotone location icon vibrant over transparency */
.show-page .neon-container .neon-header--location .fa-location-dot {
  filter: drop-shadow(0 0 8px rgba(11, 205, 244, 0.35));
}

/* =========================================================
   CYBERPUNK — HEADER UNDERLINE + LAYOUT POLISH
   Applies to both Reviews and Location headers
   ========================================================= */

/* Make header content line up: icon + text baseline */
.show-page .neon-container.neon-location h2,
.show-page .neon-container.neon-reviews h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* icon/text spacing */
  margin: 0;
  line-height: 1.2;
}

/* Animated neon underline shared by both headers */
@keyframes headerUnderline {
  0% {
    background-position: 0 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.show-page .neon-container.neon-location,
.show-page .neon-container.neon-reviews {
  padding-bottom: 1.15rem; /* creates space for the underline */
}

/* Draw the underline inside the shimmer frame */
.show-page .neon-container.neon-location::after,
.show-page .neon-container.neon-reviews::after {
  content: "";
  position: absolute;
  left: 12px; /* inset matches your card padding rhythm */
  right: 12px;
  bottom: 0.35rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff4fcf, #0bcdf4, #ff4fcf);
  background-size: 200% 100%;
  animation: headerUnderline 6s linear infinite;
  box-shadow:
    0 0 8px rgba(11, 205, 244, 0.25),
    0 0 10px rgba(255, 79, 207, 0.2);
  opacity: 0.9; /* subtle, not overpowering */
}

/* Reviews count pill to match the theme */
.badge-neon {
  background: rgba(10, 10, 20, 0.85);
  color: #e6f7ff;
  border: 1px solid #0bcdf4;
  font-weight: 700;
  box-shadow:
    0 0 10px rgba(11, 205, 244, 0.25),
    inset 0 0 16px rgba(11, 205, 244, 0.08);
}

/* Optional: ensure the pill doesn’t fight the shimmer border ring */
.show-page .card-header .badge-neon {
  margin-left: 0.25rem;
}

/* Softer review item divider (replaces harsh solid line) */
.show-page .card-body .border-bottom {
  border-bottom: none !important;
  position: relative;
  padding-bottom: 1rem !important;
  margin-bottom: 1rem !important;
}
.show-page .card-body .border-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 79, 207, 0.35),
    rgba(11, 205, 244, 0.35),
    transparent
  );
  filter: drop-shadow(0 0 4px rgba(11, 205, 244, 0.25));
}

/* Accessibility: reduce motion respectfully */
@media (prefers-reduced-motion: reduce) {
  .login-highlight,
  .show-page .btn.btn-cyberpunk,
  .show-page .btn.btn-cyberpunk-outline,
  .show-page .price-badge,
  .show-page .neon-container::before,
  .show-page .neon-container.neon-location::after,
  .show-page .neon-container.neon-reviews::after {
    animation: none !important;
    transition: none !important;
    background-position: 0 0 !important;
  }
}
/* =========================================================
   CYBERPUNK MAP — holographic chrome for Mapbox on show.ejs
   ========================================================= */

/* Container: a subtle inner glow + holo sweep */
.show-page #camp-map {
  position: relative;
  isolation: isolate;
  border: 2px solid rgba(255, 79, 207, 0.25);
  border-radius: 0.9rem;
  box-shadow:
    0 0 22px rgba(11, 205, 244, 0.22),
    inset 0 0 40px rgba(255, 79, 207, 0.08);
  overflow: hidden;
  /* Ensure the map actually has space to render */
  min-height: 280px;
  height: clamp(280px, 40vh, 560px);
}

/* Graceful fallback appearance when map is unavailable */
.show-page #camp-map.map-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e6f7ff;
  background: rgba(12, 12, 20, 0.92);
  text-shadow: 0 0 6px rgba(11, 205, 244, 0.4);
}

/* Holographic sweep overlay */
.show-page #camp-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      120% 120% at -20% -20%,
      rgba(11, 205, 244, 0.1),
      transparent 60%
    ),
    linear-gradient(
      to right,
      rgba(255, 79, 207, 0.06),
      rgba(11, 205, 244, 0.06) 50%,
      rgba(255, 79, 207, 0.06)
    );
  mix-blend-mode: screen;
  animation: holoSweep 10s linear infinite;
  opacity: 0.7;
}
@keyframes holoSweep {
  0% {
    transform: translateX(-30%);
  }
  100% {
    transform: translateX(30%);
  }
}

/* Mapbox built-in UI: darker chrome + cyan focus */
.mapboxgl-ctrl-group {
  border-radius: 0.6rem;
  background-color: rgba(15, 15, 22, 0.85);
  box-shadow: 0 0 0 1px rgba(160, 112, 255, 0.25);
}
.mapboxgl-ctrl button:hover {
  background-color: rgba(122, 60, 255, 0.12);
}

/* Popups: glassy neon card */
.mapboxgl-popup-content {
  background: rgba(12, 12, 20, 0.92);
  color: #e6f7ff;
  border: 1px solid rgba(11, 205, 244, 0.35);
  border-radius: 0.75rem;
  box-shadow:
    0 0 16px rgba(11, 205, 244, 0.2),
    0 0 0 2px rgba(255, 79, 207, 0.08) inset;
}
.mapboxgl-popup-close-button {
  color: #0bcdf4;
}

/* Pulsing marker (CSS-driven) */
.cpunk-marker {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0bcdf4;
  box-shadow:
    0 0 10px rgba(11, 205, 244, 0.8),
    0 0 22px rgba(11, 205, 244, 0.4);
}
.cpunk-marker::after,
.cpunk-marker::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 79, 207, 0.65);
  filter: blur(1px);
  animation: pulse 2.2s ease-out infinite;
}
.cpunk-marker::before {
  inset: -12px;
  border-color: rgba(11, 205, 244, 0.55);
  animation-delay: 0.6s;
}
@keyframes pulse {
  0% {
    transform: scale(0.4);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    #camp-map::after,
    .cpunk-marker::after,
    .cpunk-marker::before {
        animation: none !important;
    }
}

/* =========================================================
   CYBERPUNK DANGER SLIDE BUTTON
   Shimmer outline + sliding fill + always-visible text
   ========================================================= */

.slide-button {
    position: relative;
    padding: 10px 20px;
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid transparent !important;
    border-radius: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    z-index: 0;
    transition:
            transform 0.15s ease,
            box-shadow 0.15s ease;
}

/* Shimmer border ring using mask composite */
.slide-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(90deg, #ff4fcf, #ff3b6b, #0bcdf4, #ff4fcf);
    background-size: 300% 100%;
    animation: outlineShimmer 4s linear infinite;
    /* noinspection CssInvalidPropertyValue */
    -webkit-mask:
            linear-gradient(to right, #fff 0%, #fff 100%) content-box,
            linear-gradient(to right, #fff 0%, #fff 100%);
    /* noinspection CssInvalidPropertyValue */
    -webkit-mask-composite: xor;
    mask:
            linear-gradient(to right, #fff 0%, #fff 100%) content-box,
            linear-gradient(to right, #fff 0%, #fff 100%);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

/* Sliding fill background */
.slide-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            90deg,
            #ff3b6b,
            #ff2fb9,
            #7a3cff,
            #ff3b6b,
            #ff2fb9
    );
    background-size: 200% 100%;
    transform: translateX(-100%);
    animation: slideFill 2s linear infinite;
    z-index: -1;
    border-radius: inherit;
}

/* Text content always on top */
.slide-button span,
.slide-button {
    position: relative;
    z-index: 2;
    color: #ffffff !important;
    text-shadow:
            0 0 6px rgba(255, 79, 207, 0.6),
            0 0 10px rgba(11, 205, 244, 0.4);
}

/* Hover effects - neon glow */
.slide-button:hover {
    transform: translateY(-2px);
    box-shadow:
            0 0 18px rgba(255, 79, 207, 0.35),
            0 0 24px rgba(11, 205, 244, 0.25);
}

.slide-button:hover span,
.slide-button:hover {
    text-shadow:
            0 0 10px rgba(255, 79, 207, 0.85),
            0 0 18px rgba(11, 205, 244, 0.65);
}

.slide-button:focus-visible {
    outline: none;
    box-shadow:
            0 0 0 3px rgba(255, 79, 207, 0.35),
            0 0 18px rgba(11, 205, 244, 0.25);
}

.slide-button:active {
    transform: translateY(0);
}

/* Firefox-friendly fallback (no mask-composite support) */
@supports not ((-webkit-mask: none) or (mask-composite: exclude)) {
    .slide-button {
        border: 2px solid transparent !important;
        background:
                linear-gradient(#0d0d15, #0d0d15) padding-box,
                linear-gradient(90deg, #ff4fcf, #ff3b6b, #0bcdf4, #ff4fcf) border-box !important;
        background-size:
                100% 100%,
                300% 100%;
        background-repeat: no-repeat;
        background-clip: padding-box, border-box;
        animation: outlineShimmer 4s linear infinite;
    }
    .slide-button::before {
        display: none;
    }
}

/* Inside-slide variant: danger-toned sliding fill for outline buttons (used on Delete) */
.inside-slide::after {
    background: linear-gradient(90deg, #ff3b6b, #ff0062, #ff3b6b, #ff2fb9) !important;
    background-size: 220% 100% !important;
}

/* Keyframes for sliding fill */
@keyframes slideFill {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .slide-button,
    .slide-button::before,
    .slide-button::after {
        animation: none !important;
        transition: none !important;
        background-position: 0 0 !important;
    }
}

/* =========================================================
   UNIFORM ACTION BUTTONS — shared sizing/centering
   Applies to card action groups on index/show pages
   ========================================================= */
.btn-responsive-group .btn,
.btn-responsive-group .slide-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  padding: 10px 20px;
  min-height: 42px;
  min-width: 110px;
  border-radius: 0.9rem;
}

/* Ensure slide-button content is centered consistently */
.slide-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* Equal-width action buttons within responsive groups */
.btn-responsive-group {
  width: 100%;
}
.btn-responsive-group > a.btn,
.btn-responsive-group > form {
  flex: 1 1 0;
}
.btn-responsive-group > a.btn {
  width: 100%;
}
.btn-responsive-group > form .btn {
  width: 100%;
}


/* Remove solid fill when using slide-button with solid cyberpunk variants */
.btn.btn-cyberpunk.slide-button,
.btn.btn-cyberpunk.btn-cyberpunk-danger.slide-button {
  background: transparent !important;
  background-image: none !important;
  /* keep subtle outer glow, drop inset */
  box-shadow: 0 6px 18px rgba(122, 60, 255, 0.35) !important;
}

/* Prevent buttons/glows from being clipped by card containers on narrow screens */
.index-page .card,
.show-page .card {
  overflow: visible;
}

/* =========================================================
   MAP STYLING - Cyberpunk themed map controls and themes
   ========================================================= */

/* Map container and theme classes */
#camps-cluster-map {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow:
    0 0 20px rgba(122, 60, 255, 0.3),
    inset 0 0 1px rgba(139, 233, 253, 0.2);
}

/* Theme-specific cluster colors */
.map-theme--violet .mapboxgl-popup,
.map-theme--violet .maplibregl-popup {
  --cluster-primary: #7a3cff;
  --cluster-secondary: #6f2dbd;
  --point-color: #8bfbfd;
}

.map-theme--aqua .mapboxgl-popup,
.map-theme--aqua .maplibregl-popup {
  --cluster-primary: #0bcdf4;
  --cluster-secondary: #0891b2;
  --point-color: #67e8f9;
}

.map-theme--magenta .mapboxgl-popup,
.map-theme--magenta .maplibregl-popup {
  --cluster-primary: #ff4fcf;
  --cluster-secondary: #e11d48;
  --point-color: #fbbf24;
}

.map-theme--matrix .mapboxgl-popup,
.map-theme--matrix .maplibregl-popup {
  --cluster-primary: #22c55e;
  --cluster-secondary: #16a34a;
  --point-color: #84cc16;
}

/* Cyberpunk Navigation Controls */
.mapboxgl-ctrl-group,
.maplibregl-ctrl-group {
  background: rgba(26, 16, 51, 0.9) !important;
  border: 1px solid rgba(122, 60, 255, 0.6) !important;
  border-radius: 0.5rem !important;
  box-shadow:
    0 0 15px rgba(122, 60, 255, 0.4),
    inset 0 0 10px rgba(122, 60, 255, 0.1) !important;
  backdrop-filter: blur(8px);
}

.mapboxgl-ctrl-group button,
.maplibregl-ctrl-group button {
  background: transparent !important;
  color: #8bfbfd !important;
  border: none !important;
  border-radius: 0.25rem !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

.mapboxgl-ctrl-group button:hover,
.maplibregl-ctrl-group button:hover {
  background: rgba(122, 60, 255, 0.2) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 10px rgba(139, 233, 253, 0.6),
    inset 0 0 8px rgba(122, 60, 255, 0.3) !important;
}

.mapboxgl-ctrl-group button:focus,
.maplibregl-ctrl-group button:focus {
  outline: none !important;
  box-shadow:
    0 0 0 2px rgba(139, 233, 253, 0.5),
    0 0 15px rgba(122, 60, 255, 0.6) !important;
}

/* Cyberpunk Popup Styling */
.neon-popup .mapboxgl-popup-content,
.neon-popup .maplibregl-popup-content {
  background: rgba(26, 16, 51, 0.95) !important;
  border: 1px solid rgba(122, 60, 255, 0.7) !important;
  border-radius: 0.75rem !important;
  color: #ffffff !important;
  box-shadow:
    0 0 20px rgba(122, 60, 255, 0.5),
    inset 0 0 15px rgba(122, 60, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  padding: 1rem !important;
}

.neon-popup .popup-title {
  color: #8bfbfd;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 8px rgba(139, 233, 253, 0.6);
}

.neon-popup .popup-subtitle {
  color: #a855f7;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

.neon-popup .popup-link a {
  color: #ff4fcf;
  text-decoration: none;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(255, 79, 207, 0.5);
  transition: all 0.3s ease;
}

.neon-popup .popup-link a:hover {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 79, 207, 0.8);
}

.neon-popup .mapboxgl-popup-tip,
.neon-popup .maplibregl-popup-tip {
  border-top-color: rgba(26, 16, 51, 0.95) !important;
}

/* Remove any remaining attribution */
.mapboxgl-ctrl-attrib,
.maplibregl-ctrl-attrib {
  display: none !important;
}

/* Scanline overlay fix - ensure it doesn't cover interactive elements */
.scanline-overlay {
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Ensure map controls are above scanlines */
.mapboxgl-ctrl-top-right,
.maplibregl-ctrl-top-right {
  z-index: 10 !important;
}

/* Map theme color buttons styling */
.theme-selector {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 5;
  display: flex;
  gap: 0.5rem;
  background: rgba(26, 16, 51, 0.9);
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(122, 60, 255, 0.6);
  box-shadow:
    0 0 15px rgba(122, 60, 255, 0.4),
    inset 0 0 10px rgba(122, 60, 255, 0.1);
  backdrop-filter: blur(8px);
}

.theme-btn {
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  background: transparent;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 0 6px currentColor;
}

.theme-btn.violet {
  color: #7a3cff;
  border-color: rgba(122, 60, 255, 0.3);
}

.theme-btn.aqua {
  color: #0bcdf4;
  border-color: rgba(11, 205, 244, 0.3);
}

.theme-btn.magenta {
  color: #ff4fcf;
  border-color: rgba(255, 79, 207, 0.3);
}

.theme-btn.matrix {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.3);
}

.theme-btn:hover,
.theme-btn.active {
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 10px currentColor,
    inset 0 0 5px rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}