/*
 * Offerist unified select component.
 * One source class (`of-select`) is attached to every account/admin <select>
 * and to its Select2 shell when Select2 is used.
 */
:root{
  --of-select-height:44px;
  --of-select-radius:10px;
  --of-select-border:#dbe4ef;
  --of-select-border-hover:#bdcada;
  --of-select-border-focus:#4f8edc;
  --of-select-text:#334155;
  --of-select-muted:#8290a4;
  --of-select-bg:#fff;
  --of-select-option-hover:#f1f7ff;
  --of-select-option-selected:#eaf4ff;
  --of-select-focus-ring:rgba(79,142,220,.14);
}

select.of-select{
  box-sizing:border-box;
  max-width:100%;
  min-width:0;
  min-height:var(--of-select-height);
  border:1px solid var(--of-select-border);
  border-radius:var(--of-select-radius);
  outline:0;
  background-color:var(--of-select-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364778f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px 18px;
  padding:0 44px 0 14px;
  color:var(--of-select-text);
  font:inherit;
  font-size:14px;
  font-weight:600;
  line-height:1.25;
  text-overflow:ellipsis;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}
select.of-select:hover{border-color:var(--of-select-border-hover)}
select.of-select:focus,
select.of-select:focus-visible{
  border-color:var(--of-select-border-focus);
  box-shadow:0 0 0 4px var(--of-select-focus-ring);
}
select.of-select:disabled{
  border-color:#e2e8f0;
  background-color:#f4f6f8;
  color:#94a3b8;
  cursor:not-allowed;
  opacity:1;
}
select.of-select[multiple]{
  min-height:116px;
  padding:8px 10px;
  background-image:none;
  overflow:auto;
  cursor:default;
}
select.of-select[multiple] option{padding:9px 10px;border-radius:7px}
select.of-select option{color:#334155;background:#fff}
select.of-select::-ms-expand{display:none}

/* Pages that already draw a separate arrow next to the native select. */
.products-export-control--select select.of-select,
.products-export-per-page select.of-select,
.products-import-page .products-export-control--select select.of-select,
.products-import-page .products-export-per-page select.of-select{
  background-image:none;
}

/* The same component class is attached to the generated Select2 shell. */
.select2-container.of-select{
  box-sizing:border-box;
  max-width:100%!important;
  min-width:0;
  vertical-align:middle;
}
.select2-container.of-select .selection{display:block;min-width:0}
.select2-container.of-select .select2-selection--single{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  min-height:var(--of-select-height)!important;
  height:var(--of-select-height)!important;
  border:1px solid var(--of-select-border)!important;
  border-radius:var(--of-select-radius)!important;
  background:var(--of-select-bg)!important;
  outline:0;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.select2-container.of-select:hover .select2-selection--single{border-color:var(--of-select-border-hover)!important}
.select2-container.of-select.select2-container--focus .select2-selection--single,
.select2-container.of-select.select2-container--open .select2-selection--single{
  border-color:var(--of-select-border-focus)!important;
  box-shadow:0 0 0 4px var(--of-select-focus-ring)!important;
}
.select2-container.of-select .select2-selection--single .select2-selection__rendered{
  display:block;
  width:100%;
  min-width:0;
  padding:0 46px 0 14px!important;
  color:var(--of-select-text)!important;
  font-size:14px;
  font-weight:600;
  line-height:calc(var(--of-select-height) - 2px)!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.select2-container.of-select .select2-selection--single .select2-selection__placeholder{color:var(--of-select-muted)!important;font-weight:500}
.select2-container.of-select .select2-selection--single .select2-selection__arrow{
  position:absolute!important;
  top:50%!important;
  right:13px!important;
  width:18px!important;
  height:18px!important;
  margin-top:-9px!important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364778f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat center/18px 18px!important;
  transition:transform .16s ease;
}
.select2-container.of-select.select2-container--open .select2-selection--single .select2-selection__arrow{transform:rotate(180deg)}
.select2-container.of-select .select2-selection--single .select2-selection__arrow b{display:none!important}
.select2-container.of-select.select2-container--disabled .select2-selection--single{
  border-color:#e2e8f0!important;
  background:#f4f6f8!important;
  box-shadow:none!important;
  cursor:not-allowed;
}
.select2-container.of-select.select2-container--disabled .select2-selection__rendered{color:#94a3b8!important}

.select2-container.of-select .select2-selection--multiple{
  box-sizing:border-box;
  min-height:var(--of-select-height)!important;
  border:1px solid var(--of-select-border)!important;
  border-radius:var(--of-select-radius)!important;
  background:#fff!important;
  padding:4px 38px 4px 6px!important;
  outline:0;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.select2-container.of-select.select2-container--focus .select2-selection--multiple,
.select2-container.of-select.select2-container--open .select2-selection--multiple{
  border-color:var(--of-select-border-focus)!important;
  box-shadow:0 0 0 4px var(--of-select-focus-ring)!important;
}
.select2-container.of-select .select2-selection--multiple .select2-selection__rendered{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:0;padding:0!important}
.select2-container.of-select .select2-selection--multiple .select2-selection__choice{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-height:28px;
  margin:0!important;
  padding:0 9px 0 28px!important;
  border:1px solid #d9e5f2!important;
  border-radius:7px!important;
  background:#f1f6fb!important;
  color:#475569!important;
  font-size:12px;
  font-weight:650;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.select2-container.of-select .select2-selection--multiple .select2-selection__choice__remove{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:24px;
  border:0!important;
  border-right:1px solid #d9e5f2!important;
  background:transparent!important;
  color:#7b8ca3!important;
  font-size:16px;
}
.select2-container.of-select .select2-selection--multiple .select2-search--inline{display:flex;align-items:center;min-width:70px;flex:1 1 100px}
.select2-container.of-select .select2-search--inline .select2-search__field{
  width:100%!important;
  height:30px!important;
  min-height:30px;
  margin:0!important;
  padding:0 6px!important;
  color:#334155;
  font:inherit;
  font-size:14px;
}



/* Split two-column form fields already have an outer shell.
   Inside them, the select must merge into that shell without a second frame. */
.of-form-field__control select.of-select,
.entity-field__control select.of-select,
.of-form-field__control .select2-container.of-select,
.entity-field__control .select2-container.of-select{
  width:100%!important;
  max-width:none!important;
  min-width:0;
  height:100%;
  align-self:stretch;
}
.of-form-field__control select.of-select,
.entity-field__control select.of-select{
  min-height:100%;
  height:100%;
  border:0;
  border-radius:0 12px 12px 0;
  background-color:transparent;
  padding-left:16px;
  box-shadow:none!important;
}
.of-form-field__control .select2-container.of-select .selection,
.entity-field__control .select2-container.of-select .selection{
  display:flex;
  width:100%;
  min-width:0;
  height:100%;
}
.of-form-field__control .select2-container.of-select .select2-selection--single,
.entity-field__control .select2-container.of-select .select2-selection--single,
.of-form-field__control .select2-container.of-select .select2-selection--multiple,
.entity-field__control .select2-container.of-select .select2-selection--multiple{
  min-height:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:0 12px 12px 0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.of-form-field__control .select2-container.of-select .select2-selection--single .select2-selection__rendered,
.entity-field__control .select2-container.of-select .select2-selection--single .select2-selection__rendered{
  padding-left:16px!important;
}
.of-form-field__control .select2-container.of-select .select2-selection--single .select2-selection__arrow,
.entity-field__control .select2-container.of-select .select2-selection--single .select2-selection__arrow{
  right:15px!important;
}

/* Select2 places the menu under <body>; this class is attached on open. */
.select2-dropdown.of-select-dropdown{
  box-sizing:border-box;
  max-width:calc(100vw - 24px);
  margin-top:6px;
  overflow:hidden;
  border:1px solid var(--of-select-border)!important;
  border-radius:12px!important;
  background:#fff;
  box-shadow:0 18px 46px rgba(15,23,42,.16);
}
.select2-dropdown.of-select-dropdown.select2-dropdown--above{margin-top:-6px;margin-bottom:6px}
.select2-dropdown.of-select-dropdown .select2-search--dropdown{padding:10px;border-bottom:1px solid #edf1f5;background:#fff}
.select2-dropdown.of-select-dropdown .select2-search--dropdown .select2-search__field{
  box-sizing:border-box;
  width:100%;
  height:40px;
  border:1px solid var(--of-select-border)!important;
  border-radius:9px;
  outline:0;
  padding:0 12px;
  color:#334155;
  font:inherit;
  font-size:14px;
}
.select2-dropdown.of-select-dropdown .select2-search--dropdown .select2-search__field:focus{
  border-color:var(--of-select-border-focus)!important;
  box-shadow:0 0 0 3px var(--of-select-focus-ring);
}
.select2-dropdown.of-select-dropdown .select2-results>.select2-results__options{
  max-height:min(320px,calc(100vh - 180px));
  padding:6px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#cbd5e1 transparent;
}
.select2-dropdown.of-select-dropdown .select2-results__option{
  min-height:40px;
  margin:1px 0;
  padding:10px 12px;
  border-radius:8px;
  color:#334155;
  font-size:14px;
  line-height:1.35;
  word-break:break-word;
}
.select2-dropdown.of-select-dropdown .select2-results__option--highlighted.select2-results__option--selectable{
  background:var(--of-select-option-hover)!important;
  color:#1e3a5f!important;
}
.select2-dropdown.of-select-dropdown .select2-results__option--selected{
  background:var(--of-select-option-selected)!important;
  color:#1d4f86!important;
  font-weight:700;
}
.select2-dropdown.of-select-dropdown .select2-results__option--disabled{color:#a7b2c1!important;background:transparent!important}
.select2-dropdown.of-select-dropdown .select2-results__message{color:#8290a4;text-align:center}

@media(max-width:767px){
  :root{--of-select-height:46px;--of-select-radius:10px}
  select.of-select{width:100%;font-size:16px}
  .select2-container.of-select{width:100%!important;max-width:100%!important}
  .select2-container.of-select .select2-selection--single .select2-selection__rendered,
  .select2-container.of-select .select2-search--inline .select2-search__field{font-size:16px}
  .select2-dropdown.of-select-dropdown{max-width:calc(100vw - 16px)}
  .select2-dropdown.of-select-dropdown .select2-results>.select2-results__options{max-height:min(300px,calc(100vh - 150px))}
  .select2-dropdown.of-select-dropdown .select2-results__option{min-height:44px;padding:12px}
  .of-table-toolbar label:has(> select.of-select),
  .filter__item:has(select.of-select){width:100%;min-width:0}
  .of-form-field__control select.of-select,
  .entity-field__control select.of-select,
  .of-form-field__control .select2-container.of-select .select2-selection--single,
  .entity-field__control .select2-container.of-select .select2-selection--single,
  .of-form-field__control .select2-container.of-select .select2-selection--multiple,
  .entity-field__control .select2-container.of-select .select2-selection--multiple{border-radius:0 0 12px 12px!important}
}

@media(prefers-reduced-motion:reduce){
  select.of-select,
  .select2-container.of-select .select2-selection--single,
  .select2-container.of-select .select2-selection--multiple,
  .select2-container.of-select .select2-selection__arrow{transition:none!important}
}