/* Shared select / dropdown system.
   Skins the Select2 widgets that already ship in every area (storefront bundle, legacy admin + supplier) and the
   TomSelect widgets of portal v2, so selection fields look and behave the same everywhere.
   Behaviour (which native <select> get upgraded) lives in ui-select.js. Tokens come from the active theme. */
:root{
  --uis-brand:var(--brand,#177245);
  --uis-line:var(--line,#d9ded8);
  --uis-panel:var(--panel,#fff);
  --uis-ink:var(--ink,#1b241e);
  --uis-muted:var(--muted,#6b746d);
  --uis-soft:color-mix(in srgb,var(--uis-brand) 9%,var(--uis-panel));
  --uis-hover:color-mix(in srgb,var(--uis-ink) 5%,var(--uis-panel));
  --uis-h:44px;--uis-r:10px;
  --uis-ring:0 0 0 3px color-mix(in srgb,var(--uis-brand) 22%,transparent);
  --uis-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23848A82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --uis-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
html[data-bs-theme="dark"]{--uis-hover:color-mix(in srgb,#fff 7%,var(--uis-panel));--uis-soft:color-mix(in srgb,var(--uis-brand) 16%,var(--uis-panel))}

/* ---------- trigger (Select2) ---------- */
html .select2-container{width:100%;max-width:100%;font-family:inherit}
html .select2-container.uis-auto{width:auto}
html .select2-container .select2-selection--single,
html .select2-container .select2-selection--multiple{
  min-height:var(--uis-h);border:1px solid var(--uis-line);border-radius:var(--uis-r);background:var(--uis-panel);
  color:var(--uis-ink);box-shadow:none;transition:border-color .15s,box-shadow .15s;outline:0}
html .select2-container .select2-selection--single{height:var(--uis-h);display:flex;align-items:center}
html .select2-container .select2-selection--single .select2-selection__rendered{
  flex:1;min-width:0;padding:0 40px 0 14px;line-height:calc(var(--uis-h) - 2px);color:var(--uis-ink);font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[dir="rtl"] .select2-container .select2-selection--single .select2-selection__rendered{padding:0 14px 0 40px}
html .select2-container .select2-selection__placeholder{color:var(--uis-muted)}
html .select2-container .select2-selection--single .select2-selection__arrow{
  position:absolute;top:0;bottom:0;right:0;height:auto;width:40px;display:flex;align-items:center;justify-content:center}
html[dir="rtl"] .select2-container .select2-selection--single .select2-selection__arrow{right:auto;left:0}
html .select2-container .select2-selection--single .select2-selection__arrow b{
  position:static;margin:0;border:0;width:18px;height:18px;background:var(--uis-chev) center/18px no-repeat;transition:transform .2s}
html .select2-container--open .select2-selection--single .select2-selection__arrow b{transform:rotate(180deg)}
html .select2-container .select2-selection__clear{margin:0 6px;color:var(--uis-muted);font-weight:400}
html .select2-container:hover .select2-selection{border-color:color-mix(in srgb,var(--uis-brand) 45%,var(--uis-line))}
html .select2-container--focus .select2-selection,
html .select2-container--open .select2-selection{border-color:var(--uis-brand);box-shadow:var(--uis-ring)}
html .select2-selection.storefront-select{min-width:130px}
/* validation */
html .is-invalid + .select2-container .select2-selection,
html .was-validated select:invalid + .select2-container .select2-selection,
html .has-error .select2-container .select2-selection{border-color:#d33a3a}
html .is-invalid + .select2-container--focus .select2-selection,
html .is-invalid + .select2-container--open .select2-selection{box-shadow:0 0 0 3px rgba(211,58,58,.2)}
/* disabled */
html .select2-container--disabled .select2-selection{background:var(--uis-hover);opacity:.65;cursor:not-allowed}
/* multi-select chips */
html .select2-container .select2-selection--multiple{padding:4px 8px;height:auto;cursor:text}
html .select2-container .select2-selection--multiple .select2-selection__rendered{display:flex;flex-wrap:wrap;gap:4px;padding:0;margin:0}
html .select2-container .select2-selection--multiple .select2-selection__choice{
  display:inline-flex;align-items:center;gap:6px;margin:0;padding:3px 10px;border:0;border-radius:999px;
  background:var(--uis-soft);color:var(--uis-brand);font-size:12.5px;font-weight:600;max-width:100%}
html .select2-container .select2-selection--multiple .select2-selection__choice__remove{position:static;order:2;margin:0;border:0;padding:0;color:inherit;opacity:.7;background:none}
html .select2-container .select2-selection--multiple .select2-selection__choice__remove:hover{opacity:1;background:none;color:inherit}
html .select2-container .select2-search--inline .select2-search__field{margin:0;min-height:28px;font-size:14px;color:var(--uis-ink)}

/* ---------- option panel (Select2) ---------- */
html .select2-container .select2-dropdown{
  background:var(--uis-panel);border:1px solid var(--uis-line);border-radius:12px;overflow:hidden;
  box-shadow:0 16px 40px rgba(16,24,20,.16),0 2px 6px rgba(16,24,20,.06);color:var(--uis-ink)}
html .select2-container--open .select2-dropdown--below{margin-top:6px}
html .select2-container--open .select2-dropdown--above{margin-bottom:6px}
html .select2-dropdown{z-index:2000}
html .select2-container .select2-search--dropdown{padding:10px 10px 6px}
html .select2-container .select2-search--dropdown .select2-search__field{
  height:38px;width:100%;border:1px solid var(--uis-line);border-radius:8px;padding:0 12px;font-size:14px;
  background:var(--uis-panel);color:var(--uis-ink);outline:0}
html .select2-container .select2-search--dropdown .select2-search__field:focus{border-color:var(--uis-brand);box-shadow:var(--uis-ring)}
html .select2-container .select2-results__options{max-height:min(280px,50vh);overflow-y:auto;padding:6px}
html .select2-container .select2-results>.select2-results__options{max-height:min(280px,50vh)}
html .select2-container .select2-results__option{
  display:flex;align-items:center;gap:10px;padding:10px 12px;margin:0;border-radius:8px;font-size:14px;line-height:1.35;
  color:var(--uis-ink);white-space:normal;overflow-wrap:anywhere;cursor:pointer}
html .select2-container .select2-results__option--highlighted,
html .select2-container .select2-results__option--highlighted[aria-selected]{background:var(--uis-hover);color:var(--uis-ink)}
html .select2-container .select2-results__option[aria-selected=true]{background:var(--uis-soft);color:var(--uis-brand);font-weight:700}
html .select2-container .select2-results__option[aria-selected=true]::after{
  content:"";flex:none;margin-inline-start:auto;width:16px;height:16px;background:currentColor;
  -webkit-mask:var(--uis-check) center/contain no-repeat;mask:var(--uis-check) center/contain no-repeat}
html .select2-container .select2-results__option[aria-disabled=true]{opacity:.45;cursor:not-allowed}
html .select2-container .select2-results__option[role=group]{padding:0}
html .select2-container .select2-results__group{padding:8px 12px 4px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--uis-muted)}
html .select2-container .select2-results__message{padding:14px 12px;text-align:center;color:var(--uis-muted);font-size:13.5px}
html .select2-container .select2-results__option.loading-results{justify-content:center;color:var(--uis-muted)}
/* option with a picture (category photo, brand / supplier logo) */
html .uis-opt-img{flex:none;width:28px;height:28px;border-radius:6px;object-fit:cover;background:var(--uis-hover);border:1px solid var(--uis-line)}
html .uis-opt-txt{flex:1;min-width:0}
html .select2-selection__rendered .uis-opt-img{width:22px;height:22px;margin-inline-end:8px;vertical-align:middle}

/* ---------- TomSelect (portal v2 remote selects) ---------- */
html .ts-wrapper .ts-control{min-height:var(--uis-h);border:1px solid var(--uis-line);border-radius:var(--uis-r);background:var(--uis-panel);color:var(--uis-ink);padding:0 14px;box-shadow:none;font-size:14px}
html .ts-wrapper.focus .ts-control,html .ts-wrapper.dropdown-active .ts-control{border-color:var(--uis-brand);box-shadow:var(--uis-ring)}
html .ts-wrapper.is-invalid .ts-control{border-color:#d33a3a}
html .ts-dropdown{border:1px solid var(--uis-line);border-radius:12px;overflow:hidden;background:var(--uis-panel);box-shadow:0 16px 40px rgba(16,24,20,.16);margin-top:6px;z-index:2000}
html .ts-dropdown .ts-dropdown-content{max-height:min(280px,50vh);padding:6px}
html .ts-dropdown .option{padding:10px 12px;border-radius:8px;font-size:14px;color:var(--uis-ink);overflow-wrap:anywhere}
html .ts-dropdown .option.active{background:var(--uis-hover);color:var(--uis-ink)}
html .ts-dropdown .option.selected{background:var(--uis-soft);color:var(--uis-brand);font-weight:700}
html .ts-dropdown .no-results{padding:14px 12px;text-align:center;color:var(--uis-muted)}
html .ts-wrapper.multi .ts-control>div{border-radius:999px;background:var(--uis-soft);color:var(--uis-brand);font-weight:600;padding:3px 10px}

/* ---------- native select left as is (opt-out / portal v2 .form-select): same closed-field look ---------- */
html select.form-select,html select.form-control{height:var(--uis-h);border:1px solid var(--uis-line);border-radius:var(--uis-r);font-size:14px}
html select.form-select:focus,html select.form-control:focus{border-color:var(--uis-brand);box-shadow:var(--uis-ring);outline:0}

@media (max-width:575.98px){
  html .select2-container .select2-results__option{padding:12px}
  html .select2-container .select2-results__options{max-height:min(280px,45vh)}
}
@media (prefers-reduced-motion:reduce){html .select2-container .select2-selection,html .select2-selection__arrow b{transition:none}}