/* Applies only when we add the class server-side (and previewed on My Account) */
body.bp-high-contrast {
  --bp-hc-border: #1f2328;
  --bp-hc-focus: #0b5ed7;
  --bp-hc-focus-rgb: 11, 94, 215;
  --bp-hc-accent: #0b5ed7;
}

/* Inputs, selects, textareas */
body.bp-high-contrast .form-control,
body.bp-high-contrast .custom-select,
body.bp-high-contrast textarea.form-control {
  border-color: var(--bp-hc-border) !important;
  border-width: 2px;
}

/* Focus ring */
body.bp-high-contrast .form-control:focus,
body.bp-high-contrast .custom-select:focus,
body.bp-high-contrast textarea.form-control:focus {
  border-color: var(--bp-hc-focus) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bp-hc-focus-rgb), 0.35) !important;
}

/* Select2 (Backpack uses it a lot) */
body.bp-high-contrast .select2-container .select2-selection {
  border-color: var(--bp-hc-border) !important;
  border-width: 2px;
}
body.bp-high-contrast .select2-container--default.select2-container--focus .select2-selection,
body.bp-high-contrast .select2-container--default .select2-selection:focus {
  border-color: var(--bp-hc-focus) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bp-hc-focus-rgb), 0.35) !important;
}

/* Bootstrap 4 custom switches / checkboxes */
body.bp-high-contrast .custom-control-input ~ .custom-control-label::before {
  border-color: var(--bp-hc-border) !important;
  border-width: 2px;
}

/* Checked state (switch “on”) */
body.bp-high-contrast .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--bp-hc-accent) !important;
  border-color: var(--bp-hc-accent) !important;
}

/* Focus state on toggles */
body.bp-high-contrast .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(var(--bp-hc-focus-rgb), 0.35) !important;
  border-color: var(--bp-hc-focus) !important;
}

/* If you have Bootstrap 5 style switches anywhere too, cover them */
body.bp-high-contrast .form-check-input {
  border-color: var(--bp-hc-border) !important;
  border-width: 2px;
}
body.bp-high-contrast .form-check-input:checked {
  background-color: var(--bp-hc-accent) !important;
  border-color: var(--bp-hc-accent) !important;
}
body.bp-high-contrast .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bp-hc-focus-rgb), 0.35) !important;
}

/* -----------------------------
   CoreUI v2 switch (.switch-slider)
   ----------------------------- */

/* the track */
body.bp-high-contrast .switch .switch-slider {
  border: 2px solid var(--bp-hc-border) !important;
  background-color: transparent !important;
}

/* the knob */
body.bp-high-contrast .switch .switch-slider::before {
  background-color: var(--bp-hc-border) !important;
}

/* checked: make track + knob more obvious */
body.bp-high-contrast .switch .switch-input:checked ~ .switch-slider {
  border-color: var(--bp-hc-accent) !important;
  background-color: var(--bp-hc-accent) !important;
}

body.bp-high-contrast .switch .switch-input:checked ~ .switch-slider::before {
  background-color: #fff !important; /* strong contrast against accent */
}

/* focus ring */
body.bp-high-contrast .switch .switch-input:focus ~ .switch-slider {
  box-shadow: 0 0 0 0.2rem rgba(var(--bp-hc-focus-rgb), 0.35) !important;
  border-color: var(--bp-hc-focus) !important;
}


/* -----------------------------
   Select2 (Bootstrap 4 + default)
   ----------------------------- */

/* selection border (single + multiple) */
body.bp-high-contrast .select2-container .select2-selection {
  border-color: var(--bp-hc-border) !important;
  border-width: 2px !important;
}

/* focus/open state */
body.bp-high-contrast .select2-container--focus .select2-selection,
body.bp-high-contrast .select2-container--open .select2-selection {
  border-color: var(--bp-hc-focus) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bp-hc-focus-rgb), 0.35) !important;
}

/* dropdown border */
body.bp-high-contrast .select2-dropdown {
  border-color: var(--bp-hc-border) !important;
  border-width: 2px !important;
}

/* search input inside dropdown */
body.bp-high-contrast .select2-search__field {
  border-color: var(--bp-hc-border) !important;
  border-width: 2px !important;
}

body.bp-high-contrast .select2-search__field:focus {
  border-color: var(--bp-hc-focus) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bp-hc-focus-rgb), 0.35) !important;
}

/* multiple selected "chips" */
body.bp-high-contrast .select2-container--default .select2-selection--multiple .select2-selection__choice {
  border: 2px solid var(--bp-hc-border) !important;
}

/* highlight option */
body.bp-high-contrast .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--bp-hc-accent) !important;
  color: #fff !important;
}

/* If you're using the Bootstrap4 skin, these selectors help too */
body.bp-high-contrast .select2-container--bootstrap4 .select2-selection {
  border-color: var(--bp-hc-border) !important;
  border-width: 2px !important;
}

body.bp-high-contrast .select2-container--bootstrap4.select2-container--focus .select2-selection,
body.bp-high-contrast .select2-container--bootstrap4.select2-container--open .select2-selection {
  border-color: var(--bp-hc-focus) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bp-hc-focus-rgb), 0.35) !important;
}

/* Select2 theme used here is "bootstrap" (not bootstrap4/bootstrap-5/default) */
body.bp-high-contrast .select2-container--bootstrap .select2-selection {
  border: 2px solid var(--bp-hc-border) !important;
  background-image: none !important;
}

/* Multiple + single both benefit from explicitly setting their borders */
body.bp-high-contrast .select2-container--bootstrap .select2-selection--multiple,
body.bp-high-contrast .select2-container--bootstrap .select2-selection--single {
  border-color: var(--bp-hc-border) !important;
  border-width: 2px !important;
}

/* Focus/open states (your example has select2-container--focus) */
body.bp-high-contrast .select2-container--bootstrap.select2-container--focus .select2-selection,
body.bp-high-contrast .select2-container--bootstrap.select2-container--open .select2-selection {
  /* border-color: var(--bp-hc-focus) !important; */
  box-shadow: 0 0 0 0.2rem rgba(var(--bp-hc-focus-rgb), 0.35) !important;
}

/* Dropdown + search field */
body.bp-high-contrast .select2-container--bootstrap .select2-dropdown {
  border: 2px solid var(--bp-hc-border) !important;
}

body.bp-high-contrast .select2-container--bootstrap .select2-search__field {
  border: 2px solid var(--bp-hc-border) !important;
}

body.bp-high-contrast .select2-container--bootstrap .select2-search__field:focus {
  border-color: var(--bp-hc-focus) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bp-hc-focus-rgb), 0.35) !important;
}

/* Selected chips in multi-select */
body.bp-high-contrast .select2-container--bootstrap .select2-selection__choice {
  border: 2px solid var(--bp-hc-border) !important;
}

/* Highlighted option */
body.bp-high-contrast .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
  background-color: var(--bp-hc-accent) !important;
  color: #fff !important;
}

/* -----------------------------
   Select2: remove the inline "mini input" box (multi-select)
   ----------------------------- */

/* Inline search input lives inside the selection. It should NOT look like its own input. */
body.bp-high-contrast .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;

  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
}

/* Also prevent any focus styling on the inline input */
body.bp-high-contrast .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field:focus {
  border: 0 !important;
  box-shadow: none !important;
}

/* -----------------------------
   Select2: KEEP contrast for the DROPDOWN search box
   ----------------------------- */

/* Only target the dropdown search input */
body.bp-high-contrast .select2-container--bootstrap .select2-dropdown .select2-search--dropdown .select2-search__field {
  border: 2px solid var(--bp-hc-border) !important;
  box-shadow: none !important;
}

body.bp-high-contrast .select2-container--bootstrap .select2-dropdown .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--bp-hc-focus) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bp-hc-focus-rgb), 0.35) !important;
}