/* ==========================================================================
   Hedwig — select2-theme.css
   Full brand skin for Select2, layered on top of the base overrides in
   base.css. Loaded on every page alongside packages/select2/select2.min.css.
   Single source of truth for the Select2 look across every portal (dealer,
   admin, staff): 42px tall single selects with pill radius, a vertically
   centred dropdown arrow, and a consistent results panel.
   ========================================================================== */

.select2-container { font-family: inherit; }

/* ---- Single select ---- */
.select2-container--default .select2-selection--single {
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 42px 0 14px;
  border: 1.5px solid var(--border-color, #ece4df);
  border-radius: var(--radius-pill, 9999px);
  background: var(--input-bg, #fff);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.3;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary, #1f2937);
}

/* The arrow is absolutely positioned; it must not become a flex item, so it
   keeps its own box and centres the caret inside it vertically. */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0;
  right: 12px;
  width: 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  position: static;
  top: auto;
  left: auto;
  margin: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 5px 0 5px;
  border-color: var(--text-secondary, #6b7280) transparent transparent transparent;
  transition: transform 0.15s ease;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  transform: rotate(180deg);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--brand-primary, #801a2e);
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(128, 26, 46, 0.12));
}

.select2-container--default .select2-selection__placeholder {
  color: var(--neutral-400, #9ca3af);
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  color: var(--neutral-400, #9ca3af);
  margin-right: 6px;
  font-size: 16px;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
  color: var(--color-danger, #f43f5e);
}

/* ---- Multi-select (tags) ---- */
.select2-container--default .select2-selection--multiple {
  min-height: 42px;
  padding: 4px 8px;
  border: 1.5px solid var(--border-color, #ece4df);
  border-radius: var(--radius-md, 14px);
  background: var(--input-bg, #fff);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--brand-primary, #801a2e);
  border: none;
  color: #fff;
  border-radius: var(--radius-pill, 999px);
  padding: 3px 10px 3px 8px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: rgba(255, 255, 255, 0.75);
  margin-right: 5px;
  border: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #fff;
  background: transparent;
}

/* ---- Dropdown / results panel ---- */
.select2-dropdown {
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-color, #ece4df);
  border-radius: var(--radius-md, 14px);
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.14);
  z-index: 9999;
  /* Never let the dropdown push past the viewport (see dropdownAutoWidth removal) */
  max-width: 100vw;
  overflow: hidden;
}
.select2-results__options {
  padding: 6px;
  max-height: 280px;
  overflow-x: hidden;
}
.select2-search--dropdown {
  padding: 10px;
}
.select2-search--dropdown .select2-search__field {
  border-radius: var(--radius-pill, 9999px);
  border: 1px solid var(--border-color, #ece4df);
  background: var(--input-bg, #fff);
  color: var(--text-primary, #1f2937);
  padding: 8px 12px;
}
.select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--brand-primary, #801a2e);
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(128, 26, 46, 0.12));
}
.select2-results__option {
  padding: 9px 14px;
  font-size: var(--fs-sm, 14px);
  color: var(--text-primary, #1f2937);
  border-radius: var(--radius-sm, 10px);
  white-space: normal;
  overflow-wrap: break-word;
  transition: background 0.12s ease, color 0.12s ease;
}
.select2-results__option--selectable:hover {
  background: var(--neutral-100, #f3f4f6);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--brand-primary, #801a2e);
  color: #fff;
}
.select2-container--default .select2-results__option--selected {
  background: var(--neutral-100, #f3f4f6);
}
.select2-container--default .select2-results__option--selected.select2-results__option--highlighted {
  background: var(--brand-primary, #801a2e);
  color: #fff;
}
.select2-results__group {
  font-weight: 700;
  color: var(--text-secondary, #6b7280);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.select2-results__message {
  color: var(--text-secondary, #6b7280);
  padding: 14px;
  text-align: center;
}

.select2-container--disabled .select2-selection--single {
  background: var(--neutral-50, #f9fafb);
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .select2-container { width: 100% !important; }
}