/* -----------------------------------------------
   SMS Verification — integrated step styles
   Sits flat inside the booking form card.
----------------------------------------------- */

[x-cloak] { display: none !important; }

/* ---- Pre-send state ---- */
.sms-phone-display {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

/* ---- OTP input row ---- */
.otp-boxes {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

/* Gap between digit 3 and 4 — common UX pattern for 6-digit codes */
.otp-boxes .otp-box:nth-child(3) {
    margin-right: 14px;
}

.otp-box {
    /* Override any theme global input styles */
    display: block !important;
    width: 52px !important;
    min-width: 52px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    height: 60px !important;
    padding: 0 !important;

    font-size: 24px !important;
    font-weight: 700 !important;
    text-align: center !important;
    line-height: 60px !important;

    color: #1a1a1a;
    background: #f8f9fa;
    border: 2px solid #d8d8d8 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    outline: none !important;

    transition: border-color 0.18s ease, box-shadow 0.18s ease,
                background 0.18s ease, transform 0.18s ease;
}

.otp-box:focus {
    border-color: #eb3e30 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(235, 62, 48, 0.14) !important;
    transform: translateY(-2px);
}

/* Subtle tint when a digit has been entered */
.otp-box.is-filled {
    background: #fff !important;
    border-color: #b0b0b0 !important;
}

.otp-box.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12) !important;
}

/* ---- Resend link ---- */
.sms-resend-link {
    color: #eb3e30;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.sms-resend-link:hover {
    color: #c73326;
    border-bottom-color: #c73326;
    text-decoration: none;
}

/* ---- Verified state ---- */
.sms-verified-state {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #155724;
    font-weight: 500;
    font-size: 15px;
}

.sms-verified-state i {
    font-size: 22px;
    color: #28a745;
}

.verified-checkmark {
    animation: checkmark 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes checkmark {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.25); }
    100% { transform: scale(1); opacity: 1; }
}

/* ---- Alerts ---- */
.sms-verification .alert {
    border: none;
    border-radius: 8px;
    padding: 13px 16px;
    font-size: 14px;
}

.sms-verification .alert-danger {
    background: #fdf1f1;
    color: #721c24;
    border-left: 3px solid #eb3e30;
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
    .otp-boxes {
        gap: 7px;
    }

    .otp-boxes .otp-box:nth-child(3) {
        margin-right: 10px;
    }

    .otp-box {
        width: 42px !important;
        min-width: 42px !important;
        height: 50px !important;
        font-size: 20px !important;
        line-height: 50px !important;
        border-radius: 7px !important;
    }
}