/* ==========================================================================
   SelectWoo (Select2): CBS Design System styling for <select.form-control>
   ========================================================================== */

select.form-control.select2-hidden-accessible + .select2-container {
  width: 100% !important;
  margin-bottom: 0 !important; /* Avoid double spacing vs .form-control */
}

/* ==========================================================================
   Visible control (closed state)
   ========================================================================== */

select.form-control.select2-hidden-accessible
  + .select2-container
  .select2-selection--single {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;

  border: 1px solid var(--cbs-aqua) !important;
  border-radius: var(--cbs-border-radius) !important;
  height: var(--cbs-control-height) !important;

  background-color: var(--cbs-white) !important;
  box-shadow: none !important;

  color: var(--cbs-web-text) !important;
  font-family: var(--font-family-text) !important;

  padding: 0 1rem !important;
  padding-right: 2.75rem !important; /* Reserve space for the arrow */
  margin-bottom: 0 !important;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path stroke='black' fill='black' d='M6 8l-1 1l5 5l5-5l-1-1l-4 4l-4-4z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: var(--font-size-medium) !important;
}

/* Rendered value */
select.form-control.select2-hidden-accessible
  + .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  color: inherit !important;
}

/* Hide SelectWoo's native arrow (we use the background SVG) */
select.form-control.select2-hidden-accessible
  + .select2-container
  .select2-selection--single
  .select2-selection__arrow {
  display: none !important;
}

/* Container focus class (Select2/SelectWoo sets this) */
select.form-control.select2-hidden-accessible
  + .select2-container.select2-container--focus
  .select2-selection--single {
  border-color: var(--cbs-aqua) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Dropdown panel + options
   ========================================================================== */

.select2-container--default .select2-dropdown {
  border: 1px solid var(--cbs-aqua) !important;
  border-radius: var(--cbs-border-radius) !important;
}

.select2-container--default .select2-results__option {
  font-family: var(--font-family-text) !important;
  font-size: var(--font-size-regular) !important;
  padding: 0.5rem 1rem !important;
  color: var(--cbs-web-text) !important;
}

/* Hover / selected state */
.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #1a73e8 !important;
  color: var(--cbs-white) !important;
}

/* ==========================================================================
   Focus ring: replace browser default (yellow/orange) with black
   ========================================================================== */

.select2-container--default .select2-search__field:is(:focus, :focus-visible),
select.form-control.select2-hidden-accessible
  + .select2-container
  .select2-selection--single:is(:focus, :focus-visible),
select.form-control.select2-hidden-accessible
  + .select2-container:is(:focus, :focus-visible)
  .select2-selection--single {
  outline: 2px solid #000 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border: none !important;
}