/* Form Validation Styles */

/* Error message container */
.form-error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 12px 15px;
    margin-bottom: 15px;
    font-size: 0.95em;
    font-weight: 500;
    display: none;
    animation: slideDown 0.3s ease-out;
}

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

/* Error field highlighting */
.field-error {
    border-color: #dc3545 !important;
    background-color: #fff5f5 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15) !important;
}

/* Add a subtle shake animation when field has error */
.field-error {
    animation: shake 0.4s ease-in-out;
}

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

/* Focus state for error fields */
.field-error:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Ensure error styling works with the existing form styles */
input.field-error,
textarea.field-error,
select.field-error {
    outline: none;
}

/* Success state (optional - when field is corrected) */
.field-success {
    border-color: #28a745;
    background-color: #f0fff4;
}

/* Mobile responsive adjustments */
@media screen and (max-width: 736px) {
    .form-error-message {
        font-size: 0.9em;
        padding: 10px 12px;
    }
}