/**
 * Unified custom selects (Select2) — vendor site + shared forms
 * Replaces native OS dropdowns (Windows blue list) with branded panels.
 * Load AFTER premium.css, waa-forms.css, vw-toolbar.css.
 */
:root {
  --vw-select-h: var(--vw-toolbar-h, 44px);
  --vw-select-radius: var(--vw-toolbar-radius, 12px);
  --vw-select-border: var(--vw-toolbar-border, var(--pwa-border, #EAEAEA));
  --vw-select-bg: var(--vw-toolbar-bg, var(--pwa-white, #fff));
  --vw-select-text: var(--pwa-text-secondary, #6B6B6B);
  --vw-select-text-strong: var(--pwa-text, #1A1A1A);
  --vw-select-muted: var(--vw-toolbar-muted, #9A9A9A);
  --vw-select-primary: var(--pwa-primary, var(--vw-primary, #4A1D3F));
  --vw-select-soft: color-mix(in srgb, var(--vw-select-primary) 10%, transparent);
  --vw-select-fs: var(--vw-toolbar-fs, 0.8125rem);
}

/* Hide native select once Select2 is attached */
select.select2-hidden-accessible {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Trigger ── */
.select2-container {
  box-sizing: border-box !important;
  max-width: 100% !important;
  font-family: inherit !important;
}

.select2-container--default .select2-selection--single {
  box-sizing: border-box !important;
  height: var(--vw-select-h) !important;
  min-height: var(--vw-select-h) !important;
  max-height: var(--vw-select-h) !important;
  padding: 0 36px 0 12px !important;
  border: 1px solid var(--vw-select-border) !important;
  border-radius: var(--vw-select-radius) !important;
  background-color: var(--vw-select-bg) !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--vw-select-primary) !important;
  box-shadow: 0 0 0 3px var(--vw-select-soft) !important;
}

.select2-container--default.select2-container--open .select2-selection--single {
  border-bottom-left-radius: var(--vw-select-radius) !important;
  border-bottom-right-radius: var(--vw-select-radius) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  font-size: var(--vw-select-fs) !important;
  font-weight: 500 !important;
  color: var(--vw-select-text) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--vw-select-muted) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0 !important;
  right: 8px !important;
  width: 24px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  margin: 0 !important;
  position: static !important;
  border-color: #888 transparent transparent transparent !important;
  border-width: 5px 4px 0 4px !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--vw-select-primary) transparent !important;
  border-width: 0 4px 5px 4px !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  margin-right: 4px !important;
  color: var(--vw-select-muted) !important;
}

/* Multi */
.select2-container--default .select2-selection--multiple {
  min-height: var(--vw-select-h) !important;
  border: 1px solid var(--vw-select-border) !important;
  border-radius: var(--vw-select-radius) !important;
  background: var(--vw-select-bg) !important;
  padding: 4px 8px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--vw-select-soft) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--vw-select-primary) !important;
  font-size: 0.75rem !important;
  padding: 2px 8px !important;
}

/* ── Dropdown panel (the open list) ── */
.select2-dropdown,
.select2-container--default .select2-dropdown {
  border: 1px solid var(--vw-select-border) !important;
  border-radius: var(--vw-select-radius) !important;
  background: var(--vw-select-bg) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  margin-top: 6px !important;
  overflow: hidden !important;
  z-index: 10060 !important;
  animation: vwSelectIn 0.16s ease-out !important;
}

@keyframes vwSelectIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.select2-container--default .select2-search--dropdown {
  padding: 10px 10px 8px !important;
  border-bottom: 1px solid var(--vw-select-border) !important;
  background: #fafafa !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid var(--vw-select-border) !important;
  border-radius: 10px !important;
  font-size: var(--vw-select-fs) !important;
  outline: none !important;
  background: #fff !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--vw-select-primary) !important;
  box-shadow: 0 0 0 3px var(--vw-select-soft) !important;
}

.select2-results__options {
  max-height: 260px !important;
  padding: 6px !important;
}

.select2-container--default .select2-results__option {
  position: relative !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-size: var(--vw-select-fs) !important;
  font-weight: 500 !important;
  color: var(--vw-select-text-strong) !important;
  cursor: pointer !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}

/* Kill default Select2 / browser blue */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background: var(--vw-select-soft) !important;
  color: var(--vw-select-primary) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--vw-select-soft) !important;
  color: var(--vw-select-primary) !important;
  font-weight: 600 !important;
  padding-right: 36px !important;
}

.select2-container--default .select2-results__option[aria-selected="true"]::after {
  content: "\2713";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--vw-select-primary);
}

.select2-container--default .select2-results__option--disabled,
.select2-results__message {
  color: var(--vw-select-muted) !important;
  background: transparent !important;
}

/* Compact DataTables length */
.select2-container.vw-select-length {
  width: 4.75rem !important;
  min-width: 4.75rem !important;
  max-width: 5.5rem !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 8px !important;
}

.select2-container.vw-select-length .select2-selection--single {
  min-width: 0 !important;
  width: 100% !important;
  border-color: var(--vw-select-primary) !important;
}

.dataTables_length .select2-container ~ .select2-container {
  display: none !important;
}

.select2-dropdown.vw-select-dropdown--length {
  min-width: 5.5rem !important;
}

.select2-dropdown.vw-select-dropdown {
  min-width: 10rem !important;
}

@media (max-width: 575.98px) {
  .select2-dropdown.vw-select-dropdown {
    min-width: min(100vw - 32px, 18rem) !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* Force brand highlight (never Select2 default blue #5897fb) */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background: var(--vw-select-primary) !important;
  background-color: var(--vw-select-primary) !important;
  color: #fff !important;
}

/* ── Toolbar width (shop / services / orders) ── */
.vw-shop-controls .select2-container,
.vw-service-filters .select2-container,
.shop-controls .select2-container {
  display: block !important;
  flex: 0 0 auto !important;
  width: var(--vw-toolbar-select-w, 148px) !important;
  min-width: var(--vw-toolbar-select-w, 148px) !important;
  max-width: 180px !important;
}

.vw-shop-controls .select2-container .select2-selection--single,
.vw-service-filters .select2-container .select2-selection--single {
  height: var(--vw-toolbar-h, 44px) !important;
  min-height: var(--vw-toolbar-h, 44px) !important;
}

.vw-account-filters .select2-container,
.vw-orders-page .select2-container,
.filter-container-box .select2-container {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

/* Form rows (checkout / address / bank) */
.form-group .select2-container,
.mb-3 .select2-container,
.col .select2-container,
.col-md-6 .select2-container,
.col-lg-6 .select2-container,
.wf-field .select2-container {
  width: 100% !important;
  display: block !important;
}

@media (max-width: 767.98px) {
  .vw-shop-controls .select2-container {
    grid-column: 1 / 2;
    grid-row: 2;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .vw-service-filters .select2-container {
    grid-column: 1 / 2;
    grid-row: 2;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}