/* ═══════════════════════════════════════════════════════════════
   BullBear Global Theme v6 — "Black & Neon Green" (Razer-style ref)
   Base: pure black. Primary accent: electric bull-green (the logo's
   bull side, pushed neon/vivid). Gold is now a minor secondary
   accent. Bear-red reserved strictly for negative/sell signals.
   Loaded on every page, last in the cascade, so these rules win.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700;800&display=swap');

/* ── 1. TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bb-bg:         #050505;
  --bb-bg-alt:     #0a0a0a;
  --bb-bg-card:    rgba(255,255,255,0.035);
  --bb-bg-card-hi: rgba(255,255,255,0.06);
  --bb-border:     rgba(61,255,110,0.16);
  --bb-border-hi:  rgba(61,255,110,0.42);

  /* Neon green — PRIMARY accent (logo's bull side, pushed electric) */
  --bb-neon:        #3DFF6E;
  --bb-neon-bright: #7CFFA0;
  --bb-neon-dim:    #1FAE4B;
  --bb-neon-glow:   rgba(61,255,110,0.45);

  /* Bull (alias of neon) / Bear red — signal accents */
  --bb-bull:      var(--bb-neon);
  --bb-bull-glow: var(--bb-neon-glow);
  --bb-bear:      #E4483F;
  --bb-bear-glow: rgba(228,72,63,0.35);

  /* Gold — minor secondary accent only (logo wordmark, premium touches) */
  --bb-gold:        #D4AF37;
  --bb-gold-bright: #F2C94C;
  --bb-gold-dim:    #8a6d1f;
  --bb-gold-glow:   rgba(212,175,55,0.3);

  /* Text */
  --bb-text:      #F8FAFC;
  --bb-text-dim:  rgba(203,213,225,0.68);
}

/* ── 2. BASE ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: #050505 !important;
  background-image:
    repeating-linear-gradient(115deg,
      rgba(61,255,110,0.025) 0px, rgba(61,255,110,0.025) 2px,
      transparent 2px, transparent 90px),
    radial-gradient(ellipse 55% 45% at 85% 10%, rgba(61,255,110,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 10% 95%,  rgba(61,255,110,0.05) 0%, transparent 55%) !important;
  background-attachment: fixed !important;
  color: var(--bb-text) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  letter-spacing: -0.011em !important;
}

::selection { background: rgba(61,255,110,0.35); color: #000; }

/* ── 3. HEADER ─────────────────────────────────────────────────── */
.header,
header.header,
nav.header,
.site-header {
  background: rgba(5,5,5,0.92) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
  border-bottom: 1px solid var(--bb-border) !important;
  box-shadow: 0 1px 0 rgba(61,255,110,0.12), 0 8px 40px rgba(0,0,0,0.65) !important;
  position: relative !important;
}

/* Thin neon accent bar across the top, Razer-style */
.header::before,
header.header::before,
.site-header::before {
  content: '' !important;
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent 0%, var(--bb-neon) 50%, transparent 100%) !important;
  box-shadow: 0 0 12px var(--bb-neon-glow) !important;
}

.header a,
header.header a,
.header .logo-text,
.header .nav-link,
.header .header-nav a {
  color: var(--bb-text) !important;
  transition: color 0.2s !important;
}
.header a:hover,
header.header a:hover {
  color: var(--bb-neon-bright) !important;
  text-shadow: 0 0 12px var(--bb-neon-glow) !important;
}

/* ── 4. HEADINGS ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

/* Optional neon-green gradient accent for hero-level headings */
.hero-title, .hero-headline, h1.headline {
  background: linear-gradient(135deg, #ffffff 35%, var(--bb-neon-bright) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── 5. SECTIONS & CARDS ───────────────────────────────────────── */
.section,
section,
.card,
.content-card,
.course-card,
.pricing-card,
.feature-card,
.checklist-card,
.info-card,
.module-card,
.lesson-card,
.step-card {
  background: var(--bb-bg-card) !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--bb-text) !important;
  border-radius: 14px !important;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
.card:hover,
.content-card:hover,
.course-card:hover,
.pricing-card:hover,
.feature-card:hover,
.module-card:hover {
  border-color: var(--bb-border-hi) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(61,255,110,0.14) !important;
}

.hero-section,
.features-section,
.benefits-section,
.cta-section,
.about-section,
.pricing-section,
.testimonials-section {
  background: transparent !important;
}

/* ── 6. BUTTONS ────────────────────────────────────────────────── */
.btn-primary,
.btn-cta,
.cta-btn,
.enroll-btn,
.get-started-btn,
button.primary,
a.btn-primary {
  background: linear-gradient(135deg, var(--bb-neon) 0%, var(--bb-neon-dim) 100%) !important;
  color: #04140a !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 18px var(--bb-neon-glow) !important;
  transition: all 0.22s ease !important;
}
.btn-primary:hover,
.btn-cta:hover,
.cta-btn:hover,
.enroll-btn:hover,
button.primary:hover {
  background: linear-gradient(135deg, var(--bb-neon-bright) 0%, var(--bb-neon) 100%) !important;
  box-shadow: 0 6px 26px var(--bb-neon-glow) !important;
  transform: translateY(-2px) !important;
}

.btn-secondary, .btn-outline {
  background: transparent !important;
  color: var(--bb-neon-bright) !important;
  border: 1px solid var(--bb-border-hi) !important;
  border-radius: 10px !important;
}
.btn-secondary:hover, .btn-outline:hover {
  background: rgba(61,255,110,0.08) !important;
  border-color: var(--bb-neon) !important;
}

/* ── 7. BULL / BEAR SIGNAL UTILITIES ──────────────────────────── */
/* For price ticks, buy/sell badges, trend arrows across trading pages */
.text-bull, .price-up, .signal-buy, .up, .positive {
  color: var(--bb-bull) !important;
}
.text-bear, .price-down, .signal-sell, .down, .negative {
  color: var(--bb-bear) !important;
}
.badge-bull, .btn-buy {
  background: rgba(61,255,110,0.12) !important;
  color: var(--bb-bull) !important;
  border: 1px solid rgba(61,255,110,0.4) !important;
}
.badge-bear, .btn-sell {
  background: rgba(228,72,63,0.12) !important;
  color: var(--bb-bear) !important;
  border: 1px solid rgba(228,72,63,0.4) !important;
}

/* ── 8. FORM INPUTS ────────────────────────────────────────────── */
input, select, textarea {
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--bb-text) !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
}
input::placeholder, textarea::placeholder {
  color: rgba(242,242,240,0.4) !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--bb-neon) !important;
  box-shadow: 0 0 0 3px rgba(61,255,110,0.15) !important;
}

/* ── 9. LABELS & BODY TEXT ─────────────────────────────────────── */
label {
  color: rgba(242,242,240,0.85) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}
p {
  color: var(--bb-text-dim) !important;
  font-family: 'Inter', sans-serif !important;
}

/* ── 10. FOOTER ────────────────────────────────────────────────── */
footer,
.footer,
.site-footer {
  background: #020202 !important;
  border-top: 1px solid var(--bb-border) !important;
  color: var(--bb-text-dim) !important;
}
footer a, .footer a { color: var(--bb-neon-bright) !important; }
footer a:hover, .footer a:hover { color: #fff !important; }

/* ── 11. BADGES ────────────────────────────────────────────────── */
.badge,
.tag,
.pill {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  border: 1px solid var(--bb-border-hi) !important;
  color: var(--bb-neon-bright) !important;
}

/* ── 12. SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #070707; }
::-webkit-scrollbar-thumb { background: var(--bb-neon-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bb-neon); }