/* Modal Box */
        .otp-card {
            border-radius: 22px;
            padding-top: 10px;
            position: relative;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        }

        /* Close button in corner */
        .otp-close {
            position: absolute;
            right: 18px;
            top: 15px;
            font-size: 28px;
            color: #999;
            background: none;
            border: none;
        }

        /* Image */
        .otp-img {
            width: 150px;
        }

        /* OTP Inputs */
        .otp-input {
            width: 45px;
            height: 50px;
            margin: 0 6px;
            text-align: center;
            font-size: 24px;
            border-radius: 10px;
            border: 2px solid #e5e5e5;
            background: #f7f7f7;
            outline: none;
        }

        .otp-input:focus {
            border-color: #FFB88C;
            background: white;
        }

        /* Current input highlight */
.otp-active {
    border-color: #DE6262 !important;
    background: white !important;
}

        /* Big orange button */
.verify-btn {
    background: #DE6262;
    padding: 12px 0;
    border-radius: 30px;
    font-size: 18px;
    font-weight: bold;
    color: white;
}
    .verify-btn:hover {
        background-color: #FFB88C;
        color:white;
    }

        /* Resend link */
        .resend-link {
            font-weight: bold;
            font-size: 14px;
        }


.otp-icon {
    font-size: 120px;
    color: #DE6262 ;
}


.otp-icon-wrapper {
    position: relative;
    display: inline-block;
}

.otp-overlay {
    position: absolute;
    top: 72%;
    left: 95%;
    transform: translate(-50%, -50%);
    color: black; /* Text color */
    font-weight: bold;
    font-size: 12px; /* Adjust as needed */
    font-weight: bold;
    letter-spacing: 4px; /* Spacing between stars */

    background: aliceblue; /* Box background */
    border: 2px solid #f7f7f7; /* Border color matches your verify button */
    /*padding: 4px 10px;*/ /* Box padding */
    border-radius: 6px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Optional subtle shadow */
}


.resend-link.disabled {
    color: #aaa;
    cursor: not-allowed;
    text-decoration: none;
}

/* in your external CSS file (allowed by CSP) */
.resend-alert-hidden {
    display: none !important;
}

.resend-alert-visible {
    display: block !important;
}


.msrginleft5px{
    margin-left:5px;
}