/*
--------------------------------------
Nova Auth Popup
--------------------------------------
*/

/*==============================
POPUP ROOT
==============================*/

.nova-auth{
    position:fixed;
    inset:0;
    z-index:999999;

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

    visibility:hidden;
    opacity:0;

    pointer-events:none;

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


/* popup mở */

.nova-auth.is-open{

    visibility:visible;

    opacity:1;

    pointer-events:auto;

}


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

.nova-auth__overlay{

    position:absolute;
    inset:0;

    background:var(--nova-overlay);

    backdrop-filter:blur(3px);

    animation:novaFade .3s;

}


/*==============================
DIALOG
==============================*/

.nova-auth__dialog-wrapper{
    width: 100%;
    max-width: clamp(440px, 60vw, 1080px);
    height: fit-content;
    overflow:hidden;
    background: var(--nova-white);
    border-radius: clamp(16px, 2.4vw, 50px);
    box-shadow:var(--nova-shadow);
    animation:novaUp .35s;
    z-index:2;
    position: relative;
}

.nova-auth__dialog{
    position:relative;
    width:100%;
    max-width: clamp(440px, 60vw, 1080px);
    max-height:90vh;
}


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

.nova-auth__body{
    position:relative;
    overflow:hidden;
}


/*==============================
SCREEN
==============================*/

.nova-auth__screen{

    display:none;

    padding: clamp(38px,4.8vw, 78px) clamp(18px,4.8vw, 80px);

    animation:novaFade .25s;

}


.nova-auth__screen.is-active{

    display:block;

}


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

.nova-auth button.nova-auth__close{
    position:absolute;

    top:var(--nova-space-lg);
    right:var(--nova-space-lg);

    width:clamp(24px,2.5vw,42px);
    height:clamp(24px,2.5vw,42px);

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

    border-radius:50%;
    color:#666;
    z-index:20;
    transition:var(--nova-transition);
}

.nova-auth button.nova-auth__close:hover{
    background:#F3F4F6;
    color:#000;
}

.nova-auth__close i.icon{
    width: 70%;
    height: 70%;
}



/*==============================
SCROLL
==============================*/

.nova-auth__dialog{

    overflow-y:auto;

}


.nova-auth__dialog::-webkit-scrollbar{

    width: 4px;

}


.nova-auth__dialog::-webkit-scrollbar-thumb{

    background: var(--nova-border);

    border-radius:20px;

}


.nova-auth__dialog::-webkit-scrollbar-track{

    background:transparent;

}


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

.nova-auth__form{

    width:100%;

}

.nova-auth__options{
    margin-top: clamp(10px, 1vw, 12px);
}


/*==============================
OTP
==============================*/

.nova-auth__otp{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(44.75px, 5vw, 73px);
    margin-block: clamp(35px, 3.5vw, 48px) clamp(35px, 4vw, 65px);
}

.nova-auth__otp .nova-auth__otp-input{
    flex: 1;
    max-width: clamp(59.25px, 6vw , 79px);
    height: clamp(73px, 7vw, 98px);
    border-radius: clamp(7.5px, 0.7vw, 10px);
    border: 1px solid #000000;
}



/*==============================
SOCIAL
==============================*/

.nova-auth__social{

    margin-top:28px;

}


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

.nova-auth__footer{

    margin-top:25px;

}


/*==============================
TRANSITION
==============================*/

.nova-auth__screen{

    opacity:0;

    transform:translateY(8px);

}


.nova-auth__screen.is-active{

    opacity:1;

    transform:none;

}

/*==============================
DIVIDER
==============================*/

.nova-auth__divider{

    position:relative;

    margin:24px 0;

    text-align:center;

    color:#888;

    font-size:13px;

}


.nova-auth__divider::before{

    content:"";

    position:absolute;

    top:50%;
    left:0;

    width:42%;

    height:1px;

    background:#e5e7eb;

}


.nova-auth__divider::after{

    content:"";

    position:absolute;

    top:50%;
    right:0;

    width:42%;

    height:1px;

    background:#e5e7eb;

}


/*==============================
SHAKE
==============================*/

@keyframes novaShake{

    0%{

        transform:translateX(0);

    }

    20%{

        transform:translateX(-6px);

    }

    40%{

        transform:translateX(6px);

    }

    60%{

        transform:translateX(-4px);

    }

    80%{

        transform:translateX(4px);

    }

    100%{

        transform:none;

    }

}


.nova-auth.is-error .nova-auth__dialog{
    animation:novaShake .35s;
}


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

.nova-auth.is-loading{
    cursor:progress;
}


.nova-auth.is-loading .nova-auth__dialog{
    opacity:.75;
}


/*==============================
SCREEN ANIMATION
==============================*/

.nova-auth__screen{
    transition:
            opacity .25s ease,
            transform .25s ease;

}


/*==============================
HIDE
==============================*/

.nova-auth:not(.is-open){
    display:flex;
}

i.icon{
    display: flex;
    align-items: center;
    justify-content: center;
}

i.icon svg{
    width: 100%;
    height: 100%;
}