/* ------------------------------------------------------------------
   Select2 inside Bootstrap 5 .form-floating
   ------------------------------------------------------------------
   Select2 hides the original <select> and renders its own markup next to
   it, so Bootstrap's floating label loses the sibling it keys off and the
   control loses the .form-select look. This restores both:

     * the rendered box matches .form-select (height, border, radius)
     * the label stays in the small "floated" position, because a select2
       control always shows either a value or its placeholder

   Applies only where .select2 sits in a .form-floating - plain select2
   dropdowns elsewhere are untouched.
   ------------------------------------------------------------------ */

/* the generated container should fill the slot the <select> used to */
.form-floating > .select2-container {
    width: 100% !important;
    display: block;
}

/* make the visible box look like .form-select */
.form-floating > .select2-container .select2-selection--single {
    height: calc(3.5rem + 2px);
    padding: 1.625rem 0.75rem 0.375rem 0.5rem;
    border: 1px solid var(--vz-input-border-custom, #ced4da);
    border-radius: 0.25rem;
    background-color: var(--vz-input-bg, #fff);
    line-height: 1.25;
}

.form-floating > .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    padding-right: 1rem;
    line-height: 1.25;
    color: var(--vz-body-color, #212529);
}

/* centre the arrow against the taller box */
.form-floating > .select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(3.5rem + 2px);
    right: 0.5rem;
}

/* focus ring consistent with the rest of the form */
.form-floating > .select2-container--open .select2-selection--single,
.form-floating > .select2-container .select2-selection--single:focus {
    border-color: var(--vz-input-focus-border, #86b7fe);
    box-shadow: 0 0 0 0.15rem rgba(64, 81, 137, 0.25);
}

/* a select2 box is never "empty looking" - keep the label floated up */
.form-floating > .select2-container ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    z-index: 3;
    pointer-events: none;
}

/* the dropdown itself: readable, above modals */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #663b6c;
}

.select2-dropdown {
    z-index: 1060;   /* Bootstrap modal is 1055 */
    border-color: var(--vz-input-border-custom, #ced4da);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--vz-input-border-custom, #ced4da);
    border-radius: 0.25rem;
    padding: 0.35rem 0.5rem;
}

/* invalid state parity with .form-select */
.was-validated .form-floating > select.select2-hidden-accessible:invalid ~ .select2-container .select2-selection--single {
    border-color: var(--vz-danger, #dc3545);
}