/* ================================================================
   PSYCHOCODE — Brief (App) Premium Override
   Imported by index.html AFTER css/styles.css.
   Rewrites the light theme to dark cyberpunk glassmorphism.
   Zero JS/logic touched.
   ================================================================ */

/* ─── OVERRIDE CSS VARIABLES ─────────────────────────────────── */
:root {
  --bg-dark: #050714;
  --bg-card: rgba(8, 10, 28, 0.65);
  --bg-card-hover: rgba(10, 12, 32, 0.8);
  --bg-input: rgba(8, 10, 28, 0.7);
  --border: rgba(123, 47, 255, 0.2);
  --border-focus: #7B2FFF;
  --text-primary: #E8E8F8;
  --text-secondary: #B4B7D4;
  --text-muted: #6E7299;

  --glass-bg: rgba(8, 10, 28, 0.65);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(123, 47, 255, 0.1);
  --glow-green: 0 0 20px rgba(123, 47, 255, 0.25);

  /* Replace blue/orange with violet/cyan */
  --primary-900: #7B2FFF;
  --primary-800: #7B2FFF;
  --primary-700: #7B2FFF;
  --primary-600: #9B4FFF;
  --primary-500: #7B2FFF;
  --primary-400: #B891FF;
  --primary-300: #C8AAFF;
  --primary-200: #D8C4FF;
  --primary-100: #EEE4FF;
  --primary-50:  #F8F4FF;

  --accent-500: #00F0FF;
  --accent-400: #33F4FF;
  --accent-300: #66F7FF;
  --accent-200: #99FAFF;
  --accent-100: #CCFDFF;
  --accent-glow: rgba(0, 240, 255, 0.2);

  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ─── BODY ───────────────────────────────────────────────────── */
body {
  background: #050714 !important;
  background-image:
    radial-gradient(ellipse at 15% 25%, rgba(123, 47, 255, 0.1) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 75%, rgba(0, 240, 255, 0.06) 0%, transparent 45%) !important;
  color: #E8E8F8 !important;
}

/* Grain texture */
body::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  opacity: 0.03 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23grain)' opacity='1'/%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  background-size: 200px 200px !important;
}

/* ─── GLASS CARD DARK ────────────────────────────────────────── */
.glass-card {
  background: rgba(8, 10, 28, 0.65) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(123, 47, 255, 0.1) !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
}
.glass-card:hover {
  border-color: rgba(123, 47, 255, 0.35) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.5), 0 0 40px rgba(123, 47, 255, 0.1) !important;
}

/* ─── LOGO SECTION ───────────────────────────────────────────── */
.logo-icon {
  background: linear-gradient(135deg, rgba(123, 47, 255, 0.3), rgba(0, 240, 255, 0.2)) !important;
  border: 1px solid rgba(123, 47, 255, 0.4) !important;
  box-shadow: 0 0 30px rgba(123, 47, 255, 0.3) !important;
}
.logo-title {
  background: linear-gradient(135deg, #ffffff, rgba(184, 181, 255, 0.9)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.logo-subtitle { color: rgba(0, 240, 255, 0.7) !important; }

/* ─── PROGRESS STEPS DARK ────────────────────────────────────── */
.progress-steps::before {
  background: rgba(255, 255, 255, 0.08) !important;
}
.progress-track {
  background: linear-gradient(90deg, #7B2FFF, #00F0FF) !important;
  box-shadow: 0 0 12px rgba(123, 47, 255, 0.4) !important;
}
.progress-dot {
  background: rgba(8, 10, 28, 0.8) !important;
  border-color: rgba(123, 47, 255, 0.3) !important;
  backdrop-filter: blur(8px) !important;
  color: rgba(180, 183, 212, 0.6) !important;
  transition: all 0.3s var(--spring) !important;
}
.progress-dot.completed {
  background: linear-gradient(135deg, #7B2FFF, #5B1FCC) !important;
  border-color: transparent !important;
  box-shadow: 0 0 16px rgba(123, 47, 255, 0.5) !important;
  color: #fff !important;
}
.progress-dot.active {
  background: linear-gradient(135deg, rgba(123, 47, 255, 0.3), rgba(0, 240, 255, 0.1)) !important;
  border-color: #7B2FFF !important;
  box-shadow: 0 0 20px rgba(123, 47, 255, 0.4) !important;
  color: #fff !important;
}
.progress-label { color: rgba(110, 114, 153, 0.8) !important; font-size: 11px !important; }
.progress-label.active    { color: rgba(184, 181, 255, 0.9) !important; }
.progress-label.completed { color: rgba(123, 47, 255, 0.8) !important; }

/* ─── STEP HEADERS ───────────────────────────────────────────── */
.step-header h2 {
  color: #EFECFF !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
}
.step-header p { color: rgba(180, 183, 212, 0.8) !important; }

/* ─── FORM INPUTS DARK ───────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="password"],
textarea,
select {
  background: rgba(8, 10, 28, 0.7) !important;
  border: 1px solid rgba(123, 47, 255, 0.2) !important;
  color: #E8E8F8 !important;
  border-radius: 12px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: rgba(123, 47, 255, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(123, 47, 255, 0.12), 0 0 20px rgba(123, 47, 255, 0.1) !important;
  background: rgba(10, 12, 32, 0.8) !important;
}
input::placeholder,
textarea::placeholder { color: rgba(110, 114, 153, 0.6) !important; }
label { color: rgba(180, 183, 212, 0.9) !important; font-size: 14px !important; font-weight: 500 !important; }

/* ─── OPTION CARDS (radio / checkbox choices) ────────────────── */
.option-card,
.option-label,
[class*="option-"],
[class*="-option"] {
  background: rgba(8, 10, 28, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  color: rgba(180, 183, 212, 0.9) !important;
  transition: all 0.25s var(--spring) !important;
  backdrop-filter: blur(8px) !important;
}
.option-card:hover,
.option-label:hover {
  border-color: rgba(123, 47, 255, 0.4) !important;
  background: rgba(123, 47, 255, 0.08) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}
.option-card.selected,
.option-label.selected,
input[type="radio"]:checked + .option-label,
input[type="checkbox"]:checked + .option-label {
  background: rgba(123, 47, 255, 0.15) !important;
  border-color: rgba(123, 47, 255, 0.5) !important;
  color: #fff !important;
  box-shadow: 0 0 20px rgba(123, 47, 255, 0.2) !important;
}

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn-primary,
button[type="submit"],
.submit-btn,
.btn-next,
.next-btn,
[class*="btn-primary"] {
  background: linear-gradient(135deg, #7B2FFF, #5B1FCC) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s var(--spring) !important;
  box-shadow: 0 8px 32px rgba(123, 47, 255, 0.45) !important;
}
.btn-primary:hover,
button[type="submit"]:hover,
.submit-btn:hover,
.btn-next:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 16px 48px rgba(123, 47, 255, 0.65) !important;
}
.btn-primary:disabled,
button[type="submit"]:disabled { opacity: 0.5 !important; transform: none !important; cursor: not-allowed !important; }

.btn-secondary,
.btn-back,
.back-btn,
[class*="btn-secondary"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(180, 183, 212, 0.9) !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s var(--spring) !important;
  backdrop-filter: blur(8px) !important;
}
.btn-secondary:hover,
.btn-back:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(123, 47, 255, 0.4) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* ─── TARIFF / PRICING CARDS ─────────────────────────────────── */
.tariff-card,
.plan-card,
.price-card,
[class*="tariff"],
[class*="plan-card"] {
  background: rgba(8, 10, 28, 0.65) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  transition: all 0.35s var(--spring) !important;
  cursor: pointer !important;
}
.tariff-card:hover,
.plan-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(123, 47, 255, 0.4) !important;
  box-shadow: 0 20px 60px rgba(123, 47, 255, 0.15) !important;
}
.tariff-card.selected,
.plan-card.selected,
.tariff-card.active,
.plan-card.active {
  border-color: rgba(123, 47, 255, 0.6) !important;
  background: rgba(123, 47, 255, 0.1) !important;
  box-shadow: 0 0 0 2px rgba(123, 47, 255, 0.3), 0 20px 60px rgba(123, 47, 255, 0.2) !important;
}

/* ─── PAYMENT STEP ───────────────────────────────────────────── */
.payment-block,
.payment-form,
.payment-container {
  background: rgba(8, 10, 28, 0.65) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(123, 47, 255, 0.2) !important;
  border-radius: 20px !important;
}

/* ─── PROMO CODE ─────────────────────────────────────────────── */
#promo-code-input {
  background: rgba(8, 10, 28, 0.7) !important;
  border: 1px solid rgba(123, 47, 255, 0.2) !important;
  color: #E8E8F8 !important;
  border-radius: 12px !important;
}
#apply-promo-btn {
  background: rgba(123, 47, 255, 0.2) !important;
  border: 1px solid rgba(123, 47, 255, 0.4) !important;
  color: rgba(184, 181, 255, 0.9) !important;
  border-radius: 10px !important;
  transition: all 0.2s var(--spring) !important;
}
#apply-promo-btn:hover {
  background: rgba(123, 47, 255, 0.4) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* ─── INFO BOXES ─────────────────────────────────────────────── */
.info-box, .alert, .notice {
  background: rgba(8, 10, 28, 0.6) !important;
  border: 1px solid rgba(123, 47, 255, 0.15) !important;
  border-radius: 12px !important;
  color: rgba(180, 183, 212, 0.9) !important;
}
.alert-success { background: rgba(0, 240, 100, 0.05) !important; border-color: rgba(0, 240, 100, 0.2) !important; color: rgba(0, 240, 100, 0.9) !important; }
.alert-error   { background: rgba(255, 69, 96, 0.05)  !important; border-color: rgba(255, 69, 96, 0.2)  !important; color: rgba(255, 130, 150, 0.9) !important; }

/* ─── LOADING / SPINNERS ─────────────────────────────────────── */
.loading-spinner,
[class*="spinner"] {
  border-color: rgba(123, 47, 255, 0.2) !important;
  border-top-color: #7B2FFF !important;
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
  background: rgba(3, 4, 15, 0.95) !important;
  border-top: 1px solid rgba(123, 47, 255, 0.1) !important;
}
.footer-link { color: rgba(110, 114, 153, 0.8) !important; }
.footer-link:hover { color: rgba(0, 240, 255, 0.8) !important; }

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #03040f; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #7B2FFF, #00F0FF); border-radius: 3px; }

/* ─── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .glass-card { border-radius: 16px !important; }
}