/*
==========================================================
FantasyFanzone Player Comparison
Version: 4.0
==========================================================
*/

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

.ffz-comparison{
    position:relative;
    width:100%;
}

[data-comparison-section]{
    position:relative;
    padding:var(--ffz-section-padding) 0;
}

/*========================================================
WRAPPER
========================================================*/

.ffz-comparison__wrapper{
    position:relative;

    padding:36px;

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

    background:
        linear-gradient(
            180deg,
            rgba(124,58,237,.08),
            rgba(21,28,50,.96)
        );

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

/*========================================================
COMPARISON FORM
========================================================*/

.ffz-comparison__form,
[data-comparison-form]{
    display:flex;
    flex-direction:column;
    gap:28px;
}

/*========================================================
PLAYER SELECTORS
========================================================*/

.ffz-comparison__selectors{
    display:grid;

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

    align-items:start;

    gap:28px;
}

.ffz-comparison__selector{
    position:relative;

    min-width:0;
}

.ffz-comparison__selector-label{
    display:block;

    margin-bottom:10px;

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

    font-size:13px;
    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;
}

.ffz-comparison__selector-field{
    position:relative;
}

/*========================================================
PLAYER SEARCH INPUT
========================================================*/

.ffz-comparison__selector-input,
[data-player-search]{
    width:100%;
    min-height:52px;

    padding:0 16px;

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

    border-radius:14px;

    outline:none;

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

    color:var(--ffz-text);

    font:inherit;
    font-size:15px;

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

.ffz-comparison__selector-input::placeholder,
[data-player-search]::placeholder{
    color:var(--ffz-text-muted);
}

.ffz-comparison__selector-input:hover,
[data-player-search]:hover{
    border-color:
        rgba(255,255,255,.16);
}

.ffz-comparison__selector-input:focus,
[data-player-search]:focus{
    border-color:var(--ffz-primary);

    background:
        rgba(124,58,237,.07);

    box-shadow:
        0 0 0 3px
        rgba(124,58,237,.15);
}

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

.ffz-comparison__selector-results,
[data-player-results]{
    position:absolute;

    z-index:40;

    top:calc(100% + 8px);
    left:0;
    right:0;

    max-height:340px;

    padding:8px;

    overflow-x:hidden;
    overflow-y:auto;

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

    border-radius:16px;

    background:
        rgba(15,21,38,.98);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.38);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    scrollbar-width:thin;

    scrollbar-color:
        rgba(124,58,237,.55)
        transparent;
}

.ffz-comparison__selector-results[hidden],
[data-player-results][hidden]{
    display:none;
}

.ffz-comparison__selector-results::-webkit-scrollbar,
[data-player-results]::-webkit-scrollbar{
    width:7px;
}

.ffz-comparison__selector-results::-webkit-scrollbar-track,
[data-player-results]::-webkit-scrollbar-track{
    background:transparent;
}

.ffz-comparison__selector-results::-webkit-scrollbar-thumb,
[data-player-results]::-webkit-scrollbar-thumb{
    border-radius:999px;

    background:
        rgba(124,58,237,.55);
}

/*========================================================
PLAYER SEARCH OPTION
========================================================*/

.ffz-comparison-player-option{
    display:flex;

    align-items:center;

    gap:12px;

    width:100%;

    padding:10px 12px;

    border:0;
    border-radius:12px;

    background:transparent;

    color:inherit;

    font:inherit;

    text-align:left;

    cursor:pointer;

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

.ffz-comparison-player-option:hover,
.ffz-comparison-player-option:focus-visible{
    background:
        rgba(124,58,237,.12);

    outline:none;
}

.ffz-comparison-player-option:active{
    transform:scale(.99);
}

.ffz-comparison-player-option img{
    flex:0 0 46px;

    width:46px;
    height:46px;

    border-radius:50%;

    object-fit:cover;

    background:var(--ffz-surface);
}

.ffz-comparison-player-option__content{
    display:flex;

    flex-direction:column;

    gap:3px;

    min-width:0;
}

.ffz-comparison-player-option__content strong{
    overflow:hidden;

    color:var(--ffz-text);

    font-size:14px;
    font-weight:700;

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

.ffz-comparison-player-option__content span{
    overflow:hidden;

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

    font-size:12px;

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

/*========================================================
SELECTOR VS
========================================================*/

.ffz-comparison__selector-vs,
.ffz-comparison__vs{
    display:flex;

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

    flex-shrink:0;

    width:72px;
    height:72px;

    border-radius:50%;

    background:var(--ffz-gradient-primary);

    color:#fff;

    font-size:20px;
    font-weight:800;

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

/*========================================================
COMPARE BUTTON AREA
========================================================*/

.ffz-comparison__actions{
    display:flex;

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

    margin-top:4px;
}

[data-compare-players]{
    min-width:180px;
}

/*========================================================
MESSAGES
========================================================*/

.ffz-comparison__message,
[data-comparison-message]{
    margin-top:14px;

    padding:12px 16px;

    border-radius:12px;

    font-size:14px;
    font-weight:600;

    text-align:center;
}

.ffz-comparison__message[hidden],
[data-comparison-message][hidden]{
    display:none;
}

.ffz-comparison__message.is-loading,
[data-comparison-message].is-loading{
    background:
        rgba(59,130,246,.08);

    color:#93c5fd;
}

.ffz-comparison__message.is-error,
[data-comparison-message].is-error{
    background:
        rgba(239,68,68,.10);

    color:#fca5a5;
}

.ffz-comparison__message.is-success,
[data-comparison-message].is-success{
    background:
        rgba(34,197,94,.10);

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

/*========================================================
AJAX RESULTS AREA
========================================================*/

.ffz-comparison__results,
[data-comparison-results]{
    margin-top:36px;

    transition:
        opacity var(--ffz-transition-normal);
}

/*========================================================
INITIAL PLACEHOLDER
========================================================*/

.ffz-comparison__placeholder{
    padding:32px 20px;

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

    border-radius:16px;

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

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

    text-align:center;
}

.ffz-comparison__placeholder p{
    margin:0;

    font-size:14px;
    line-height:1.7;
}

/*========================================================
RESULT HEADER
========================================================*/

.ffz-comparison__header{
    display:grid;

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

    gap:28px;

    align-items:center;

    margin-bottom:36px;

    padding-bottom:30px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}

/*========================================================
RESULT PLAYER
========================================================*/

.ffz-comparison__player{
    display:flex;

    flex-direction:column;

    align-items:center;

    min-width:0;

    text-align:center;
}

.ffz-comparison__player img{
    width:120px;
    height:120px;

    margin-bottom:16px;

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

    border-radius:50%;

    object-fit:cover;

    background:var(--ffz-surface);
}

.ffz-comparison__player h3{
    max-width:100%;

    margin:0 0 5px;

    overflow:hidden;

    color:var(--ffz-text);

    font-size:22px;
    font-weight:800;

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

.ffz-comparison__player p{
    margin:0;

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

    font-size:14px;
}

.ffz-comparison__position{
    display:inline-flex;

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

    margin-top:8px;

    padding:4px 8px;

    border-radius:999px;

    background:
        rgba(124,58,237,.12);

    color:#c4b5fd;

    font-size:10px;
    font-weight:700;

    letter-spacing:.04em;

    text-transform:uppercase;
}

/*========================================================
COMPARISON TABLE
========================================================*/

.ffz-comparison__table{
    display:flex;

    flex-direction:column;

    gap:10px;
}

.ffz-comparison__row{
    display:grid;

    grid-template-columns:
        minmax(90px,1fr)
        minmax(130px,180px)
        minmax(90px,1fr);

    gap:16px;

    align-items:center;

    min-height:58px;

    padding:10px 16px;

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

    border-radius:14px;

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

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

.ffz-comparison__row:hover{
    background:
        rgba(255,255,255,.04);

    border-color:
        rgba(255,255,255,.09);
}

/*========================================================
METRIC
========================================================*/

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

    font-size:12px;
    font-weight:700;

    letter-spacing:.06em;

    text-align:center;

    text-transform:uppercase;
}

/*========================================================
VALUES
========================================================*/

.ffz-comparison__value{
    position:relative;

    padding:9px 12px;

    border-radius:10px;

    color:var(--ffz-text);

    font-size:16px;
    font-weight:800;

    text-align:center;

    font-variant-numeric:
        tabular-nums;

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

.ffz-comparison__value--winner{
    background:
        rgba(34,197,94,.12);

    color:var(--ffz-success);

    box-shadow:
        inset 0 0 0 1px
        rgba(34,197,94,.18);
}

.ffz-comparison__value--winner::after{
    content:"↑";

    margin-left:6px;

    font-size:12px;

    vertical-align:1px;
}

/*========================================================
SUMMARY
========================================================*/

.ffz-comparison__summary{
    display:flex;

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

    margin-top:32px;

    padding:16px 20px;

    border:
        1px solid
        rgba(124,58,237,.18);

    border-radius:14px;

    background:
        rgba(124,58,237,.08);

    color:var(--ffz-text);

    font-size:15px;
    font-weight:700;

    text-align:center;
}

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

[data-comparison-section].is-loading
[data-comparison-results]{
    opacity:.55;
}

[data-comparison-section].is-loading
[data-comparison-form]{
    opacity:.82;
}

[data-comparison-section].is-loading
[data-compare-players]{
    cursor:wait;
}

/*========================================================
GENERIC AJAX STATES
========================================================*/

.ffz-comparison .ffz-loading,
.ffz-comparison__results .ffz-loading,
[data-player-results] .ffz-loading{
    padding:18px;

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

    font-size:14px;

    text-align:center;
}

.ffz-comparison .ffz-error,
.ffz-comparison__results .ffz-error,
[data-player-results] .ffz-error{
    padding:18px;

    color:#fca5a5;

    font-size:14px;

    text-align:center;
}

.ffz-comparison .ffz-empty,
.ffz-comparison__results .ffz-empty,
[data-player-results] .ffz-empty{
    padding:18px;

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

    font-size:14px;

    text-align:center;
}

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

@media(max-width:992px){

    .ffz-comparison__wrapper{
        padding:30px 24px;
    }

    .ffz-comparison__selectors{
        gap:20px;
    }

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

        gap:20px;
    }

    .ffz-comparison__vs,
    .ffz-comparison__selector-vs{
        width:64px;
        height:64px;

        font-size:18px;
    }

    .ffz-comparison__player img{
        width:105px;
        height:105px;
    }

    .ffz-comparison__player h3{
        font-size:19px;
    }

}

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

@media(max-width:768px){

    [data-comparison-section]{
        padding:
            var(--ffz-section-padding)
            0;
    }

    .ffz-comparison__wrapper{
        padding:24px 18px;

        border-radius:20px;
    }

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

        gap:16px;
    }

    .ffz-comparison__selector-vs{
        width:48px;
        height:48px;

        margin:0 auto;

        font-size:14px;
    }

    [data-player-results]{
        max-height:280px;
    }

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

        gap:10px;

        margin-bottom:26px;

        padding-bottom:24px;
    }

    .ffz-comparison__header
    .ffz-comparison__vs{
        width:44px;
        height:44px;

        font-size:13px;
    }

    .ffz-comparison__player img{
        width:78px;
        height:78px;

        margin-bottom:10px;

        border-width:3px;
    }

    .ffz-comparison__player h3{
        font-size:15px;
    }

    .ffz-comparison__player p{
        font-size:11px;
    }

    .ffz-comparison__position{
        margin-top:6px;

        padding:3px 6px;

        font-size:8px;
    }

    .ffz-comparison__row{
        grid-template-columns:
            minmax(70px,1fr)
            minmax(90px,110px)
            minmax(70px,1fr);

        gap:8px;

        min-height:52px;

        padding:8px;
    }

    .ffz-comparison__metric{
        font-size:10px;

        letter-spacing:.03em;
    }

    .ffz-comparison__value{
        padding:8px 4px;

        font-size:14px;
    }

    .ffz-comparison__value--winner::after{
        display:none;
    }

    .ffz-comparison__summary{
        margin-top:24px;

        padding:14px;

        font-size:13px;
    }

    .ffz-comparison__placeholder{
        padding:26px 16px;
    }

}

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

@media(max-width:480px){

    .ffz-comparison__wrapper{
        padding:20px 14px;

        border-radius:18px;
    }

    .ffz-comparison__selector-input,
    [data-player-search]{
        min-height:50px;

        padding:0 14px;

        font-size:14px;
    }

    .ffz-comparison-player-option{
        padding:9px;
    }

    .ffz-comparison-player-option img{
        flex-basis:40px;

        width:40px;
        height:40px;
    }

    .ffz-comparison__header{
        grid-template-columns:
            minmax(0,1fr)
            36px
            minmax(0,1fr);
    }

    .ffz-comparison__header
    .ffz-comparison__vs{
        width:36px;
        height:36px;

        font-size:11px;
    }

    .ffz-comparison__player img{
        width:64px;
        height:64px;
    }

    .ffz-comparison__player h3{
        font-size:13px;
    }

    .ffz-comparison__row{
        grid-template-columns:
            minmax(58px,1fr)
            minmax(74px,96px)
            minmax(58px,1fr);

        gap:4px;

        padding:7px 4px;
    }

    .ffz-comparison__metric{
        font-size:9px;
    }

    .ffz-comparison__value{
        font-size:12px;
    }

    .ffz-comparison__placeholder{
        padding:22px 12px;
    }

    .ffz-comparison__placeholder p{
        font-size:12px;
    }

}

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

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

    .ffz-comparison__wrapper,
    .ffz-comparison-player-option,
    .ffz-comparison__row,
    .ffz-comparison__value,
    .ffz-comparison__selector-input,
    [data-player-search],
    [data-comparison-results]{
        transition:none;
    }

    .ffz-comparison-player-option:active{
        transform:none;
    }

}