/* =========================================================
   ABABIOAPPS PREMIER LEAGUE
   2026/27
   COMPLETE UI REDESIGN
========================================================= */


/* =========================================================
   DESIGN TOKENS
========================================================= */

:root {

    --bg:
        #eef3f9;

    --bg-soft:
        #f7f9fc;

    --surface:
        #ffffff;

    --surface-soft:
        #f8fafc;

    --surface-dark:
        #111827;

    --text:
        #172033;

    --text-soft:
        #64748b;

    --text-muted:
        #94a3b8;

    --border:
        #e3e9f1;

    --border-strong:
        #d8e0ea;


    --navy:
        #111936;

    --navy-deep:
        #081426;


    --purple:
        #6d4aff;

    --purple-light:
        #946dff;

    --blue:
        #2864f0;

    --cyan:
        #0ea5e9;


    --green:
        #0f9f6e;

    --green-soft:
        #e8f8f2;


    --red:
        #e5485d;

    --red-soft:
        #fff0f2;


    --orange:
        #f59e0b;

    --pink:
        #db4db5;


    --radius-sm:
        10px;

    --radius:
        16px;

    --radius-lg:
        22px;

    --radius-xl:
        28px;


    --shadow-sm:
        0 4px 14px
        rgba(15, 23, 42, 0.06);

    --shadow:
        0 12px 34px
        rgba(15, 23, 42, 0.09);

    --shadow-lg:
        0 20px 55px
        rgba(15, 23, 42, 0.13);


    --page-width:
        1220px;
}



/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        linear-gradient(
            180deg,
            #edf3fa 0%,
            #f7f9fc 38%,
            #ffffff 100%
        );

    color:
        var(--text);

    line-height: 1.5;

    overflow-x: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
input {
    font: inherit;
}


button {
    cursor: pointer;
}


img {
    max-width: 100%;
}


[hidden] {
    display: none !important;
}



/* =========================================================
   ACCESSIBILITY
========================================================= */

.sr-only {

    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


button:focus-visible,
a:focus-visible,
input:focus-visible {

    outline:
        3px solid
        rgba(80, 105, 255, 0.35);

    outline-offset:
        3px;
}



/* =========================================================
   TOP APP BAR
========================================================= */

.epl-topbar {

    position: sticky;

    top: 0;

    z-index: 100;

    width: 100%;

    background:
        rgba(255, 255, 255, 0.94);

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid
        rgba(15, 23, 42, 0.07);

    box-shadow:
        0 4px 18px
        rgba(15, 23, 42, 0.05);
}


.epl-topbar-inner {

    width:
        min(
            var(--page-width),
            calc(100% - 32px)
        );

    min-height:
        68px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    gap:
        20px;
}


.epl-topbar-left,
.epl-topbar-actions {

    display: flex;

    align-items: center;

    gap: 10px;
}


.epl-topbar-actions {
    justify-content: flex-end;
}


.menu-btn {

    width: 42px;
    height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius:
        12px;

    background:
        #edf2f8;

    color:
        #263246;

    font-size:
        1.08rem;

    transition:
        transform .2s ease,
        background .2s ease;
}


.menu-btn:hover {

    background:
        #e4eaf3;

    transform:
        translateY(-1px);
}


.epl-brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    font-weight:
        850;

    color:
        #101828;
}


.epl-brand-mark {

    width:
        36px;

    height:
        36px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            #5c43e8,
            #8b66ff
        );

    color:
        #fff;

    font-size:
        1rem;

    box-shadow:
        0 7px 18px
        rgba(92, 67, 232, .24);
}


.epl-brand-text {

    font-size:
        .94rem;

    letter-spacing:
        -.015em;
}


.epl-topbar-league {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    font-size:
        .86rem;

    font-weight:
        800;

    color:
        #374151;
}


.epl-topbar-ball {

    font-size:
        1rem;
}


.topbar-action {

    min-height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 13px;

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        #334155;

    font-size:
        .78rem;

    font-weight:
        750;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.topbar-action:hover {

    transform:
        translateY(-1px);

    border-color:
        #cbd5e1;

    box-shadow:
        var(--shadow-sm);
}


.topbar-predictions {

    background:
        linear-gradient(
            135deg,
            #6849ef,
            #9966ff
        );

    color:
        #ffffff;

    border-color:
        transparent;
}



/* =========================================================
   BREADCRUMBS
========================================================= */

.breadcrumbs {

    width:
        min(
            var(--page-width),
            calc(100% - 32px)
        );

    margin:
        0 auto;

    padding:
        13px 2px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #738196;

    font-size:
        .76rem;

    overflow-x:
        auto;

    white-space:
        nowrap;

    scrollbar-width:
        none;
}


.breadcrumbs::-webkit-scrollbar {
    display: none;
}


.breadcrumbs a {

    color:
        #5d6b80;

    font-weight:
        650;
}


.breadcrumbs a:hover {

    color:
        var(--purple);
}


.breadcrumbs span[aria-current="page"] {

    color:
        #192337;

    font-weight:
        800;
}



/* =========================================================
   HERO
========================================================= */

.epl-hero {

    position:
        relative;

    overflow:
        hidden;

    width:
        min(
            var(--page-width),
            calc(100% - 32px)
        );

    margin:
        0 auto;

    border-radius:
        var(--radius-xl);

    background:

        radial-gradient(
            circle at 82% 16%,
            rgba(90, 208, 255, .25),
            transparent 28%
        ),

        radial-gradient(
            circle at 8% 100%,
            rgba(170, 90, 255, .28),
            transparent 34%
        ),

        linear-gradient(
            120deg,
            #08152a 0%,
            #172859 45%,
            #5535a8 100%
        );

    color:
        white;

    box-shadow:
        0 25px 65px
        rgba(24, 38, 78, .20);
}


.epl-hero-inner {

    position:
        relative;

    z-index:
        2;

    min-height:
        330px;

    padding:
        50px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(260px, .55fr);

    align-items:
        center;

    gap:
        48px;
}


.epl-hero-glow {

    position:
        absolute;

    pointer-events:
        none;

    border-radius:
        50%;

    filter:
        blur(30px);
}


.epl-hero-glow-one {

    width:
        260px;

    height:
        260px;

    right:
        -90px;

    top:
        -80px;

    background:
        rgba(75, 190, 255, .18);
}


.epl-hero-glow-two {

    width:
        230px;

    height:
        230px;

    left:
        -100px;

    bottom:
        -110px;

    background:
        rgba(177, 72, 255, .24);
}


.league-badge {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        33px;

    padding:
        7px 12px;

    margin-bottom:
        17px;

    border-radius:
        999px;

    border:
        1px solid
        rgba(255, 255, 255, .16);

    background:
        rgba(255, 255, 255, .10);

    backdrop-filter:
        blur(12px);

    color:
        #f4efff;

    font-size:
        .72rem;

    font-weight:
        850;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}


.epl-hero h1 {

    max-width:
        740px;

    font-size:
        clamp(
            2.7rem,
            5vw,
            5rem
        );

    line-height:
        .98;

    letter-spacing:
        -.055em;

    font-weight:
        900;
}


.epl-hero-copy {

    max-width:
        680px;

    margin-top:
        18px;

    color:
        #d9e4f5;

    font-size:
        1.05rem;

    line-height:
        1.7;
}


.epl-hero-actions {

    margin-top:
        26px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;
}


.hero-action {

    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 17px;

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius:
        12px;

    font-size:
        .8rem;

    font-weight:
        800;

    transition:
        transform .2s ease,
        background .2s ease;
}


.hero-action:hover {

    transform:
        translateY(-2px);
}


.hero-action-primary {

    border-color:
        transparent;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #ecf2ff
        );

    color:
        #1e2d59;

    box-shadow:
        0 9px 22px
        rgba(0,0,0,.18);
}


.hero-action-secondary {

    background:
        rgba(255,255,255,.09);

    color:
        #fff;

    backdrop-filter:
        blur(8px);
}


.epl-hero-panel {

    padding:
        28px;

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius:
        22px;

    background:
        rgba(255,255,255,.09);

    backdrop-filter:
        blur(15px);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.08);
}


.hero-panel-label {

    color:
        #cdd8eb;

    font-size:
        .72rem;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .1em;
}


.hero-panel-value {

    margin-top:
        6px;

    font-size:
        2.7rem;

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -.05em;
}


.hero-panel-meta {

    margin-top:
        22px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.hero-panel-meta span {

    padding:
        6px 9px;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.08);

    color:
        #d9e6f7;

    font-size:
        .66rem;

    font-weight:
        700;
}



/* =========================================================
   STATUS STRIP
========================================================= */

.epl-status-strip {

    width:
        min(
            var(--page-width),
            calc(100% - 32px)
        );

    min-height:
        58px;

    margin:
        16px auto 0;

    padding:
        11px 17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border:
        1px solid
        var(--border);

    border-radius:
        15px;

    background:
        rgba(255,255,255,.90);

    box-shadow:
        var(--shadow-sm);
}


.status-strip-left {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.status-strip-left > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        1px;
}


.status-strip-left strong {

    font-size:
        .78rem;

    color:
        #273449;
}


#seasonStatus {

    color:
        #8390a4;

    font-size:
        .69rem;
}


.status-live-dot {

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        #21b978;

    box-shadow:
        0 0 0 5px
        rgba(33, 185, 120, .11);
}


.status-strip-update {

    color:
        #7f8da1;

    font-size:
        .71rem;

    font-weight:
        650;
}



/* =========================================================
   APP NAV
========================================================= */

.epl-app-nav {

    width:
        min(
            var(--page-width),
            calc(100% - 32px)
        );

    margin:
        18px auto 0;

    display:
        none;

    gap:
        7px;

    overflow-x:
        auto;

    white-space:
        nowrap;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;
}


.epl-app-nav::-webkit-scrollbar {
    display: none;
}


.app-nav-pill {

    flex:
        0 0 auto;

    min-height:
        40px;

    padding:
        0 15px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        #59677c;

    font-size:
        .76rem;

    font-weight:
        750;
}


.app-nav-pill.active {

    background:
        linear-gradient(
            135deg,
            #4e56e9,
            #7a4eed
        );

    border-color:
        transparent;

    color:
        #ffffff;

    box-shadow:
        0 7px 20px
        rgba(88, 76, 225, .22);
}



/* =========================================================
   MAIN
========================================================= */

.epl-main {

    width:
        min(
            var(--page-width),
            calc(100% - 32px)
        );

    margin:
        24px auto 0;
}



/* =========================================================
   SEARCH
========================================================= */

.epl-search-panel {

    max-width:
        900px;

    margin:
        0 auto 16px;
}


.epl-search-box {

    position:
        relative;

    display:
        flex;

    align-items:
        center;
}


.epl-search-icon {

    position:
        absolute;

    left:
        17px;

    pointer-events:
        none;

    font-size:
        .91rem;

    opacity:
        .65;
}


#eplSearch {

    width:
        100%;

    min-height:
        56px;

    padding:
        0 48px 0 48px;

    border:
        1px solid
        var(--border);

    border-radius:
        16px;

    background:
        #ffffff;

    color:
        #1e293b;

    outline:
        none;

    font-size:
        .92rem;

    box-shadow:
        var(--shadow-sm);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


#eplSearch::placeholder {

    color:
        #9ba7b8;
}


#eplSearch:focus {

    border-color:
        rgba(90, 82, 226, .45);

    box-shadow:
        0 0 0 4px
        rgba(92, 73, 235, .08),
        var(--shadow-sm);
}


.search-clear-btn {

    position:
        absolute;

    right:
        12px;

    width:
        32px;

    height:
        32px;

    border:
        0;

    border-radius:
        9px;

    background:
        #edf1f6;

    color:
        #758196;

    font-size:
        1.1rem;
}



/* =========================================================
   DESKTOP FILTER BAR
========================================================= */

.epl-filter-bar {

    margin:
        0 auto 30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    flex-wrap:
        wrap;
}


.filter-btn {

    min-height:
        40px;

    padding:
        0 15px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        #5d6879;

    font-size:
        .76rem;

    font-weight:
        750;

    box-shadow:
        0 2px 8px
        rgba(15, 23, 42, .03);

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}


.filter-btn:hover {

    transform:
        translateY(-1px);

    border-color:
        #cbd5e1;
}


.filter-btn.active {

    color:
        #ffffff;

    border-color:
        transparent;

    background:
        linear-gradient(
            135deg,
            #3f56dc,
            #6f4de6
        );

    box-shadow:
        0 8px 22px
        rgba(73, 72, 210, .19);
}



/* =========================================================
   SECTIONS
========================================================= */

.epl-section {

    margin:
        0 0 44px;

    padding:
        27px;

    border:
        1px solid
        var(--border);

    border-radius:
        24px;

    background:
        #ffffff;

    box-shadow:
        var(--shadow);
}


.section-heading-row {

    margin-bottom:
        20px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        20px;
}


.section-kicker {

    display:
        inline-block;

    margin-bottom:
        5px;

    color:
        var(--purple);

    font-size:
        .68rem;

    font-weight:
        900;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.section-heading-copy h2 {

    font-size:
        clamp(
            1.45rem,
            2.5vw,
            2.05rem
        );

    line-height:
        1.12;

    letter-spacing:
        -.035em;

    font-weight:
        850;
}


.section-heading-copy p {

    margin-top:
        6px;

    color:
        var(--text-soft);

    font-size:
        .84rem;
}


.section-view-all {

    flex:
        0 0 auto;

    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        0 12px;

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    background:
        #f8fafc;

    color:
        #43516a;

    font-size:
        .72rem;

    font-weight:
        800;
}



/* =========================================================
   SECTION THEMES
========================================================= */

.epl-section-today {

    background:

        linear-gradient(
            180deg,
            rgba(238, 247, 255, .82),
            #ffffff 34%
        );
}


.epl-section-today .section-kicker {

    color:
        #1677c8;
}


.epl-section-upcoming {

    background:

        linear-gradient(
            180deg,
            rgba(243, 239, 255, .72),
            #ffffff 33%
        );
}


.epl-section-results {

    background:

        linear-gradient(
            180deg,
            rgba(234, 249, 242, .82),
            #ffffff 34%
        );
}


.epl-section-results .section-kicker {

    color:
        #14885f;
}


.epl-section-replays {

    background:

        linear-gradient(
            180deg,
            rgba(252, 239, 249, .72),
            #ffffff 34%
        );
}


.epl-section-replays .section-kicker {

    color:
        #b04497;
}



/* =========================================================
   RAIL SHELL
========================================================= */

.rail-shell,
.club-rail-shell {

    position:
        relative;
}


.rail-arrow {

    position:
        absolute;

    top:
        50%;

    transform:
        translateY(-50%);

    z-index:
        5;

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--border);

    border-radius:
        50%;

    background:
        rgba(255,255,255,.96);

    color:
        #40506a;

    box-shadow:
        0 7px 19px
        rgba(15,23,42,.11);

    font-size:
        1.25rem;
}


.rail-arrow-left {

    left:
        -12px;
}


.rail-arrow-right {

    right:
        -12px;
}



/* =========================================================
   MATCH GRID - DESKTOP
========================================================= */

.match-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        15px;
}

/* =========================================================
   HERO-INSPIRED MATCH CARDS
   LIGHT PROFESSIONAL VERSION
========================================================= */

.match-card {

    position: relative;

    min-width: 0;

    min-height: 235px;

    padding: 17px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(88, 91, 170, .13);

    border-radius:
        20px;

    background:

        radial-gradient(
            circle at 95% 0%,
            rgba(112, 86, 255, .12),
            transparent 35%
        ),

        radial-gradient(
            circle at 0% 100%,
            rgba(40, 164, 255, .08),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            #ffffff 0%,
            #f7f9ff 52%,
            #f4f1ff 100%
        );

    color:
        #172033;

    box-shadow:
        0 10px 28px
        rgba(35, 49, 91, .08);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}


/* hero-inspired top accent */

.match-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            #27a7f2,
            #5364ea,
            #8153e6,
            #a451d8
        );
}


/* subtle glow */

.match-card::after {

    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -65px;
    top: -65px;

    border-radius: 50%;

    background:
        rgba(104, 82, 255, .09);

    filter:
        blur(25px);

    pointer-events: none;
}


.match-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(99, 82, 213, .22);

    box-shadow:
        0 18px 40px
        rgba(37, 48, 92, .13);
}



/* =========================================================
   UPCOMING CARD
========================================================= */

.match-upcoming {

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(107, 87, 255, .13),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #f5f7ff
        );
}


.match-upcoming::before {

    background:
        linear-gradient(
            90deg,
            #298cec,
            #5363ec,
            #7854e8
        );
}



/* =========================================================
   TODAY / LIVE
========================================================= */

.match-live {

    border-color:
        rgba(232, 72, 94, .15);

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(255, 84, 112, .12),
            transparent 36%
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #fff5f7
        );
}


.match-live::before {

    background:
        linear-gradient(
            90deg,
            #e5415e,
            #ff6862,
            #9d55df
        );
}



/* =========================================================
   COMPLETED / RESULTS
========================================================= */

.match-completed {

    border-color:
        rgba(26, 167, 124, .15);

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(30, 195, 151, .11),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #f2fbf7
        );
}


.match-completed::before {

    background:
        linear-gradient(
            90deg,
            #10a775,
            #2ac2a3,
            #4d81e9
        );
}



/* =========================================================
   POSTPONED
========================================================= */

.match-postponed {

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(242, 175, 45, .13),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #fffaf0
        );
}


.match-postponed::before {

    background:
        linear-gradient(
            90deg,
            #e5a322,
            #f6c04b
        );
}



/* =========================================================
   CANCELLED
========================================================= */

.match-cancelled {

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(230, 69, 88, .11),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #fff5f6
        );
}


.match-cancelled::before {

    background:
        linear-gradient(
            90deg,
            #dc4056,
            #ee6272
        );
}



/* =========================================================
   MATCH TOP
========================================================= */

.match-card .matchweek {

    color:
        #7a879b;

    font-weight:
        850;
}


.match-card .match-date {

    color:
        #76859a;
}



/* =========================================================
   TEAM NAMES
========================================================= */

.match-card .team-name {

    color:
        #1c2638;

    font-weight:
        850;
}



/* =========================================================
   TEAM PLACEHOLDERS
========================================================= */

.match-card .team-logo-placeholder {

    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #f4efff
        );

    color:
        #5c51bf;

    border:
        1px solid
        rgba(95, 82, 185, .10);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.8);
}



/* =========================================================
   SCORE / VS BOX
========================================================= */

.match-card .match-score {

    background:
        rgba(255,255,255,.85);

    color:
        #192337;

    border:
        1px solid
        rgba(89, 98, 146, .11);

    box-shadow:
        0 4px 13px
        rgba(38, 51, 91, .06);
}


.match-card .match-score strong {

    color:
        #162033;
}


.match-card .match-score .vs {

    color:
        #75839a;
}



/* =========================================================
   STATUS PILLS
========================================================= */

.match-card .match-status {

    border:
        1px solid
        transparent;
}


.match-card .match-status.upcoming {

    color:
        #5647bd;

    background:
        #ebe9ff;

    border-color:
        #dedafd;
}


.match-card .match-status.live {

    color:
        #ce314a;

    background:
        #ffe9ed;

    border-color:
        #ffd8df;
}


.match-card .match-status.completed {

    color:
        #087a58;

    background:
        #e4f7ef;

    border-color:
        #d4f0e5;
}


.match-card .match-status.postponed {

    color:
        #976300;

    background:
        #fff2cf;
}


.match-card .match-status.cancelled {

    color:
        #b93448;

    background:
        #ffe8ec;
}



/* =========================================================
   LIVE DETAIL
========================================================= */

.match-card .live-match-detail {

    background:
        #fff0f3;

    color:
        #ce3951;

    border:
        1px solid
        #ffe0e6;
}



/* =========================================================
   ACTIONS
========================================================= */

.match-card .details-action {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #3f63e4,
            #6c4dde
        );

    border: 0;

    box-shadow:
        0 7px 17px
        rgba(80, 72, 206, .16);
}


.match-card .prediction-action {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #7251dc,
            #a14fd3
        );

    box-shadow:
        0 7px 17px
        rgba(121, 72, 190, .15);
}


.match-card .watch-action {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #247edb,
            #405be1
        );
}


.match-card .replay-action {

    color:
        #8d3478;

    background:
        linear-gradient(
            135deg,
            #fcebf8,
            #f1eaff
        );

    border:
        1px solid
        #ecdaf0;
}


/* =========================================================
   UPCOMING
========================================================= */

.match-upcoming {

    background:

        radial-gradient(
            circle at 88% 12%,
            rgba(68, 192, 255, .18),
            transparent 30%
        ),

        radial-gradient(
            circle at 8% 100%,
            rgba(112, 74, 255, .19),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            #10203b,
            #1b2f63 52%,
            #332975
        );
}


.match-upcoming::before {

    background:
        linear-gradient(
            90deg,
            #41b8ff,
            #5a62f0,
            #9a63ff
        );
}



/* =========================================================
   LIVE
========================================================= */

.match-live {

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(255, 113, 113, .22),
            transparent 31%
        ),

        radial-gradient(
            circle at 5% 100%,
            rgba(164, 70, 255, .16),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            #2a1726,
            #372345 55%,
            #4a285b
        );

    border-color:
        rgba(255, 123, 138, .20);
}


.match-live::before {

    background:
        linear-gradient(
            90deg,
            #ff4d69,
            #ff745f,
            #b55cff
        );
}



/* =========================================================
   COMPLETED
========================================================= */

.match-completed {

    background:

        radial-gradient(
            circle at 88% 12%,
            rgba(54, 219, 181, .18),
            transparent 30%
        ),

        radial-gradient(
            circle at 6% 100%,
            rgba(80, 115, 255, .15),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            #102635,
            #153c45 52%,
            #224d54
        );

    border-color:
        rgba(72, 213, 178, .18);
}


.match-completed::before {

    background:
        linear-gradient(
            90deg,
            #28d5ae,
            #3bbfc8,
            #6381ff
        );
}



/* =========================================================
   POSTPONED
========================================================= */

.match-postponed {

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(255, 194, 72, .20),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #2e2616,
            #45371e 55%,
            #594326
        );
}


.match-postponed::before {

    background:
        linear-gradient(
            90deg,
            #f7b733,
            #ffd166,
            #d79aff
        );
}



/* =========================================================
   CANCELLED
========================================================= */

.match-cancelled {

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(255, 85, 108, .20),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #2d1923,
            #442334 55%,
            #552a3d
        );
}


.match-cancelled::before {

    background:
        linear-gradient(
            90deg,
            #ff536b,
            #e94261,
            #a95cff
        );
}



/* =========================================================
   CARD TEXT ON DARK BACKGROUND
========================================================= */

.match-card .matchweek {

    color:
        #aebbd0;
}


.match-card .match-date {

    color:
        #a8b7cd;
}


.match-card .team-name {

    color:
        #f5f7fb;
}


.match-card .match-title {

    color:
        #c8d3e4;
}


.match-card .match-title-link:hover {

    color:
        #ffffff;
}



/* =========================================================
   SCORE BOX
========================================================= */

.match-card .match-score {

    background:
        rgba(255,255,255,.09);

    border:
        1px solid
        rgba(255,255,255,.10);

    color:
        #ffffff;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.05);
}


.match-card .match-score .vs {

    color:
        #aab8ce;
}



/* =========================================================
   STATUS PILLS
========================================================= */

.match-card .match-status {

    border:
        1px solid
        rgba(255,255,255,.08);

    backdrop-filter:
        blur(8px);
}


.match-card .match-status.upcoming {

    color:
        #d5cfff;

    background:
        rgba(116, 92, 255, .22);
}


.match-card .match-status.live {

    color:
        #ffafb8;

    background:
        rgba(255, 81, 104, .18);
}


.match-card .match-status.completed {

    color:
        #9ee8d5;

    background:
        rgba(47, 195, 160, .16);
}


.match-card .match-status.postponed {

    color:
        #ffe39a;

    background:
        rgba(245, 184, 51, .16);
}


.match-card .match-status.cancelled {

    color:
        #ffb2bc;

    background:
        rgba(239, 68, 92, .16);
}



/* =========================================================
   TEAM LOGO PLACEHOLDERS
========================================================= */

.match-card .team-logo-placeholder {

    background:
        rgba(255,255,255,.08);

    color:
        #dbe6f7;

    border:
        1px solid
        rgba(255,255,255,.08);
}



/* =========================================================
   ACTION BUTTONS
========================================================= */

.match-card .details-action {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #4859df,
            #7352e7
        );

    border: 0;
}


.match-card .prediction-action {

    background:
        linear-gradient(
            135deg,
            #7655e8,
            #a65fe9
        );

    color:
        #ffffff;
}


.match-card .watch-action {

    background:
        linear-gradient(
            135deg,
            #2c7be5,
            #4361ee
        );

    color:
        #ffffff;
}


.match-card .replay-action {

    background:
        linear-gradient(
            135deg,
            rgba(229, 99, 204, .23),
            rgba(151, 80, 255, .24)
        );

    color:
        #f6d8ff;

    border:
        1px solid
        rgba(226, 172, 255, .15);
}


/* =========================================================
   TEAMS
========================================================= */

.teams {

    flex:
        1;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items:
        center;

    gap:
        10px;
}


.team {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}


.home-team {

    justify-content:
        flex-end;

    text-align:
        right;
}


.away-team {

    justify-content:
        flex-start;

    text-align:
        left;
}


.team-name {

    min-width:
        0;

    font-size:
        .91rem;

    font-weight:
        850;

    line-height:
        1.15;

    color:
        #1f2937;

    overflow-wrap:
        anywhere;
}


.team-logo,
.team-logo-placeholder {

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;
}


.team-logo {

    object-fit:
        contain;
}


.team-logo-placeholder {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #e8edf5,
            #f6f8fb
        );

    color:
        #66758a;

    font-size:
        .66rem;

    font-weight:
        900;

    border:
        1px solid
        #e2e8f0;
}



/* =========================================================
   SCORE
========================================================= */

.match-score {

    min-width:
        60px;

    min-height:
        46px;

    padding:
        6px 8px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    border-radius:
        14px;

    background:
        #f0f3f8;

    color:
        #192337;

    border:
        1px solid
        #e5eaf0;
}


.match-score strong {

    font-size:
        1.35rem;

    line-height:
        1;

    font-weight:
        900;
}


.match-score .vs {

    font-size:
        .62rem;

    font-weight:
        900;

    color:
        #8794a7;

    letter-spacing:
        .07em;
}



/* =========================================================
   LIVE DETAIL
========================================================= */

.live-match-detail {

    margin-top:
        11px;

    padding:
        6px 9px;

    border-radius:
        9px;

    background:
        var(--red-soft);

    color:
        #d93b52;

    font-size:
        .67rem;

    font-weight:
        850;

    text-align:
        center;
}



/* =========================================================
   MATCH DETAILS
========================================================= */

.match-details {

    margin-top:
        12px;

    padding-top:
        10px;

    border-top:
        1px solid
        #ebeff4;

    color:
        #8090a4;

    font-size:
        .69rem;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}



/* =========================================================
   ACTIONS
========================================================= */

.match-actions {

    margin-top:
        12px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.match-action {

    flex:
        1;

    min-width:
        100px;

    min-height:
        37px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        7px 10px;

    border:
        0;

    border-radius:
        10px;

    font-size:
        .69rem;

    font-weight:
        800;

    text-align:
        center;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.match-action:hover {

    transform:
        translateY(-1px);
}


.watch-action {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #2863dc,
            #4057e6
        );

    box-shadow:
        0 7px 17px
        rgba(49, 77, 211, .16);
}


.replay-action {

    color:
        #9b337e;

    background:
        #faeaf6;

    border:
        1px solid
        #f2d8eb;
}


.prediction-action {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #7850d9,
            #a64fcc
        );

    box-shadow:
        0 7px 17px
        rgba(129, 65, 186, .14);
}


.details-action {

    color:
        #4b596f;

    background:
        #edf1f6;

    border:
        1px solid
        #e1e7ee;
}



/* =========================================================
   UPCOMING MATCHWEEK GROUPS
========================================================= */

.matchweek-container {

    display:
        flex;

    flex-direction:
        column;

    gap:
        25px;
}


.matchweek-group {

    min-width:
        0;
}


.matchweek-heading {

    margin:
        0 0 11px;

    color:
        #475569;

    font-size:
        .81rem;

    font-weight:
        850;
}



/* =========================================================
   TEAMS
========================================================= */

.team-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap:
        9px;
}


.team-pill {

    min-height:
        54px;

    padding:
        9px 11px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    background:
        #f8fafc;

    color:
        #334155;

    font-size:
        .74rem;

    font-weight:
        750;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.team-pill:hover {

    transform:
        translateY(-2px);

    background:
        #ffffff;

    border-color:
        #d7dfeb;

    box-shadow:
        var(--shadow-sm);
}



/* =========================================================
   EMPTY STATE
========================================================= */

.empty-state {

    grid-column:
        1 / -1;

    width:
        100%;

    min-height:
        120px;

    padding:
        25px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    text-align:
        center;

    border:
        1px dashed
        #dce4ee;

    border-radius:
        16px;

    background:
        #f8fafc;

    color:
        #7d8ba0;
}


.empty-icon {

    font-size:
        1.55rem;
}



/* =========================================================
   SEO CONTENT
========================================================= */

.seo-content {

    width:
        min(
            920px,
            calc(100% - 32px)
        );

    margin:
        48px auto;

    padding:
        34px;

    border:
        1px solid
        var(--border);

    border-radius:
        22px;

    background:
        #ffffff;

    box-shadow:
        var(--shadow-sm);
}


.content-label {

    display:
        inline-block;

    margin-bottom:
        7px;

    color:
        var(--purple);

    font-size:
        .67rem;

    font-weight:
        900;

    letter-spacing:
        .12em;
}


.seo-content h2 {

    margin-bottom:
        18px;

    color:
        #172033;

    font-size:
        clamp(
            1.5rem,
            3vw,
            2.1rem
        );

    letter-spacing:
        -.03em;

    line-height:
        1.15;
}


.seo-content p {

    margin-bottom:
        13px;

    color:
        #657287;

    font-size:
        .93rem;

    line-height:
        1.8;
}



/* =========================================================
   POPULAR SEARCHES
========================================================= */

.epl-searches {

    width:
        min(
            1080px,
            calc(100% - 32px)
        );

    margin:
        48px auto;

    padding:
        32px;

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            #f1f5ff,
            #fbf8ff
        );

    border:
        1px solid
        #e2e6f3;
}


.searches-heading {

    text-align:
        center;

    margin-bottom:
        20px;
}


.epl-searches h2 {

    color:
        #172033;

    font-size:
        clamp(
            1.45rem,
            3vw,
            2rem
        );
}


.search-links {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        8px;
}


.search-links span,
.search-links a {

    min-height:
        36px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        7px 12px;

    border:
        1px solid
        #dde4ef;

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        #526075;

    font-size:
        .72rem;

    font-weight:
        650;
}


.search-links a {

    color:
        #5440c4;

    border-color:
        #dcd6fb;

    background:
        #f9f7ff;

    font-weight:
        750;
}



/* =========================================================
   FAQ
========================================================= */

.faq-section {

    width:
        min(
            920px,
            calc(100% - 32px)
        );

    margin:
        48px auto;

    padding:
        32px;

    border:
        1px solid
        var(--border);

    border-radius:
        22px;

    background:
        #ffffff;

    box-shadow:
        var(--shadow-sm);
}


.faq-heading {

    margin-bottom:
        20px;
}


.faq-heading h2 {

    font-size:
        clamp(
            1.45rem,
            3vw,
            2rem
        );
}


.faq-section details {

    border-bottom:
        1px solid
        #e7ecf2;
}


.faq-section details:last-child {

    border-bottom:
        0;
}


.faq-section summary {

    padding:
        17px 2px;

    cursor:
        pointer;

    color:
        #263246;

    font-size:
        .87rem;

    font-weight:
        800;
}


.faq-section details p {

    padding:
        0 2px 18px;

    color:
        #68768b;

    font-size:
        .84rem;

    line-height:
        1.7;
}



/* =========================================================
   FOOTER
========================================================= */

#pageFooter {

    margin-top:
        60px;

    padding:
        42px 20px;

    background:
        #101827;

    color:
        #b8c2d2;
}


.footer-inner {

    width:
        min(
            var(--page-width),
            100%
        );

    margin:
        0 auto;

    text-align:
        center;
}


.footer-brand strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        .95rem;
}


.footer-brand p {

    margin-top:
        6px;

    font-size:
        .75rem;

    color:
        #8490a4;
}


.footer-links {

    margin-top:
        19px;

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        8px 15px;
}


.footer-links a {

    font-size:
        .72rem;

    font-weight:
        650;

    color:
        #b6c1d2;
}


.footer-links a:hover {

    color:
        #ffffff;
}


.footer-copyright {

    margin-top:
        20px;

    color:
        #6e7b90;

    font-size:
        .69rem;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .epl-topbar-inner {

        grid-template-columns:
            1fr auto;
    }


    .epl-topbar-league {

        display:
            none;
    }


    .epl-hero-inner {

        grid-template-columns:
            1fr;

        min-height:
            auto;

        padding:
            40px;
    }


    .epl-hero-panel {

        display:
            none;
    }


    .match-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .team-grid {

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

}



/* =========================================================
   MOBILE
   IMPORTANT:
   MATCH CARDS DO NOT STACK VERTICALLY
========================================================= */

@media (max-width: 700px) {


    /* =====================================================
       PAGE
    ===================================================== */

    body {

        background:
            #f3f6fb;
    }



    /* =====================================================
       TOP BAR
    ===================================================== */

    .epl-topbar-inner {

        width:
            calc(100% - 20px);

        min-height:
            58px;

        gap:
            8px;
    }


    .menu-btn {

        width:
            38px;

        height:
            38px;

        border-radius:
            11px;
    }


    .epl-brand-text {

        display:
            none;
    }


    .epl-brand-mark {

        width:
            36px;

        height:
            36px;
    }


    .epl-topbar-actions {

        gap:
            6px;
    }


    .topbar-action {

        min-height:
            37px;

        padding:
            0 10px;

        border-radius:
            10px;
    }


    .topbar-action span {

        display:
            none;
    }



    /* =====================================================
       BREADCRUMBS
    ===================================================== */

    .breadcrumbs {

        width:
            calc(100% - 20px);

        padding:
            9px 1px;

        font-size:
            .68rem;
    }



    /* =====================================================
       HERO
    ===================================================== */

    .epl-hero {

        width:
            calc(100% - 20px);

        border-radius:
            21px;
    }


    .epl-hero-inner {

        padding:
            28px 22px 30px;
    }


    .league-badge {

        margin-bottom:
            12px;

        font-size:
            .62rem;
    }


    .epl-hero h1 {

        max-width:
            360px;

        font-size:
            clamp(
                2rem,
                10vw,
                2.75rem
            );

        line-height:
            1.02;
    }


    .epl-hero-copy {

        margin-top:
            13px;

        font-size:
            .83rem;

        line-height:
            1.6;
    }


    .epl-hero-actions {

        margin-top:
            19px;

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        padding-bottom:
            3px;

        scrollbar-width:
            none;
    }


    .epl-hero-actions::-webkit-scrollbar {

        display:
            none;
    }


    .hero-action {

        flex:
            0 0 auto;

        min-height:
            39px;

        padding:
            0 13px;

        font-size:
            .69rem;
    }



    /* =====================================================
       STATUS
    ===================================================== */

    .epl-status-strip {

        width:
            calc(100% - 20px);

        min-height:
            52px;

        margin-top:
            10px;

        padding:
            10px 12px;
    }


    .status-strip-left strong {

        font-size:
            .7rem;
    }


    #seasonStatus,
    .status-strip-update {

        font-size:
            .61rem;
    }



    /* =====================================================
       MOBILE APP NAV
    ===================================================== */

    .epl-app-nav {

        position:
            sticky;

        top:
            58px;

        z-index:
            80;

        display:
            flex;

        width:
            100%;

        margin:
            10px 0 0;

        padding:
            8px 10px;

        background:
            rgba(243,246,251,.95);

        backdrop-filter:
            blur(12px);

        border-bottom:
            1px solid
            rgba(15,23,42,.05);
    }


    .app-nav-pill {

        min-height:
            37px;

        padding:
            0 13px;

        font-size:
            .69rem;
    }



    /* =====================================================
       MAIN
    ===================================================== */

    .epl-main {

        width:
            calc(100% - 20px);

        margin-top:
            13px;
    }



    /* =====================================================
       SEARCH
    ===================================================== */

    .epl-search-panel {

        margin-bottom:
            11px;
    }


    #eplSearch {

        min-height:
            49px;

        padding:
            0 42px 0 43px;

        border-radius:
            14px;

        font-size:
            .8rem;
    }


    .epl-search-icon {

        left:
            14px;
    }



    /* desktop filters hidden */

    .epl-filter-bar {

        display:
            none;
    }



    /* =====================================================
       SECTION
    ===================================================== */

    .epl-section {

        margin-bottom:
            18px;

        padding:
            16px 13px 14px;

        border-radius:
            18px;

        box-shadow:
            0 6px 20px
            rgba(15,23,42,.05);
    }


    .section-heading-row {

        margin-bottom:
            12px;

        align-items:
            flex-start;

        gap:
            10px;
    }


    .section-kicker {

        font-size:
            .59rem;
    }


    .section-heading-copy h2 {

        font-size:
            1.1rem;

        letter-spacing:
            -.025em;
    }


    .section-heading-copy p {

        margin-top:
            3px;

        max-width:
            280px;

        font-size:
            .68rem;
    }


    .section-view-all {

        min-height:
            33px;

        padding:
            0 9px;

        border-radius:
            9px;

        font-size:
            .63rem;
    }



    /* =====================================================
       MOST IMPORTANT MOBILE RULE
       HORIZONTAL MATCH RAILS
    ===================================================== */

    .match-grid,
    .match-rail {

        display:
            flex;

        grid-template-columns:
            none;

        gap:
            10px;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        padding:
            1px 2px 9px;

        margin:
            0 -2px;

        scroll-snap-type:
            x mandatory;

        scrollbar-width:
            none;

        overscroll-behavior-x:
            contain;

        -webkit-overflow-scrolling:
            touch;
    }


    .match-grid::-webkit-scrollbar,
    .match-rail::-webkit-scrollbar {

        display:
            none;
    }



    /* EACH CARD HAS FIXED HORIZONTAL WIDTH */

    .match-grid .match-card,
    .match-rail .match-card {

        flex:
            0 0
            min(
                78vw,
                285px
            );

        width:
            min(
                78vw,
                285px
            );

        min-height:
            190px;

        scroll-snap-align:
            start;

        padding:
            14px;

        border-radius:
            16px;

        box-shadow:
            0 5px 16px
            rgba(15,23,42,.06);
    }



    /* =====================================================
       MOBILE CARD - LESS INFORMATION
    ===================================================== */

    .match-card .match-title {

        display:
            none;
    }


    .match-card-top {

        margin-bottom:
            5px;
    }


    .matchweek {

        font-size:
            .58rem;
    }


    .match-status {

        min-height:
            23px;

        padding:
            3px 7px;

        font-size:
            .55rem;
    }


    .match-date {

        margin-bottom:
            8px;

        font-size:
            .63rem;
    }


    .teams {

        min-height:
            74px;

        gap:
            6px;
    }


    .team {

        flex-direction:
            column;

        justify-content:
            center;

        text-align:
            center;

        gap:
            4px;
    }


    .home-team,
    .away-team {

        justify-content:
            center;

        text-align:
            center;
    }


    .team-name {

        max-width:
            90px;

        font-size:
            .75rem;

        line-height:
            1.12;
    }


    .team-logo,
    .team-logo-placeholder {

        width:
            30px;

        height:
            30px;

        flex-basis:
            30px;
    }


    .match-score {

        min-width:
            48px;

        min-height:
            39px;

        padding:
            5px;

        border-radius:
            11px;
    }


    .match-score strong {

        font-size:
            1.05rem;
    }


    .match-score .vs {

        font-size:
            .55rem;
    }



    /* HIDE VENUE / EXTRA DETAIL */

    .match-details {

        display:
            none;
    }



    /* live status detail kept compact */

    .live-match-detail {

        margin-top:
            7px;

        padding:
            5px 7px;

        font-size:
            .59rem;
    }



    /* =====================================================
       MOBILE ACTIONS
       DON'T SHOW EVERYTHING
    ===================================================== */

    .match-actions {

        margin-top:
            auto;

        padding-top:
            9px;

        display:
            flex;

        flex-wrap:
            nowrap;

        gap:
            6px;
    }


    /* hide lower priority buttons */

    .match-actions
    .match-action {

        display:
            none;
    }


    /*
       Always show Match Details
    */

    .match-actions
    .details-action {

        display:
            inline-flex;

        flex:
            1;

        min-width:
            0;

        min-height:
            34px;

        border-radius:
            10px;

        color:
            #ffffff;

        background:
            linear-gradient(
                135deg,
                #4255d8,
                #7550e4
            );

        border:
            0;
    }



    /*
       A live Watch button takes priority
       when one exists.
    */

    .match-live
    .match-actions
    .watch-action {

        display:
            inline-flex;

        flex:
            1;

        min-width:
            0;

        min-height:
            34px;
    }



    /*
       Result with replay:
       replay takes priority.
    */

    .match-completed
    .match-actions
    .replay-action {

        display:
            inline-flex;

        flex:
            1;

        min-width:
            0;

        min-height:
            34px;
    }



    /* prediction on upcoming */

    .match-upcoming
    .match-actions
    .prediction-action {

        display:
            inline-flex;

        flex:
            1;

        min-width:
            0;

        min-height:
            34px;
    }



    /* =====================================================
       MOBILE RAIL ARROWS
       hidden because touch swipe is better
    ===================================================== */

    .rail-arrow {

        display:
            none;
    }



    /* =====================================================
       UPCOMING MATCHWEEKS
    ===================================================== */

    .matchweek-container {

        gap:
            17px;
    }


    .matchweek-group {

        min-width:
            0;
    }


    .matchweek-heading {

        margin-bottom:
            8px;

        padding-left:
            1px;

        font-size:
            .7rem;
    }


    /*
       epl.js creates .match-grid inside
       every matchweek group.

       Since .match-grid is a flex rail
       on mobile, every matchweek becomes
       its own horizontal carousel.
    */



    /* =====================================================
       CLUBS - HORIZONTAL
    ===================================================== */

    .team-grid,
    .team-rail {

        display:
            flex;

        grid-template-columns:
            none;

        gap:
            8px;

        overflow-x:
            auto;

        padding:
            1px 1px 8px;

        scroll-snap-type:
            x proximity;

        scrollbar-width:
            none;

        -webkit-overflow-scrolling:
            touch;
    }


    .team-grid::-webkit-scrollbar,
    .team-rail::-webkit-scrollbar {

        display:
            none;
    }


    .team-pill {

        flex:
            0 0 135px;

        min-height:
            53px;

        scroll-snap-align:
            start;

        border-radius:
            13px;

        background:
            #f8fafc;

        font-size:
            .68rem;
    }



    /* =====================================================
       SEO
    ===================================================== */

    .seo-content {

        width:
            calc(100% - 20px);

        margin:
            26px auto;

        padding:
            22px 17px;

        border-radius:
            18px;
    }


    .seo-content h2 {

        font-size:
            1.3rem;
    }


    .seo-content p {

        font-size:
            .8rem;

        line-height:
            1.72;
    }



    /* =====================================================
       SEARCHES
    ===================================================== */

    .epl-searches {

        width:
            calc(100% - 20px);

        margin:
            26px auto;

        padding:
            22px 15px;

        border-radius:
            18px;
    }


    .epl-searches h2 {

        font-size:
            1.3rem;
    }


    .search-links {

        justify-content:
            flex-start;

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        scrollbar-width:
            none;

        padding-bottom:
            5px;
    }


    .search-links::-webkit-scrollbar {

        display:
            none;
    }


    .search-links span,
    .search-links a {

        flex:
            0 0 auto;

        font-size:
            .65rem;
    }



    /* =====================================================
       FAQ
    ===================================================== */

    .faq-section {

        width:
            calc(100% - 20px);

        margin:
            26px auto;

        padding:
            22px 17px;

        border-radius:
            18px;
    }


    .faq-heading h2 {

        font-size:
            1.3rem;
    }


    .faq-section summary {

        padding:
            14px 0;

        font-size:
            .78rem;
    }


    .faq-section details p {

        padding:
            0 0 14px;

        font-size:
            .76rem;
    }



    /* =====================================================
       FOOTER
    ===================================================== */

    #pageFooter {

        margin-top:
            35px;

        padding:
            32px 16px;
    }


}



/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .epl-hero h1 {

        font-size:
            1.95rem;
    }


    .epl-hero-copy {

        font-size:
            .78rem;
    }


    .match-grid .match-card,
    .match-rail .match-card {

        flex-basis:
            82vw;

        width:
            82vw;
    }


    .team-name {

        max-width:
            78px;

        font-size:
            .7rem;
    }


    .section-view-all {

        padding:
            0 7px;

        font-size:
            .59rem;
    }

}



/* =========================================================
   DESKTOP EXTRA POLISH
========================================================= */

@media (min-width: 1100px) {

    .match-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }



/* =========================================================
   UPCOMING CARD
========================================================= */

.match-upcoming {

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(107, 87, 255, .13),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #f5f7ff
        );
}


.match-upcoming::before {

    background:
        linear-gradient(
            90deg,
            #298cec,
            #5363ec,
            #7854e8
        );
}



/* =========================================================
   TODAY / LIVE
========================================================= */

.match-live {

    border-color:
        rgba(232, 72, 94, .15);

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(255, 84, 112, .12),
            transparent 36%
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #fff5f7
        );
}


.match-live::before {

    background:
        linear-gradient(
            90deg,
            #e5415e,
            #ff6862,
            #9d55df
        );
}



/* =========================================================
   COMPLETED / RESULTS
========================================================= */

.match-completed {

    border-color:
        rgba(26, 167, 124, .15);

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(30, 195, 151, .11),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #f2fbf7
        );
}


.match-completed::before {

    background:
        linear-gradient(
            90deg,
            #10a775,
            #2ac2a3,
            #4d81e9
        );
}



/* =========================================================
   POSTPONED
========================================================= */

.match-postponed {

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(242, 175, 45, .13),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #fffaf0
        );
}


.match-postponed::before {

    background:
        linear-gradient(
            90deg,
            #e5a322,
            #f6c04b
        );
}



/* =========================================================
   CANCELLED
========================================================= */

.match-cancelled {

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(230, 69, 88, .11),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #ffffff,
            #fff5f6
        );
}


.match-cancelled::before {

    background:
        linear-gradient(
            90deg,
            #dc4056,
            #ee6272
        );
}



/* =========================================================
   MATCH TOP
========================================================= */

.match-card .matchweek {

    color:
        #7a879b;

    font-weight:
        850;
}


.match-card .match-date {

    color:
        #76859a;
}



/* =========================================================
   TEAM NAMES
========================================================= */

.match-card .team-name {

    color:
        #1c2638;

    font-weight:
        850;
}



/* =========================================================
   TEAM PLACEHOLDERS
========================================================= */

.match-card .team-logo-placeholder {

    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #f4efff
        );

    color:
        #5c51bf;

    border:
        1px solid
        rgba(95, 82, 185, .10);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.8);
}



/* =========================================================
   SCORE / VS BOX
========================================================= */

.match-card .match-score {

    background:
        rgba(255,255,255,.85);

    color:
        #192337;

    border:
        1px solid
        rgba(89, 98, 146, .11);

    box-shadow:
        0 4px 13px
        rgba(38, 51, 91, .06);
}


.match-card .match-score strong {

    color:
        #162033;
}


.match-card .match-score .vs {

    color:
        #75839a;
}



/* =========================================================
   STATUS PILLS
========================================================= */

.match-card .match-status {

    border:
        1px solid
        transparent;
}


.match-card .match-status.upcoming {

    color:
        #5647bd;

    background:
        #ebe9ff;

    border-color:
        #dedafd;
}


.match-card .match-status.live {

    color:
        #ce314a;

    background:
        #ffe9ed;

    border-color:
        #ffd8df;
}


.match-card .match-status.completed {

    color:
        #087a58;

    background:
        #e4f7ef;

    border-color:
        #d4f0e5;
}


.match-card .match-status.postponed {

    color:
        #976300;

    background:
        #fff2cf;
}


.match-card .match-status.cancelled {

    color:
        #b93448;

    background:
        #ffe8ec;
}



/* =========================================================
   LIVE DETAIL
========================================================= */

.match-card .live-match-detail {

    background:
        #fff0f3;

    color:
        #ce3951;

    border:
        1px solid
        #ffe0e6;
}



/* =========================================================
   ACTIONS
========================================================= */

.match-card .details-action {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #3f63e4,
            #6c4dde
        );

    border: 0;

    box-shadow:
        0 7px 17px
        rgba(80, 72, 206, .16);
}


.match-card .prediction-action {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #7251dc,
            #a14fd3
        );

    box-shadow:
        0 7px 17px
        rgba(121, 72, 190, .15);
}


.match-card .watch-action {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #247edb,
            #405be1
        );
}


.match-card .replay-action {

    color:
        #8d3478;

    background:
        linear-gradient(
            135deg,
            #fcebf8,
            #f1eaff
        );

    border:
        1px solid
        #ecdaf0;
}

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }

}

/* =========================================================
   MATCH CENTER
========================================================= */

body.match-center-open {
    overflow: hidden;
}


.match-center {

    position: fixed;
    inset: 0;

    z-index: 1000;
}


.match-center-backdrop {

    position: absolute;
    inset: 0;

    background:
        rgba(7, 15, 30, .62);

    backdrop-filter:
        blur(8px);
}


.match-center-panel {

    position: absolute;

    top: 50%;
    left: 50%;

    width:
        min(
            680px,
            calc(100% - 30px)
        );

    max-height:
        calc(100vh - 40px);

    transform:
        translate(-50%, -50%);

    overflow-y:
        auto;

    border:
        1px solid
        rgba(255,255,255,.65);

    border-radius:
        26px;

    background:
        #ffffff;

    color:
        #172033;

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.32);
}


.match-center-toolbar {

    min-height:
        58px;

    padding:
        10px 16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border-bottom:
        1px solid #e8edf3;

    color:
        #657287;

    font-size:
        .72rem;

    font-weight:
        800;
}


.match-center-close {

    width:
        36px;

    height:
        36px;

    border: 0;

    border-radius:
        50%;

    background:
        #eef2f7;

    color:
        #46546a;

    font-size:
        1.3rem;
}


.match-center-content {

    padding:
        26px;
}


.match-center-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;
}


.match-center-kicker {

    display:
        block;

    margin-bottom:
        6px;

    color:
        #6d4aff;

    font-size:
        .66rem;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.match-center-header h2 {

    font-size:
        clamp(
            1.45rem,
            5vw,
            2rem
        );

    line-height:
        1.1;

    letter-spacing:
        -.035em;
}


.match-center-teams {

    margin-top:
        28px;

    padding:
        26px 20px;

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    gap:
        20px;

    border-radius:
        20px;

    background:

        radial-gradient(
            circle at top right,
            rgba(110,82,255,.15),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #eff5ff,
            #faf7ff
        );
}


.match-center-team {

    min-width: 0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        6px;

    text-align:
        center;
}


.match-center-team
.team-logo,
.match-center-team
.team-logo-placeholder {

    width:
        54px;

    height:
        54px;

    flex-basis:
        54px;

    border-radius:
        16px;
}


.match-center-team strong {

    font-size:
        .9rem;
}


.match-center-team > span {

    color:
        #8a96a8;

    font-size:
        .65rem;

    font-weight:
        800;
}


.match-center-score
.match-score {

    min-width:
        75px;

    min-height:
        55px;

    background:
        #ffffff;

    box-shadow:
        0 7px 20px
        rgba(15,23,42,.07);
}


.match-center-live {

    margin-top:
        13px;

    padding:
        9px 12px;

    border-radius:
        11px;

    background:
        #fff0f2;

    color:
        #d63d52;

    text-align:
        center;

    font-size:
        .74rem;

    font-weight:
        850;
}


.match-center-info {

    margin-top:
        18px;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:
        10px;
}


.match-info-item {

    min-width:
        0;

    padding:
        14px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    border:
        1px solid #e5eaf1;

    border-radius:
        14px;

    background:
        #f8fafc;
}


.match-info-item > span {

    color:
        #8b98aa;

    font-size:
        .58rem;

    font-weight:
        900;

    letter-spacing:
        .08em;
}


.match-info-item strong {

    color:
        #263246;

    font-size:
        .77rem;

    line-height:
        1.35;
}


.match-info-item small {

    color:
        #8591a4;

    font-size:
        .66rem;
}


.match-center-actions {

    margin-top:
        18px;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        8px;
}


.match-center-actions
.match-action {

    width:
        100%;

    min-height:
        44px;
}



/* =========================================================
   CLUB PILLS
========================================================= */

.team-pill-badge {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            #e9edff,
            #f3eaff
        );

    color:
        #5a47c6;

    font-size:
        .67rem;

    font-weight:
        900;

    letter-spacing:
        .03em;
}


.team-pill-badge
.team-logo {

    width:
        30px;

    height:
        30px;
}


.team-pill-copy {

    min-width: 0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.team-pill-copy strong {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        .72rem;
}


.team-pill-copy small {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        #8a96a8;

    font-size:
        .59rem;
}



/* =========================================================
   CARD CLICK SURFACE
========================================================= */

.match-card {

    position: relative;
}


.match-card-link {

    position: absolute;

    inset: 0;

    z-index: 1;
}


.match-card
.match-actions {

    position: relative;

    z-index: 2;
}



/* =========================================================
   MOBILE MATCH CENTER
========================================================= */

@media (max-width: 700px) {

    .match-center-panel {

        top: auto;
        left: 0;
        right: 0;
        bottom: 0;

        width:
            100%;

        max-height:
            88vh;

        transform:
            none;

        border-radius:
            24px 24px 0 0;

        border-bottom:
            0;

        animation:
            matchCenterUp
            .24s ease;
    }


    @keyframes matchCenterUp {

        from {

            transform:
                translateY(35px);

            opacity:
                .5;
        }

        to {

            transform:
                translateY(0);

            opacity:
                1;
        }

    }


    .match-center-content {

        padding:
            19px 15px 28px;
    }


    .match-center-header {

        gap:
            10px;
    }


    .match-center-header h2 {

        font-size:
            1.25rem;
    }


    .match-center-teams {

        margin-top:
            18px;

        padding:
            20px 10px;

        gap:
            8px;

        border-radius:
            17px;
    }


    .match-center-team strong {

        font-size:
            .78rem;
    }


    .match-center-team
    .team-logo,
    .match-center-team
    .team-logo-placeholder {

        width:
            44px;

        height:
            44px;

        flex-basis:
            44px;
    }


    .match-center-score
    .match-score {

        min-width:
            58px;

        min-height:
            46px;
    }


    .match-center-info {

        grid-template-columns:
            1fr;

        gap:
            7px;
    }


    .match-info-item {

        padding:
            11px 12px;
    }


    .match-center-actions {

        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   FINAL HERO THEME
   ONE COLOR SYSTEM FOR THE ENTIRE PREMIER LEAGUE PAGE
   Desktop + Tablet + Mobile
========================================================= */

:root {
    --hero-navy-1: #08152a;
    --hero-navy-2: #172859;
    --hero-purple: #5535a8;
    --hero-blue: #4aaef7;
    --hero-violet: #946dff;
    --hero-text: #ffffff;
    --hero-text-soft: #d9e4f5;
    --hero-text-muted: #aebbd0;
    --hero-border: rgba(255,255,255,.12);
    --hero-surface:
        radial-gradient(
            circle at 82% 16%,
            rgba(90, 208, 255, .20),
            transparent 30%
        ),
        radial-gradient(
            circle at 8% 100%,
            rgba(170, 90, 255, .22),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            #08152a 0%,
            #172859 45%,
            #5535a8 100%
        );
}


/* =========================================================
   PAGE BACKGROUND
========================================================= */

body {
    background:
        radial-gradient(
            circle at 90% 12%,
            rgba(85, 53, 168, .10),
            transparent 30rem
        ),
        linear-gradient(
            180deg,
            #edf3fa 0%,
            #f6f8fc 46%,
            #ffffff 100%
        ) !important;
}


/* =========================================================
   HERO
   Exact source palette
========================================================= */

.epl-hero {
    background: var(--hero-surface) !important;
}


/* =========================================================
   UNIVERSAL HERO CARD SURFACE
   All main cards use the same hero family
========================================================= */

.epl-section,
.match-card,
.epl-status-strip,
.epl-search-panel,
.epl-search-box,
#eplSearch,
.team-pill,
.seo-content,
.epl-searches,
.faq-section,
.match-center-panel,
.match-center-teams,
.match-info-item {
    border-color: var(--hero-border) !important;
}


/* =========================================================
   SECTION CARDS
========================================================= */

.epl-section {
    position: relative;
    overflow: hidden;

    background: var(--hero-surface) !important;

    color: var(--hero-text) !important;

    box-shadow:
        0 18px 44px
        rgba(8, 21, 42, .18) !important;
}


.epl-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.035),
            transparent 45%
        );
}


.epl-section .section-kicker {
    color: #9bdcff !important;
}


.epl-section .section-heading-copy h2 {
    color: #ffffff !important;
}


.epl-section .section-heading-copy p {
    color: #cbd8ea !important;
}


.section-view-all {
    color: #ffffff !important;

    background:
        rgba(255,255,255,.10) !important;

    border-color:
        rgba(255,255,255,.14) !important;

    backdrop-filter:
        blur(10px);
}


.section-view-all:hover {
    background:
        rgba(255,255,255,.16) !important;
}


/* Remove old section-specific light themes */

.epl-section-today,
.epl-section-upcoming,
.epl-section-results,
.epl-section-replays {
    background: var(--hero-surface) !important;
}


/* =========================================================
   MATCH CARDS
   Exact same family as the hero
========================================================= */

.match-card,
.match-upcoming,
.match-live,
.match-completed,
.match-postponed,
.match-cancelled {
    position: relative;

    background: var(--hero-surface) !important;

    color: var(--hero-text) !important;

    border:
        1px solid
        rgba(255,255,255,.12) !important;

    box-shadow:
        0 14px 32px
        rgba(7, 18, 39, .24) !important;
}


.match-card::before,
.match-upcoming::before,
.match-live::before,
.match-completed::before,
.match-postponed::before,
.match-cancelled::before {
    background:
        linear-gradient(
            90deg,
            #4aaef7 0%,
            #6d62f1 48%,
            #a56cff 100%
        ) !important;
}


.match-card::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -70px;
    top: -70px;

    border-radius: 50%;

    background:
        rgba(90, 208, 255, .14) !important;

    filter:
        blur(28px);

    pointer-events: none;
}


.match-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(165, 145, 255, .32) !important;

    box-shadow:
        0 22px 48px
        rgba(7, 18, 39, .32) !important;
}


/* =========================================================
   MATCH CARD TEXT
========================================================= */

.match-card .matchweek,
.match-card .match-date,
.match-card .match-title,
.match-card .match-title-link {
    color: var(--hero-text-soft) !important;
}


.match-card .team-name {
    color: #ffffff !important;
}


.match-card .match-title-link:hover {
    color: #ffffff !important;
}


/* =========================================================
   SCORE BOX
========================================================= */

.match-card .match-score,
.match-score {
    color: #ffffff !important;

    background:
        rgba(255,255,255,.09) !important;

    border:
        1px solid
        rgba(255,255,255,.12) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.05) !important;
}


.match-card .match-score strong,
.match-score strong {
    color: #ffffff !important;
}


.match-card .match-score .vs,
.match-score .vs {
    color: #c3cee0 !important;
}


/* =========================================================
   TEAM LOGO PLACEHOLDERS
========================================================= */

.match-card .team-logo-placeholder,
.team-logo-placeholder {
    color: #ffffff !important;

    background:
        rgba(255,255,255,.09) !important;

    border:
        1px solid
        rgba(255,255,255,.12) !important;
}


/* =========================================================
   STATUS PILLS
========================================================= */

.match-card .match-status,
.match-status {
    border:
        1px solid
        rgba(255,255,255,.12) !important;

    backdrop-filter:
        blur(8px);
}


.match-card .match-status.upcoming,
.match-status.upcoming {
    color: #e4ddff !important;

    background:
        rgba(126, 96, 255, .22) !important;
}


.match-card .match-status.live,
.match-status.live {
    color: #ffd0d6 !important;

    background:
        rgba(255, 77, 105, .22) !important;
}


.match-card .match-status.completed,
.match-status.completed {
    color: #b7f4df !important;

    background:
        rgba(45, 202, 164, .20) !important;
}


.match-card .match-status.postponed,
.match-status.postponed {
    color: #ffe9aa !important;

    background:
        rgba(245, 184, 51, .20) !important;
}


.match-card .match-status.cancelled,
.match-status.cancelled {
    color: #ffd0d6 !important;

    background:
        rgba(239, 68, 92, .22) !important;
}


/* =========================================================
   LIVE DETAIL
========================================================= */

.match-card .live-match-detail,
.live-match-detail,
.match-center-live {
    color: #ffd4dc !important;

    background:
        rgba(255, 76, 105, .16) !important;

    border:
        1px solid
        rgba(255, 136, 151, .16) !important;
}


/* =========================================================
   MATCH ACTION BUTTONS
========================================================= */

.match-action,
.match-card .details-action,
.match-card .prediction-action,
.match-card .watch-action,
.match-card .replay-action {
    color: #ffffff !important;

    border:
        1px solid
        rgba(255,255,255,.12) !important;
}


.match-card .details-action,
.details-action {
    background:
        linear-gradient(
            135deg,
            #356fe6,
            #6b4ee4
        ) !important;
}


.match-card .prediction-action,
.prediction-action {
    background:
        linear-gradient(
            135deg,
            #7852e8,
            #a65be8
        ) !important;
}


.match-card .watch-action,
.watch-action {
    background:
        linear-gradient(
            135deg,
            #2685e5,
            #485ee8
        ) !important;
}


.match-card .replay-action,
.replay-action {
    background:
        linear-gradient(
            135deg,
            rgba(201, 82, 220, .72),
            rgba(120, 80, 236, .82)
        ) !important;
}


/* =========================================================
   MATCHWEEK HEADINGS
========================================================= */

.matchweek-heading {
    color: #e8eeff !important;
}


/* =========================================================
   STATUS STRIP
========================================================= */

.epl-status-strip {
    background: var(--hero-surface) !important;

    color: #ffffff !important;

    box-shadow:
        0 13px 30px
        rgba(7, 18, 39, .18) !important;
}


.status-strip-left strong {
    color: #ffffff !important;
}


#seasonStatus,
.status-strip-update {
    color: #c3cee0 !important;
}


/* =========================================================
   SEARCH
========================================================= */

.epl-search-panel {
    background: transparent !important;
}


.epl-search-box {
    background: transparent !important;
}


#eplSearch {
    color: #ffffff !important;

    background: var(--hero-surface) !important;

    border:
        1px solid
        rgba(255,255,255,.13) !important;

    box-shadow:
        0 12px 28px
        rgba(7,18,39,.15) !important;
}


#eplSearch::placeholder {
    color: #c0cce0 !important;
}


#eplSearch:focus {
    border-color:
        rgba(150, 130, 255, .42) !important;

    box-shadow:
        0 0 0 4px
        rgba(111, 82, 232, .12),
        0 12px 28px
        rgba(7,18,39,.18) !important;
}


.search-clear-btn {
    color: #ffffff !important;

    background:
        rgba(255,255,255,.10) !important;
}


/* =========================================================
   DESKTOP FILTERS
========================================================= */

.filter-btn {
    color: #4f5f76 !important;

    background: #ffffff !important;

    border-color: #e0e6ef !important;
}


.filter-btn.active {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #172859,
            #5535a8
        ) !important;

    border-color:
        rgba(255,255,255,.10) !important;
}


/* =========================================================
   MOBILE APP NAV PILLS
========================================================= */

.app-nav-pill {
    color: #526176 !important;

    background: #ffffff !important;
}


.app-nav-pill.active {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #172859,
            #5535a8
        ) !important;
}


/* =========================================================
   TEAM / CLUB CARDS
========================================================= */

.team-pill {
    color: #ffffff !important;

    background: var(--hero-surface) !important;

    border:
        1px solid
        rgba(255,255,255,.12) !important;

    box-shadow:
        0 10px 24px
        rgba(7,18,39,.16) !important;
}


.team-pill:hover {
    color: #ffffff !important;

    background: var(--hero-surface) !important;

    border-color:
        rgba(160, 143, 255, .28) !important;

    box-shadow:
        0 16px 32px
        rgba(7,18,39,.22) !important;
}


.team-pill-badge {
    color: #ffffff !important;

    background:
        rgba(255,255,255,.10) !important;

    border:
        1px solid
        rgba(255,255,255,.10) !important;
}


.team-pill-copy strong {
    color: #ffffff !important;
}


.team-pill-copy small {
    color: #bac6da !important;
}


/* =========================================================
   SEO CONTENT CARDS
========================================================= */

.seo-content {
    color: #ffffff !important;

    background: var(--hero-surface) !important;

    box-shadow:
        0 18px 42px
        rgba(7, 18, 39, .16) !important;
}


.seo-content .content-label {
    color: #9bdcff !important;
}


.seo-content h2 {
    color: #ffffff !important;
}


.seo-content p {
    color: #c8d4e7 !important;
}


/* =========================================================
   POPULAR SEARCHES CARD
========================================================= */

.epl-searches {
    color: #ffffff !important;

    background: var(--hero-surface) !important;

    border:
        1px solid
        rgba(255,255,255,.12) !important;

    box-shadow:
        0 18px 42px
        rgba(7,18,39,.16) !important;
}


.epl-searches .content-label {
    color: #9bdcff !important;
}


.epl-searches h2 {
    color: #ffffff !important;
}


.search-links span,
.search-links a {
    color: #eef3ff !important;

    background:
        rgba(255,255,255,.08) !important;

    border:
        1px solid
        rgba(255,255,255,.10) !important;
}


.search-links a:hover {
    background:
        rgba(255,255,255,.14) !important;
}


/* =========================================================
   FAQ CARD
========================================================= */

.faq-section {
    color: #ffffff !important;

    background: var(--hero-surface) !important;

    border:
        1px solid
        rgba(255,255,255,.12) !important;

    box-shadow:
        0 18px 42px
        rgba(7,18,39,.16) !important;
}


.faq-section .content-label {
    color: #9bdcff !important;
}


.faq-heading h2 {
    color: #ffffff !important;
}


.faq-section details {
    border-bottom:
        1px solid
        rgba(255,255,255,.10) !important;
}


.faq-section summary {
    color: #ffffff !important;
}


.faq-section details p {
    color: #c8d4e7 !important;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty-state {
    color: #cbd7e9 !important;

    background:
        rgba(255,255,255,.07) !important;

    border:
        1px dashed
        rgba(255,255,255,.16) !important;
}


/* =========================================================
   MATCH CENTER
========================================================= */

.match-center-panel {
    color: #ffffff !important;

    background: var(--hero-surface) !important;

    border:
        1px solid
        rgba(255,255,255,.16) !important;
}


.match-center-toolbar {
    color: #d3def0 !important;

    border-bottom:
        1px solid
        rgba(255,255,255,.10) !important;
}


.match-center-close {
    color: #ffffff !important;

    background:
        rgba(255,255,255,.10) !important;
}


.match-center-header h2 {
    color: #ffffff !important;
}


.match-center-kicker {
    color: #9bdcff !important;
}


.match-center-teams {
    color: #ffffff !important;

    background:
        radial-gradient(
            circle at 82% 16%,
            rgba(90, 208, 255, .16),
            transparent 30%
        ),
        radial-gradient(
            circle at 8% 100%,
            rgba(170, 90, 255, .18),
            transparent 36%
        ),
        linear-gradient(
            120deg,
            #101d3b 0%,
            #1a2f63 45%,
            #4c3198 100%
        ) !important;
}


.match-center-team strong,
.match-center-team > span {
    color: #ffffff !important;
}


.match-info-item {
    color: #ffffff !important;

    background:
        rgba(255,255,255,.08) !important;

    border:
        1px solid
        rgba(255,255,255,.10) !important;
}


.match-info-item > span {
    color: #aebbd0 !important;
}


.match-info-item strong {
    color: #ffffff !important;
}


.match-info-item small {
    color: #c4d0e3 !important;
}


/* =========================================================
   MOBILE
   Same colors as desktop, only layout changes
========================================================= */

@media (max-width: 700px) {

    .epl-section,
    .match-card,
    .match-upcoming,
    .match-live,
    .match-completed,
    .match-postponed,
    .match-cancelled,
    .team-pill,
    .seo-content,
    .epl-searches,
    .faq-section,
    .epl-status-strip,
    #eplSearch,
    .match-center-panel {
        background: var(--hero-surface) !important;
    }


    .match-grid .match-card,
    .match-rail .match-card {
        color: #ffffff !important;

        border-color:
            rgba(255,255,255,.12) !important;

        box-shadow:
            0 12px 28px
            rgba(7,18,39,.22) !important;
    }


    .match-card .team-name {
        color: #ffffff !important;
    }


    .match-card .match-date,
    .match-card .matchweek {
        color: #c4d0e3 !important;
    }


    .team-pill {
        color: #ffffff !important;
    }

}


/* =========================================================
   TABLET / DESKTOP
   Explicitly keep the same theme
========================================================= */

@media (min-width: 701px) {

    .epl-section,
    .match-card,
    .match-upcoming,
    .match-live,
    .match-completed,
    .match-postponed,
    .match-cancelled,
    .team-pill,
    .seo-content,
    .epl-searches,
    .faq-section,
    .epl-status-strip,
    #eplSearch,
    .match-center-panel {
        background: var(--hero-surface) !important;
    }


    .match-card .team-name {
        color: #ffffff !important;
    }


    .match-card .match-date,
    .match-card .matchweek {
        color: #c4d0e3 !important;
    }

}
.team-seo-content h3 {

    margin:
        24px 0 8px;

    font-size:
        1.05rem;

    font-weight:
        850;

    line-height:
        1.3;
}


.team-seo-content h3:first-of-type {

    margin-top:
        20px;
}


@media (max-width: 700px) {

    .team-seo-content h3 {

        margin-top:
            20px;

        font-size:
            0.95rem;
    }

}


.seo-content h3 {

    margin:
        26px 0 9px;

    font-size:
        1.05rem;

    font-weight:
        850;

    line-height:
        1.3;
}


.seo-content a {

    color:
        #8fcfff;

    font-weight:
        800;

    text-decoration:
        none;
}


.seo-content a:hover {

    text-decoration:
        underline;
}