/* ============================================================
   theme-dark.css  —  Final dark/yellow overrides
   Loaded AFTER main.css; wins all specificity battles
   ============================================================ */

/* ── Reinforce CSS vars ─────────────────────────────────────── */
:root {
  --primary:         #FFD700;
  --primary-dark:    #E6C200;
  --primary-glow:    rgba(255,215,0,0.22);
  --primary-subtle:  rgba(255,215,0,0.07);
  --primary-border:  rgba(255,215,0,0.18);
  --bg-base:         #0b0b0b;
  --bg-card:         #141414;
  --bg-card-alt:     #1a1a1a;
  --bg-section:      #0f0f0f;
  --bg-input:        #181818;
  --text-primary:    #f2f2f2;
  --text-secondary:  #9a9a9a;
  --text-muted:      #555555;
  --border:          rgba(255,215,0,0.14);
  --border-subtle:   rgba(255,255,255,0.05);
  --border-card:     rgba(255,255,255,0.08);
  --navbar-bg:       #080808;
  --footer-bg:       #070707;
  --shadow:          0 4px 28px rgba(0,0,0,0.7);
  --shadow-yellow:   0 0 24px rgba(255,215,0,0.12);
  /* legacy compat */
  --primary-green:   #FFD700;
  --dark-bg:         #0b0b0b;
  --pure-white:      #f2f2f2;
  --light-gray:      #1a1a1a;
  --medium-gray:     #9a9a9a;
  --card-bg:         #141414;
  --border-color:    rgba(255,215,0,0.14);
  --success:         #FFD700;
  --success-gradient:linear-gradient(135deg,#FFD700,#E6C200);
}

/* ── Base ───────────────────────────────────────────────────── */
html, body { background: var(--bg-base) !important; }
/* Propagate dark base to layout containers — NOT to interactive elements */
section, div, article, aside, main, header, footer, nav {
  background-color: inherit;
}

/* Kill any stray white/light backgrounds */
.bg-white, .bg-light, [style*="background:#fff"],
[style*="background: #fff"], [style*="background:white"],
[style*="background: white"] {
  background: var(--bg-card-alt) !important;
}

/* ── Mobile sidebar drawer ──────────────────────────────────── */
.sub-menu-bar,
.navbar-collapse,
.collapse.navbar-collapse,
#navbarSupportedContent {
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
}
/* Every direct child that Bootstrap might paint white */
.navbar-collapse .navbar-nav,
.navbar-collapse .nav-item,
.navbar-collapse .mobile-menu-cta,
.navbar-collapse .mobile-menu-logo,
.navbar-collapse .mobile-user-profile {
  background: transparent !important;
  background-color: transparent !important;
}
.navbar-collapse .nav-item a {
  background: transparent !important;
  color: var(--text-secondary) !important;
}
.navbar-collapse .nav-item a:hover,
.navbar-collapse .nav-item a.active {
  background: var(--primary-subtle) !important;
  color: var(--primary) !important;
}
/* Sub-menu inside drawer */
.navbar-collapse .sub-menu {
  background: #0f0f0f !important;
  background-color: #0f0f0f !important;
}

/* ── Fixed header — consistent dark always ──────────────────── */
.header.navbar-area,
.header.navbar-area.sticky,
.navbar-area.sticky,
.sticky {
  background: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.6) !important;
}

/* nav link overrides */
.header.navbar-area nav .navbar-nav a,
.header.navbar-area nav .navbar-nav .nav-item a,
.sticky .navbar .navbar-nav .nav-item a {
  color: var(--text-secondary) !important;
}
.header.navbar-area nav .navbar-nav a:hover,
.header.navbar-area nav .navbar-nav a.active,
.sticky .navbar .navbar-nav .nav-item a:hover,
.sticky .navbar .navbar-nav .nav-item a.active {
  color: var(--primary) !important;
}

/* toggler lines */
.mobile-menu-btn .toggler-icon,
.navbar-toggler .toggler-icon,
.sticky .navbar .mobile-menu-btn .toggler-icon {
  background: var(--text-primary) !important;
}

/* Sticky CTA — only for solid .btn, not ghost .btn-alt */
.sticky .button .btn:not(.btn-alt),
.header.sticky .button .btn:not(.btn-alt),
.header.sticky .button .btn:not(.btn-alt):hover {
  background: var(--primary) !important;
  color: #000 !important;
  border-color: var(--primary) !important;
}
/* Keep btn-alt as outline always */
.btn-alt, .sticky .btn-alt, .header.sticky .btn-alt {
  background: transparent !important;
  color: var(--primary) !important;
  border: 2px solid var(--primary) !important;
}
.btn-alt:hover, .sticky .btn-alt:hover, .header.sticky .btn-alt:hover {
  background: var(--primary) !important;
  color: #000 !important;
}

/* User name in sticky */
.sticky .user-name,
.sticky .user-profile-btn,
.sticky .user-profile-btn .user-name { color: var(--text-primary) !important; }
.sticky .user-profile-btn .lni-chevron-down { color: var(--text-muted) !important; }

/* Sub-menu */
.header.navbar-area .nav-inner .sub-menu { background: #0e0e0e; border: 1px solid var(--border); }
.header.navbar-area .nav-inner .sub-menu li a { color: var(--text-secondary) !important; }
.header.navbar-area .nav-inner .sub-menu li a:hover { color: var(--primary) !important; }

/* ── Hero sections ──────────────────────────────────────────── */
.hero-area {
  background: #080808 !important;
  color: var(--text-secondary);
}
.hero-area * { background-color: transparent; }
.hero-card { background: var(--bg-card) !important; }
.hero-card-header, .hero-card-footer { background: #0f0f0f !important; }
.hero-card-body { background: var(--bg-card) !important; }
.demo-code-block { background: #1a1a1a !important; }
.demo-bookie-logo { background: #1e1e1e !important; }

/* ── Sections ───────────────────────────────────────────────── */
.section { background: var(--bg-base); }
.services.section  { background: var(--bg-section); }
.features.section  { background: var(--bg-base); }
.pricing-table.section { background: var(--bg-section); }
.faq.section       { background: var(--bg-base); }
.call-action       { background: linear-gradient(135deg,#101000,#0b0b0b) !important; }
footer.footer      { background: var(--footer-bg) !important; }

/* inner content wrappers */
.container, .container-fluid, .inner-content { background: transparent !important; }

/* ── Cards & panels ─────────────────────────────────────────── */
.card, .card-body {
  background: var(--bg-card) !important;
  border-color: var(--border-card) !important;
  color: var(--text-secondary) !important;
}
.card h1,.card h2,.card h3,.card h4,.card h5,.card h6 { color: var(--text-primary) !important; }
.card .text-muted { color: var(--text-muted) !important; }
.card .card-subtitle { color: var(--text-muted) !important; }

.list-group-item { background: transparent !important; color: var(--text-secondary) !important; border-color: var(--border-subtle) !important; }
.popular_plan { background: var(--primary) !important; color: #000 !important; }

/* ── Forms ──────────────────────────────────────────────────── */
input, textarea, select,
.form-control, .form-select {
  background: var(--bg-input) !important;
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-card) !important;
}
input:focus, textarea:focus, select:focus,
.form-control:focus, .form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
  background: var(--bg-input) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }
.form-select option { background: #0e0e0e; color: var(--text-primary); }
label { color: var(--text-muted) !important; }
.input-group-text { background: var(--bg-card-alt) !important; color: var(--text-muted) !important; border-color: var(--border-card) !important; }

/* ── Accordion ──────────────────────────────────────────────── */
.accordion-item { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
.accordion-button { background: var(--bg-card) !important; color: var(--text-primary) !important; box-shadow: none !important; }
.accordion-button:not(.collapsed) { background: var(--primary-subtle) !important; color: var(--primary) !important; }
.accordion-body { background: var(--bg-card-alt) !important; color: var(--text-muted) !important; }

/* ── Nav pills ──────────────────────────────────────────────── */
.nav-pills { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
.nav-pills .nav-link { color: var(--text-muted) !important; background: transparent !important; }
.nav-pills .nav-link.active { background: var(--primary) !important; color: #000 !important; border-color: var(--primary) !important; }
.nav-pills .nav-link:hover:not(.active) { color: var(--primary) !important; background: var(--primary-subtle) !important; }

/* ── Dropdown ───────────────────────────────────────────────── */
.dropdown-menu { background: #0e0e0e !important; border-color: var(--border) !important; }
.dropdown-item { color: var(--text-secondary) !important; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--primary-subtle) !important; color: var(--primary) !important; }
.dropdown-divider { border-color: var(--border-subtle) !important; }

/* ── Bootstrap colour overrides ─────────────────────────────── */
.text-success  { color: var(--primary) !important; }
.text-primary  { color: var(--primary) !important; }
.text-warning  { color: var(--primary) !important; }
.text-danger   { color: #ff6666 !important; }
.text-muted    { color: var(--text-muted) !important; }
.text-white    { color: var(--text-primary) !important; }
.text-light    { color: var(--text-secondary) !important; }
.text-dark     { color: var(--text-primary) !important; }

.bg-success    { background: var(--primary) !important; color: #000 !important; }
.bg-primary    { background: var(--primary) !important; color: #000 !important; }
.bg-dark       { background: var(--bg-card-alt) !important; }
.bg-secondary  { background: var(--bg-card-alt) !important; }
.bg-light      { background: var(--bg-card-alt) !important; }
.bg-white      { background: var(--bg-card) !important; }

.badge.bg-success  { background: var(--primary) !important; color: #000 !important; }
.badge.bg-primary  { background: var(--primary) !important; color: #000 !important; }
.badge.bg-danger   { background: rgba(255,85,85,0.15) !important; color: #ff8888 !important; }

.btn-success       { background: var(--primary) !important; border-color: var(--primary) !important; color: #000 !important; }
.btn-success:hover { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; }
.btn-outline-success { border-color: var(--border-card) !important; color: var(--text-muted) !important; }
.btn-outline-success:hover { background: var(--primary) !important; border-color: var(--primary) !important; color: #000 !important; }
.btn-primary       { background: var(--primary) !important; border-color: var(--primary) !important; color: #000 !important; }
.btn-outline-primary { border-color: var(--primary) !important; color: var(--primary) !important; }
.btn-outline-primary:hover { background: var(--primary) !important; color: #000 !important; }
.btn-secondary     { background: var(--bg-card-alt) !important; border-color: var(--border-card) !important; color: var(--text-secondary) !important; }
.btn-outline-secondary { border-color: var(--border-card) !important; color: var(--text-secondary) !important; }
.btn-outline-secondary:hover { background: var(--bg-card-alt) !important; color: var(--text-primary) !important; }

/* Spinner */
.spinner-border { border-color: var(--border-card); border-top-color: var(--primary); }
.text-primary.spinner-border { border-top-color: var(--primary); }

/* Table */
.table { color: var(--text-secondary) !important; --bs-table-striped-bg: rgba(255,255,255,0.02); }
.table > :not(caption) > * > * { background-color: transparent !important; color: var(--text-secondary); border-color: var(--border-subtle); }
.table thead { background: var(--bg-card-alt) !important; }
.table thead th { color: var(--text-muted) !important; }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert-success  { background: rgba(255,215,0,0.07) !important; color: var(--primary) !important; border-color: var(--primary-border) !important; }
.alert-danger   { background: rgba(255,85,85,0.08) !important; color: #ff8888 !important; border-color: rgba(255,85,85,0.2) !important; }
.alert-info     { background: rgba(52,152,219,0.08) !important; color: #6ab4ec !important; border-color: rgba(52,152,219,0.2) !important; }
.alert-warning  { background: rgba(255,215,0,0.07) !important; color: var(--primary) !important; border-color: var(--primary-border) !important; }
.alert-light    { background: var(--bg-card-alt) !important; color: var(--text-secondary) !important; border-color: var(--border-card) !important; }
.alert-secondary{ background: var(--bg-card-alt) !important; color: var(--text-muted) !important; }

/* ── Modals ─────────────────────────────────────────────────── */
.modal-content  { background: var(--bg-card) !important; border-color: var(--border-card) !important; color: var(--text-secondary) !important; }
.modal-header   { background: var(--bg-card-alt) !important; border-color: var(--border-subtle) !important; }
.modal-footer   { background: var(--bg-card-alt) !important; border-color: var(--border-subtle) !important; }
.modal-title    { color: var(--text-primary) !important; }
.modal-backdrop { opacity: 0.75 !important; }
.btn-close      { filter: invert(1) brightness(0.5); }
.btn-close:hover{ filter: invert(1) brightness(0.9); }

/* ── Progress ───────────────────────────────────────────────── */
.progress { background: var(--bg-card-alt); height: 6px; border-radius: 4px; }
.progress-bar { background: var(--primary); }

/* ── Skyscraper layout ──────────────────────────────────────── */
.site-wrapper { background: var(--bg-base) !important; }
.site-main    { background: var(--bg-base) !important; }
.skyscraper-col { background: var(--bg-base) !important; }
.horiz-banner-wrap { background: var(--bg-base) !important; }

/* ── Promo banner ───────────────────────────────────────────── */
.promo-banner { background: linear-gradient(135deg,#1c1400,#0b0b0b) !important; }

/* ── Footer ─────────────────────────────────────────────────── */
.footer, .footer-top, .copyright-area { background: var(--footer-bg) !important; }
.footer * { background-color: transparent !important; }
.footer .social li a { background: var(--bg-card) !important; }
.footer .social li a:hover { background: var(--primary) !important; color: #000 !important; }

/* ── Dashboard sidebar ──────────────────────────────────────── */
.dashboard-nav { background: #0a0a0a !important; }
.dashboard-nav .nav-link { color: var(--text-muted) !important; }
.dashboard-nav .nav-link:hover,
.dashboard-nav .nav-link.active { background: var(--primary-subtle) !important; color: var(--primary) !important; }
.dashboard-container { background: var(--bg-base) !important; }
.main-content { background: var(--bg-base) !important; }

/* ── SweetAlert2 ────────────────────────────────────────────── */
.swal2-popup { background: var(--bg-card) !important; color: var(--text-secondary) !important; border: 1px solid var(--border-card) !important; }
.swal2-title { color: var(--text-primary) !important; }
.swal2-html-container { color: var(--text-secondary) !important; }
.swal2-confirm { background: var(--primary) !important; color: #000 !important; font-weight: 700; }
.swal2-cancel  { background: var(--bg-card-alt) !important; color: var(--text-secondary) !important; border: 1px solid var(--border-card) !important; }
.swal2-icon.swal2-warning { border-color: var(--primary) !important; color: var(--primary) !important; }
.swal2-icon.swal2-success { border-color: var(--primary) !important; }
.swal2-icon.swal2-success [class^="swal2-success-line"] { background: var(--primary) !important; }

/* ── Auth pages ─────────────────────────────────────────────── */
.auth-container { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
.auth-tabs, .signup-tabs { background: transparent !important; }
.auth-tab, .signup-tab { background: var(--bg-card) !important; color: var(--text-muted) !important; }
.auth-tab.active, .signup-tab.active { background: var(--primary-subtle) !important; color: var(--primary) !important; }
.auth-method, .telegram-method, .email-method { background: transparent !important; }
.auth-footer { background: var(--bg-card-alt) !important; }
.feature-card { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
.feature-card h4, .feature-card h5 { color: var(--text-primary) !important; }
.feature-card p { color: var(--text-muted) !important; }
.benefit-card { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
.benefit-card h4 { color: var(--text-primary) !important; }
.benefit-card p { color: var(--text-muted) !important; }
.features-section { background: var(--bg-section) !important; }

/* ── Free bet codes — hero device mockup ───────────────────── */
.stat-box { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
.stat-number { color: var(--primary) !important; }
.stat-box .stat-label { color: var(--text-muted) !important; }
.device-frame { background: var(--bg-card) !important; border-color: var(--border) !important; }
.device-screen { background: var(--bg-base) !important; }
.live-header { background: #0f0f0f !important; }
.live-badge { color: var(--primary) !important; }
.live-dot { background: var(--primary) !important; }
.live-timer { color: var(--text-muted) !important; }
.live-code-item { background: transparent !important; }
.live-code-item:hover { background: var(--primary-subtle) !important; }
.code-id { color: var(--primary) !important; }
.code-odds { color: var(--primary) !important; background: var(--primary-subtle) !important; }
.from-bookie, .to-bookie { color: var(--text-secondary) !important; }
.live-stats { background: #0f0f0f !important; }
.stat-value { color: var(--primary) !important; }
.device-controls { background: var(--bg-card) !important; }
.home-button { background: var(--border-card) !important; }
.floating-badge { background: var(--bg-card) !important; color: var(--primary) !important; border-color: var(--primary-border) !important; }

/* ── Free bet codes — cards ─────────────────────────────────── */
.free-bet-card { background: var(--bg-card) !important; }
.free-bet-card .code { color: var(--primary) !important; }

/* ── Slip viewer hero prototype ─────────────────────────────── */
.sample-slip-demo { background: var(--bg-card) !important; border-color: var(--border) !important; }
.sample-slip-demo .slip-header { background: #0f0f0f !important; }
.bookmaker-logo { background: #1e1e1e !important; }
.league-badge { background: var(--bg-card-alt) !important; color: var(--text-muted) !important; }
.match-teams, .match-teams strong { color: var(--text-primary) !important; }
.match-time { color: var(--text-muted) !important; }
.market { color: var(--text-muted) !important; }
.odds { color: var(--primary) !important; }
.slip-content { background: transparent !important; }
.slip-summary { background: var(--bg-card-alt) !important; border-top-color: var(--border-subtle) !important; }
.summary-row { color: var(--text-muted) !important; }
.summary-row strong { color: var(--text-secondary) !important; }
.summary-row.total { color: var(--text-primary) !important; }
.summary-row.total span { color: var(--text-secondary) !important; }
.potential-win { color: var(--primary) !important; }
.status-badge.active { background: rgba(255,215,0,0.1) !important; color: var(--primary) !important; }

/* ── Conversion ticket ──────────────────────────────────────── */
.conversion-ticket { background: var(--bg-card) !important; }
.conversion-ticket-header { background: var(--primary-subtle) !important; }
.conversion-ticket-body { background: var(--bg-card) !important; }
.code-display-ticket { background: var(--bg-card-alt) !important; color: var(--text-primary) !important; }
.ticket-stats { background: var(--bg-card-alt) !important; }
.converter-alert { background: var(--bg-card) !important; color: var(--text-secondary) !important; }

/* ── Inline styles that set green (#2ed06e) — override all ──── */
[style*="color:var(--primary-green)"],
[style*="color: var(--primary-green)"] { color: var(--primary) !important; }
[style*="color:#2ed06e"], [style*="color: #2ed06e"] { color: var(--primary) !important; }
[style*="background:#2ed06e"], [style*="background: #2ed06e"] { background: var(--primary) !important; }
[style*="border-color:#2ed06e"] { border-color: var(--primary-border) !important; }

/* ── Recommended / in-content ad banners ───────────────────── */
.recommended-bookie-banner { background: linear-gradient(135deg,#151200,#0f0f0f) !important; }
.in-content-ad { background: linear-gradient(135deg,#151200,#0f0f0f) !important; }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-card); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }
* { scrollbar-width: thin; scrollbar-color: var(--border-card) var(--bg-base); }