/* ============================================================
   BolaPrediksi · LIGHT MODE OVERRIDES
   Proper light theme that fixes invisible text on dark elements.
   ============================================================ */

:root[data-theme="light"]{
  --bp-light-bg:        #f5f7fb;
  --bp-light-surface:   #ffffff;
  --bp-light-surface-2: #f0f3f8;
  --bp-light-text:      #0f172a;
  --bp-light-text-soft: #475569;
  --bp-light-text-mute: #64748b;
  --bp-light-border:    #e2e8f0;
  --bp-light-accent:    #DC2626;
  --bp-light-accent-2:  #facc15;
  --bp-light-link:      #1d4ed8;
}

/* 1) GLOBAL: kill the dark FIFA poster bg, use light gradient instead */
:root[data-theme="light"] html,
html[data-theme="light"]{
  background-color: var(--bp-light-bg) !important;
  background-image:
    linear-gradient(180deg, rgba(245,247,251,0.92) 0%, rgba(240,243,248,0.95) 60%, rgba(245,247,251,1) 100%),
    var(--bp-bg-poster) !important;
}
@media (max-width:768px){
  :root[data-theme="light"] html{
    background-image:
      linear-gradient(180deg, rgba(245,247,251,0.94) 0%, rgba(240,243,248,0.97) 50%, rgba(245,247,251,1) 100%),
      var(--bp-bg-poster) !important;
  }
}

:root[data-theme="light"] body{
  color: var(--bp-light-text) !important;
}

/* 2) HEADER — switch to white surface */
:root[data-theme="light"] header,
:root[data-theme="light"] .site-header,
:root[data-theme="light"] nav.main-nav{
  background: rgba(255,255,255,0.96) !important;
  color: var(--bp-light-text) !important;
  border-bottom: 1px solid var(--bp-light-border) !important;
  box-shadow: 0 1px 8px rgba(15,23,42,0.06);
}

:root[data-theme="light"] header a,
:root[data-theme="light"] header .menu>a,
:root[data-theme="light"] header .ddtoggle,
:root[data-theme="light"] header button,
:root[data-theme="light"] nav a{
  color: var(--bp-light-text) !important;
}
:root[data-theme="light"] header a:hover,
:root[data-theme="light"] header .menu>a:hover,
:root[data-theme="light"] nav a:hover{
  color: var(--bp-light-accent) !important;
}

/* Brand stays red/orange but bg white */
:root[data-theme="light"] .brand,
:root[data-theme="light"] header .logo,
:root[data-theme="light"] a[href="/"]{
  color: var(--bp-light-accent) !important;
}

/* Search box */
:root[data-theme="light"] header input,
:root[data-theme="light"] header [role="search"] input,
:root[data-theme="light"] input[type="search"]{
  background: var(--bp-light-surface-2) !important;
  color: var(--bp-light-text) !important;
  border: 1px solid var(--bp-light-border) !important;
}
:root[data-theme="light"] input::placeholder{ color: var(--bp-light-text-mute) !important; }

/* Premium / Install App buttons */
:root[data-theme="light"] header a[href*="premium"],
:root[data-theme="light"] header button{
  background: var(--bp-light-accent-2) !important;
  color: #0f172a !important;
  border: 1px solid #e0b800 !important;
}

/* 3) MOBILE DRAWER */
:root[data-theme="light"] .mobile-menu,
:root[data-theme="light"] #mobile-drawer,
:root[data-theme="light"] [class*="drawer"]{
  background: #ffffff !important;
  color: var(--bp-light-text) !important;
  border-left: 1px solid var(--bp-light-border) !important;
}
:root[data-theme="light"] .mobile-menu a,
:root[data-theme="light"] .mobile-menu .ddtoggle,
:root[data-theme="light"] #mobile-drawer a{
  color: var(--bp-light-text) !important;
  border-bottom: 1px solid var(--bp-light-border) !important;
}
:root[data-theme="light"] .mobile-menu a:hover{
  background: var(--bp-light-surface-2) !important;
  color: var(--bp-light-accent) !important;
}

/* 4) FOOTER — light surface */
:root[data-theme="light"] footer,
:root[data-theme="light"] .site-footer{
  background: #ffffff !important;
  color: var(--bp-light-text) !important;
  border-top: 1px solid var(--bp-light-border) !important;
}
:root[data-theme="light"] footer *,
:root[data-theme="light"] footer h1,
:root[data-theme="light"] footer h2,
:root[data-theme="light"] footer h3,
:root[data-theme="light"] footer h4,
:root[data-theme="light"] footer h5,
:root[data-theme="light"] footer h6{
  color: var(--bp-light-text) !important;
}
:root[data-theme="light"] footer p,
:root[data-theme="light"] footer li,
:root[data-theme="light"] footer small{
  color: var(--bp-light-text-soft) !important;
}
:root[data-theme="light"] footer a{
  color: var(--bp-light-link) !important;
}
:root[data-theme="light"] footer a:hover{
  color: var(--bp-light-accent) !important;
  text-decoration: underline;
}

/* 5) CARDS & WIDGETS — remove the global dark forced bg */
:root[data-theme="light"] .match,
:root[data-theme="light"] .league,
:root[data-theme="light"] .card,
:root[data-theme="light"] .hero-card,
:root[data-theme="light"] .hero-stat,
:root[data-theme="light"] table,
:root[data-theme="light"] .league-group,
:root[data-theme="light"] .stat-row,
:root[data-theme="light"] [class*="card"],
:root[data-theme="light"] [class*="widget"]:not(#bp-livescore-widget){
  background-color: rgba(255,255,255,0.95) !important;
  color: var(--bp-light-text) !important;
  border: 1px solid var(--bp-light-border) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}

:root[data-theme="light"] .match *,
:root[data-theme="light"] .league *,
:root[data-theme="light"] .card *,
:root[data-theme="light"] table *,
:root[data-theme="light"] [class*="card"] *{
  color: inherit;
}

/* 6) TABLES */
:root[data-theme="light"] table{
  border-collapse: collapse;
}
:root[data-theme="light"] table th{
  background: var(--bp-light-surface-2) !important;
  color: var(--bp-light-text) !important;
  border-bottom: 2px solid var(--bp-light-border) !important;
}
:root[data-theme="light"] table td{
  color: var(--bp-light-text) !important;
  border-bottom: 1px solid var(--bp-light-border) !important;
  background: transparent !important;
}
:root[data-theme="light"] table tr:hover td{
  background: var(--bp-light-surface-2) !important;
}

/* 7) HERO section — light overlay */
:root[data-theme="light"] .hero{
  background:
    linear-gradient(135deg, rgba(255,255,255,0.78) 0%, rgba(245,247,251,0.65) 50%, rgba(255,255,255,0.85) 100%) !important;
  color: var(--bp-light-text) !important;
}
:root[data-theme="light"] .hero h1{
  color: var(--bp-light-accent) !important;
  text-shadow: none;
}
:root[data-theme="light"] .hero p,
:root[data-theme="light"] .hero .lead{
  color: var(--bp-light-text-soft) !important;
}

/* Hero stats numbers */
:root[data-theme="light"] .hero-stat .num,
:root[data-theme="light"] .hero-stat strong,
:root[data-theme="light"] .hero-stat b{
  color: var(--bp-light-accent) !important;
}
:root[data-theme="light"] .hero-stat .label,
:root[data-theme="light"] .hero-stat small{
  color: var(--bp-light-text-mute) !important;
}

/* 8) LIVE PREDIKSI TOP 3 widget */
:root[data-theme="light"] #bp-livescore-widget,
:root[data-theme="light"] .live-top3,
:root[data-theme="light"] [class*="live-prediksi"]{
  background: linear-gradient(135deg, #fef3c7 0%, #ffffff 100%) !important;
  color: var(--bp-light-text) !important;
  border: 1px solid #fcd34d !important;
}
:root[data-theme="light"] #bp-livescore-widget *,
:root[data-theme="light"] .live-top3 *{ color: inherit; }

/* 9) NEWSLETTER section — readable on light */
:root[data-theme="light"] [class*="newsletter"],
:root[data-theme="light"] .newsletter-section,
:root[data-theme="light"] section[id*="newsletter"]{
  background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 100%) !important;
  color: #ffffff !important;
}
:root[data-theme="light"] [class*="newsletter"] *{ color: #ffffff !important; }
:root[data-theme="light"] [class*="newsletter"] a.btn,
:root[data-theme="light"] [class*="newsletter"] button{
  background: #facc15 !important;
  color: #0f172a !important;
}
:root[data-theme="light"] [class*="newsletter"] small,
:root[data-theme="light"] [class*="newsletter"] .fine-print{
  color: rgba(255,255,255,0.85) !important;
}

/* 10) BODY headings & text */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] h5,
:root[data-theme="light"] h6{
  color: var(--bp-light-text) !important;
}
:root[data-theme="light"] p,
:root[data-theme="light"] li,
:root[data-theme="light"] span{
  color: var(--bp-light-text);
}
:root[data-theme="light"] a:not(header a):not(footer a):not(.btn):not([class*="btn"]){
  color: var(--bp-light-link);
}
:root[data-theme="light"] a:hover{ color: var(--bp-light-accent); }

/* 11) NEWS CARDS */
:root[data-theme="light"] article a,
:root[data-theme="light"] .news-card,
:root[data-theme="light"] [class*="news"] a{
  background: #ffffff !important;
  color: var(--bp-light-text) !important;
  border: 1px solid var(--bp-light-border) !important;
}
:root[data-theme="light"] article h3,
:root[data-theme="light"] .news-card h3{ color: var(--bp-light-text) !important; }

/* 12) LIVE SCORE CARDS on homepage */
:root[data-theme="light"] [data-live-card],
:root[data-theme="light"] .live-score-card,
:root[data-theme="light"] [class*="live-score"]{
  background: #ffffff !important;
  color: var(--bp-light-text) !important;
  border: 1px solid var(--bp-light-border) !important;
}
:root[data-theme="light"] [class*="live-score"] .score,
:root[data-theme="light"] [data-live-card] .score{
  color: var(--bp-light-accent) !important;
  font-weight: 800;
}

/* 13) LEAGUE PILLS / FILTERS */
:root[data-theme="light"] .league-pill,
:root[data-theme="light"] [class*="pill"],
:root[data-theme="light"] .filter-btn{
  background: #ffffff !important;
  color: var(--bp-light-text) !important;
  border: 1px solid var(--bp-light-border) !important;
}
:root[data-theme="light"] .league-pill.active,
:root[data-theme="light"] .filter-btn.active{
  background: var(--bp-light-accent) !important;
  color: #ffffff !important;
  border-color: var(--bp-light-accent) !important;
}

/* 14) THEME TOGGLE BUTTON itself */
:root[data-theme="light"] #theme-toggle{
  background: #ffffff !important;
  color: var(--bp-light-text) !important;
  border: 2px solid var(--bp-light-accent) !important;
  box-shadow: 0 4px 14px rgba(220,38,38,0.15);
}

/* 15) PD 2026 COUNTDOWN BANNER */
:root[data-theme="light"] .countdown-banner,
:root[data-theme="light"] [class*="countdown"]{
  background: linear-gradient(90deg, #facc15 0%, #fbbf24 100%) !important;
  color: #0f172a !important;
}
:root[data-theme="light"] [class*="countdown"] *{ color: #0f172a !important; }

/* 16) DROPDOWN MENUS */
:root[data-theme="light"] .dropdown,
:root[data-theme="light"] .dropdown-menu,
:root[data-theme="light"] [class*="dropdown"]{
  background: #ffffff !important;
  border: 1px solid var(--bp-light-border) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12) !important;
}
:root[data-theme="light"] .dropdown a,
:root[data-theme="light"] .dropdown-menu a{
  color: var(--bp-light-text) !important;
}
:root[data-theme="light"] .dropdown a:hover{
  background: var(--bp-light-surface-2) !important;
  color: var(--bp-light-accent) !important;
}

/* 17) FAQ accordion */
:root[data-theme="light"] details,
:root[data-theme="light"] .faq-item{
  background: #ffffff !important;
  color: var(--bp-light-text) !important;
  border: 1px solid var(--bp-light-border) !important;
}
:root[data-theme="light"] summary{ color: var(--bp-light-text) !important; }

/* 18) Make sure no white-on-white anywhere via global safety net */
:root[data-theme="light"] .bg-white *,
:root[data-theme="light"] [style*="background:#fff"] *,
:root[data-theme="light"] [style*="background-color:#fff"] *{
  color: var(--bp-light-text);
}

/* 19) Modal/popup */
:root[data-theme="light"] .modal,
:root[data-theme="light"] [role="dialog"],
:root[data-theme="light"] [class*="popup"]:not(.tooltip){
  background: #ffffff !important;
  color: var(--bp-light-text) !important;
  border: 1px solid var(--bp-light-border) !important;
}

/* 20) Subtle scrollbar */
:root[data-theme="light"]::-webkit-scrollbar-thumb{ background:#cbd5e1; }
:root[data-theme="light"]::-webkit-scrollbar-track{ background:#f1f5f9; }