/* ══════════════════════════════════════════════════════════
   filtr.css — производный файл шапки фильтра шин (объект ctire).
   Расширяет maket/catalog.css: комбо-фильтры .filter-combo живут
   не напрямую в .filter-bar, а внутри форм (см. tyres_filtr.html.twig),
   плюс нейтрализуются виджеты старого js (form.js CustomSelect).
   Изменять maket css нельзя — правки только здесь.
   ══════════════════════════════════════════════════════════ */

/* ── Нейтрализация старых js-виджетов ──────────────────────
   Старый form.js прячет каждый <select> и вставляет рядом
   div.custom-select / div.custom-multiselect (data-customselect),
   а после каждого каскада пересоздаёт их. На странице шин select
   лежит внутри .filter-combo — гасим виджеты только там, чтобы
   не зацепить страницу категории (у неё select-фильтры без комбо
   и старый виджет остаётся её единственным UI). */
#page-catalog .product__filtr .filter-combo div[data-customselect] {
  display: none !important;
}
#page-catalog .product__filtr .filter-combo select {
  display: none !important;
}

.filter-bar-body {
  align-items: end;
  margin-bottom: 8px;
}

/* ── Каркас фильтра ──────────────────────────────────────
   Внутри .filter-bar (у шин это DIV, у страницы категории — form,
   потому ограничиваемся div) лежат табы и ДВЕ формы (переключаются
   классом .active) — на десктопе выстраиваем их колонкой. */
@media (min-width: 769px) {
  #page-catalog .product__filtr div.filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  #page-catalog .product__filtr div.filter-bar .filter-actions {
    padding: 10px 0 0;
  }
}

/* Табы «по параметрам / по авто» (старые классы, новая шкура). */
#page-catalog .product__filtr .catalog__filtr-tab {
  display: flex;
  align-items: center;
  gap: 6px;
}
#page-catalog .product__filtr .catalog__filtr-tab a {
  font-family: var(--f-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 12px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--tr), background var(--tr);
}
#page-catalog .product__filtr .catalog__filtr-tab a:hover { color: var(--text); }
#page-catalog .product__filtr .catalog__filtr-tab a.active {
  color: var(--teal);
  background: rgba(8, 145, 178, 0.08);
}
#page-catalog .product__filtr .catalog__filtr-tab span { display: none; }

/* Видимость форм: старый onclick тогглит только класс .active,
   причём у «по параметрам» он никогда не снимается — известная
   особенность; прячу её новым селектором. */
#page-catalog .product__filtr form.catalog__filtr { display: none; }
#page-catalog .product__filtr form.catalog__filtr.active { display: block; }
#page-catalog .product__filtr form[name="formbymachine"].active ~ form[name="formbyparams"] {
  display: none;
}
/* Active у первой вкладки гасим, пока открыта «по авто» (browsers с :has). */
#page-catalog .product__filtr .catalog__filtr-tab:has(a[data-target="formbymachine"].active) a[data-target="formbyparams"] {
  color: var(--muted);
  background: transparent;
}

/* ── Мульти-комбо (бренды) ──────────────────────────────── */
#page-catalog .product__filtr .filter-combo-drop .filter-combo-row {
  display: flex;
  align-items: center;
}
#page-catalog .product__filtr .filter-combo-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  cursor: pointer;
}
#page-catalog .product__filtr .filter-combo-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--teal);
  cursor: pointer;
  flex: none;
  pointer-events: none;
}

/* ── Блок размеров («по авто», корневой div.block.sizes) ─── */
#page-catalog .product__filtr .block.sizes {
  padding: 12px 0 0;
}

/* ── Мобила: maket-правило .filter-bar > .flex-row не ловит
   наши .filter-bar-body внутри форм — дублируем для них;
   .filter-actions не трогаем (у maket свой sticky-подвал). ── */
@media (max-width: 768px) {
  #page-catalog .product__filtr div.filter-bar .filter-bar-body {
    flex-direction: column;
    gap: 24px;
    padding: 16px;
  }
  #page-catalog .product__filtr div.filter-bar > .catalog__filtr-tab {
    padding: 0 16px 12px;
  }
  #page-catalog .product__filtr .block.sizes {
    padding: 16px 16px 0;
  }
}