/* ==========================================================================
   Select2, tuned to the public theme.

   Select2 replaces the native <select> with its own markup but keeps the
   original element in the DOM (hidden), so the filter form still submits
   exactly as before and the no-JavaScript path is unchanged.

   The stock classic theme is close but not the site's look, so this file
   retunes the accent colour to the brand blue, the control height to the
   38px of the Bootstrap .custom-select it replaces, and the border to the
   theme's own #eef0f4.
   ========================================================================== */

.select2-container {
    width: 100%;
}

/* The filter UI sizes its controls with a custom property (see
   website/directory/_filters.blade.php) so the enhanced dropdown matches the
   plain inputs beside it. The fallbacks are the stock 38px control, for a page
   that loads this stylesheet without the filter partial. */
.select2-container--default .select2-selection--single {
    height: var(--filter-control-height, 38px);
    border: 1px solid #eef0f4;
    border-radius: 4px;
    background: #fff;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--filter-control-height, 38px) - 2px);
    padding-left: 12px;
    padding-right: 30px;
    color: #2c3e50;
    font-size: var(--filter-control-font-size, 1rem);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #8898aa;
}

.select2-container--default .select2-selection__arrow {
    height: calc(var(--filter-control-height, 38px) - 2px);
    right: 6px;
}

.select2-container--default .select2-results__option {
    font-size: var(--filter-control-font-size, 1rem);
}

.select2-container--default .select2-selection__arrow b {
    border-color: #8898aa transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent #8898aa transparent;
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #0076d7;
}

/* The dropdowns in the filter row are bordered in black, like the input
   beside them, so the row reads as one set of controls. The focused control
   keeps that border and marks focus with a soft ring instead. */
.directory-filter-bar .select2-container--default .select2-selection--single {
    border-color: #000;
}

.directory-filter-bar .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #000;
    box-shadow: 0 0 0 2px rgba(0, 118, 215, .15);
}

.select2-dropdown {
    border-color: #eef0f4;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .1);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #0076d7;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] span {
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #0076d7;
}

/* The full build gives every dropdown a search box, which is what makes the
   long state / district / city lists usable. It has to look like the rest of
   the control: the same border colour and type size as the input beside it,
   with the brand blue reserved for the focused state. */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: #eef0f4;
    font-size: var(--filter-control-font-size, 1rem);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #0076d7;
    outline: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field::-webkit-input-placeholder {
    color: #8898aa;
}

/* Inside the filter drawer the controls are full width. */
.filter-drawer .select2-container {
    width: 100%;
}