/* ============================================================
   VirtualEagues League System v2 — Front-end Styles
   ============================================================
   Changes from v1:
   - Header: border-radius 40px ALL corners (not flat top)
   - Glow: overflow visible, not clipped
   - Mobile tabs: flex-wrap (no horizontal scroll)
   - WPBakery content zone between header and tab content
   ============================================================ */

/* ─── CSS Variables ─── */
:root {
    --vl-bg-dark: #151419;
    --vl-bg-darker: #222127;
    --vl-border-dark: #232228;
    --vl-text-light: #ddd;
    --vl-text-white: #fff;
    --vl-header-radius: 40px;
    --vl-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* ─── Page Reset ─── */
.vl-league-page {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--vl-font-family);
}

/* ============================================================
   1. LEAGUE HEADER  (Full-width, 40px rounded ALL corners)
   ============================================================ */

/* Wrapper keeps glow visible — no overflow clipping */
.vl-league-header-wrap {
    width: 100%;
    padding: 0 0 1rem 0;
    /* Allow glow to paint outside the header box */
    overflow: visible;
}

.vl-league-header {
    position: relative;
    z-index: 5;
    width: 100%;
    min-height: 20rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.78);
    /* ROUNDED ALL FOUR CORNERS */
    border-radius: var(--vl-header-radius);
    /* Overflow visible so glow pseudo-element is NOT clipped */
    overflow: visible;
    font-family: var(--vl-font-family);
}

/* Glow border (all four corners) */
.vl-league-header::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Match parent radius exactly */
    border-radius: var(--vl-header-radius);
    z-index: -1;
    border: 0.155rem solid transparent;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
}

/*
 * Inner content needs clipping so background-image respects radius,
 * but the ::before glow lives outside via z-index: -1 + overflow:visible.
 * We use an ::after pseudo as a clipped background layer instead.
 */
.vl-league-header::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--vl-header-radius);
    z-index: -2;
    /* Inherits background from .vl-league-header via theme classes */
    background: inherit;
    pointer-events: none;
}

/* ─── Header Top Row ─── */
.vl-league-header__top {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem 0.5rem 2rem;
}

/* ─── Season Dropdown (replaces date) ─── */
.vl-season-selector {
    position: relative;
    z-index: 10;
}

.vl-season-dropdown {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    padding: 0.4rem 2rem 0.4rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--vl-font-family);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 10px;
    transition: all 0.3s ease;
    outline: none;
}

.vl-season-dropdown:hover,
.vl-season-dropdown:focus {
    background-color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
}

.vl-season-dropdown option {
    background: #1a1a2e;
    color: #fff;
}

.vl-league-header__status {
    font-weight: bold;
    font-size: 1rem;
    font-style: italic;
}

.vl-league-header__status.status-live        { color: #e60023; }
.vl-league-header__status.status-closed      { color: #ddd; }
.vl-league-header__status.status-coming-soon { color: #3ef254; }

.blinking-dot {
    animation: vl-blink 1s infinite;
    font-size: 1rem;
}
.blinking-dot.red   { color: #e60023; }
.blinking-dot.green { color: #3ef254; }

@keyframes vl-blink {
    0%   { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
}

.vl-league-header__consoles {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.vl-league-header__consoles img {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.3rem;
}

/* ─── Header Body ─── */
.vl-league-header__body {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 1.25rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vl-league-header__logo {
    margin-bottom: 1rem;
}
.vl-league-header__logo img {
    max-height: 5rem;
    width: auto;
}

.vl-league-header__title {
    color: var(--vl-text-white);
    font-size: 1.75rem;
    margin: 0.625rem 0 0.188rem 0;
    text-transform: capitalize;
    font-weight: 600;
}

.vl-league-header__subtitle {
    color: var(--vl-text-light);
    font-size: 1.125rem;
    letter-spacing: 0.031rem;
    margin: 0.2rem 0 1.25rem 0;
    font-style: italic;
    font-weight: 400;
}

/* ─── Rules Button ─── */
.vl-league-header__rules {
    margin-bottom: 1rem;
}

.vl-btn--primary {
    display: inline-block;
    padding: 0.75rem 2.5rem;
    border-radius: 2rem;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
.vl-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    color: #fff;
    text-decoration: none;
}

/* ============================================================
   2. TAB NAVIGATION (Inside Header — wrapped on all screens)
   ============================================================ */
.vl-league-header__tabs {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem 1.5rem 2rem;
    width: 100%;
}

.vl-tab-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.8rem;
    padding: 0.5rem 1.1rem;
    border-radius: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--vl-font-family);
    font-weight: 500;
    white-space: nowrap;
}

.vl-tab-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.vl-tab-btn.is-active {
    background: rgba(255, 255, 255, 0.25);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   3. PERSISTENT WPBAKERY CONTENT ZONE
   ============================================================ */
.vl-league-content {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
}

/* ============================================================
   4. TAB CONTENT CONTAINER
   ============================================================ */
.vl-league-tabs-content {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.vl-tab-content {
    width: 100%;
    padding: 2rem;
    min-height: 200px;
}

.vl-tab-panel {
    animation: vl-fade-in 0.35s ease;
}

@keyframes vl-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.vl-tab-empty {
    color: #999;
    text-align: center;
    padding: 3rem 0;
    font-style: italic;
}

/* ─── Tab Loading Spinner ─── */
.vl-tab-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
}
.vl-tab-loading::after {
    content: "";
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vl-spin 0.6s linear infinite;
}

@keyframes vl-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   5. THEME COLOR SCHEMES  (18 themes)
   ============================================================
   Each theme sets:
   - Background radial gradient
   - ::before border glow
   - Subtitle color
   - Primary button color
   - Active tab accent
   ============================================================ */

/* --- Dark Nebula (Purple) --- */
.league-widget-dark-nebula {
    background: radial-gradient(ellipse at right top, #271b52ed 0%, #151419 47%, #151419 100%);
}
.league-widget-dark-nebula::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #8044d3) border-box;
}
.league-widget-dark-nebula .vl-league-header__subtitle { color: #a27dff; }
.league-widget-dark-nebula .vl-btn--primary { background: #8044d3; }
.league-widget-dark-nebula .vl-btn--primary:hover { background: #9058e3; }
.league-widget-dark-nebula .vl-tab-btn.is-active { background: rgba(128, 68, 211, 0.4); }

/* --- Midnight Tech (Blue) --- */
.league-widget-midnight-tech {
    background: radial-gradient(ellipse at right top, #00008bed 0%, #151419 47%, #151419 100%);
}
.league-widget-midnight-tech::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #4169e1) border-box;
}
.league-widget-midnight-tech .vl-league-header__subtitle { color: #4169e1; }
.league-widget-midnight-tech .vl-btn--primary { background: #4169e1; }
.league-widget-midnight-tech .vl-btn--primary:hover { background: #0000cd; }
.league-widget-midnight-tech .vl-tab-btn.is-active { background: rgba(65, 105, 225, 0.4); }

/* --- Crimson Void (Red) --- */
.league-widget-crimson-void {
    background: radial-gradient(ellipse at right top, #3d0d14ed 0%, #151419 47%, #151419 100%);
}
.league-widget-crimson-void::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #ff3e4d) border-box;
}
.league-widget-crimson-void .vl-league-header__subtitle { color: #ff7983; }
.league-widget-crimson-void .vl-btn--primary { background: #ff3e4d; }
.league-widget-crimson-void .vl-btn--primary:hover { background: #ff5d6a; }
.league-widget-crimson-void .vl-tab-btn.is-active { background: rgba(255, 62, 77, 0.4); }

/* --- Toxic Glow (Green) --- */
.league-widget-toxic-glow {
    background: radial-gradient(ellipse at right top, #192e1aed 0%, #151419 47%, #151419 100%);
}
.league-widget-toxic-glow::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #3ef254) border-box;
}
.league-widget-toxic-glow .vl-league-header__subtitle { color: #7df589; }
.league-widget-toxic-glow .vl-btn--primary { background: #3ef254; color: #151419; }
.league-widget-toxic-glow .vl-btn--primary:hover { background: #5cf46e; color: #151419; }
.league-widget-toxic-glow .vl-tab-btn.is-active { background: rgba(62, 242, 84, 0.4); }

/* --- Cyber Orange --- */
.league-widget-cyber-orange {
    background: radial-gradient(ellipse at right top, #3d2207ed 0%, #151419 47%, #151419 100%);
}
.league-widget-cyber-orange::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #ff9b00) border-box;
}
.league-widget-cyber-orange .vl-league-header__subtitle { color: #ffb84d; }
.league-widget-cyber-orange .vl-btn--primary { background: #ff9b00; }
.league-widget-cyber-orange .vl-btn--primary:hover { background: #ffac33; }
.league-widget-cyber-orange .vl-tab-btn.is-active { background: rgba(255, 155, 0, 0.4); }

/* --- Arctic Mint (Teal) --- */
.league-widget-arctic-mint {
    background: radial-gradient(ellipse at right top, #0d3b3bed 0%, #151419 47%, #151419 100%);
}
.league-widget-arctic-mint::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #00f0c7) border-box;
}
.league-widget-arctic-mint .vl-league-header__subtitle { color: #4df5d9; }
.league-widget-arctic-mint .vl-btn--primary { background: #00f0c7; color: #151419; }
.league-widget-arctic-mint .vl-btn--primary:hover { background: #33f3d2; color: #151419; }
.league-widget-arctic-mint .vl-tab-btn.is-active { background: rgba(0, 240, 199, 0.4); }

/* --- Magenta Pulse --- */
.league-widget-magenta-pulse {
    background: radial-gradient(ellipse at right top, #380a2ced 0%, #151419 47%, #151419 100%);
}
.league-widget-magenta-pulse::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #ff39c2) border-box;
}
.league-widget-magenta-pulse .vl-league-header__subtitle { color: #ff7dd6; }
.league-widget-magenta-pulse .vl-btn--primary { background: #ff39c2; }
.league-widget-magenta-pulse .vl-btn--primary:hover { background: #ff5dcf; }
.league-widget-magenta-pulse .vl-tab-btn.is-active { background: rgba(255, 57, 194, 0.4); }

/* --- Carbon Gray --- */
.league-widget-carbon-gray {
    background: radial-gradient(ellipse at right top, #262626ed 0%, #151419 47%, #151419 100%);
}
.league-widget-carbon-gray::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #8c8c8c) border-box;
}
.league-widget-carbon-gray .vl-league-header__subtitle { color: #b3b3b3; }
.league-widget-carbon-gray .vl-btn--primary { background: #8c8c8c; }
.league-widget-carbon-gray .vl-btn--primary:hover { background: #a3a3a3; }
.league-widget-carbon-gray .vl-tab-btn.is-active { background: rgba(140, 140, 140, 0.4); }

/* --- Volt Yellow --- */
.league-widget-volt-yellow {
    background: radial-gradient(ellipse at right top, #3d3d0aed 0%, #151419 47%, #151419 100%);
}
.league-widget-volt-yellow::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #FFFF00) border-box;
}
.league-widget-volt-yellow .vl-league-header__subtitle { color: #FFFF33; }
.league-widget-volt-yellow .vl-btn--primary { background: #FFFF00; color: #151419; }
.league-widget-volt-yellow .vl-btn--primary:hover { background: #FFF200; color: #151419; }
.league-widget-volt-yellow .vl-tab-btn.is-active { background: rgba(255, 255, 0, 0.35); }

/* --- Copper Core --- */
.league-widget-copper-core {
    background: radial-gradient(ellipse at right top, #3d1e07ed 0%, #151419 47%, #151419 100%);
}
.league-widget-copper-core::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #E67E22) border-box;
}
.league-widget-copper-core .vl-league-header__subtitle { color: #F39C54; }
.league-widget-copper-core .vl-btn--primary { background: #E67E22; }
.league-widget-copper-core .vl-btn--primary:hover { background: #D4722A; }
.league-widget-copper-core .vl-tab-btn.is-active { background: rgba(230, 126, 34, 0.4); }

/* --- Frost White --- */
.league-widget-frost-white {
    background: radial-gradient(ellipse at right top, #262e3ded 0%, #151419 47%, #151419 100%);
}
.league-widget-frost-white::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #F0FFFF) border-box;
}
.league-widget-frost-white .vl-league-header__subtitle { color: #E0F8FF; }
.league-widget-frost-white .vl-btn--primary { background: #F0FFFF; color: #151419; }
.league-widget-frost-white .vl-btn--primary:hover { background: #FFFFFF; color: #151419; }
.league-widget-frost-white .vl-tab-btn.is-active { background: rgba(240, 255, 255, 0.3); }

/* --- Lime Surge --- */
.league-widget-lime-surge {
    background: radial-gradient(ellipse at right top, #2e3d0aed 0%, #151419 47%, #151419 100%);
}
.league-widget-lime-surge::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #CCFF00) border-box;
}
.league-widget-lime-surge .vl-league-header__subtitle { color: #D4FF33; }
.league-widget-lime-surge .vl-btn--primary { background: #CCFF00; color: #151419; }
.league-widget-lime-surge .vl-btn--primary:hover { background: #E0FF66; color: #151419; }
.league-widget-lime-surge .vl-tab-btn.is-active { background: rgba(204, 255, 0, 0.35); }

/* --- Neon Sand --- */
.league-widget-neon-sand {
    background: radial-gradient(ellipse at right top, #3d2e1aed 0%, #151419 47%, #151419 100%);
}
.league-widget-neon-sand::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #FFE4B5) border-box;
}
.league-widget-neon-sand .vl-league-header__subtitle { color: #FFD699; }
.league-widget-neon-sand .vl-btn--primary { background: #FFE4B5; color: #151419; }
.league-widget-neon-sand .vl-btn--primary:hover { background: #FFF0CC; color: #151419; }
.league-widget-neon-sand .vl-tab-btn.is-active { background: rgba(255, 228, 181, 0.35); }

/* --- Coral Burn --- */
.league-widget-coral-burn {
    background: radial-gradient(ellipse at right top, #3d1f14ed 0%, #151419 47%, #151419 100%);
}
.league-widget-coral-burn::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #FF7F50) border-box;
}
.league-widget-coral-burn .vl-league-header__subtitle { color: #FF9966; }
.league-widget-coral-burn .vl-btn--primary { background: #FF7F50; }
.league-widget-coral-burn .vl-btn--primary:hover { background: #FFB399; }
.league-widget-coral-burn .vl-tab-btn.is-active { background: rgba(255, 127, 80, 0.4); }

/* --- Gold Rush --- */
.league-widget-gold-rush {
    background: radial-gradient(ellipse at right top, #3d3207ed 0%, #151419 47%, #151419 100%);
}
.league-widget-gold-rush::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #FFD700) border-box;
}
.league-widget-gold-rush .vl-league-header__subtitle { color: #FFDF33; }
.league-widget-gold-rush .vl-btn--primary { background: #FFD700; color: #151419; }
.league-widget-gold-rush .vl-btn--primary:hover { background: #FFE766; color: #151419; }
.league-widget-gold-rush .vl-tab-btn.is-active { background: rgba(255, 215, 0, 0.35); }

/* --- Chrome Edge --- */
.league-widget-chrome-edge {
    background: radial-gradient(ellipse at right top, #2e2e2eed 0%, #151419 47%, #151419 100%);
}
.league-widget-chrome-edge::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #E8E8E8) border-box;
}
.league-widget-chrome-edge .vl-league-header__subtitle { color: #F5F5F5; }
.league-widget-chrome-edge .vl-btn--primary { background: #E8E8E8; color: #151419; }
.league-widget-chrome-edge .vl-btn--primary:hover { background: #FFFFFF; color: #151419; }
.league-widget-chrome-edge .vl-tab-btn.is-active { background: rgba(232, 232, 232, 0.3); }

/* --- Earth Pulse --- */
.league-widget-earth-pulse {
    background: radial-gradient(ellipse at right top, #2e1a0ded 0%, #151419 47%, #151419 100%);
}
.league-widget-earth-pulse::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #8B4513) border-box;
}
.league-widget-earth-pulse .vl-league-header__subtitle { color: #A0522D; }
.league-widget-earth-pulse .vl-btn--primary { background: #8B4513; }
.league-widget-earth-pulse .vl-btn--primary:hover { background: #CD853F; }
.league-widget-earth-pulse .vl-tab-btn.is-active { background: rgba(139, 69, 19, 0.4); }

/* --- Rose Shock --- */
.league-widget-rose-shock {
    background: radial-gradient(ellipse at right top, #3d1a2eed 0%, #151419 47%, #151419 100%);
}
.league-widget-rose-shock::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #FF66CC) border-box;
}
.league-widget-rose-shock .vl-league-header__subtitle { color: #FF99DD; }
.league-widget-rose-shock .vl-btn--primary { background: #FF66CC; }
.league-widget-rose-shock .vl-btn--primary:hover { background: #FFCCEE; }
.league-widget-rose-shock .vl-tab-btn.is-active { background: rgba(255, 102, 204, 0.4); }

/* ============================================================
   6. RESPONSIVE
   ============================================================ */

/* ─── Desktop ─── */
@media (min-width: 992px) {
    /* Align header width with site content container */
    .vl-league-header-wrap {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }
    .vl-league-header {
        min-height: 24rem;
    }
    .vl-league-header__logo img {
        max-height: 5rem;
    }
    .vl-league-header__title {
        font-size: 2rem;
    }
    .vl-league-header__subtitle {
        font-size: 1.25rem;
    }
    .vl-tab-btn {
        font-size: 0.875rem;
        padding: 0.625rem 1.25rem;
    }
}

/* ─── Tablet ─── */
@media (min-width: 769px) and (max-width: 991px) {
    .vl-league-header {
        min-height: 21rem;
    }
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
    .vl-league-header__top {
        padding: 1.25rem 1.25rem 0.5rem 1.25rem;
    }
    .vl-league-header__body {
        padding: 1rem 1.25rem;
    }
    .vl-league-header__logo img {
        max-height: 4rem;
    }
    .vl-league-header__title {
        font-size: 1.25rem;
    }
    .vl-league-header__subtitle {
        font-size: 0.9rem;
    }

    /*
     * MOBILE TABS: wrap into rows — NO horizontal scroll.
     * flex-wrap + center alignment.
     */
    .vl-league-header__tabs {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.75rem 1.25rem 1.25rem 1.25rem;
        gap: 0.4rem;
    }

    .vl-tab-btn {
        font-size: 0.75rem;
        padding: 0.45rem 0.9rem;
        /* Do NOT set flex-shrink:0 — allow natural wrapping */
    }

    .vl-season-dropdown {
        font-size: 0.78rem;
        padding: 0.35rem 1.8rem 0.35rem 0.6rem;
    }

    .vl-league-content,
    .vl-tab-content {
        padding: 1rem;
    }
}