/* ============================================
   Validation Message Out Styles
   Forgot Password Page Only
   ============================================ */

/* Validation Error State for Inputs */
.validation-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

/* Shake animation for error inputs */
.validation-error.validation-shake {
    animation: shake 0.4s ease-in-out;
}

.validation-error:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3) !important;
    outline: none;
}

/* Validation Success State for Inputs */
.validation-success {
    border-color: #10b981 !important;
    background-color: #f0fdf4 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}

.validation-success:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3) !important;
    outline: none;
}

/* Validation Message Container */
.validation-message {
    display: none;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #ef4444;
    padding-left: 0.5rem;
    animation: slideDown 0.3s ease-out;
}

.validation-message.show {
    display: block;
}

/* Animation for message */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Shake keyframes */
@keyframes shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
    100% { transform: translateX(0); }
}