/*
==========================================================
FantasyFanzone Modal System
Version: 4.0
==========================================================
*/

/*======================================================
BASE
======================================================*/

.ffz-modal{
    position:fixed;

    inset:0;

    display:flex;

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

    padding:24px;

    visibility:hidden;

    opacity:0;

    pointer-events:none;

    transition:
        opacity .3s ease,
        visibility .3s ease;

    z-index:var(--ffz-z-modal);
}

.ffz-modal.is-active,
.ffz-modal.is-open{
    visibility:visible;

    opacity:1;

    pointer-events:auto;
}

/*======================================================
OVERLAY
======================================================*/

.ffz-modal__overlay{
    position:absolute;

    inset:0;

    background:rgba(8,12,20,.75);

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

/*======================================================
WINDOW
======================================================*/

.ffz-modal__window{
    position:relative;

    display:flex;
    flex-direction:column;

    width:min(760px,92vw);

    max-height:min(
        88vh,
        900px
    );

    overflow:hidden;

    background:var(--ffz-surface);

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

    box-shadow:var(--ffz-shadow-xl);

    transform:
        translateY(20px)
        scale(.98);

    transition:
        transform .35s ease;

    z-index:2;
}

.ffz-modal.is-active
.ffz-modal__window,
.ffz-modal.is-open
.ffz-modal__window{
    transform:
        translateY(0)
        scale(1);
}

/*======================================================
SIZES
======================================================*/

.ffz-modal--sm .ffz-modal__window{
    max-width:420px;
}

.ffz-modal--md .ffz-modal__window{
    max-width:640px;
}

.ffz-modal--lg .ffz-modal__window{
    max-width:920px;
}

.ffz-modal--xl .ffz-modal__window{
    max-width:1200px;
}

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

.ffz-modal__header{
    display:flex;

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

    gap:20px;

    padding:24px 28px;

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

.ffz-modal__title{
    margin:0;

    overflow-wrap:anywhere;

    color:#fff;

    font-size:22px;
    font-weight:700;
    line-height:1.3;
}

/*======================================================
BODY
======================================================*/

.ffz-modal__body{
    flex:1;

    min-height:0;

    padding:28px;

    overflow-y:auto;

    overscroll-behavior:contain;
}

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

.ffz-modal__footer{
    display:flex;

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

    flex-wrap:wrap;

    gap:14px;

    padding:20px 28px;

    border-top:
        1px solid
        rgba(255,255,255,.06);
}

/*======================================================
CLOSE
======================================================*/

.ffz-modal__close{
    display: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;
    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);
}

.ffz-modal__close:hover{
    background:var(--ffz-primary);

    transform:rotate(90deg);
}

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

/*======================================================
SCROLLBAR
======================================================*/

.ffz-modal__body::-webkit-scrollbar{
    width:8px;
}

.ffz-modal__body::-webkit-scrollbar-track{
    background:transparent;
}

.ffz-modal__body::-webkit-scrollbar-thumb{
    background:
        rgba(255,255,255,.12);

    border-radius:999px;
}

.ffz-modal__body::-webkit-scrollbar-thumb:hover{
    background:
        rgba(255,255,255,.2);
}

/*======================================================
RESPONSIVE
======================================================*/

@media(max-width:768px){

    .ffz-modal{
        align-items:flex-start;

        padding:16px;
        padding-top:72px;
    }

    .ffz-modal__window{
        width:100%;

        max-height:
            calc(100dvh - 88px);

        border-radius:18px;
    }

    .ffz-modal__header{
        padding:20px;
    }

    .ffz-modal__body{
        padding:20px;
    }

    .ffz-modal__footer{
        flex-direction:column;

        align-items:stretch;

        padding:18px 20px;
    }

    .ffz-modal__footer
    .ffz-btn,
    .ffz-modal__footer
    .ffz-button{
        width:100%;
    }

}

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

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

    .ffz-modal,
    .ffz-modal__window,
    .ffz-modal__close{
        transition:none;
    }

    .ffz-modal__window,
    .ffz-modal.is-active
    .ffz-modal__window,
    .ffz-modal.is-open
    .ffz-modal__window{
        transform:none;
    }

    .ffz-modal__close:hover{
        transform:none;
    }

}