/* Красивый выпадающий список поверх обычного <select> — используется в фильтрах
   каталога и в выборе страны для телефона. Настраивается CSS-переменными --uis-*,
   поэтому одинаково хорошо смотрится и на светлом сайте, и в тёмной/светлой админке. */
.ui-select{position:relative;display:inline-block;min-width:150px}
.ui-select-native{position:absolute;inset:0;opacity:0;pointer-events:none}
.ui-select-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 13px;border:1px solid var(--uis-border,rgba(0,0,0,.14));
  border-radius:var(--uis-radius,8px);background:var(--uis-bg,#fff);color:var(--uis-fg,#1a1a1a);
  font:inherit;font-size:14px;cursor:pointer;transition:.15s;text-align:left
}
.ui-select-btn .lbl{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-select-btn:hover{border-color:var(--uis-accent,#f5b50a)}
.ui-select.open .ui-select-btn{border-color:var(--uis-accent,#f5b50a);box-shadow:0 0 0 3px var(--uis-accent-soft,rgba(245,181,10,.18))}
.ui-select-caret{flex:0 0 auto;transition:transform .2s;color:var(--uis-muted,#8a8f96)}
.ui-select.open .ui-select-caret{transform:rotate(180deg)}
.ui-select-menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:100%;width:max-content;max-width:320px;
  background:var(--uis-menu-bg,#fff);border:1px solid var(--uis-border,rgba(0,0,0,.1));
  border-radius:var(--uis-radius,8px);box-shadow:0 16px 38px rgba(0,0,0,.2);z-index:80;
  max-height:280px;overflow-y:auto;display:none;padding:6px
}
.ui-select.open .ui-select-menu{display:block}
.ui-select-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:6px;font-size:13.5px;cursor:pointer;color:var(--uis-fg,#1a1a1a);white-space:nowrap}
.ui-select-item:hover{background:var(--uis-hover,#f5f6f8)}
.ui-select-item.sel{background:var(--uis-accent,#f5b50a);color:var(--uis-accent-fg,#111);font-weight:700}
.ui-select-item svg{flex:0 0 auto}
.ui-select-btn svg.flag,.ui-select-item svg.flag{width:20px;height:14px;border-radius:2px;flex:0 0 auto}

/* Телефонное поле: колонка выбора страны — узкая и не перекрывает поле номера.
   Раньше .ui-select держал min-width:150px и наезжал на ввод номера на телефоне. */
.phone-field-wrap{display:flex;gap:8px;align-items:stretch;width:100%}
.phone-field-wrap > div:first-child{flex:0 0 96px;min-width:96px;max-width:96px}
.phone-field-wrap .ui-select{min-width:0;width:100%;display:block}
.phone-field-wrap .ui-select-btn{padding-left:9px;padding-right:7px;gap:5px}
.phone-field-wrap .ui-select-btn .lbl{gap:5px;font-size:13.5px}
.phone-field-wrap input{flex:1;min-width:0}