/* ZELORA88_AUTH_MODAL_V1 */

:root {
    --z88-red: #e30b13;
    --z88-red-bright: #ff272f;
    --z88-red-dark: #650004;
    --z88-black: #050505;
    --z88-panel: rgba(7,7,7,.985);
    --z88-field: rgba(20,20,20,.97);
    --z88-border: rgba(255,255,255,.26);
    --z88-text: #f5f5f5;
    --z88-muted: #9e9e9e;
}

body.z88-auth-locked {
    overflow: hidden !important;
}

.z88-auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147482000;

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

    padding: 16px;

    background: rgba(0,0,0,.68);

    -webkit-backdrop-filter:
        blur(9px)
        brightness(.58);

    backdrop-filter:
        blur(9px)
        brightness(.58);
}

.z88-auth-overlay.is-open {
    display: flex;
    animation:
        z88OverlayIn
        .18s
        ease-out
        both;
}

.z88-auth-modal {
    position: relative;

    width:
        min(
            720px,
            calc(100vw - 26px)
        );

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

    overflow-y: auto;
    overscroll-behavior: contain;

    border:
        1px solid
        rgba(255,39,47,.96);

    border-radius: 19px;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(150,0,5,.31),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #100202 0,
            #080808 30%,
            #050505 100%
        );

    color:
        var(--z88-text);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.09),
        0 0 24px rgba(240,0,15,.24),
        0 30px 90px rgba(0,0,0,.80);

    scrollbar-width: thin;
    scrollbar-color:
        #8a080d
        #070707;

    animation:
        z88ModalIn
        .22s
        cubic-bezier(.2,.75,.2,1)
        both;
}

.z88-auth-modal--login {
    width:
        min(
            520px,
            calc(100vw - 26px)
        );
}

.z88-auth-inner {
    padding:
        20px
        28px
        24px;
}

.z88-auth-close {
    position: absolute;

    top: 13px;
    right: 13px;

    z-index: 10;

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

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

    color: white;

    font-size: 29px;
    line-height: 34px;

    cursor: pointer;

    transition:
        .18s ease;
}

.z88-auth-close:hover {
    border-color:
        var(--z88-red-bright);

    background:
        #310003;

    transform:
        rotate(8deg);
}

.z88-auth-logo-wrap {
    display: flex;
    justify-content: center;

    padding:
        4px
        50px
        0;
}

.z88-auth-logo {
    display: block;

    width:
        min(
            340px,
            80%
        );

    height: auto;

    object-fit: contain;

    filter:
        brightness(1.10)
        drop-shadow(
            0 0 9px
            rgba(255,20,25,.38)
        );
}

.z88-auth-title {
    position: relative;

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

    margin:
        12px
        auto
        22px;

    padding:
        0
        65px
        9px;

    text-align: center;

    color: #fff;

    font-size: 29px;
    font-weight: 700;
    line-height: 1.15;

    text-shadow:
        0 2px 10px
        rgba(255,0,0,.22);
}

.z88-auth-title::after {
    content: "";

    position: absolute;

    left: 15%;
    right: 15%;
    bottom: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ef0b13 25%,
            white 50%,
            #ef0b13 75%,
            transparent
        );

    box-shadow:
        0 0 11px
        #ef0b13;
}

.z88-auth-grid {
    display: grid;

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

    column-gap: 14px;
    row-gap: 15px;
}

.z88-auth-field {
    min-width: 0;
}

.z88-auth-field--full {
    grid-column:
        1 / -1;
}

.z88-auth-label {
    display: block;

    margin:
        0
        0
        7px;

    color: #f2f2f2;

    font-size: 15px;
    font-weight: 600;
}

.z88-auth-control {
    position: relative;
}

.z88-auth-control input,
.z88-auth-bank-button {
    box-sizing:
        border-box;

    width: 100%;
    min-width: 0;

    height: 49px;

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

    border-radius: 9px;

    outline: none;

    background:
        linear-gradient(
            180deg,
            rgba(30,30,30,.96),
            rgba(14,14,14,.96)
        );

    color: white;

    font-family: inherit;
    font-size: 14px;

    transition:
        .18s ease;
}

.z88-auth-control input {
    padding:
        0
        42px
        0
        13px;
}

.z88-auth-control input::placeholder {
    color: #898989;
}

.z88-auth-control input:focus,
.z88-auth-bank-button:focus,
.z88-auth-bank-button.is-open {
    border-color:
        var(--z88-red-bright);

    box-shadow:
        0 0 0 1px
        rgba(255,20,27,.28),
        0 0 13px
        rgba(255,0,10,.13);
}

.z88-auth-eye {
    position: absolute;

    top: 50%;
    right: 10px;

    transform:
        translateY(-50%);

    width: 31px;
    height: 31px;

    padding: 0;

    border: 0;

    background:
        transparent;

    color: #b6b6b6;

    cursor: pointer;

    font-size: 18px;
}

.z88-auth-bank-wrap {
    position: relative;
}

.z88-auth-bank-button {
    position: relative;

    display: flex;
    align-items: center;

    gap: 9px;

    padding:
        0
        42px
        0
        12px;

    cursor: pointer;

    text-align: left;
}

.z88-auth-bank-button::after {
    content: "";

    position: absolute;

    right: 16px;
    top: 50%;

    width: 8px;
    height: 8px;

    border-right:
        2px solid white;

    border-bottom:
        2px solid white;

    transform:
        translateY(-68%)
        rotate(45deg);

    transition:
        transform .18s ease;
}

.z88-auth-bank-button.is-open::after {
    transform:
        translateY(-30%)
        rotate(225deg);
}

.z88-auth-bank-placeholder {
    color: #b7b7b7;
}

.z88-auth-bank-selected-logo {
    width: 28px;
    height: 28px;

    flex:
        0 0 28px;

    object-fit: contain;

    border-radius: 50%;
}

.z88-auth-bank-menu {
    position: absolute;

    top:
        calc(100% + 6px);

    left: 0;
    right: 0;

    z-index: 40;

    display: none;

    max-height: 260px;

    overflow-y: auto;

    border:
        1px solid
        rgba(255,30,37,.80);

    border-radius: 9px;

    background: #121212;

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.70);
}

.z88-auth-bank-menu.is-open {
    display: block;
}

.z88-auth-bank-option {
    width: 100%;
    min-height: 52px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        7px
        12px;

    border: 0;

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

    background:
        transparent;

    color: #f4f4f4;

    font-family: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        background
        .15s ease;
}

.z88-auth-bank-option:last-child {
    border-bottom: 0;
}

.z88-auth-bank-option:hover {
    background:
        rgba(150,0,7,.32);
}

.z88-auth-bank-option img {
    width: 36px;
    height: 36px;

    flex:
        0 0 36px;

    object-fit: contain;

    border-radius: 50%;
}

.z88-auth-bank-option span {
    font-size: 14px;
    line-height: 1.25;
}

.z88-auth-forgot-row {
    margin:
        14px
        0
        14px;
}

.z88-auth-link {
    color:
        #ff262d;

    font-size:
        14px;

    text-decoration:
        underline;

    text-underline-offset:
        3px;

    cursor: pointer;
}

.z88-auth-primary {
    width: 100%;
    height: 54px;

    border:
        1px solid
        #ff343a;

    border-radius:
        12px;

    background:
        radial-gradient(
            ellipse at 50% 100%,
            rgba(255,100,100,.34),
            transparent 33%
        ),
        linear-gradient(
            180deg,
            #e51018,
            #730005 58%,
            #b50008
        );

    color: white;

    font-family: inherit;

    font-size:
        21px;

    font-weight:
        700;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.40),
        0 0 14px
        rgba(240,0,10,.20);

    transition:
        .18s ease;
}

.z88-auth-primary:hover {
    filter:
        brightness(1.13);

    transform:
        translateY(-1px);
}

.z88-auth-switch {
    margin-top:
        15px;

    text-align:
        center;

    color:
        #a8a8a8;

    font-size:
        14px;
}

.z88-auth-switch button {
    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        #ff282e;

    font: inherit;

    text-decoration:
        underline;

    text-underline-offset:
        3px;

    cursor: pointer;
}

.z88-auth-toast {
    position: fixed;

    left: 50%;
    bottom: 26px;

    z-index:
        2147483000;

    max-width:
        calc(100vw - 32px);

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

    padding:
        11px 17px;

    border:
        1px solid
        rgba(255,50,55,.82);

    border-radius:
        9px;

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

    color: white;

    font-size:
        13px;

    text-align:
        center;

    opacity: 0;

    pointer-events:
        none;

    transition:
        .20s ease;

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

.z88-auth-toast.is-show {
    opacity: 1;

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

@keyframes z88OverlayIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes z88ModalIn {
    from {
        opacity: 0;

        transform:
            translateY(12px)
            scale(.985);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@media (max-width: 767px) {

    .z88-auth-overlay {
        padding: 8px;
    }

    .z88-auth-modal,
    .z88-auth-modal--login {
        width:
            min(
                100%,
                580px
            );

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

        border-radius:
            16px;
    }

    .z88-auth-inner {
        padding:
            14px
            16px
            17px;
    }

    .z88-auth-close {
        top: 8px;
        right: 8px;

        width: 36px;
        height: 36px;

        font-size: 25px;
        line-height: 29px;
    }

    .z88-auth-logo-wrap {
        padding:
            3px
            40px
            0;
    }

    .z88-auth-logo {
        width:
            min(
                270px,
                88%
            );
    }

    .z88-auth-title {
        margin:
            8px
            auto
            16px;

        padding:
            0
            38px
            8px;

        font-size:
            25px;
    }

    .z88-auth-grid {
        column-gap:
            10px;

        row-gap:
            11px;
    }

    .z88-auth-label {
        margin-bottom:
            5px;

        font-size:
            14px;

        white-space:
            nowrap;
    }

    .z88-auth-control input,
    .z88-auth-bank-button {
        height:
            43px;

        border-radius:
            7px;

        font-size:
            13.5px;
    }

    .z88-auth-control input {
        padding:
            0
            35px
            0
            10px;
    }

    .z88-auth-bank-button {
        padding:
            0
            34px
            0
            9px;
    }

    .z88-auth-bank-button::after {
        right:
            13px;
    }

    .z88-auth-bank-selected-logo {
        width:
            24px;

        height:
            24px;

        flex-basis:
            24px;
    }

    .z88-auth-bank-menu {
        max-height:
            220px;
    }

    .z88-auth-bank-option {
        min-height:
            46px;

        gap:
            8px;

        padding:
            6px 9px;
    }

    .z88-auth-bank-option img {
        width:
            30px;

        height:
            30px;

        flex-basis:
            30px;
    }

    .z88-auth-bank-option span {
        font-size:
            12px;
    }

    .z88-auth-forgot-row {
        margin:
            11px
            0
            12px;
    }

    .z88-auth-link,
    .z88-auth-switch {
        font-size:
            14px;
    }

    .z88-auth-primary {
        height:
            48px;

        font-size:
            19px;
    }

    .z88-auth-switch {
        margin-top:
            11px;
    }
}

@media (max-width: 370px) {

    .z88-auth-inner {
        padding-left:
            11px;

        padding-right:
            11px;
    }

    .z88-auth-grid {
        column-gap:
            7px;

        row-gap:
            10px;
    }

    .z88-auth-label {
        font-size:
            13px;
    }

    .z88-auth-control input,
    .z88-auth-bank-button {
        font-size:
            13px;
    }
}