/*
* Select2 — CWH brand styling.
*
* Loaded globally via sharedAssets/sharedCSS.php. All Select2 dropdowns share
* the same brand-aligned appearance regardless of portal or page.
*
* Vendor `select2.min.css` is loaded in each portal master template AFTER the
* shared CSS, so brand colour/background rules carry !important to win the
* specificity war without us having to reorder every portal's .
*
* Multiselect (bootstrap-multiselect) styling lives in bootstrap-multiselect-bs5.css.
* Single-selects use Select2 and are styled here.
*/
@import url('brandingPalette.css');
/*
* Universal font-family on every element inside a Select2 container or its
* dropdown panel. Vendor `select2.min.css` sets no font-family of its own, but
* , and don't inherit font-family from reliably across
* browsers (especially when Select2 mounts the dropdown directly on ).
* Forcing the brand font with !important on every descendant guarantees parity
* with bootstrap-multiselect, which inherits cleanly through its in-place DOM.
*/
.select2-container,
.select2-container *,
.select2-dropdown,
.select2-dropdown * {
font-family: var(--cwh-font-family) !important;
}
/* ── Selection box (the trigger) ─────────────────────────────────────────── */
.select2-container .select2-selection--single {
height: calc(1.5em + 0.75rem + 2px) !important;
border: 1px solid var(--cwh-border) !important;
border-radius: 10px !important;
background: var(--cwh-white) !important;
font-family: var(--cwh-font-family) !important;
outline: none;
}
.select2-container .select2-selection--single .select2-selection__rendered {
line-height: calc(1.5em + 0.75rem) !important;
padding-left: 0.75rem;
padding-right: 2rem;
color: var(--cwh-dark-grey) !important;
font-family: var(--cwh-font-family) !important;
font-weight: var(--cwh-font-medium);
font-size: 0.875rem;
}
.select2-container .select2-selection--single .select2-selection__placeholder {
color: var(--cwh-light-grey) !important;
font-weight: var(--cwh-font-medium);
}
.select2-container .select2-selection--single .select2-selection__arrow {
height: calc(1.5em + 0.75rem) !important;
width: 2rem;
right: 0.25rem;
top: 1px;
}
.select2-container .select2-selection--single .select2-selection__arrow b {
border-color: var(--cwh-dark-blue) transparent transparent transparent !important;
border-width: 6px 6px 0 6px;
}
.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent var(--cwh-dark-blue) transparent !important;
border-width: 0 6px 6px 6px !important;
}
.select2-container--focus .select2-selection--single,
.select2-container--open .select2-selection--single {
border-color: var(--cwh-open-blue) !important;
box-shadow: 0 0 0 0.15rem rgba(0, 51, 126, 0.10) !important;
}
/* ── Selection box — multiple variant (rare; kept on-brand for parity) ───── */
.select2-container .select2-selection--multiple {
min-height: calc(1.5em + 0.75rem + 2px) !important;
border: 1px solid var(--cwh-border) !important;
border-radius: 10px !important;
background: var(--cwh-white) !important;
font-family: var(--cwh-font-family) !important;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
padding: 0.15rem 0.5rem;
}
.select2-container .select2-selection--multiple .select2-search__field {
border: 0;
color: var(--cwh-dark-grey) !important;
font-family: var(--cwh-font-family) !important;
font-size: 0.875rem;
}
.select2-container .select2-selection--multiple .select2-selection__choice {
background-color: var(--cwh-light-blue) !important;
border: none !important;
color: var(--cwh-dark-blue) !important;
font-weight: var(--cwh-font-medium);
border-radius: 6px !important;
padding: 0 0.5rem;
margin-top: 0.25rem;
margin-right: 0.25rem;
}
.select2-container .select2-selection--multiple .select2-selection__choice__remove {
color: var(--cwh-dark-blue) !important;
margin-right: 0.4rem;
font-weight: var(--cwh-font-bold);
}
.select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
color: var(--cwh-open-blue) !important;
background: transparent !important;
}
/* ── Dropdown panel ──────────────────────────────────────────────────────── */
.select2-dropdown,
.select2-dropdown .select2-results,
.select2-dropdown .select2-results__options,
.select2-dropdown .select2-results__option {
/* Explicit font-family on every element in the dropdown panel — Select2
appends the panel to , where it doesn't inherit page-level fonts
reliably across browsers, and / don't inherit
font-family by default. */
font-family: var(--cwh-font-family) !important;
}
.select2-dropdown {
border: 1px solid var(--cwh-border) !important;
border-radius: 10px !important;
background: var(--cwh-white) !important;
box-shadow: 0 4px 16px rgba(0, 51, 126, 0.10);
}
.select2-container--default .select2-search--dropdown {
padding: 0.5rem;
background-color: var(--cwh-white) !important;
border-bottom: 1px solid var(--cwh-border);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid var(--cwh-border) !important;
border-radius: 10px !important;
padding: 0.25rem 0.6rem;
font-family: var(--cwh-font-family) !important;
font-size: 0.875rem;
color: var(--cwh-dark-grey) !important;
background: var(--cwh-white) !important;
outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
border-color: var(--cwh-open-blue) !important;
box-shadow: 0 0 0 0.15rem rgba(0, 51, 126, 0.10) !important;
}
/* ── Result options ──────────────────────────────────────────────────────── */
/*
* Item styling kept in lockstep with bootstrap-multiselect-bs5.css
* `.multiselect-container > li > a > label` so single-selects and
* multi-selects render identically: same font, weight, padding, and
* line-height. Weight stays at --cwh-font-medium for every state — never
* bold on hover or when selected, so rows don't visually shift.
*/
.select2-results__option {
padding: 0.55rem 1rem 0.55rem 1.5rem !important;
color: var(--cwh-dark-grey) !important;
font-family: var(--cwh-font-family) !important;
font-weight: var(--cwh-font-medium) !important;
font-size: 0.875rem;
line-height: 1.4;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
background-color: var(--cwh-light-blue) !important;
color: var(--cwh-dark-grey) !important;
font-weight: var(--cwh-font-medium) !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: var(--cwh-white) !important;
color: var(--cwh-dark-grey) !important;
font-weight: var(--cwh-font-medium) !important;
}
.select2-container--default .select2-results__option[aria-selected=true]:hover,
.select2-container--default .select2-results__option[aria-selected=true].select2-results__option--highlighted {
background-color: var(--cwh-light-blue) !important;
color: var(--cwh-dark-grey) !important;
font-weight: var(--cwh-font-medium) !important;
}
.select2-container--default .select2-results__option[aria-disabled=true] {
color: var(--cwh-light-grey) !important;
}
/* ── Group headers ───────────────────────────────────────────────────────── */
.select2-container--default .select2-results__group {
color: var(--cwh-middle-blue) !important;
background-color: var(--cwh-white) !important;
border-bottom: 1px solid var(--cwh-border);
font-family: var(--cwh-font-family) !important;
font-weight: var(--cwh-font-bold);
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.03em;
padding: 0.5rem 1rem;
}