/*!
 * smit-icon-select — селект с иконками (build 1979). Пара с smit-icon-select.js.
 * Высота и рамка совпадают с .form-select/.form-select-sm, чтобы компонент
 * вставал в один ряд с обычными полями. Одна стрелка (свой шеврон).
 *
 * Разметка строится компонентом:
 *   <select class="smit-is-native">…</select>
 *   <div class="smit-isel smit-isel-sm">
 *     <button class="smit-isel-btn"><span class="smit-isel-cur">…</span><i class="smit-isel-caret"></i></button>
 *     <ul class="smit-isel-menu"><li class="smit-isel-opt is-active">…</li></ul>
 *   </div>
 */

/* Нативный select остаётся в DOM (значение + submit формы), но не виден и не в
   табе. Все размеры — с !important: у страниц бывает своя ширина фильтра
   (#tarifRange { width:100% !important }), и без этого скрытый select занимал
   всю строку и вылезал за вьюпорт на мобильном. */
select.smit-is-native {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  min-width: 0 !important; max-width: 1px !important;
  padding: 0 !important; margin: -1px !important; border: 0 !important;
  flex: 0 0 1px !important;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}

.smit-isel { position: relative; display: inline-block; }
.smit-isel-btn {
  display: flex; align-items: center; gap: .4rem; width: 100%;
  min-height: calc(1.5em + .75rem + 2px);
  padding: .375rem .65rem; text-align: left;
  border: 1px solid var(--sc-border, #dee2e6); border-radius: .375rem;
  background: var(--surface-card, #fff); color: var(--sc-text, #212529);
  font-size: 1rem; line-height: 1.5; cursor: pointer;
}
.smit-isel-sm .smit-isel-btn {
  min-height: calc(1.5em + .5rem + 2px); padding: .25rem .5rem; font-size: .875rem;
}
.smit-isel-btn:hover { border-color: var(--brand-primary, #43b77a); }
.smit-isel-btn:focus-visible {
  outline: none; border-color: var(--brand-primary, #43b77a);
  box-shadow: 0 0 0 .2rem rgba(67, 183, 122, .2);
}
.smit-isel-cur { display: flex; align-items: center; gap: .4rem; min-width: 0; flex: 1 1 auto; }
.smit-isel-caret { margin-left: auto; font-size: .7em; opacity: .6; flex: 0 0 auto; }
.smit-isel.is-open .smit-isel-caret { transform: rotate(180deg); }

.smit-isel-ic { width: 1.1em; text-align: center; flex: 0 0 auto; opacity: .95; }
.smit-isel-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.smit-isel-count {
  margin-left: auto; font-size: .75em; font-weight: 600; padding: 0 .35em;
  border-radius: 10px; background: var(--sc-subtle-bg, #f1f5f9); color: var(--sc-text-muted, #64748b);
}

.smit-isel-menu {
  position: absolute; z-index: 1080; left: 0; top: calc(100% + 4px); min-width: 100%;
  max-height: 320px; overflow-y: auto; margin: 0; padding: .25rem; list-style: none;
  background: var(--surface-card, #fff); border: 1px solid var(--sc-border, #dee2e6);
  border-radius: .5rem; box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
}
/* Раскрытие вверх — когда под кнопкой не помещается (модалка, низ страницы).
   Класс ставит сам компонент при открытии. */
.smit-isel.is-up .smit-isel-menu { top: auto; bottom: calc(100% + 4px); }

.smit-isel-opt {
  display: flex; align-items: center; gap: .45rem; padding: .35rem .5rem;
  border-radius: .35rem; cursor: pointer; white-space: nowrap;
  color: var(--sc-text, #212529); font-size: .875rem;
}
.smit-isel-opt:hover { background: var(--sc-subtle-bg, #f1f5f9); }
.smit-isel-opt:focus-visible { outline: 2px solid var(--brand-primary, #43b77a); outline-offset: -2px; }
.smit-isel-opt.is-active { background: rgba(67, 183, 122, .12); font-weight: 600; }
.smit-isel-opt.is-active::after {
  content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900;
  margin-left: auto; font-size: .7em; color: var(--brand-primary, #43b77a);
}

/* тёмная тема: селекторы с body.dark-theme, иначе правило
   `body.dark-theme .content-wrapper span { color: inherit }` перебивает цвета */
body.dark-theme .smit-isel-btn,
[data-bs-theme="dark"] .smit-isel-btn,
body.dark-theme .smit-isel-menu,
[data-bs-theme="dark"] .smit-isel-menu {
  background: #22262e; border-color: #3a3f47; color: #e4e6ea;
}
body.dark-theme .smit-isel-opt,
[data-bs-theme="dark"] .smit-isel-opt { color: #d0d3d8; }
body.dark-theme .smit-isel-opt:hover,
[data-bs-theme="dark"] .smit-isel-opt:hover { background: #2b3038; }
body.dark-theme .smit-isel-count,
[data-bs-theme="dark"] .smit-isel-count { background: #2b3038; color: #9ca3af; }

@media (max-width: 575.98px) {
  .smit-isel, .smit-isel-btn { width: 100%; }
  .smit-isel-menu { max-height: 60vh; }
}