/**
 * Glow Effect - Mouse-Tracking Glowing Border
 * ==============================================
 * Universal glowing border system. Two modes:
 *
 * 1. UNIVERSAL (.glow-card) - Works on any element, any page.
 *    Uses ::after pseudo-element with radial gradient mask.
 *    Just add .glow-card class to any box/card/section.
 *
 * 2. AUTH OVERLAY (.glow-capture > .glass-card) - Elaborate glow
 *    that also lights up inner elements (inputs, buttons, etc).
 *    Used on auth pages for the full glassmorphism experience.
 *
 * Both systems share a single toggle button (bottom-right)
 * with localStorage persistence.
 *
 * USAGE (Universal - any page):
 *   <div class="card glow-card">...</div>
 *
 * USAGE (Auth overlay):
 *   <div class="glow-capture">
 *     <div class="glass-card p-4">...</div>
 *   </div>
 *
 * BRAND COLORS:
 *   Primary glow: #fb923c (orange)
 *   Accent glow:  #ec4899 (pink)
 *
 * @version 2.0.0
 */

/* ==================== Glass Card (auth pages) ==================== */

.glass-card {
  background: rgba(15, 15, 35, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  animation: glassCardFadeIn 0.6s ease-out;
}

@keyframes glassCardFadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}


/* ==================== Universal Glow Card ==================== */

.glow-card {
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-opacity: 0;
  position: relative;
  overflow: visible;
}

.glow-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
  opacity: var(--glow-opacity);
  transition: opacity 0.3s ease;
  border: 2px solid #fb923c;
  box-shadow:
    0 0 15px rgba(251, 146, 60, 0.6),
    0 0 30px rgba(251, 146, 60, 0.3),
    0 0 60px rgba(236, 72, 153, 0.15),
    inset 0 0 15px rgba(251, 146, 60, 0.05);
  -webkit-mask: radial-gradient(
    circle 250px at var(--glow-x) var(--glow-y),
    black 0%, black 10%, transparent 60%
  );
  mask: radial-gradient(
    circle 250px at var(--glow-x) var(--glow-y),
    black 0%, black 10%, transparent 60%
  );
}

/* Light theme: softer glow intensity */
[data-bs-theme="light"] .glow-card::after {
  border-color: #fb923c;
  box-shadow:
    0 0 12px rgba(251, 146, 60, 0.4),
    0 0 24px rgba(251, 146, 60, 0.2),
    0 0 48px rgba(236, 72, 153, 0.1);
}


/* ==================== Glow Capture Container (auth pages) ==================== */

.glow-capture {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: 50px;
}


/* ==================== Glow Overlay (auth - auto-created by JS) ==================== */

.glow-overlay {
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-size: 400px;
  --glow-opacity: 0;
  position: absolute;
  inset: 0;
  padding: 50px;
  z-index: 20;
  pointer-events: none;
  user-select: none;
  opacity: var(--glow-opacity);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-mask: radial-gradient(
    circle var(--glow-size) at var(--glow-x) var(--glow-y),
    black 0%, black 10%, transparent 60%
  );
  mask: radial-gradient(
    circle var(--glow-size) at var(--glow-x) var(--glow-y),
    black 0%, black 10%, transparent 60%
  );
  transition: opacity 400ms ease;
}


/* ==================== Glowing Card Border (auth overlay) ==================== */

.glow-overlay .glass-card {
  animation: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 2px solid #fb923c !important;
  box-shadow:
    0 0 20px #fb923c,
    0 0 40px rgba(251, 146, 60, 0.4),
    0 0 80px rgba(236, 72, 153, 0.2),
    inset 0 0 20px rgba(251, 146, 60, 0.1) !important;
  overflow: visible !important;
}

.glow-overlay .glass-card::before {
  display: none !important;
}

/* Hide text/content in cloned overlay - keep only structure/borders */
.glow-overlay .glass-card * {
  color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-text-fill-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ==================== Glowing Form Inputs (auth overlay) ==================== */

.glow-overlay .form-control,
.glow-overlay .form-select,
.glow-overlay textarea.form-control {
  border: 1.5px solid #fb923c !important;
  box-shadow:
    0 0 15px #fb923c,
    0 0 30px rgba(251, 146, 60, 0.3),
    inset 0 0 10px rgba(251, 146, 60, 0.1) !important;
  background: transparent !important;
}


/* ==================== Glowing Input Groups (auth overlay) ==================== */

.glow-overlay .input-group-text {
  border: 1.5px solid #fb923c !important;
  box-shadow:
    0 0 10px #fb923c,
    0 0 20px rgba(251, 146, 60, 0.2) !important;
  background: transparent !important;
}


/* ==================== Glowing Buttons (auth overlay) ==================== */

.glow-overlay .btn-primary,
.glow-overlay .btn-landing-primary {
  border: 1.5px solid #fb923c !important;
  box-shadow:
    0 0 20px #fb923c,
    0 0 40px rgba(236, 72, 153, 0.4),
    inset 0 0 15px rgba(251, 146, 60, 0.2) !important;
  background: transparent !important;
}

.glow-overlay .btn-secondary,
.glow-overlay .btn-outline-primary,
.glow-overlay .btn-outline-secondary,
.glow-overlay .btn-landing-secondary,
.glow-overlay .btn {
  border: 1.5px solid #fb923c !important;
  box-shadow:
    0 0 15px #fb923c,
    0 0 30px rgba(251, 146, 60, 0.3),
    inset 0 0 10px rgba(251, 146, 60, 0.1) !important;
  background: transparent !important;
}


/* ==================== Glowing Checkboxes & Radios (auth overlay) ==================== */

.glow-overlay .form-check-input {
  border: 1.5px solid #fb923c !important;
  box-shadow:
    0 0 10px #fb923c,
    0 0 20px rgba(251, 146, 60, 0.4) !important;
  background: transparent !important;
}


/* ==================== Glowing SVG Icons (auth overlay) ==================== */

.glow-overlay svg {
  filter:
    drop-shadow(0 0 15px #fb923c)
    drop-shadow(0 0 30px rgba(236, 72, 153, 0.5)) !important;
}


/* ==================== Glowing Dividers (auth overlay) ==================== */

.glow-overlay hr,
.glow-overlay .divider::before,
.glow-overlay .divider::after {
  background: #fb923c !important;
  box-shadow: 0 0 10px #fb923c !important;
}


/* ==================== Glowing Images / Logos (auth overlay) ==================== */

.glow-overlay img {
  filter:
    drop-shadow(0 0 15px #fb923c)
    drop-shadow(0 0 30px rgba(236, 72, 153, 0.5)) !important;
}


/* ==================== Glow Toggle Button ==================== */

/* Floating toggle (auto-created by JS on pages without a header toggle) */
.glow-toggle:not(.glow-toggle--header) {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(15, 15, 35, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0;
  transform: translateY(10px);
  animation: glowToggleFadeIn 0.5s ease 1s forwards;
}

@keyframes glowToggleFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.glow-toggle:not(.glow-toggle--header):hover {
  background: rgba(15, 15, 35, 0.85);
  border-color: rgba(251, 146, 60, 0.3);
  color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.glow-toggle:not(.glow-toggle--header):active {
  transform: translateY(0);
}

/* Indicator dot */
.glow-toggle__indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fb923c, #ec4899);
  box-shadow: 0 0 8px rgba(251, 146, 60, 0.6);
  transition: all 0.3s ease;
}

/* Disabled state */
.glow-toggle.disabled .glow-toggle__indicator {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

.glow-toggle.disabled .glow-toggle__icon {
  opacity: 0.5;
}

/* Light theme - floating toggle */
[data-bs-theme="light"] .glow-toggle:not(.glow-toggle--header) {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
}

[data-bs-theme="light"] .glow-toggle:not(.glow-toggle--header):hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(251, 146, 60, 0.4);
  color: rgba(0, 0, 0, 0.8);
}


/* ==================== Disabled State (global) ==================== */

body.glow-disabled .glow-card::after {
  display: none !important;
}

body.glow-disabled .glow-overlay {
  display: none !important;
}


/* ==================== Mobile ==================== */

@media (max-width: 480px) {
  .glow-toggle:not(.glow-toggle--header) {
    bottom: 15px;
    right: 15px;
    padding: 8px 12px;
    font-size: 11px;
  }

  .glow-toggle:not(.glow-toggle--header) .glow-toggle__label {
    display: none;
  }
}