/*
==========================================================
FantasyFanzone Fixtures
Version: 4.8
==========================================================
*/

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

.ffz-fixtures{
    position:relative;

    padding:var(--ffz-section-padding) 0;
}

/*========================================================
TOOLBAR
========================================================*/

.ffz-fixtures__toolbar{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:12px;

    margin-bottom:24px;

    padding:12px 14px;

    width:max-content;
    max-width:100%;

    margin-left:auto;
    margin-right:auto;

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

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

    border-radius:999px;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.12);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

/*========================================================
GAMEWEEK NAVIGATION BUTTONS
========================================================*/

.ffz-fixtures__navigation,
.ffz-fixtures__refresh{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    flex-shrink:0;

    width:42px;
    height:42px;

    padding:0;

    border:0;
    border-radius:50%;

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

    color:#fff;

    font-size:18px;
    font-weight:700;
    line-height:1;

    cursor:pointer;

    transition:
        background-color var(--ffz-transition-normal),
        color var(--ffz-transition-normal),
        transform var(--ffz-transition-normal),
        box-shadow var(--ffz-transition-normal),
        opacity var(--ffz-transition-normal);
}

.ffz-fixtures__navigation:hover,
.ffz-fixtures__refresh:hover{
    background:var(--ffz-primary);

    color:#fff;

    transform:translateY(-2px);

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

.ffz-fixtures__navigation:active,
.ffz-fixtures__refresh:active{
    transform:translateY(0);
}

/*========================================================
GAMEWEEK LABEL
========================================================*/

.ffz-fixtures__gameweek{
    display:flex;

    align-items:center;
    justify-content:center;

    min-width:150px;
    min-height:42px;

    padding:0 18px;

    color:#fff;

    font-size:15px;
    font-weight:800;
    line-height:1;

    letter-spacing:.02em;

    text-align:center;

    font-variant-numeric:
        tabular-nums;
}

/*========================================================
REFRESH
========================================================*/

.ffz-fixtures__refresh{
    margin-left:4px;
}

.ffz-fixtures__refresh-icon{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    line-height:1;
}

.ffz-fixtures.is-loading
.ffz-fixtures__refresh-icon{
    animation:
        ffzFixturesRefreshSpin
        .8s
        linear
        infinite;
}

@keyframes ffzFixturesRefreshSpin{

    to{
        transform:rotate(360deg);
    }

}

/*========================================================
DISABLED CONTROLS
========================================================*/

.ffz-fixtures__navigation:disabled,
.ffz-fixtures__refresh:disabled,
.ffz-fixtures__navigation[aria-disabled="true"]{
    opacity:.4;

    cursor:not-allowed;

    pointer-events:none;

    transform:none;

    box-shadow:none;
}

/*========================================================
CONTROL FOCUS
========================================================*/

.ffz-fixtures__navigation:focus-visible,
.ffz-fixtures__refresh:focus-visible{
    outline:2px solid var(--ffz-primary);
    outline-offset:4px;
}

/*========================================================
LIST
========================================================*/

.ffz-fixtures__list,
[data-fixtures-body]{
    display:flex;

    flex-direction:column;

    gap:18px;

    min-height:0;
}

/*========================================================
FIXTURE CARD
========================================================*/

.ffz-fixture{
    position:relative;

    display:grid;

    grid-template-columns:
        110px
        minmax(0,1fr)
        120px;

    align-items:center;

    gap:24px;

    min-width:0;

    padding:20px 24px;

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

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

    border-radius:20px;

    transition:
        transform var(--ffz-transition-normal),
        border-color var(--ffz-transition-normal),
        box-shadow var(--ffz-transition-normal),
        background-color var(--ffz-transition-normal);
}

.ffz-fixture:hover{
    transform:translateY(-3px);

    border-color:
        rgba(124,58,237,.7);

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

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

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

.ffz-fixture--live{
    border-color:
        rgba(34,197,94,.35);

    background:
        linear-gradient(
            90deg,
            rgba(34,197,94,.08),
            rgba(255,255,255,.035)
        );
}

.ffz-fixture--finished{
    background:
        rgba(255,255,255,.025);

    opacity:.92;
}

.ffz-fixture--scheduled{
    background:
        rgba(255,255,255,.04);
}

/*========================================================
DATE
========================================================*/

.ffz-fixture__date{
    display:flex;

    flex-direction:column;

    gap:4px;

    min-width:0;
}

.ffz-fixture__day{
    color:var(--ffz-text);

    font-size:21px;
    font-weight:800;
    line-height:1.2;
}

.ffz-fixture__time{
    color:var(--ffz-text-muted);

    font-size:13px;
    line-height:1.4;

    font-variant-numeric:
        tabular-nums;
}

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

.ffz-fixture__teams{
    display:grid;

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

    align-items:center;

    gap:20px;

    min-width:0;
}

.ffz-team{
    display:flex;

    align-items:center;

    gap:12px;

    min-width:0;
}

.ffz-team--home{
    justify-content:flex-start;
}

.ffz-team--away{
    justify-content:flex-end;
}

.ffz-team img{
    flex:0 0 42px;

    width:42px;
    height:42px;

    object-fit:contain;
}

.ffz-team__name{
    min-width:0;

    overflow:hidden;

    color:var(--ffz-text);

    font-size:16px;
    font-weight:700;
    line-height:1.3;

    text-overflow:ellipsis;
    white-space:nowrap;
}

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

.ffz-fixture__vs{
    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:4px;

    min-width:58px;
    min-height:36px;

    padding:4px 10px;

    border-radius:999px;

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

    color:var(--ffz-text-muted);

    font-size:12px;
    font-weight:700;
    line-height:1.2;

    letter-spacing:.06em;
}

.ffz-fixture__score{
    color:var(--ffz-text);

    font-size:18px;
    font-weight:800;
    line-height:1;

    letter-spacing:0;

    font-variant-numeric:
        tabular-nums;
}

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

.ffz-fixture__status{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:38px;

    padding:3px 7px;

    border-radius:999px;

    font-size:10px;
    font-weight:800;
    line-height:1;

    letter-spacing:.05em;

    text-transform:uppercase;
}

.ffz-fixture__status--live{
    background:
        rgba(34,197,94,.14);

    color:var(--ffz-success);
}

.ffz-fixture__status--finished{
    background:
        rgba(148,163,184,.12);

    color:var(--ffz-text-muted);
}

/*========================================================
FDR
========================================================*/

.ffz-fixture__difficulty{
    display:flex;

    align-items:center;
    justify-content:flex-end;

    gap:8px;
}

.ffz-fdr{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:42px;
    height:42px;

    padding:0 12px;

    border-radius:999px;

    color:#fff;

    font-size:15px;
    font-weight:800;
    line-height:1;

    font-variant-numeric:
        tabular-nums;
}

.ffz-fdr--1,
.ffz-fdr--2{
    background:var(--ffz-success);
}

.ffz-fdr--3{
    background:var(--ffz-warning);
}

.ffz-fdr--4,
.ffz-fdr--5{
    background:var(--ffz-danger);
}

/*========================================================
LOADING
========================================================*/

.ffz-fixtures.is-loading,
.ffz-fixtures--loading{
    pointer-events:none;
}

.ffz-fixtures.is-loading
[data-fixtures-body],
.ffz-fixtures--loading
.ffz-fixtures__list{
    opacity:.76;
}

.ffz-fixtures.is-loading
.ffz-fixture,
.ffz-fixtures--loading
.ffz-fixture{
    animation:
        ffzFixturesPulse
        1.4s
        ease-in-out
        infinite;
}

@keyframes ffzFixturesPulse{

    0%,
    100%{
        opacity:.65;
    }

    50%{
        opacity:1;
    }

}

/*========================================================
EMPTY / ERROR
========================================================*/

.ffz-fixtures .ffz-empty,
.ffz-fixtures .ffz-error,
.ffz-fixtures .ffz-loading{
    padding:28px 20px;

    border-radius:16px;

    text-align:center;
}

.ffz-fixtures .ffz-empty,
.ffz-fixtures .ffz-loading{
    color:var(--ffz-text-muted);
}

.ffz-fixtures .ffz-error{
    background:
        rgba(239,68,68,.08);

    color:#fca5a5;
}

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

@media(max-width:992px){

    .ffz-fixture{
        grid-template-columns:
            90px
            minmax(0,1fr);

        gap:
            16px
            20px;

        padding:18px 20px;
    }

    .ffz-fixture__date{
        grid-column:1;
        grid-row:1;
    }

    .ffz-fixture__teams{
        grid-column:2;
        grid-row:1;
    }

    .ffz-fixture__difficulty{
        grid-column:2;
        grid-row:2;

        justify-content:center;
    }

    .ffz-team img{
        flex-basis:38px;

        width:38px;
        height:38px;
    }

}

/*========================================================
MOBILE
========================================================*/

@media(max-width:768px){

    .ffz-fixtures__toolbar{
        gap:8px;

        width:100%;

        padding:10px 12px;

        border-radius:18px;
    }

    .ffz-fixtures__navigation,
    .ffz-fixtures__refresh{
        width:40px;
        height:40px;

        font-size:17px;
    }

    .ffz-fixtures__gameweek{
        flex:1;

        min-width:0;
        min-height:40px;

        padding:0 8px;

        font-size:14px;
    }

    .ffz-fixtures__refresh{
        margin-left:0;
    }

    .ffz-fixtures__list,
    [data-fixtures-body]{
        gap:14px;
    }

    .ffz-fixture{
        grid-template-columns:1fr;

        gap:16px;

        padding:18px;

        border-radius:16px;

        text-align:center;
    }

    .ffz-fixture__date{
        grid-column:1;
        grid-row:auto;

        align-items:center;
    }

    .ffz-fixture__day{
        font-size:17px;
    }

    .ffz-fixture__teams{
        grid-column:1;
        grid-row:auto;

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

        gap:10px;
    }

    .ffz-team{
        flex-direction:column;

        gap:7px;

        text-align:center;
    }

    .ffz-team--home,
    .ffz-team--away{
        justify-content:center;
    }

    .ffz-team--away{
        flex-direction:column-reverse;
    }

    .ffz-team img{
        flex-basis:36px;

        width:36px;
        height:36px;
    }

    .ffz-team__name{
        max-width:110px;

        font-size:13px;
    }

    .ffz-fixture__vs{
        min-width:52px;
    }

    .ffz-fixture__score{
        font-size:16px;
    }

    .ffz-fixture__difficulty{
        grid-column:1;
        grid-row:auto;

        justify-content:center;
    }

    .ffz-fdr{
        min-width:36px;
        height:36px;

        padding:0 10px;

        font-size:13px;
    }

}

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

@media(max-width:480px){

    .ffz-fixtures__toolbar{
        gap:6px;

        padding:8px 9px;
    }

    .ffz-fixtures__navigation,
    .ffz-fixtures__refresh{
        width:36px;
        height:36px;

        font-size:15px;
    }

    .ffz-fixtures__gameweek{
        min-height:36px;

        font-size:13px;
    }

    .ffz-fixture{
        padding:16px 12px;
    }

    .ffz-fixture__teams{
        gap:6px;
    }

    .ffz-team__name{
        max-width:90px;

        font-size:12px;
    }

    .ffz-team img{
        width:32px;
        height:32px;
    }

    .ffz-fixture__vs{
        min-width:46px;

        padding:4px 6px;
    }

    .ffz-fixture__score{
        font-size:15px;
    }

    .ffz-fdr{
        min-width:34px;
        height:34px;

        padding:0 9px;

        font-size:12px;
    }

}

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

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

    .ffz-fixture,
    .ffz-fixtures__navigation,
    .ffz-fixtures__refresh{
        transition:none;
    }

    .ffz-fixture:hover,
    .ffz-fixtures__navigation:hover,
    .ffz-fixtures__refresh:hover{
        transform:none;
    }

    .ffz-fixtures.is-loading
    .ffz-fixture,
    .ffz-fixtures--loading
    .ffz-fixture,
    .ffz-fixtures.is-loading
    .ffz-fixtures__refresh-icon{
        animation:none;
    }

}

/*========================================================
TEAM-LEVEL FDR
========================================================*/

.ffz-team__fdr{
    display:inline-flex;
    align-items:center;
    gap:5px;
    flex-shrink:0;
}

.ffz-team__fdr-label{
    color:var(--ffz-text-muted);
    font-size:9px;
    font-weight:800;
    letter-spacing:.05em;
    line-height:1;
}

.ffz-team__fdr .ffz-fdr{
    min-width:30px;
    height:30px;
}

.ffz-fixture__difficulty--legacy{
    display:none !important;
}


/*========================================================
V4.8 MATCH LAYOUT — FDR OUTSIDE / DATE OR SCORE CENTERED
========================================================*/

.ffz-fixture{
    display:block;
    padding:16px 18px;
}

.ffz-fixture__teams{
    display:grid;
    grid-template-columns:
        54px
        minmax(0,1fr)
        minmax(104px,130px)
        minmax(0,1fr)
        54px;
    align-items:center;
    gap:12px;
    width:100%;
}

.ffz-fixture__fdr{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
}

.ffz-team__fdr{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
}

.ffz-team__fdr-label{
    color:var(--ffz-text-muted);
    font-size:8px;
    font-weight:800;
    line-height:1;
    letter-spacing:.08em;
}

.ffz-team--home{
    justify-content:flex-start;
}

.ffz-team--away{
    justify-content:flex-end;
}

.ffz-fixture__center{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:0;
    min-height:48px;
    padding:6px 8px;
    border-radius:12px;
    background:rgba(255,255,255,.045);
    text-align:center;
}

.ffz-fixture__center .ffz-fixture__day{
    font-size:13px;
    font-weight:800;
    line-height:1.15;
    white-space:nowrap;
}

.ffz-fixture__center .ffz-fixture__time{
    font-size:12px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}

.ffz-fixture__center .ffz-fixture__score{
    font-size:22px;
    line-height:1;
}

.ffz-fixture__vs,
.ffz-fixture__date,
.ffz-fixture__difficulty{
    display:none;
}

@media(max-width:768px){
    .ffz-fixture{
        padding:14px 10px;
    }

    .ffz-fixture__teams{
        grid-template-columns:
            38px
            minmax(0,1fr)
            minmax(76px,92px)
            minmax(0,1fr)
            38px;
        gap:6px;
    }

    .ffz-team{
        flex-direction:column;
        gap:5px;
        text-align:center;
    }

    .ffz-team--away{
        flex-direction:column-reverse;
    }

    .ffz-team__name{
        max-width:90px;
        font-size:12px;
    }

    .ffz-team img{
        flex-basis:32px;
        width:32px;
        height:32px;
    }

    .ffz-fdr{
        min-width:32px;
        height:32px;
        padding:0 7px;
        font-size:12px;
    }

    .ffz-fixture__center{
        min-height:44px;
        padding:5px 4px;
    }

    .ffz-fixture__center .ffz-fixture__day{
        font-size:10px;
    }

    .ffz-fixture__center .ffz-fixture__time{
        font-size:10px;
    }
}