/**
 * Soccer808 Light Theme — s808-theme.css
 * ========================================
 * Reference-inspired clean football platform design.
 * Loaded AFTER all other CSS files so it cleanly overrides
 * the dark tokens from soccer808.css and betmines-theme.css.
 *
 * Design system:
 *   Primary green:   #35B94A
 *   Dark green:      #218838
 *   Navbar dark:     #1A2332
 *   Page bg:         #F5F6F7
 *   Card bg:         #FFFFFF
 *   Border:          #E5E7EB
 *   Text main:       #202124
 *   Text secondary:  #6B7280
 *   Won/positive:    #22A447
 *   Warning:         #E9A23B
 *   Error/live:      #DC3545
 *   Gold/VIP:        #F59E0B
 */

/* ═══════════════════════════════════════════════════════════
   0. THEME TOKENS — override dark tokens site-wide
   ═══════════════════════════════════════════════════════════ */
:root {
    /* Brand */
    --s8-brand-primary:   #1A2332;   /* Dark navy for navbar/headers */
    --s8-brand-secondary: #35B94A;   /* Primary green (was blue) */
    --s8-brand-accent:    #35B94A;   /* Green accent */
    --s8-brand-gold:      #F59E0B;   /* VIP gold */
    --s8-brand-red:       #DC3545;   /* Live / loss */

    /* Backgrounds — LIGHT theme */
    --s8-bg-page:      #F5F6F7;
    --s8-bg-card:      #FFFFFF;
    --s8-bg-card-alt:  #F9FAFB;
    --s8-bg-hover:     #F3F4F6;
    --s8-bg-input:     #FFFFFF;
    --s8-bg-badge:     rgba(0,0,0,0.05);

    /* Borders */
    --s8-border:       #E5E7EB;
    --s8-border-hover: #D1D5DB;

    /* Text */
    --s8-text-primary:   #202124;
    --s8-text-secondary: #6B7280;
    --s8-text-muted:     #9CA3AF;
    --s8-text-inverse:   #FFFFFF;

    /* Status */
    --s8-won:    #22A447;
    --s8-lost:   #DC3545;
    --s8-pending:#E9A23B;
    --s8-void:   #8b5cf6;
    --s8-live:   #DC3545;

    /* Shadows — lighter for white cards */
    --s8-shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
    --s8-shadow:     0 2px 8px rgba(0,0,0,0.10);
    --s8-shadow-lg:  0 8px 24px rgba(0,0,0,0.12);

    /* Green-specific accent shadows */
    --s8-shadow-green: 0 2px 12px rgba(53,185,74,0.25);
}

/* ═══════════════════════════════════════════════════════════
   1. BASE — page background, body, text
   ═══════════════════════════════════════════════════════════ */
html, body {
    background-color: var(--s8-bg-page);
    color: var(--s8-text-primary);
}

body.betmines-theme {
    background-color: var(--s8-bg-page) !important;
    color: var(--s8-text-primary);
    font-family: 'Sofia Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Kill the near-black page bg from ep-layout */
body.ep-layout {
    background: var(--s8-bg-page) !important;
}

/* ═══════════════════════════════════════════════════════════
   2. NAVBAR — dark with green accents
   ═══════════════════════════════════════════════════════════ */
.ep-navbar {
    background: #1A2332 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    height: 60px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

.ep-navbar-logo img {
    max-height: 32px;
}

.ep-nav-link {
    color: rgba(255,255,255,0.80) !important;
    font-size: 0.83rem;
    font-weight: 600;
    padding: 7px 11px;
    border-radius: 7px;
}
.ep-nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.10) !important;
}
.ep-nav-link.active {
    color: #fff !important;
    background: rgba(53,185,74,0.18) !important;
}
.ep-nav-link.active::after {
    background: #35B94A !important;
}

/* VIP nav link — keep gold */
.ep-nav-vip-link {
    color: #F59E0B !important;
}
.ep-nav-vip-link:hover,
.ep-nav-vip-link.active {
    background: rgba(245,158,11,0.15) !important;
}
.ep-nav-vip-link.active::after {
    background: #F59E0B !important;
}

/* VIP button in navbar */
.ep-vip-btn {
    background: linear-gradient(135deg, #35B94A 0%, #218838 100%) !important;
    color: #fff !important;
    box-shadow: var(--s8-shadow-green) !important;
    height: 34px;
    border-radius: 20px;
}
.ep-vip-btn:hover {
    background: linear-gradient(135deg, #43cc58 0%, #2ea04a 100%) !important;
    box-shadow: 0 4px 16px rgba(53,185,74,0.45) !important;
}

/* Search in navbar */
.ep-search-form {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.15) !important;
    height: 34px;
    border-radius: 20px;
}
.ep-search-form:focus-within {
    background: rgba(255,255,255,0.18) !important;
    border-color: #35B94A !important;
}
.ep-search-input {
    color: #fff !important;
}
.ep-search-input::placeholder {
    color: rgba(255,255,255,0.50) !important;
}

/* Hamburger — visible on dark navbar */
.ep-hamburger-line {
    background: rgba(255,255,255,0.9) !important;
}

/* ═══════════════════════════════════════════════════════════
   3. LAYOUT CONTAINERS
   ═══════════════════════════════════════════════════════════ */
.ep-layout-wrapper {
    background: var(--s8-bg-page);
}

.ep-below-nav {
    background: var(--s8-bg-page);
    max-width: 1320px;
}

.ep-content-body {
    background: transparent;
    padding: 20px 0;
}

/* ═══════════════════════════════════════════════════════════
   4. CARDS — white with light borders
   ═══════════════════════════════════════════════════════════ */
.s8-card {
    background: var(--s8-bg-card);
    border: 1px solid var(--s8-border);
    border-radius: 12px;
    box-shadow: var(--s8-shadow-sm);
    padding: 16px;
    margin-bottom: 16px;
}

.bm-card {
    background: var(--s8-bg-card) !important;
    border: 1px solid var(--s8-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--s8-shadow-sm) !important;
}

/* ═══════════════════════════════════════════════════════════
   5. HERO STATS STRIP
   ═══════════════════════════════════════════════════════════ */
.ep-hero-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

@media (min-width: 640px) {
    .ep-hero-strip { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}

.ep-hero-stat {
    background: var(--s8-bg-card);
    border: 1px solid var(--s8-border);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: var(--s8-shadow-sm);
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
}
.ep-hero-stat:hover {
    border-color: #35B94A;
    box-shadow: var(--s8-shadow-green);
    transform: translateY(-2px);
}

.ep-hero-stat-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--s8-text-primary);
    line-height: 1;
}

.ep-hero-stat-label {
    font-size: 0.7rem;
    color: var(--s8-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 3px;
}

.ep-hero-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.icon-blue  { background: #EFF6FF; color: #2563EB; }
.icon-green { background: #F0FDF4; color: #22A447; }
.icon-gold  { background: #FFFBEB; color: #D97706; }
.icon-red   { background: #FFF1F2; color: #DC3545; }

/* ═══════════════════════════════════════════════════════════
   6. PAGE TITLES
   ═══════════════════════════════════════════════════════════ */
.ep-page-title {
    color: var(--s8-text-primary) !important;
    font-size: clamp(1.2rem, 3vw, 1.6rem) !important;
    font-weight: 800;
}
.ep-page-subtitle {
    color: var(--s8-text-secondary) !important;
    font-size: 0.88rem;
}
.bm-page-title {
    color: var(--s8-text-primary) !important;
}
.bm-page-subheader {
    color: var(--s8-text-secondary) !important;
}

/* ═══════════════════════════════════════════════════════════
   7. CATEGORY TABS (market filters)
   ═══════════════════════════════════════════════════════════ */
.ep-cat-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    margin-bottom: 16px;
}
.ep-cat-tabs::-webkit-scrollbar { display: none; }

.ep-cat-tab {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none !important;
    color: var(--s8-text-secondary) !important;
    background: var(--s8-bg-card);
    border: 1px solid var(--s8-border);
    transition: all 0.15s;
    cursor: pointer;
    min-height: 36px;
}
.ep-cat-tab:hover {
    color: var(--s8-text-primary) !important;
    border-color: #35B94A;
    background: #F0FDF4;
}
.ep-cat-tab.active {
    background: #35B94A;
    border-color: #35B94A;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(53,185,74,0.30);
}

/* Legacy bm- market buttons */
.bm-market-btn {
    background: var(--s8-bg-card) !important;
    color: var(--s8-text-secondary) !important;
    border: 1px solid var(--s8-border) !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    padding: 7px 14px !important;
    min-height: 36px;
}
.bm-market-btn.active,
.bm-market-btn:hover {
    background: #35B94A !important;
    border-color: #35B94A !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   8. MATCH LIST / PREDICTION TABLE
   ═══════════════════════════════════════════════════════════ */
.bm-match-list {
    background: var(--s8-bg-card) !important;
    border: 1px solid var(--s8-border) !important;
    border-radius: 0 0 12px 12px !important;
    overflow: hidden;
}

.bm-search-bar {
    background: var(--s8-bg-card) !important;
    border: 1px solid var(--s8-border) !important;
    border-bottom: 1px solid var(--s8-border) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 10px 14px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bm-search-input {
    background: var(--s8-bg-card-alt) !important;
    border: 1px solid var(--s8-border) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    max-width: none !important;
    flex: 1;
}

.bm-search-input input {
    color: var(--s8-text-primary) !important;
    font-size: 0.82rem;
}
.bm-search-input input::placeholder {
    color: var(--s8-text-muted) !important;
}
.bm-search-input i {
    color: var(--s8-text-muted) !important;
}

.bm-filter-btn {
    background: var(--s8-bg-card-alt) !important;
    border: 1px solid var(--s8-border) !important;
    color: var(--s8-text-secondary) !important;
    border-radius: 8px !important;
    font-size: 0.78rem;
    padding: 7px 12px;
    min-height: 36px;
}
.bm-filter-btn:hover {
    border-color: #35B94A !important;
    color: #35B94A !important;
}

.bm-table-headers span {
    color: var(--s8-text-muted) !important;
}

.bm-league-header {
    background: #F9FAFB !important;
    border-bottom: 1px solid var(--s8-border) !important;
    color: var(--s8-text-secondary) !important;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 7px 14px !important;
}
.bm-league-header span {
    color: var(--s8-text-secondary);
}
.bm-league-header .bm-star {
    color: #D1D5DB;
}
.bm-league-header .bm-star:hover {
    color: #F59E0B;
}

/* Match rows */
.bm-match-row-premium {
    background: var(--s8-bg-card) !important;
    border-bottom: 1px solid var(--s8-border) !important;
    padding: 10px 14px !important;
    min-height: 52px;
    transition: background 0.1s;
}
.bm-match-row-premium:hover {
    background: #F9FAFB !important;
}
.bm-match-row-premium:last-child {
    border-bottom: none !important;
}

.bm-team-name-text {
    color: var(--s8-text-primary) !important;
    font-size: 0.84rem !important;
    font-weight: 500;
}

.bm-match-time {
    color: var(--s8-text-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 600;
}

.bm-match-score {
    color: var(--s8-text-primary) !important;
    font-weight: 700;
}

/* Probability badges */
.bm-prob-badge.prob-high {
    background: #F0FDF4 !important;
    color: #22A447 !important;
    border: 1px solid #BBF7D0 !important;
}
.bm-prob-badge.prob-med {
    background: #FFFBEB !important;
    color: #D97706 !important;
    border: 1px solid #FDE68A !important;
}
.bm-prob-badge.prob-low {
    background: #FFF1F2 !important;
    color: #DC3545 !important;
    border: 1px solid #FECACA !important;
}

/* Tip badge */
.bm-tip-badge {
    background: #EFF6FF !important;
    color: #2563EB !important;
    border: 1px solid #BFDBFE !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
}

/* Odds */
.bm-odd-col {
    color: #35B94A !important;
    font-weight: 800 !important;
    font-size: 0.82rem !important;
}

/* Won/Lost stripe */
.bm-match-row-premium.status-won::after  { background: #22A447 !important; }
.bm-match-row-premium.status-lost::after { background: #DC3545 !important; }

/* Live toggle */
.s8-live-toggle {
    background: var(--s8-bg-card-alt) !important;
    border: 1px solid var(--s8-border) !important;
    border-radius: 8px !important;
}
.s8-live-toggle-btn {
    color: var(--s8-text-secondary) !important;
    font-size: 0.78rem;
    padding: 6px 12px;
    min-height: 34px;
}
.s8-live-toggle-btn.active {
    background: var(--s8-bg-card) !important;
    color: var(--s8-text-primary) !important;
}
.s8-live-toggle-live.active {
    background: #FFF1F2 !important;
    color: #DC3545 !important;
}

/* ═══════════════════════════════════════════════════════════
   9. VIP BANNER
   ═══════════════════════════════════════════════════════════ */
.s8-vip-banner {
    background: linear-gradient(135deg, #1A2332 0%, #243447 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.s8-vip-banner-text h3 {
    color: #F59E0B;
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0 0 4px;
}
.s8-vip-banner-text p {
    color: rgba(255,255,255,0.65);
    font-size: 0.82rem;
    margin: 0;
}
.s8-vip-banner .s8-btn-gold {
    background: #F59E0B !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 700;
}
.s8-vip-banner .s8-btn-gold:hover {
    background: #D97706 !important;
}

/* ═══════════════════════════════════════════════════════════
   10. ARTICLE / NEWS CARDS
   ═══════════════════════════════════════════════════════════ */
.s8-article-card,
.bm-article-card {
    background: var(--s8-bg-card) !important;
    border: 1px solid var(--s8-border) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: var(--s8-shadow-sm) !important;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.s8-article-card:hover,
.bm-article-card:hover {
    border-color: #35B94A !important;
    box-shadow: var(--s8-shadow-green) !important;
    transform: translateY(-3px) !important;
}

.s8-article-title a,
.bm-article-title a {
    color: var(--s8-text-primary) !important;
}
.s8-article-title a:hover,
.bm-article-title a:hover {
    color: #35B94A !important;
}

.s8-article-date,
.bm-article-date {
    color: var(--s8-text-muted) !important;
    font-size: 0.72rem !important;
}

.s8-article-excerpt,
.bm-article-excerpt {
    color: var(--s8-text-secondary) !important;
    font-size: 0.8rem !important;
}

.s8-article-cat-badge {
    background: #35B94A !important;
    color: #fff !important;
}

.s8-section-icon {
    background: #35B94A !important;
    color: #fff !important;
}

.s8-section-title {
    color: var(--s8-text-primary) !important;
    font-size: 0.92rem;
    font-weight: 700;
}
.s8-view-all {
    color: #35B94A !important;
    font-size: 0.8rem;
    font-weight: 600;
}

.s8-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 10px;
}

/* ═══════════════════════════════════════════════════════════
   11. WINNING CARDS
   ═══════════════════════════════════════════════════════════ */
.wc-card {
    background: var(--s8-bg-card) !important;
    border: 1px solid var(--s8-border) !important;
    border-top: 3px solid #22A447 !important;
    border-radius: 12px !important;
    box-shadow: var(--s8-shadow-sm) !important;
}
.wc-card:hover {
    border-color: #22A447 !important;
    box-shadow: 0 4px 16px rgba(34,164,71,0.15) !important;
    transform: translateY(-2px);
}

.wc-header {
    background: #F9FAFB !important;
    border-bottom: 1px solid var(--s8-border) !important;
}
.wc-league-name {
    color: var(--s8-text-secondary) !important;
}
.wc-won-badge {
    background: #22A447 !important;
}

.wc-team-name {
    color: var(--s8-text-primary) !important;
}
.wc-score {
    color: var(--s8-text-primary) !important;
}
.wc-meta-label {
    color: var(--s8-text-muted) !important;
}
.wc-tip-badge {
    background: #EFF6FF !important;
    color: #2563EB !important;
}
.wc-odds-badge {
    background: #FFFBEB !important;
    color: #D97706 !important;
    border-color: #FDE68A !important;
}
.wc-date {
    color: var(--s8-text-muted) !important;
}

.wc-footer {
    border-top: 1px solid var(--s8-border) !important;
}

/* ═══════════════════════════════════════════════════════════
   12. DATE NAVIGATOR
   ═══════════════════════════════════════════════════════════ */
.bm-date-nav {
    background: var(--s8-bg-card) !important;
    border: 1px solid var(--s8-border) !important;
    border-radius: 10px !important;
    padding: 6px !important;
    box-shadow: var(--s8-shadow-sm);
    overflow: visible !important;
    margin: 0 0 16px !important;
}

.bm-date-live {
    background: #DC3545 !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 12px !important;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.bm-date-live.active,
.bm-date-live:hover {
    background: #c0392b !important;
}

.bm-date-item {
    color: var(--s8-text-secondary) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    min-height: 38px !important;
    min-width: 42px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}
.bm-date-item:hover {
    background: #F3F4F6 !important;
    color: var(--s8-text-primary) !important;
}
.bm-date-item.active {
    background: #35B94A !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(53,185,74,0.30) !important;
}
.bm-date-day {
    color: inherit !important;
    font-size: 0.88rem !important;
    font-weight: 700;
}
.bm-date-label {
    font-size: 0.58rem !important;
    color: inherit !important;
    opacity: 0.75;
}
.bm-date-divider {
    background: var(--s8-border) !important;
}

#bm-calendar-picker {
    color: var(--s8-text-secondary) !important;
    min-height: 38px;
}
#bm-calendar-picker:hover {
    background: #F3F4F6 !important;
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════
   13. SIDEBAR RIGHT PANEL
   ═══════════════════════════════════════════════════════════ */
.ep-right-panel {
    background: transparent;
}
.bm-sidebar {
    background: transparent !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}
.ep-right-panel .bm-sidebar-section {
    background: var(--s8-bg-card) !important;
    border: 1px solid var(--s8-border) !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    box-shadow: var(--s8-shadow-sm) !important;
}
.ep-right-panel .bm-sidebar-title {
    color: var(--s8-text-primary) !important;
    font-size: 0.78rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 14px 8px !important;
    border-bottom: 1px solid var(--s8-border);
}
.ep-right-panel .bm-sidebar-link {
    color: var(--s8-text-secondary) !important;
    font-size: 0.82rem !important;
    padding: 9px 14px !important;
    border-left: none !important;
    transition: background 0.12s, color 0.12s;
}
.ep-right-panel .bm-sidebar-link:hover,
.ep-right-panel .bm-sidebar-link.active {
    background: #F0FDF4 !important;
    color: #35B94A !important;
    border-left: 3px solid #35B94A !important;
    padding-left: 11px !important;
}
.ep-right-panel .bm-countries-list { max-height: 320px; }

/* Sidebar search */
.bm-sidebar-search-input {
    background: var(--s8-bg-card-alt) !important;
    border: 1px solid var(--s8-border) !important;
    color: var(--s8-text-primary) !important;
    border-radius: 20px !important;
}
.bm-sidebar-search-input:focus {
    border-color: #35B94A !important;
    outline: none;
}

/* ═══════════════════════════════════════════════════════════
   14. MOBILE DRAWER
   ═══════════════════════════════════════════════════════════ */
.ep-drawer {
    background: #1A2332 !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
}
.ep-drawer-header {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.ep-drawer-link {
    color: rgba(255,255,255,0.75) !important;
    min-height: 48px;
}
.ep-drawer-link:hover {
    background: rgba(255,255,255,0.07) !important;
    color: #fff !important;
}
.ep-drawer-link.active {
    background: rgba(53,185,74,0.15) !important;
    border-left-color: #35B94A !important;
    color: #fff !important;
}
.ep-drawer-section-title {
    color: rgba(255,255,255,0.45) !important;
    font-size: 0.68rem !important;
}
.ep-drawer-vip {
    color: #F59E0B !important;
}
.ep-drawer-live {
    color: #EF4444 !important;
}

/* ═══════════════════════════════════════════════════════════
   15. BOTTOM NAVIGATION
   ═══════════════════════════════════════════════════════════ */
.s8-bottom-nav {
    background: #1A2332 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.2) !important;
}
.s8-nav-item {
    color: rgba(255,255,255,0.60) !important;
}
.s8-nav-item.active {
    color: #35B94A !important;
}
.s8-nav-item.active::before {
    background: #35B94A !important;
}
.s8-nav-item.s8-nav-live {
    color: #EF4444 !important;
}
.s8-nav-vip-btn {
    background: linear-gradient(135deg, #35B94A 0%, #218838 100%) !important;
    color: #fff !important;
    box-shadow: 0 -4px 12px rgba(53,185,74,0.4) !important;
}
.s8-nav-vip-btn:hover,
.s8-nav-vip-btn.active {
    background: linear-gradient(135deg, #43cc58 0%, #2ea04a 100%) !important;
}

/* ═══════════════════════════════════════════════════════════
   16. FOOTER
   ═══════════════════════════════════════════════════════════ */
.bm-footer {
    background: #1A2332 !important;
    color: rgba(255,255,255,0.8) !important;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.bm-footer-title {
    color: #fff !important;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.bm-footer-link {
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.83rem;
    transition: color 0.12s;
}
.bm-footer-link:hover {
    color: #35B94A !important;
}
.bm-footer-social a {
    color: rgba(255,255,255,0.55) !important;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.12s, background 0.12s;
}
.bm-footer-social a:hover {
    color: #35B94A !important;
    background: rgba(53,185,74,0.12);
}
.bm-copyright {
    color: rgba(255,255,255,0.40) !important;
    font-size: 0.78rem;
}
.bm-footer-extra-link {
    color: rgba(255,255,255,0.40) !important;
    font-size: 0.78rem;
}
.bm-footer-extra-link:hover {
    color: rgba(255,255,255,0.70) !important;
}
.bm-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.s8-rg-disclaimer {
    background: rgba(245,158,11,0.08) !important;
    border-color: rgba(245,158,11,0.30) !important;
    color: rgba(245,158,11,0.85) !important;
    border-radius: 8px;
}

/* Partner links */
.bm-partner-link-item {
    color: rgba(255,255,255,0.50) !important;
    font-size: 0.78rem;
}
.bm-partner-link-item:hover {
    color: #35B94A !important;
}
.bm-partners-unfold-btn {
    color: rgba(255,255,255,0.40) !important;
    font-size: 0.72rem;
    min-height: 36px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 6px 12px;
    background: transparent;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   17. SCROLL TO TOP BUTTON
   ═══════════════════════════════════════════════════════════ */
.s8-scroll-top {
    background: #35B94A !important;
    box-shadow: 0 4px 12px rgba(53,185,74,0.35) !important;
}
.s8-scroll-top:hover {
    background: #218838 !important;
}

/* ═══════════════════════════════════════════════════════════
   18. BUTTONS — light theme variants
   ═══════════════════════════════════════════════════════════ */
.s8-btn-primary {
    background: #35B94A !important;
    color: #fff !important;
}
.s8-btn-primary:hover {
    background: #218838 !important;
}
.s8-btn-accent {
    background: #35B94A !important;
    color: #fff !important;
}
.s8-btn-ghost {
    background: transparent !important;
    border: 1px solid var(--s8-border) !important;
    color: var(--s8-text-secondary) !important;
}
.s8-btn-ghost:hover {
    border-color: #35B94A !important;
    color: #35B94A !important;
}

/* ═══════════════════════════════════════════════════════════
   19. BADGES — light theme
   ═══════════════════════════════════════════════════════════ */
.s8-badge-won     { background: #22A447 !important; }
.s8-badge-lost    { background: #DC3545 !important; }
.s8-badge-pending { background: #E9A23B !important; color: #fff !important; }
.s8-badge-live    { background: #DC3545 !important; }
.s8-badge-free    { background: #35B94A !important; color: #fff !important; }
.s8-badge-vip     { background: #F59E0B !important; color: #fff !important; }

/* ═══════════════════════════════════════════════════════════
   20. BREADCRUMBS
   ═══════════════════════════════════════════════════════════ */
.s8-breadcrumb a {
    color: var(--s8-text-muted) !important;
}
.s8-breadcrumb a:hover {
    color: #35B94A !important;
}
.s8-breadcrumb-current {
    color: var(--s8-text-secondary) !important;
}
.s8-breadcrumb-sep {
    color: var(--s8-border-hover) !important;
}

/* ═══════════════════════════════════════════════════════════
   21. EMPTY STATES
   ═══════════════════════════════════════════════════════════ */
.s8-empty-state {
    background: var(--s8-bg-card);
    border: 1px solid var(--s8-border);
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
}
.s8-empty-state h3 {
    color: var(--s8-text-primary) !important;
}
.s8-empty-state p {
    color: var(--s8-text-secondary) !important;
}

/* ═══════════════════════════════════════════════════════════
   22. SECTION DIVIDERS
   ═══════════════════════════════════════════════════════════ */
.s8-divider {
    border-top: 1px solid var(--s8-border) !important;
}

/* ═══════════════════════════════════════════════════════════
   23. FLATPICKR — light theme
   ═══════════════════════════════════════════════════════════ */
.flatpickr-calendar {
    background: var(--s8-bg-card) !important;
    border: 1px solid var(--s8-border) !important;
    box-shadow: var(--s8-shadow) !important;
    border-radius: 12px !important;
}
.flatpickr-calendar .flatpickr-day {
    color: var(--s8-text-primary) !important;
}
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover {
    background: #35B94A !important;
    border-color: #35B94A !important;
    color: #fff !important;
}
.flatpickr-calendar .flatpickr-day:hover {
    background: #F0FDF4 !important;
}
.flatpickr-calendar .flatpickr-current-month {
    color: var(--s8-text-primary) !important;
}
.flatpickr-calendar .flatpickr-weekday {
    color: var(--s8-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════
   24. PAGINATION
   ═══════════════════════════════════════════════════════════ */
.pagination .page-link {
    background: var(--s8-bg-card) !important;
    border: 1px solid var(--s8-border) !important;
    color: var(--s8-text-secondary) !important;
    border-radius: 8px !important;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 7px 14px;
    transition: all 0.12s;
}
.pagination .page-item.active .page-link {
    background: #35B94A !important;
    border-color: #35B94A !important;
    color: #fff !important;
}
.pagination .page-link:hover {
    background: #F0FDF4 !important;
    border-color: #35B94A !important;
    color: #35B94A !important;
}

/* ═══════════════════════════════════════════════════════════
   25. SHARE BUTTONS
   ═══════════════════════════════════════════════════════════ */
.s8-share-wa       { background: #25D366 !important; }
.s8-share-tw       { background: #1DA1F2 !important; }
.s8-share-fb       { background: #1877F2 !important; }
.s8-share-tg       { background: #229ED9 !important; }

/* ═══════════════════════════════════════════════════════════
   26. ODDS DISPLAY
   ═══════════════════════════════════════════════════════════ */
.s8-odds-btn {
    background: var(--s8-bg-card-alt) !important;
    border: 1px solid var(--s8-border) !important;
}
.s8-odds-btn:hover,
.s8-odds-btn.active {
    border-color: #35B94A !important;
    background: #F0FDF4 !important;
}
.s8-odds-value {
    color: #35B94A !important;
}
.s8-odds-label {
    color: var(--s8-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════
   27. PREDICTION CARDS (s8-prediction-card)
   ═══════════════════════════════════════════════════════════ */
.s8-prediction-card {
    background: var(--s8-bg-card) !important;
    border: 1px solid var(--s8-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--s8-shadow-sm) !important;
}
.s8-prediction-card:hover {
    border-color: #35B94A !important;
    box-shadow: var(--s8-shadow-green) !important;
}
.s8-prediction-card.s8-won {
    border-left: 4px solid #22A447 !important;
}
.s8-prediction-card.s8-lost {
    border-left: 4px solid #DC3545 !important;
}
.s8-pred-header {
    background: #F9FAFB !important;
    border-bottom: 1px solid var(--s8-border) !important;
}
.s8-pred-league-name {
    color: var(--s8-text-secondary) !important;
}
.s8-pred-time {
    color: var(--s8-text-muted) !important;
}
.s8-pred-team-name {
    color: var(--s8-text-primary) !important;
}
.s8-pred-tip {
    background: #35B94A !important;
    color: #fff !important;
}
.s8-pred-odds {
    color: #D97706 !important;
}
.s8-pred-prob {
    color: var(--s8-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════
   28. STANDINGS / TABLES
   ═══════════════════════════════════════════════════════════ */
.bm-standings-table {
    background: var(--s8-bg-card) !important;
}
.bm-standings-table th {
    color: var(--s8-text-muted) !important;
    background: #F9FAFB !important;
    border-bottom: 1px solid var(--s8-border) !important;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bm-standings-table td {
    color: var(--s8-text-primary) !important;
    border-bottom: 1px solid var(--s8-border) !important;
    font-size: 0.82rem;
}
.bm-standings-table tr:hover td {
    background: #F9FAFB !important;
}
.bm-team-name-small {
    color: var(--s8-text-primary) !important;
}
.bm-rank-green { background: #22A447 !important; }
.bm-rank-blue  { background: #2563EB !important; }

/* ═══════════════════════════════════════════════════════════
   29. FORM INPUTS (info article, search, subscribe)
   ═══════════════════════════════════════════════════════════ */
input[type=text],
input[type=search],
input[type=email],
textarea,
select {
    color: var(--s8-text-primary);
    background: var(--s8-bg-card);
    border: 1px solid var(--s8-border);
    border-radius: 8px;
}
input[type=text]:focus,
input[type=search]:focus,
input[type=email]:focus,
textarea:focus,
select:focus {
    border-color: #35B94A;
    outline: none;
    box-shadow: 0 0 0 3px rgba(53,185,74,0.15);
}

/* ═══════════════════════════════════════════════════════════
   30. AD SLOTS — light theme
   ═══════════════════════════════════════════════════════════ */
.ad-label {
    color: var(--s8-text-muted) !important;
}
.ad-native-card {
    background: #F9FAFB !important;
    border: 1px solid var(--s8-border) !important;
}
.ad-native-card::before {
    background: linear-gradient(90deg, #35B94A, #2563EB) !important;
}
.ad-native-title {
    color: var(--s8-text-primary) !important;
}
.ad-partner-pill {
    background: var(--s8-bg-card-alt) !important;
    border: 1px solid var(--s8-border) !important;
}
.ad-partner-pill:hover {
    border-color: #35B94A !important;
}

/* ═══════════════════════════════════════════════════════════
   31. LIVE BADGE
   ═══════════════════════════════════════════════════════════ */
.s8-live-badge {
    background: #DC3545 !important;
}
.s8-live-dot {
    background: #DC3545 !important;
}
.ep-live-dot {
    background: #EF4444 !important;
}

/* ═══════════════════════════════════════════════════════════
   32. FOCUS RING — brand green
   ═══════════════════════════════════════════════════════════ */
:focus-visible {
    outline: 2px solid #35B94A !important;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════
   33. COOKIE CONSENT
   ═══════════════════════════════════════════════════════════ */
.s8-cookie-bar {
    background: #1A2332 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* ═══════════════════════════════════════════════════════════
   34. REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .s8-live-dot,
    .ep-live-dot {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   35. INFO ARTICLE / SEO CONTENT BLOCK
   ═══════════════════════════════════════════════════════════ */
.bm-info-article-card,
.bm-info-article-dynamic {
    background: var(--s8-bg-card) !important;
    border: 1px solid var(--s8-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--s8-shadow-sm) !important;
}

.bm-article-content {
    color: var(--s8-text-secondary) !important;
    font-size: 0.9rem;
    line-height: 1.75;
}

.bm-article-content h2,
.bm-article-content h3,
.bm-content-h2,
.bm-content-h3 {
    color: var(--s8-text-primary) !important;
    font-weight: 700;
}

.bm-article-content p {
    color: var(--s8-text-secondary) !important;
    margin-bottom: 12px;
}

.bm-article-content a {
    color: #35B94A !important;
}
.bm-article-content a:hover {
    color: #218838 !important;
}

.bm-disclaimer {
    background: rgba(245,158,11,0.06) !important;
    border-left: 3px solid #E9A23B !important;
    color: #92400e !important;
    border-radius: 0 6px 6px 0;
}

.bm-content-list li::before {
    color: #35B94A !important;
}

/* ═══════════════════════════════════════════════════════════
   36. BLOG LIST / NEWS INDEX
   ═══════════════════════════════════════════════════════════ */
.bm-article-body {
    padding: 14px !important;
}

.bm-article-title a {
    color: var(--s8-text-primary) !important;
    font-weight: 700;
}

.bm-featured-read {
    color: #35B94A !important;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bm-featured-read:hover {
    color: #218838 !important;
}

/* ═══════════════════════════════════════════════════════════
   37. BLOG POST / ARTICLE SHOW PAGE
   ═══════════════════════════════════════════════════════════ */
.bm-article-header { color: var(--s8-text-primary) !important; }
.bm-article-main-title {
    color: var(--s8-text-primary) !important;
    font-size: clamp(1.3rem, 3.5vw, 1.9rem) !important;
    font-weight: 800;
    line-height: 1.2;
}
.bm-article-meta {
    color: var(--s8-text-muted) !important;
    font-size: 0.82rem;
}

/* ═══════════════════════════════════════════════════════════
   38. RECENT WINNINGS PAGE
   ═══════════════════════════════════════════════════════════ */
.h3.font-weight-bold { color: var(--s8-text-primary) !important; }

/* ═══════════════════════════════════════════════════════════
   39. LIVE SCORES PAGE
   ═══════════════════════════════════════════════════════════ */
.s8-match-group {
    background: var(--s8-bg-card) !important;
    border: 1px solid var(--s8-border) !important;
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 12px !important;
    box-shadow: var(--s8-shadow-sm) !important;
}
.s8-league-header {
    background: #F9FAFB !important;
    border-bottom: 1px solid var(--s8-border) !important;
}
.s8-league-name { color: var(--s8-text-primary) !important; font-weight: 700; }
.s8-league-country { color: var(--s8-text-muted) !important; }

.s8-match-row {
    background: var(--s8-bg-card) !important;
    border-bottom: 1px solid var(--s8-border) !important;
}
.s8-match-row:hover { background: #F9FAFB !important; }
.s8-team span { color: var(--s8-text-primary) !important; }
.s8-match-score-live { color: #DC3545 !important; }
.s8-match-score-final { color: var(--s8-text-primary) !important; }
.s8-match-vs { color: var(--s8-text-muted) !important; }
.s8-match-kickoff { color: var(--s8-text-muted) !important; }
.s8-status-ft { color: var(--s8-text-muted) !important; }

/* ═══════════════════════════════════════════════════════════
   40. FIXTURES PAGE
   ═══════════════════════════════════════════════════════════ */
.s8-date-btn {
    background: var(--s8-bg-card) !important;
    border: 1px solid var(--s8-border) !important;
    color: var(--s8-text-secondary) !important;
    border-radius: 8px !important;
    font-size: 0.8rem;
}
.s8-date-btn:hover {
    border-color: #35B94A !important;
    color: #35B94A !important;
}
.s8-date-btn.active {
    background: #35B94A !important;
    border-color: #35B94A !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   41. FIXTURES SEARCH RESULT PAGE
   ═══════════════════════════════════════════════════════════ */
.s8-search-box {
    background: var(--s8-bg-card) !important;
    border: 1px solid var(--s8-border) !important;
    border-radius: 24px !important;
}
.s8-search-box:focus-within {
    border-color: #35B94A !important;
    box-shadow: 0 0 0 3px rgba(53,185,74,0.15) !important;
}
.s8-search-input {
    color: var(--s8-text-primary) !important;
}
.s8-search-input::placeholder {
    color: var(--s8-text-muted) !important;
}
.s8-search-box i { color: var(--s8-text-muted) !important; }

/* ═══════════════════════════════════════════════════════════
   42. FORM CIRCLES (W/D/L in team form)
   ═══════════════════════════════════════════════════════════ */
.s8-form-w { background: #22A447 !important; }
.s8-form-d { background: #E9A23B !important; }
.s8-form-l { background: #DC3545 !important; }

/* ═══════════════════════════════════════════════════════════
   43. NEWSLETTER / SUBSCRIBER POPUP
   ═══════════════════════════════════════════════════════════ */
.s8-cookie-bar p { color: rgba(255,255,255,0.75) !important; }
.s8-cookie-bar a { color: #35B94A !important; }

/* ═══════════════════════════════════════════════════════════
   44. AD SLOTS — leaderboard wrap needs light bg
   ═══════════════════════════════════════════════════════════ */
.ep-leaderboard-wrap {
    background: var(--s8-bg-card) !important;
    border-bottom: 1px solid var(--s8-border) !important;
}

/* ═══════════════════════════════════════════════════════════
   45. STANDINGS LEGEND
   ═══════════════════════════════════════════════════════════ */
.bm-legend-item { color: var(--s8-text-secondary) !important; }
.bm-standings-legend {
    border-top: 1px solid var(--s8-border) !important;
}

/* ═══════════════════════════════════════════════════════════
   46. PROBABILITY BAR
   ═══════════════════════════════════════════════════════════ */
.s8-prob-bar {
    background: var(--s8-border, #E5E7EB) !important;
}
.s8-prob-bar-fill {
    background: #35B94A !important;
}

/* ═══════════════════════════════════════════════════════════
   47. MATCH GROUP WRAPPER (home page grouping)
   ═══════════════════════════════════════════════════════════ */
.bm-match-group {
    /* inherits border-bottom from rows; no bg needed */
    background: transparent;
}

/* ═══════════════════════════════════════════════════════════
   48. SECTION CARD HEADER DIVIDER
   ═══════════════════════════════════════════════════════════ */
.s8-card > .s8-card-header {
    border-bottom: 1px solid var(--s8-border);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════════
   49. PAGE-SPECIFIC: CONTACT / ABOUT / LEGAL
   ═══════════════════════════════════════════════════════════ */
.bm-card p, .bm-card li {
    color: var(--s8-text-secondary) !important;
}
.bm-card h2, .bm-card h3 {
    color: var(--s8-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════
   50. PRELOADER (if still active)
   ═══════════════════════════════════════════════════════════ */
#preloader {
    background: var(--s8-bg-card) !important;
}

/* ═══════════════════════════════════════════════════════════
   51. SKELETON LOADER
   ═══════════════════════════════════════════════════════════ */
.s8-skeleton {
    background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%) !important;
    background-size: 200% 100% !important;
}

/* ═══════════════════════════════════════════════════════════
   52. DARK MODE TOGGLE (future-proofing)
   If user has explicit dark preference, restore dark theme
   ═══════════════════════════════════════════════════════════ */
/* Uncomment to add automatic dark mode support:
@media (prefers-color-scheme: dark) {
    :root {
        --s8-bg-page:    #0d0f13;
        --s8-bg-card:    #161b22;
        --s8-text-primary: #f0f4f8;
    }
}
*/

/* ═══════════════════════════════════════════════════════════
   53. RESPONSIVE UTILITIES — light theme specific
   ═══════════════════════════════════════════════════════════ */

/* Ensure no old dark body/html bg bleeds through */
html {
    background: var(--s8-bg-page);
}

/* Bootstrap text-* overrides for light theme */
.text-white { color: #fff !important; }
.text-muted { color: var(--s8-text-muted) !important; }

/* Card body text */
.card-body,
.card { background: var(--s8-bg-card) !important; color: var(--s8-text-primary) !important; }
.card-header { background: #F9FAFB !important; border-color: var(--s8-border) !important; color: var(--s8-text-primary) !important; }

/* Alert overrides for admin panel session messages (public-facing) */
.alert-success {
    background: #F0FDF4 !important;
    border-color: #BBF7D0 !important;
    color: #166534 !important;
}
.alert-danger, .alert-error {
    background: #FFF1F2 !important;
    border-color: #FECACA !important;
    color: #991b1b !important;
}
.alert-warning {
    background: #FFFBEB !important;
    border-color: #FDE68A !important;
    color: #92400e !important;
}
.alert-info {
    background: #EFF6FF !important;
    border-color: #BFDBFE !important;
    color: #1e40af !important;
}

/* ═══════════════════════════════════════════════════════════
   54. PRINT STYLES — keep white bg for printing
   ═══════════════════════════════════════════════════════════ */
@media print {
    body, html { background: #fff !important; color: #000 !important; }
    .ep-navbar, .s8-bottom-nav, .ep-drawer, .s8-scroll-top { display: none !important; }
    .ep-below-nav { padding: 0 !important; }
    .ep-right-panel { display: none !important; }
}