/**
 * استایل‌های اعتبارسنجی فرم
 * این فایل استایل‌های یکپارچه برای نمایش خطاهای فرم را فراهم می‌کند
 */

/* استایل فیلدهای با خطا */
.form-control.is-invalid,
.form-select.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15) !important;
    background-image: none !important;
}

.form-control:focus.is-invalid,
.form-select:focus.is-invalid,
input:focus.is-invalid,
select:focus.is-invalid,
textarea:focus.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

/* پیام خطا زیر فیلد */
.error-below-field {
    color: #dc3545 !important;
    font-size: 0.875em;
    margin-top: 5px !important;
    font-weight: 500;
    display: block;
    animation: slideDown 0.3s ease-out;
}

.error-below-field i {
    font-size: 0.9em;
    margin-left: 3px;
}

/* انیمیشن برای نمایش خطا */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* استایل لیست خطاها */
.errorlist,
.text-danger {
    color: #dc3545 !important;
    font-size: 0.875em;
    margin-top: 5px;
    margin-bottom: 0;
    list-style: none;
    padding: 0;
    font-weight: 500;
}

.errorlist li {
    margin-bottom: 3px;
    padding: 0;
}

.errorlist li:before {
    content: "⚠ ";
    margin-left: 3px;
}

/* alert برای خطای کلی فرم */
.alert-danger,
.client-side-error-alert {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 2px solid #dc3545 !important;
    color: #dc3545 !important;
    border-radius: 10px !important;
    margin-bottom: 25px !important;
}

.alert-danger .alert-heading {
    color: #dc3545 !important;
    font-weight: 700;
}

.alert-danger hr {
    border-color: #dc3545 !important;
    opacity: 0.3;
}

.alert-danger ul li {
    color: #dc3545 !important;
}

.alert ul {
    padding-right: 20px;
    margin-top: 10px;
}

.alert ul li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.alert ul li strong {
    color: #dc3545;
}

/* علامت ستاره برای فیلدهای الزامی */
.required-field {
    color: #e74c3c;
    font-weight: bold;
    margin-right: 3px;
}

/* متن کمکی */
.help-text {
    font-size: 0.9em;
    color: #6c757d;
    margin-top: 5px;
    display: block;
}

/* انیمیشن fade out برای حذف خطاها */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}