/* ============================================================
   GLOW THEME – Custom Styles & Neon Glow Effects
   Matches Cheat Pro structure (custom.css slot)
============================================================ */

:root {
  --glow-accent: rgba(var(--cl-accent), 1);
  --glow-accent-soft: rgba(var(--cl-accent), 0.35);
  --glow-accent-muted: rgba(var(--cl-accent), 0.15);
  --glow-border: rgba(var(--cl-accent), 0.25);
  --glow-border-strong: rgba(var(--cl-accent), 0.55);
  --glow-text: rgba(var(--cl-t-primary), 1);
  --glow-text-muted: rgba(var(--cl-t-primary), 0.6);
}

/* ── Global glow utilities ── */
.glow-border {
  border: 1px solid var(--glow-border);
  box-shadow:
    0 0 12px var(--glow-accent-muted),
    inset 0 0 12px rgba(var(--cl-accent), 0.05);
}

.glow-border-strong {
  border: 1px solid var(--glow-border-strong);
  box-shadow:
    0 0 20px var(--glow-accent-soft),
    0 0 40px rgba(var(--cl-accent), 0.1);
}

.glow-text {
  text-shadow:
    0 0 8px var(--glow-accent-soft),
    0 0 16px rgba(var(--cl-accent), 0.2);
}

.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  0% {
    box-shadow: 0 0 8px var(--glow-accent-muted);
  }
  100% {
    box-shadow:
      0 0 20px var(--glow-accent-soft),
      0 0 40px rgba(var(--cl-accent), 0.15);
  }
}

@keyframes textGlow {
  0% {
    text-shadow:
      0 0 8px var(--glow-accent-soft),
      0 0 16px rgba(var(--cl-accent), 0.2);
  }
  100% {
    text-shadow:
      0 0 16px var(--glow-accent-soft),
      0 0 32px rgba(var(--cl-accent), 0.35),
      0 0 48px rgba(var(--cl-accent), 0.15);
  }
}

/* ── Component cards ── */
.component .border-white\/5,
.component [class*="border-white/5"] {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.component .border-white\/5:hover,
.component [class*="border-white/5"]:hover {
  border-color: var(--glow-border) !important;
  box-shadow: 0 0 18px var(--glow-accent-muted);
}

/* ── Product cards ── */
.component .group:hover {
  box-shadow: 0 0 24px var(--glow-accent-muted);
}

/* ── Navbar glow line ── */
header.sticky,
header.sticky-top {
  position: relative;
}

header.sticky::after,
header.sticky-top::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 60%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--glow-accent-soft) 45%,
    rgba(var(--cl-accent), 0.8) 70%,
    transparent 100%
  );
  box-shadow: 0 0 12px var(--glow-accent-soft);
  pointer-events: none;
}

/* ── Footer glow ── */
.component#footer,
footer,
.footer {
  position: relative;
}

.component#footer::before,
footer::before,
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 65%;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--glow-accent-soft) 45%,
    rgba(var(--cl-accent), 0.9) 70%,
    transparent 100%
  );
  box-shadow: 0 0 20px var(--glow-accent-soft);
}

/* ── Buttons with neon glow ── */
button.bg-accent-500,
a.bg-accent-500,
.btn-primary,
[class*="bg-accent-500"]:not([class*="bg-accent-500/"]) {
  box-shadow: 0 0 16px var(--glow-accent-muted);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

button.bg-accent-500:hover,
a.bg-accent-500:hover,
.btn-primary:hover {
  box-shadow:
    0 0 24px var(--glow-accent-soft),
    0 0 48px rgba(var(--cl-accent), 0.15);
}

/* ── Outline buttons ── */
.border-accent-500 {
  box-shadow: 0 0 8px rgba(var(--cl-accent), 0.1);
}

.border-accent-500:hover {
  box-shadow:
    0 0 16px var(--glow-accent-muted),
    inset 0 0 12px rgba(var(--cl-accent), 0.05);
}

/* ── Hero section glow ── */
.component [class*="blur-"][class*="bg-accent"] {
  filter: blur(200px);
  opacity: 0.6;
}

.component h1 {
  animation: textGlow 4s ease-in-out infinite alternate;
}

/* ── Input / form focus glow ── */
input:focus,
textarea:focus,
select:focus,
.focus-within\:ring-accent-500:focus-within {
  box-shadow: 0 0 12px var(--glow-accent-muted) !important;
}

/* ── Status / feedback cards ── */
.component .rounded-xl,
.component .rounded-lg {
  transition: box-shadow 0.3s ease;
}

/* ── Announcement bar glow ── */
.component[data-component-id] .bg-accent-500\/10 {
  box-shadow: inset 0 -1px 0 var(--glow-border);
}

/* ── Scrollbar glow accent ── */
::-webkit-scrollbar-thumb {
  background: rgba(var(--cl-accent), 0.4);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--cl-accent), 0.6);
  box-shadow: 0 0 6px var(--glow-accent-soft);
}

/* ── Modal backdrop glow ── */
[class*="backdrop-blur"] {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ── Vouches card glow ── */
#vouchesContainer .vouches-card {
  box-shadow: 0 0 12px rgba(var(--cl-accent), 0.08);
}

#vouchesContainer .vouches-card:hover {
  box-shadow:
    0 0 20px var(--glow-accent-muted),
    0 0 40px rgba(var(--cl-accent), 0.08);
  border-color: var(--glow-border) !important;
}