/* ─────────────────────────────────────────────────────────
   СПИСОК С ПОИСКОМ (static/js/combo.js)

   Один файл на витрину и на бэкенд: у них разные палитры, поэтому
   цвета берутся через запасные значения — на витрине есть --surface
   и --accent, в бэкенде --panel и --amber. Размеры и поведение общие.

   Скрипт оборачивает <select> в .combo, прячет его и кладёт рядом
   поле ввода и список. Сам <select> остаётся в разметке и хранит
   значение, поэтому форма уходит как раньше.
   ───────────────────────────────────────────────────────── */

.combo{
  --c-bg:      var(--surface, var(--panel, #fff));
  --c-bg-2:    var(--surface-2, var(--panel-2, #f5f5f5));
  --c-line:    var(--line-2, var(--line, #dcdde0));
  --c-ink:     var(--ink, #333);
  --c-dim:     var(--dim, #8d8d8d);
  --c-accent:  var(--accent, var(--amber, #f54f0c));
  --c-radius:  var(--r, 4px);
  position:relative;
  display:block;
  width:100%;
  min-width:0;
}

/* Системный список остаётся в разметке — в нём значение формы */
.combo-native{display:none}

/* Поле повторяет вид того поля, которое было на его месте: класс
   с <select> скрипт переносит на ввод, поэтому здесь только стрелка */
.combo-input{
  width:100%;
  padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238D8D8D' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  text-overflow:ellipsis;
}
.combo-input::placeholder{color:var(--c-dim)}
.is-disabled .combo-input{opacity:.55;cursor:not-allowed}

.combo-list{
  position:absolute;
  z-index:60;
  top:calc(100% + 4px);
  left:0;
  right:0;
  max-height:min(320px, 60vh);
  overflow-y:auto;
  overscroll-behavior:contain;
  margin:0;
  padding:4px;
  list-style:none;
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:var(--c-radius);
  box-shadow:0 14px 34px rgba(0,0,0,.16);
}

.combo-opt{
  padding:9px 11px;
  border-radius:var(--c-radius);
  font-size:14px;
  line-height:1.3;
  color:var(--c-ink);
  cursor:pointer;
  /* Длинное название не должно распирать список */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* Подсветка одна и для мыши, и для клавиш: иначе при ходьбе стрелками
   вниз подсвечены сразу две строки — одна под курсором, другая выбранная */
.combo-opt:hover,
.combo-opt.on{background:var(--c-bg-2);color:var(--c-accent)}
.combo-opt[aria-selected="true"]{font-weight:600}

.combo-none,
.combo-more{
  padding:9px 11px;
  font-size:13px;
  color:var(--c-dim);
}
.combo-more{border-top:1px solid var(--c-line);margin-top:4px}

/* На телефоне список открывается почти на весь экран: пунктов много,
   а попадать пальцем в строку высотой 30 px неудобно */
@media(max-width:560px){
  .combo-list{max-height:min(60vh, 420px)}
  .combo-opt{padding:12px 12px;font-size:15px}
}