/* Common field feedback; accents match the existing Franke alert palette. */
.franke-validation-field {
    --franke-field-error-text: #8b4b16;
}
.dark .franke-validation-field,
.bg-black .franke-validation-field,
.bg-dark .franke-validation-field,
.bg-middle .franke-validation-field,
.bg-middle-lighter .franke-validation-field {
    --franke-field-error-text: #f5a057;
}
form .franke-validation-field.has-error {
    margin-bottom: 1rem;
}
form .franke-validation-field.has-error .input,
form .form-group.franke-validation-field[data-franke-validation-field].has-error .input,
form .input.franke-validation-field[data-franke-validation-field].has-error {
    /* Native Form containers include Bootstrap's important mb-3 utility. */
    margin-bottom: 0 !important;
    /* ID-scoped theme gradients also apply in login/checkout/product forms. */
    background: #f5a057 !important;
    animation: none !important;
}
form .franke-validation-field.has-error > .input-group {
    margin-bottom: 0 !important;
}
form .form-group.floating-label-group.franke-validation-field.has-error .input.floating-label-field label.floating-label,
form .franke-validation-field.has-error label.floating-label {
    /* The theme repeats focus/filled label rules across all form containers. */
    color: #f5a057 !important;
}
form .franke-validation-field[data-franke-validation-field].has-error .input.floating-label-field input:focus + label.floating-label,
form .franke-validation-field[data-franke-validation-field].has-error .input.floating-label-field input:not(:placeholder-shown) + label.floating-label {
    color: #f5a057 !important;
}
form .franke-validation-field.has-error > input,
form .franke-validation-field.has-error > select,
form .franke-validation-field.has-error > textarea,
form .franke-validation-field.has-error .custom-select,
form .franke-validation-field.has-error .form-check-input {
    border-color: #f5a057;
}
form .franke-validation-field.has-error select.form-control {
    /* Covers both the legacy .input and native TYPO3 .form-element wrappers. */
    border-color: #f5a057 !important;
    box-shadow: inset 0 0 0 1px #f5a057 !important;
}
form .franke-validation-field.has-error select.form-control:focus {
    /* Keep a visible focus ring, but use the error accent instead of blue. */
    box-shadow: inset 0 0 0 1px #f5a057, 0 0 0 .2rem rgba(245, 160, 87, .25) !important;
}
form .franke-validation-field.has-error .bootstrap-select > button.dropdown-toggle {
    /* Bootstrap-select hides the native select and shows this button instead. */
    border-color: #f5a057 !important;
    box-shadow: inset 0 0 0 1px #f5a057;
}
.product-calculation .franke-validation-field.has-error > input {
    border-color: #f5a057;
}
.product-calculation .franke-validation-field .franke-field-error {
    display: block;
    margin-top: 0.5rem;
    color: var(--franke-field-error-text);
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: normal;
}
.product-calculation .franke-validation-field .franke-field-error[hidden],
.product-calculation .franke-validation-field .franke-field-error:empty {
    display: none !important;
}
form .franke-validation-field .franke-field-error,
form .input.franke-validation-field + .franke-field-error,
form .form-group.floating-label-group.franke-validation-field .error.help-block.franke-field-error {
    display: block;
    margin: 0.5rem 0 0;
    padding: 0 1rem;
    color: var(--franke-field-error-text);
    font-size: 0.875rem;
    line-height: 1.5;
}
form .input.franke-validation-field + .franke-field-error {
    margin-bottom: 1rem;
    color: #8b4b16;
}
form .form-group.d-flex.franke-validation-field {
    flex-wrap: wrap;
}
form .form-group.d-flex.franke-validation-field > .franke-field-error {
    flex-basis: 100%;
}
form .franke-validation-field .franke-field-error .error,
form .franke-validation-field .franke-field-error .errorMessage,
form .franke-validation-field .franke-field-error .errorField {
    display: block;
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}
form .franke-validation-field .franke-field-error[hidden],
form .franke-validation-field .franke-field-error:empty,
form .input.franke-validation-field + .franke-field-error[hidden],
form .input.franke-validation-field + .franke-field-error:empty {
    display: none !important;
}