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

.otp-container{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:10px;

}

.otp-input{

    width:46px;

    height:50px;

    border:2px solid #d6d6d6;

    border-radius:8px;

    text-align:center;

    font-size:22px;

    font-weight:700;

    transition:.25s;

}

.otp-input:focus{

    border-color:#3b82f6;

    box-shadow:0 0 0 .2rem rgba(13,110,253,.15);

    outline:none;

}

.otp-input.filled{

    border-color:#198754;

}

#otpSection{

    animation:fadeIn .35s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.otp-input{

transition:.25s ease;

}

.otp-input.filled{

background:#e8f5e9;

border-color:#22c55e;

transform:scale(1.05);

}