/* Shared DAL/Select2 cascade styling for the book-donation-request and
   volunteer-request forms. Scoped to `.dal-cascade-form` so both pages reuse it.
   Extracted from the previously duplicated inline <style> blocks. */

/* Make the DAL Select2 cascade match the form's control inputs / select-bar */
.dal-cascade-form .select2-container {
    width: 100% !important;
    display: block;
}

.dal-cascade-form .select2-container--default .select2-selection--single {
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-neutral-200);
    border-radius: 24px;
    min-height: var(--control-hight);
    height: var(--control-hight);
    padding: 12px 24px 12px 48px;
    display: flex;
    align-items: center;
}

.dal-cascade-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-neutral-600);
    font-size: var(--text-size-sm);
    line-height: normal;
    padding: 0;
}

.dal-cascade-form .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--color-neutral-600);
}

/* Select2 renders a clear (x) button because DAL enables allowClear when
   the field has no `required` attr (use_required_attribute=False). These
   fields are required, so hide it. */
.dal-cascade-form .select2-selection__clear {
    display: none;
}

/* The select2 border overrides the default control border, so re-apply
   the error colour when the field is invalid. */
.dal-cascade-form .control--error .select2-selection--single {
    border-color: var(--color-status-red);
}

.dal-cascade-form .control--error .control__legend {
    color: var(--color-status-red);
}

/* Replace select2's default triangle with the same chevron the
   select-bar dropdown uses (left side, RTL). */
.dal-cascade-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    left: 16px;
    right: auto;
    top: 0;
    display: flex;
    align-items: center;
}

.dal-cascade-form .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.dal-cascade-form .select2-container--default .select2-selection--single .select2-selection__arrow::after {
    content: "";
    width: 8px;
    height: 8px;
    border-bottom: 1px solid var(--color-neutral-600);
    border-left: 1px solid var(--color-neutral-600);
    border-radius: 2px;
    transform: rotate(-45deg);
    transform-origin: center;
    transition: transform .25s;
}

.dal-cascade-form .select2-container--open .select2-selection--single .select2-selection__arrow::after {
    transform: rotate(135deg);
}

/* Material-style floating label: the legend rests centered over the
   select2 (its label) and floats up once focused or a value is set.
   .is-floating is toggled by the script below. */
.dal-cascade-form .control__fieldest.is-floating .control__legend {
    font-size: 10px;
    top: 5px;
}

.dal-cascade-form .control__fieldest.is-floating .select2-selection--single .select2-selection__rendered {
    padding-top: 10px;
}

/* The select2 dropdown is appended to <body>, so it can't be scoped by
   the form class. The script tags only this page's dropdowns with
   .bd-cascade-dd, keeping these styles off other select2 widgets. */
.select2-dropdown.bd-cascade-dd {
    border: 1px solid var(--color-neutral-200);
    border-radius: 25px;
    padding: 5px 10px;
    font-size: var(--text-size-sm);
}

.bd-cascade-dd .select2-search__field {
    border-radius: 25px;
}

/* Result options: match the project's native dropdown
   (.select-field__list-item:hover in ehdanesh-ui-v2) — solid primary fill,
   white text, rounded — instead of select2's default blue. */
.bd-cascade-dd .select2-results__option {
    border-radius: 8px;
    padding: 4px 8px;
}

/* Current selection: tonal primary so the chosen option is distinguishable
   in the open list (the native component has no selected-in-list style). */
.bd-cascade-dd .select2-results__option--selected,
.bd-cascade-dd .select2-results__option[aria-selected="true"] {
    background-color: var(--color-tag-primary) !important;
    color: var(--color-primary-1) !important;
}

/* Hover / keyboard focus: solid primary fill (project convention). Listed
   after the selected rule with matching specificity so it wins even over
   the selected option. */
.bd-cascade-dd .select2-results__option--highlighted,
.bd-cascade-dd .select2-results__option--highlighted[aria-selected],
.bd-cascade-dd .select2-results__option--highlighted.select2-results__option--selected {
    background-color: var(--color-primary-1) !important;
    color: var(--color-bg) !important;
}

/* Rich-text (.bd-rich-content) styling lives in the shared
   front/v2/css/rich-content.css, linked separately and reused by the admin
   CKEditor so editing matches this page. */
