/*==================================================
        AUTH OTP PAGES
        (otp-verify.php / forgot-password.php / reset-password.php)
        Extends register.css — same section/card/form-group classes.
==================================================*/

.auth-card{

    max-width:520px;

    margin:0 auto;

}

.auth-icon-badge{

    width:64px;

    height:64px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    color:#ffffff;

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    box-shadow:0 18px 36px rgba(37,99,235,.28);

    margin-bottom:22px;

}

.auth-card p.auth-sub{

    color:#6b7280;

    font-size:15px;

    line-height:26px;

    margin-bottom:30px;

}

.auth-card p.auth-sub strong{

    color:#111827;

}

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

.otp-input{

    width:100%;

    height:64px;

    border:1.5px dashed #93c5fd;

    border-radius:16px;

    background:linear-gradient(135deg,#eff6ff,#eef4ff);

    text-align:center;

    font-size:28px;

    font-weight:800;

    letter-spacing:14px;

    color:#2563eb;

    outline:none;

    transition:.3s;
}

.otp-input:focus{

    border-color:#2563eb;

    border-style:solid;

    box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

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

.resend-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:-8px;

    margin-bottom:26px;

    font-size:13.5px;

    color:#6b7280;
}

.resend-row button{

    background:none;

    border:none;

    color:#2563eb;

    font-weight:700;

    font-size:13.5px;

    cursor:pointer;

    padding:0;
}

.resend-row button:disabled{

    color:#9ca3af;

    cursor:not-allowed;
}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:575px){

    .otp-input{

        font-size:22px;

        letter-spacing:8px;
    }

}