:root{

    --biza-blue:#062B63;
    --biza-blue-light:#0B427F;
    --biza-red:#F0442E;
    --biza-bg:#F5F7FA;
    --biza-text:#1E293B;
    --biza-muted:#7B8494;

}

*{
    box-sizing:border-box;
}

body{

    margin:0;

    min-height:100vh;

    background:
        linear-gradient(
            135deg,
            #F5F8FC,
            #EAF1F9
        );

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    color:var(--biza-text);

}


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

.auth-wrapper{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:25px;

}


/* =====================================================
AUTH CARD
===================================================== */

.auth-card{

    width:100%;

    max-width:450px;

    background:#fff;

    border-radius:25px;

    padding:35px 30px;

    box-shadow:
        0 15px 50px
        rgba(0,0,0,.10);

}


/* =====================================================
LOGO
===================================================== */

.auth-logo{

    width:125px;

    max-width:60%;

    display:block;

    margin:0 auto 20px;

}


/* =====================================================
TITLE
===================================================== */

.auth-title{

    text-align:center;

    font-size:27px;

    font-weight:700;

    color:var(--biza-blue);

    margin-bottom:7px;

}


.auth-subtitle{

    text-align:center;

    color:var(--biza-muted);

    font-size:14px;

    margin-bottom:28px;

}


/* =====================================================
INPUT
===================================================== */

.form-label{

    font-size:14px;

    font-weight:600;

}


.form-control{

    min-height:50px;

    border-radius:12px;

    border:1px solid #DDE3EA;

    padding:12px 15px;

}


.form-control:focus{

    border-color:var(--biza-blue);

    box-shadow:
        0 0 0 3px
        rgba(6,43,99,.10);

}


/* =====================================================
PRIMARY BUTTON
===================================================== */

.biza-auth-btn{

    width:100%;

    min-height:50px;

    border:0;

    border-radius:12px;

    background:var(--biza-blue);

    color:#fff;

    font-weight:600;

    font-size:15px;

    transition:.2s;

}


.biza-auth-btn:hover{

    background:var(--biza-blue-light);

}


/* =====================================================
GOOGLE
===================================================== */

.google-wrapper{

    display:flex;

    justify-content:center;

    width:100%;

}


.google-wrapper > div{

    width:100%;

    display:flex;

    justify-content:center;

}


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

.auth-divider{

    display:flex;

    align-items:center;

    gap:12px;

    margin:22px 0;

    color:#9AA3AF;

    font-size:13px;

}


.auth-divider::before,
.auth-divider::after{

    content:"";

    height:1px;

    background:#E5E7EB;

    flex:1;

}


/* =====================================================
LINKS
===================================================== */

.auth-link{

    color:var(--biza-blue);

    text-decoration:none;

    font-weight:600;

}


.auth-link:hover{

    text-decoration:underline;

}


/* =====================================================
PASSWORD TOGGLE
===================================================== */

.password-box{

    position:relative;

}


.password-box .form-control{

    padding-right:50px;

}


.password-toggle{

    position:absolute;

    right:14px;

    top:50%;

    transform:
        translateY(-50%);

    border:0;

    background:transparent;

    color:#7B8494;

}


/* =====================================================
TERMS
===================================================== */

.terms{

    font-size:12px;

    color:var(--biza-muted);

    line-height:1.6;

}


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

@media(max-width:500px){

    .auth-wrapper{

        padding:15px;

    }

    .auth-card{

        padding:28px 20px;

        border-radius:20px;

    }

}