/* ===== Base invalid feedback look ===== */
.invalid-feedback {
    display: none; /* shown via JS or when sibling is .is-invalid */
    color: #dc3545; /* Bootstrap danger color */
    font-size: 0.85rem;
    line-height: 1.3;
    margin-top: .25rem;
    padding-left: 0;
    white-space: normal;
}

    /* Optional: add a small warning icon before the text */
    .invalid-feedback::before {
        content: "⚠ ";
        font-size: .95em;
        margin-right: .25rem;
    }

/* Show the feedback when the control is invalid (Bootstrap pattern) */
.is-invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-feedback {
    display: block;
}

/* ===== Inputs & borders when invalid ===== */
.form-control.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.15);
    transition: border-color .2s, box-shadow .2s;
}

/* If you’re marking selects as invalid via selectpicker button style */
.bootstrap-select .dropdown-toggle.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.15);
}

    /* Optional: also color the placeholder/title on the selectpicker button */
    .bootstrap-select .dropdown-toggle.is-invalid .filter-option {
        color: #dc3545;
    }

/* ===== Checkboxes & radios ===== */
.form-check-input.is-invalid ~ .form-check-label {
    color: #dc3545;
}

.form-check-input.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.15);
}

/* If you wrap checkbox in a custom container you can tint it */
.form-check.is-invalid,
.custom-control.is-invalid {
    outline: 2px solid rgba(220,53,69,.35);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Ensure checkbox feedback shows nicely under label */
.form-check .invalid-feedback {
    margin-top: .25rem;
    display: none;
}

.form-check .form-check-input.is-invalid ~ .invalid-feedback {
    display: block;
}

/* ===== Optional: RTL support (if your page switches to Arabic) ===== */
[dir="rtl"] .invalid-feedback {
    text-align: right;
}