/* 2FA Page Security Enhancements */

/* Input validation states */
.form-control.border-red-300 {
    border-color: #fca5a5;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.1);
}

.form-control.border-red-300:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Rate limit indicator */
.rate-limit-warning {
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* Security status indicators */
.security-warning {
    border-left: 4px solid #f59e0b;
}

.security-error {
    border-left: 4px solid #ef4444;
}

.security-info {
    border-left: 4px solid #3b82f6;
}

/* Countdown timer styling */
.countdown-timer {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #f59e0b;
}

/* Button disabled states */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* OTP Input improvements */
.otp-group input {
    transition: all 0.2s ease-in-out;
}

.otp-group input:focus {
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

.otp-group input.error {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 20%, 40%, 60%, 80%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-3px);
    }
}

/* Loading states */
.loading-overlay {
    backdrop-filter: blur(2px);
}

/* Dark mode adjustments */
.dark .security-warning {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
}

.dark .security-error {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

.dark .security-info {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .otp-group input:focus {
        transform: none;
    }
    
    .otp-group input.error {
        animation: none;
        border-color: #ef4444;
    }
    
    .rate-limit-warning {
        animation: none;
    }
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    .otp-group {
        gap: 0.5rem;
    }
    
    .otp-group input {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
    
    .security-warning,
    .security-error,
    .security-info {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
}