/* ============================================
   Validation Styles
   ============================================ */

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

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

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

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

/* Error Message Container */
.error-message {
    display: none;
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: #ef4444;
    animation: slideDown 0.3s ease-out;
}

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

.error-message i {
    margin-right: 0.375rem;
}

/* Success Message Container */
.success-message {
    display: none;
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: #10b981;
    animation: slideDown 0.3s ease-out;
}

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

.success-message i {
    margin-right: 0.375rem;
}

/* Error State for File Upload Box */
.upload-box-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    border-style: solid !important;
}

.upload-box-error:hover {
    border-color: #dc2626 !important;
    background-color: #fee2e2 !important;
}

/* Error State for Radio/Checkbox Groups */
.radio-group-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}

/* Input Wrapper with Error State */
.input-wrapper {
    position: relative;
}

.input-wrapper.error .med-input {
    @apply border-red-500 bg-red-50;
}

.input-wrapper.success .med-input {
    @apply border-green-500 bg-green-50;
}

/* Icon Indicators */
.input-icon-error {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #ef4444;
    pointer-events: none;
}

.input-icon-success {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #10b981;
    pointer-events: none;
}

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

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

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

/* Required Field Indicator */
.required-field::after {
    content: " *";
    color: #ef4444;
    font-weight: bold;
}

/* Form Error Summary (Optional - for showing all errors at top) */
.form-error-summary {
    display: none;
    background-color: #fef2f2;
    border: 1px solid #ef4444;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.form-error-summary.show {
    display: block;
    animation: slideDown 0.3s ease-out;
}

.form-error-summary h4 {
    color: #ef4444;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-error-summary ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.form-error-summary li {
    color: #991b1b;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    padding-left: 1.5rem;
    position: relative;
}

.form-error-summary li::before {
    content: "•";
    position: absolute;
    left: 0.5rem;
    color: #ef4444;
}