body{
    margin:0;
    background:#eef3fb;
    font-family:Inter,sans-serif;
}

.va-login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
}


.va-header-logo{
    display:block;
    width:220px;
    max-width:90%;
    height:auto;
    margin:0 auto 24px;
}


.va-login-wrapper{
    width:100%;
    max-width:460px;
}

.va-login-brand{
    text-align:center;
    margin-bottom:25px;
}





.va-card{
    background:#fff;
    border-radius:20px;
    padding:35px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.va-title{
    margin:0;
    font-size:30px;
    color:#222;
}

.va-subtitle{
    color:#777;
    margin:10px 0 25px;
}

.va-login-form input[type=text],
.va-login-form input[type=password]{

    width:100%;
    height:52px;
    border:1px solid #d7dce5;
    border-radius:12px;
    padding:0 15px;
    font-size:15px;
    margin-bottom:18px;
    box-sizing:border-box;
}

.va-btn-login{

    width:100%;
    height:52px;

    border:none;

        border-radius:14px;

    background:#f97316;

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    margin-top:10px;
    
    
    
}

.va-btn-login:hover{

    background:#ea580c;

}

.va-links{

    display:flex;

    justify-content:space-between;

    margin-top:25px;

    font-size:14px;
}

.va-links a{

    text-decoration:none;

    color:#2563eb;

}

/* Success / Error Alerts */

.va-alert{
    padding:14px 16px;
    border-radius:14px;
    margin-bottom:18px;
}


.va-alert-icon{
    font-size:18px;
    margin-bottom:6px;
}


.va-alert-body h4{
    margin:0 0 8px;
    font-size:20px;
    font-weight:700;
    line-height:1.3;
}



.va-alert-body p{
    margin:0;
    font-size:15px;
    line-height:1.5;
    color:#4b5563;
}

.va-alert-body strong{
    font-size:15px;
    font-weight:700;
    color:#f97316;
}

.va-alert-success{

    background:#ecfdf5;

    border:1px solid #bbf7d0;

}

.va-badge-warning{
    display:inline-block;
    margin-top:10px;
    padding:6px 12px;
    background:#fff7ed;
    color:#ea580c;
    border:1px solid #fdba74;
    border-radius:999px;
    font-size:14px;
    font-weight:700;
}

.va-alert-error{

    background:#fef2f2;

    border:1px solid #fecaca;

}

.va-mobile-box{

    background:#f8fafc;

    border:1px solid #e5e7eb;

    border-radius:12px;

    margin-bottom:16px;
    
    padding:14px;
}

.va-otp-group{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:nowrap;
    gap:8px;
    margin:16px 0;
}

.va-otp-digit{

    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;

    height:56px !important;

    flex:0 0 48px !important;

    padding:0 !important;
    margin:0 !important;

    border:2px solid #d9dce3;
        border-radius:14px;

    text-align:center;

    font-size:22px;
    font-weight:700;

    box-sizing:border-box;
}

.va-otp-info{

    text-align:center;

    margin:14px 0;
    
    font-size:14px;
    
    color:#6b7280;

    color:#666;
}


.va-change-number{
    font-size:14px;
    font-weight:600;
    color:#2563eb;
    text-decoration:none;
}

.va-change-number:hover{
    text-decoration:underline;
}

.va-resend{

    text-align:center;

    margin:18px 0;
}


#resend-otp{

    width:auto;

    padding:0 30px;
}

@media(max-width:600px){

  

    .va-login-wrapper{

        max-width:100%;

    }

    .va-otp-digit{

        width:44px!important;

        height:52px!important;

    }

}


/* ===========================
   Mobile
=========================== */

@media only screen and (max-width:768px){

    html,
    body{
        margin:0;
        padding:0;
        width:100%;
        min-height:100%;
        overflow-x:hidden;
    }
    
     .va-header-logo{
        width:180px;
        max-width:90%;
        height:auto;
        margin:0 auto 20px;
    }

    .va-login-page{

        width:100%;
        min-height:100vh;

        display:flex !important;
        flex-direction:column;

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

        padding:20px !important;
        box-sizing:border-box;

    }

    .va-login-wrapper{

        display:block !important;

        width:100% !important;

        max-width:420px !important;

        min-width:320px !important;

        margin:0 auto !important;

        flex:none !important;

    }

    .va-login-brand{

        width:100%;

        text-align:center;

        margin:0 0 20px;

    }

 



.va-card{
    display:block !important;
    width:100% !important;
    max-width:420px !important;
    margin:0 auto !important;
    padding:24px !important;
    box-sizing:border-box;
    border-radius:18px;
}

    .va-title{

        font-size:22px;

    }

    .va-subtitle{

        font-size:14px;

    }

    .va-login-form input[type=text],
    .va-login-form input[type=password]{

        width:100% !important;

        height:50px;

        font-size:16px;

    }

    .va-btn-login{

        width:100% !important;

        height:50px;

    }

    .va-links{

        display:flex;

        justify-content:space-between;
        
        margin-top:16px;

        gap:10px;

    }

    .va-links a{

        font-size:13px;

    }

   .va-otp-group{

    justify-content:center;
    gap:6px;
    flex-wrap:nowrap;

}

.va-otp-digit{

    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;

    height:52px !important;

    flex:0 0 42px !important;

    padding:0 !important;
    margin:0 !important;

    font-size:20px;

}

}