/* ============================================================================
   Zone Select2 — the brand skin for every zone dropdown on the site
   (.zone-select2, .zone-select2-form, .zone-select2-fk, .zone-filter-wrapper)

   These rules used to live inside zone-select2.js, which built them into a
   string and appended a <style> to <head> at runtime, with `!important` on
   every single declaration. That made the widget unstyleable: no stylesheet
   could reach it, so a page that needed a taller box had nowhere to say so.

   None of the `!important` was ever needed. Select2's own rules are
   `.select2-container--default .select2-selection--single` — two classes.
   Every selector here adds the host class in front, so it already wins on
   specificity; where the selector is identical to Select2's, this file is
   linked after select2.min.css and wins on order. The one declaration that
   genuinely could not be beaten from CSS was `width`, because Select2 writes
   it inline — and it writes `100%` there anyway, from the `width: '100%'` in
   getZoneSelect2Config(), so the rule was redundant.

   MUST be linked after webpages/vendor/css/select2.min.css.
   ============================================================================ */

/* ---- The closed box ------------------------------------------------------ */

.zone-filter-wrapper .select2-container--default .select2-selection--single,
.zone-select2 + .select2-container--default .select2-selection--single,
.zone-select2-form + .select2-container--default .select2-selection--single,
.zone-select2-fk + .select2-container--default .select2-selection--single {
  height: 2.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--brand-grey-300, #ced4da);
  border-radius: 0.375rem;
  background-color: var(--brand-white, #fff);
}

.zone-filter-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered,
.zone-select2 + .select2-container--default .select2-selection--single .select2-selection__rendered,
.zone-select2-form + .select2-container--default .select2-selection--single .select2-selection__rendered,
.zone-select2-fk + .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5rem;
  padding-left: 0;
  color: var(--brand-blue, #212529);
}

.zone-filter-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow,
.zone-select2 + .select2-container--default .select2-selection--single .select2-selection__arrow,
.zone-select2-form + .select2-container--default .select2-selection--single .select2-selection__arrow,
.zone-select2-fk + .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 2.25rem;
  right: 0.5rem;
}

.zone-filter-wrapper .select2-container--default .select2-selection--single .select2-selection__clear,
.zone-select2 + .select2-container--default .select2-selection--single .select2-selection__clear,
.zone-select2-form + .select2-container--default .select2-selection--single .select2-selection__clear,
.zone-select2-fk + .select2-container--default .select2-selection--single .select2-selection__clear {
  margin-right: 1.5rem;
  font-size: 1rem;
}

.zone-filter-wrapper .select2-container--default .select2-selection--single .select2-selection__placeholder,
.zone-select2 + .select2-container--default .select2-selection--single .select2-selection__placeholder,
.zone-select2-form + .select2-container--default .select2-selection--single .select2-selection__placeholder,
.zone-select2-fk + .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--brand-tertiary-500, #6c757d);
}

/* ---- Focus and open ------------------------------------------------------ */

.zone-filter-wrapper .select2-container--default.select2-container--focus .select2-selection--single,
.zone-select2 + .select2-container--default.select2-container--focus .select2-selection--single,
.zone-select2-form + .select2-container--default.select2-container--focus .select2-selection--single,
.zone-select2-fk + .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--brand-yellow, #F3C130);
  box-shadow: 0 0 0 0.2rem rgba(243, 193, 48, 0.25);
  outline: 0;
}

.zone-filter-wrapper .select2-container--default.select2-container--open .select2-selection--single,
.zone-select2 + .select2-container--default.select2-container--open .select2-selection--single,
.zone-select2-form + .select2-container--default.select2-container--open .select2-selection--single,
.zone-select2-fk + .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--brand-yellow, #F3C130);
}

/* ---- The dropdown -------------------------------------------------------- */

/* Select2 renders the panel under <body> via dropdownParent, so it cannot be
   scoped to a host class the way the box above is. Same specificity as
   Select2's own rule; this file wins by being linked after it. */
.select2-container--default .select2-dropdown {
  border: 1px solid var(--brand-grey-300, #ced4da);
  border-radius: 0.375rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--brand-grey-300, #ced4da);
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--brand-yellow, #F3C130);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(243, 193, 48, 0.25);
}

.select2-container--default .select2-results__option {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--brand-yellow, #F3C130);
  color: var(--brand-blue, #1f2937);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--brand-primary-50, #fff8e1);
  color: var(--brand-blue, #1f2937);
}

/* ---- Multiple select (the enquiry form) ---------------------------------- */

.zone-select2[multiple] + .select2-container--default .select2-selection--multiple {
  min-height: 2.375rem;
  padding: 0.25rem;
  border: 1px solid var(--brand-grey-300, #ced4da);
  border-radius: 0.375rem;
}

.zone-select2[multiple] + .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--brand-yellow, #F3C130);
  color: var(--brand-blue, #1f2937);
  border: none;
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
  margin: 0.125rem;
}

.zone-select2[multiple] + .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--brand-blue, #1f2937);
  margin-right: 0.25rem;
}

.zone-select2[multiple] + .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--brand-accent-error, #dc3545);
}

/* ---- The zone number badge in a result row -------------------------------- */

/* formatZoneOption() used to write this as an inline style attribute. */
.zone-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--brand-yellow, #F3C130);
  color: var(--brand-blue, #1f2937);
  font-size: 0.8rem;
}
