@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

[data-otp-role="otp"].shake {
    animation: shake 0.5s ease-in-out;
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

[data-otp-role="otp"] {
    transition: all 0.3s ease;
}

[data-otp-role="otp"]:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Countdown and Status Styles */
#otp-status {
    margin: 10px 0;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    transition: all 0.3s ease;
}

#otp-status strong {
    font-weight: 600;
    color: inherit;
}

.resend-otp-text {
    color: #007bff;
    text-decoration: none;
    transition: all 0.2s ease;
}

.resend-otp-text:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Locked state styles */
#otp-status[style*="color: red"] {
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.2);
}

/* Success state styles */
#otp-status[style*="color: green"] {
    background-color: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.2);
} 

/* Full-screen loading overlay */
.otp-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.96);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
}
.otp-loading-overlay.active { display: flex; }
.otp-loading-content { text-align: center; }
.otp-loading-text { margin-top: 10px; font-size: 14px; color: #333; }
.otp-emoji { font-size: 28px; margin-bottom: 8px; }
.otp-dots { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.otp-dots span { width: 10px; height: 10px; background: #007bff; border-radius: 50%; display: inline-block; animation: otp-bounce 1.2s infinite ease-in-out; }
.otp-dots span:nth-child(2) { animation-delay: 0.15s; }
.otp-dots span:nth-child(3) { animation-delay: 0.3s; }

/* Spinner */
.otp-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(0,0,0,0.1);
    border-top-color: #007bff;
    border-radius: 50%;
    animation: otp-spin 0.9s linear infinite;
}
@keyframes otp-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.6; }
    40% { transform: scale(1); opacity: 1; }
}