/* EXC-EXCPORT-805 round 8 follow-up (Fons 2026-10-22: one look for every field and dropdown, the public intake
   included). The public layout (layout_auth, body #kt_body) does not load ui-system.css, whose rules all start with
   #kt_app_body. This file gives the public intake (.ex-public-form, intake/index.blade.php) the same field and dropdown
   look. It mirrors ui-system.css sections 1, 3 and 3b (select2 part): change both together. */
#kt_body .ex-public-form {
    --ex-radius: 8px;
    --ex-h-sm: 32px;
    --ex-h: 38px;
    --ex-h-lg: 44px;
    --ex-input-border: #cfe3fa;
    --ex-focus-ring: 0 0 0 3px rgba(62, 151, 255, .18);
    --ex-focus-ring-danger: 0 0 0 3px rgba(241, 65, 108, .18);
    --ex-option-hover-bg: #f5f9ff;
    --ex-option-selected-bg: #eaf3ff;
    --ex-option-selected-color: var(--bs-primary);
    --ex-option-selected-border: #cfe3fa;
}

/* Fields: white, the light blue border, the kit radius and heights, the blue focus ring. */
#kt_body .ex-public-form .form-control:not(.form-control-flush):not(.form-control-plaintext),
#kt_body .ex-public-form .form-control.form-control-solid:not(.form-control-flush),
#kt_body .ex-public-form .form-select,
#kt_body .ex-public-form .form-select.form-select-solid {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--ex-input-border);
    border-radius: var(--ex-radius);
    font-size: 1rem;
    min-height: var(--ex-h);
    padding: 8.25px 12px;
}
#kt_body .ex-public-form .form-select,
#kt_body .ex-public-form .form-select.form-select-solid {
    padding-right: 2.5rem;
    background-position: right .75rem center;
}
#kt_body .ex-public-form .form-control.form-control-sm:not(.form-control-flush),
#kt_body .ex-public-form .form-select.form-select-sm {
    min-height: var(--ex-h-sm);
    padding: 5.75px 10px;
    font-size: .95rem;
}
#kt_body .ex-public-form .form-select.form-select-sm {
    padding-right: 2.25rem;
}
#kt_body .ex-public-form .form-control:not(.form-control-flush):focus,
#kt_body .ex-public-form .form-select:focus,
#kt_body .ex-public-form .form-select.form-select-solid:focus,
#kt_body .ex-public-form .select2-container--bootstrap5.select2-container--focus .select2-selection,
#kt_body .ex-public-form .select2-container--bootstrap5.select2-container--open .select2-selection {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-primary) !important;
    box-shadow: var(--ex-focus-ring);
}
#kt_body .ex-public-form .form-control:not(.form-control-flush):not(.form-control-plaintext):disabled,
#kt_body .ex-public-form .form-select.form-select:disabled,
#kt_body .ex-public-form .select2-container--bootstrap5.select2-container--disabled .select2-selection {
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-600);
    border-color: var(--bs-gray-300);
}
#kt_body .ex-public-form .form-control.is-invalid:not(.form-control-flush):not(.form-control-plaintext),
#kt_body .ex-public-form .form-select.form-select.is-invalid,
#kt_body .ex-public-form select.is-invalid + .select2-container .select2-selection {
    border-color: var(--bs-danger) !important;
}
#kt_body .ex-public-form .select2-container--bootstrap5 .select2-selection {
    border-color: var(--ex-input-border);
}

/* Open dropdowns: hover very light blue, the selected option light blue with blue text; chips the same. The list is
   appended to <body>, outside .ex-public-form, so these rules are scoped to the public body itself. */
#kt_body .select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--highlighted {
    background-color: #f5f9ff;
    color: var(--bs-gray-900);
}
#kt_body .select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected,
#kt_body .select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected.select2-results__option--highlighted {
    background-color: #eaf3ff;
    color: var(--bs-primary);
}
#kt_body .ex-public-form .select2-container--bootstrap5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background-color: var(--ex-option-selected-bg);
    border: 1px solid var(--ex-option-selected-border);
    color: var(--ex-option-selected-color);
}