:root{
    /* COLORS */
    --nova-primary: #1E468C;
    --nova-primary-hover:#18397A;

    --nova-text: #000000;
    --nova-title: #000000;

    --nova-white: #FFFFFF;

    --nova-placeholder: #768EB8;

    --nova-border: #768EB8;

    --nova-bg:#FFFFFF;

    --nova-bg-light:#F8FAFC;

    --nova-danger:#E53935;

    --nova-success:#16A34A;

    --nova-overlay:rgba(0,0,0,.55);

    /* FONT */
    --nova-font:
            "Be Vietnam Pro",
            Inter,
            system-ui,
            sans-serif;

    --nova-fs-body: clamp(12px, 1.4vw, 24px);
    --nova-fs-input: clamp(10px, 1.2vw, 20px);
    --nova-fs-button: clamp(16px, 1.3vw, 20px);
    --nova-fs-title: clamp(27px, 2.8vw, 54px);

    --nova-line:1.4;

    --nova-space-xxs:clamp(4px,.3vw,6px);
    --nova-space-xs:clamp(8px,.5vw,10px);
    --nova-space-sm:clamp(12px,.8vw,16px);
    --nova-space-md:clamp(16px,1vw,20px);
    --nova-space-lg:clamp(24px,1.5vw,32px);
    --nova-space-xl:clamp(32px,2vw,48px);
    --nova-space-2xl:clamp(48px,3vw,64px);
    --nova-space-3xl:clamp(64px,4vw,96px);

    --nova-space-header:clamp(29px, 3vw, 46px);
    --nova-space-title:clamp(9px, 2vw, 46px);
    --nova-space-label:clamp(6px, 0.8vw, 12px);

    /* RADIUS */
    --nova-radius: clamp(6px, 1vw, 12px);
    --nova-radius-sm: clamp(4px, 0.6vw, 8px);

    /* SHADOW */

    --nova-shadow:

            0 15px 45px rgba(0,0,0,.12);

    /* ANIMATION */

    --nova-transition:.25s ease;

    /* TOAST */
    --nova-toast-width: clamp(280px, 92vw, 360px);

    --nova-toast-top: clamp(12px, 3vw, 20px);
    --nova-toast-right: clamp(12px, 3vw, 20px);

    --nova-toast-padding: clamp(14px, 1.3vw, 18px);
    --nova-toast-gap: clamp(10px, 1vw, 15px);

    --nova-toast-icon: clamp(22px, 2vw, 28px);

    --nova-toast-title: clamp(15px, 1.2vw, 16px);
    --nova-toast-message: clamp(13px, 1vw, 14px);

    --nova-toast-progress: clamp(3px, .3vw, 4px);

    --nova-toast-radius: clamp(10px, 1vw, 14px);

    --nova-toast-shadow:
            0 18px 40px rgba(0,0,0,.25);

}


/*----------------------------------
RESET
----------------------------------*/

.nova-auth *,
.nova-auth *::before,
.nova-auth *::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


/*----------------------------------
TYPOGRAPHY
----------------------------------*/

.nova-auth{

    font-family:var(--nova-font);

    color:var(--nova-text);

    font-size:var(--nova-fs-body);

    line-height:var(--nova-line);

}


.nova-auth button{
    font-family:inherit;
    cursor:pointer;
    outline:none;
    font-size:var(--nova-fs-button);
    padding: 0;
    margin:0;
    min-height: auto;
    height: auto;
}


.nova-auth input{

    font-family:inherit;

    outline:none;
    font-size:var(--nova-fs-input);

}


.nova-auth a{

    color:inherit;

    text-decoration:none;

}


/*----------------------------------
HEADER
----------------------------------*/

.nova-auth__header{

    margin-bottom: var(--nova-space-header);

    text-align:center;

}


.nova-auth__title{

    color:var(--nova-title);

    font-weight:700;

    margin-bottom: var(--nova-space-title);
    font-size: var(--nova-fs-title);

}


.nova-auth__description{
    font-size: var(--nova-fs-body);
    line-height:1.4;

}

.nova-auth__fields{
    display: flex;
    flex-direction: column;
    gap: clamp(15px, 1.8vw, 32px);
}

/*----------------------------------
FIELD
----------------------------------*/

.nova-auth__field{
    display:flex;
    flex-direction:column;
    gap: clamp(6px, 1.2vw, 12px);

}


.nova-auth__label{
    font-size: var(--nova-fs-input);
    font-weight: 500;
    color: var(--nova-primary);

}


.nova-auth__form input.nova-auth__input{
    width:100%;
    height: clamp(34px, 3.6vw, 68px);
    border:1px solid var(--nova-border);
    border-radius: var(--nova-radius-sm);
    background:#fff;
    padding:0 clamp(18.5px, 2vw, 30px);
    transition:var(--nova-transition);
    font-size: var(--nova-fs-input);
}


.nova-auth__input::placeholder{
    color:var(--nova-placeholder);
}


.nova-auth__input:hover{
    border-color:var(--nova-primary);
}


.nova-auth__input:focus{
    border-color:var(--nova-primary);
}


/*----------------------------------
ROW
----------------------------------*/

.nova-auth__row{
    display:flex;
    align-items:center;
}


.nova-auth__row--between{
    justify-content:space-between;
}


.nova-auth__row--center{
    justify-content:center;
}


/*----------------------------------
CHECKBOX
----------------------------------*/
.nova-auth__checkbox{
    display:flex;
    align-items:center;
    cursor:pointer;
    user-select:none;
}

.nova-auth__checkbox input{
    position: relative;
    appearance:none;
    -webkit-appearance:none;

    width: var(--nova-fs-button);
    height: var(--nova-fs-button);

    border:2px solid var(--nova-border);
    border-radius:4px;

    display:grid;
    place-items:center;

    transition:var(--nova-transition);
    flex-shrink:0;
}

.nova-auth__checkbox input::before{
    position: absolute;
    display: block;
    content:"";
    width:80%;
    height:80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition:transform .2s ease;

    background:var(--nova-primary);

    clip-path:polygon(
            14% 44%,
            0 65%,
            50% 100%,
            100% 16%,
            80% 0,
            43% 62%
    );
}

.nova-auth__checkbox input:checked{
    border-color:var(--nova-primary);
}

.nova-auth__checkbox input:checked::before{
    transform: translate(-50%, -50%)  scale(1);
}

.nova-auth__checkbox-label{
    font-size:calc(var(--nova-fs-input) * .8);
    color:var(--nova-primary);
    font-weight:500;
}


/*----------------------------------
LINK
----------------------------------*/

button.nova-auth__link {
    color: var(--nova-primary);
    font-size: var(--nova-fs-body);
    transition: var(--nova-transition);
    text-transform: initial;
}



.nova-auth__link:hover{

    opacity:.7;

}


/*----------------------------------
BUTTONS
----------------------------------*/

.nova-auth__actions{
    display:flex;
    gap: clamp(14px, 2.4vw, 40px);
    margin-top: clamp(30px, 3.2vw, 46px);
}


.nova-auth button.nova-auth__button{
    flex:1;
    height: clamp(48px, 5.2vw, 71px);
    border-radius: var(--nova-radius);
    font-weight:600;
    transition:var(--nova-transition);
    font-size: var(--nova-fs-button);
}


.nova-auth__button--primary{
    background:var(--nova-primary);
    color:var(--nova-white);
}


.nova-auth__button--primary:hover{
    background:var(--nova-primary-hover);
}


.nova-auth__button--outline{
    border:1px solid var(--nova-primary);
    background: var(--nova-white);
    color:var(--nova-primary);
}


.nova-auth__button--outline:hover{
    border-color:var(--nova-primary);
}


/*----------------------------------
SOCIAL
----------------------------------*/

.nova-auth__social{

    margin-top: clamp(15px, 2.4vw, 42px);
    display: flex;
    flex-direction: column;
    gap: clamp(15px, 1.8vw, 28px);
}


.nova-auth__social-line{
    text-align:center;
    position:relative;
}

.nova-auth__social-line span{
    position: relative;
    z-index: 2;
    background: var(--nova-white);
    padding-inline: clamp( 8px, 1.2vw, 16px);
}


.nova-auth__social-line::before,
.nova-auth__social-line::after{
    z-index: 1;
    content:"";
    position:absolute;
    top:50%;
    width: 50%;
    height:1px;
    background: #D9D9D9;

}

.nova-auth__social-line::before{
    left:0;
}

.nova-auth__social-line::after{
    right:0;
}

.nova-auth__social-title{
    font-weight: 600;
}


.nova-auth__social-list{
    display:flex;
    gap: clamp(10.5px, 1.4vw, 21px);

}


.nova-auth__social-item{
    position: relative;
    overflow: hidden;
    width: clamp(34px, 3.8vw, 68px);
    height: clamp(34px, 3.8vw, 68px);
    border-radius: var(--nova-radius-sm);
    border:1px solid var(--nova-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--nova-transition);
}


.nova-auth__social-item:hover{

    transform:translateY(-2px);
    border-color:var(--nova-primary);

}

.nova-auth__social-item i.icon{
    position:relative;
    z-index:1;
    pointer-events:none;
    width: clamp(18px,1.8vw,36px);
    height:clamp(18px,1.8vw,36px);
}
.nova-auth__social-overlay{
    position:absolute;
    inset:0;
    z-index:2;

}
.nova-auth__social-overlay .nsl-container{
    width:100%;
    height:100%;
}

.nova-auth__social-overlay .nsl-button{
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
    margin:0;
}

.nova-auth__social-overlay  div.nsl-container.nsl-container-block .nsl-container-buttons{
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
    margin:0;
}


/*----------------------------------
OTP
----------------------------------*/

.nova-auth__otp{

    display:flex;

    justify-content:center;

    gap:14px;

}


.nova-auth__otp-input{

    width:52px;

    height:52px;

    text-align:center;

    font-size:22px;

    border-radius:10px;

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

    transition:var(--nova-transition);

}


.nova-auth__otp-input:focus{

    border-color:var(--nova-primary);

    box-shadow:

            0 0 0 3px rgba(33,74,151,.12);

}


/*----------------------------------
FOOTER
----------------------------------*/

.nova-auth__footer{

    margin-top:30px;

    text-align:center;

    font-size:13px;

    color:#6B7280;

}


/*----------------------------------
STATE
----------------------------------*/

.is-loading{

    pointer-events:none;

    opacity:.6;

}


.is-disabled{

    pointer-events:none;

    opacity:.4;

}


.is-invalid{

    border-color:var(--nova-danger)!important;

}


/*----------------------------------
ANIMATION
----------------------------------*/

@keyframes novaFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes novaUp{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.nova-auth-account{

    position:relative;

}

.nova-auth-account__toggle{
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--nova-primary);

}

.nova-auth-account__toggle i.icon {
    width: 100%;
    height: 100%;
}

.nova-auth-account__toggle img{

    width: 100%;

    height: 100%;

    border-radius:50%;

    display:block;

}

.nova-auth-account__dropdown{
    position:absolute;

    top:100%;

    right:0;

    min-width:220px;

    background: var(--nova-white);

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

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:.25s;

    z-index:999;

}

.nova-auth-account:hover .nova-auth-account__dropdown{

    opacity:1;

    visibility:visible;

    transform:none;

}

.nova-auth-account__item{

    display:block;

    padding:12px 18px;

    color:#333;

    text-decoration:none;

}

.nova-auth-account__item:hover{

    background:#f7f7f7;

}