/* ============================================================
   iFLOW — скин умного фильтра каталога (v2, 2026-08-08)
   Только оформление: HTML-структуру компонента Aspro не трогаем,
   логика (раскрытие, чекбоксы, слайдеры, «Показать N») штатная.

   Режим шаблона — compact: каждое свойство это «чип» (float:left)
   с абсолютной выпадающей панелью .bx_filter_block. Поэтому НЕ
   переводим .bx_filter_parameters_box во flex и НЕ ставим overflow
   на секцию — иначе выпадашки обрежутся.

   Идея: чип живёт в трёх состояниях — покой, раскрыт, есть выбор
   (заливается фирменным синим). Панель — аккуратная карточка.
   Откат: убрать подключение iflow_filter.css в iflow_seo.php.
   ============================================================ */

.bx_filter {
  --iff-navy: #0f2340;
  --iff-blue: #1457c8;
  --iff-blue-2: #365edc;
  --iff-tint: #e9f0fa;
  --iff-tint-2: #f4f8fd;
  --iff-line: #dbe6f7;
  --iff-text: #24334a;
  --iff-muted: #6b7a91;
}

/* ---------- полоса фильтра ---------- */
.bx_filter.compact .bx_filter_parameters { padding-top: 2px; }

/* иконка-воронка «Фильтр» слева от чипов */
.bx_filter.compact .bx_filter_parameters_box.title .filter_title {
  border-radius: 10px;
  background: var(--iff-tint);
  transition: background .18s ease;
}
.bx_filter.compact .bx_filter_parameters_box.title .filter_title:hover { background: #d8e6fb; }
.bx_filter.compact .bx_filter_parameters_box.title svg path { fill: var(--iff-blue); }

/* ---------- чип свойства ---------- */
.bx_filter.compact .bx_filter_parameters_box:not(.title) { margin: 0 7px 7px 0; }

.bx_filter.compact .bx_filter_parameters_box:not(.title) > .bx_filter_parameters_box_title {
  padding: 7px 29px 7px 12px;
  border: 1px solid var(--iff-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 35, 64, .05) !important;
  color: var(--iff-text);
  font-weight: 500;
  cursor: pointer;
  transition: background .17s ease, border-color .17s ease, color .17s ease, box-shadow .17s ease;
}
.bx_filter.compact .bx_filter_parameters_box:not(.title) > .bx_filter_parameters_box_title:hover {
  border-color: #a8c4ee;
  background: var(--iff-tint-2);
  box-shadow: 0 3px 10px -5px rgba(15, 35, 64, .35) !important;
}

/* чип раскрыт */
.bx_filter.compact .bx_filter_parameters_box.active > .bx_filter_parameters_box_title {
  border-color: var(--iff-blue);
  background: var(--iff-tint);
  color: var(--iff-blue);
}

/* в чипе есть выбранные значения — заливаем фирменным синим */
.bx_filter.compact .bx_filter_parameters_box:has(input:checked) > .bx_filter_parameters_box_title {
  border-color: transparent;
  background: linear-gradient(180deg, var(--iff-blue-2), var(--iff-blue));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 14px -8px rgba(20, 87, 200, .9) !important;
}
.bx_filter.compact .bx_filter_parameters_box:has(input:checked) > .bx_filter_parameters_box_title svg path { fill: #fff; }

/* стрелка (абсолютная, позицию не трогаем — только вид) */
.bx_filter.compact .bx_filter_parameters_box_title .svg-inline-down {
  transition: transform .2s ease;
  transform-origin: 50% 45%;
}
.bx_filter.compact .bx_filter_parameters_box_title .svg-inline-down svg path { fill: var(--iff-blue); }
.bx_filter.compact .bx_filter_parameters_box.active > .bx_filter_parameters_box_title .svg-inline-down { transform: rotate(180deg); }

/* счётчик выбранного рядом с названием */
.bx_filter .count_selected:not(:empty) {
  display: inline-block;
  min-width: 17px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* крестик «очистить свойство» */
.bx_filter .delete_filter { border-radius: 0 9px 9px 0; transition: background .17s ease; }
.bx_filter .delete_filter:hover { background: rgba(255, 255, 255, .2); }
.bx_filter.compact .bx_filter_parameters_box:has(input:checked) .delete_filter svg path { fill: #fff; }

/* ---------- выпадающая панель ---------- */
.bx_filter .bx_filter_block {
  border: 1px solid var(--iff-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px -18px rgba(15, 35, 64, .45) !important;
  padding: 8px;
  min-width: 210px;
}
.bx_filter .bx_filter_parameters_box_container { padding: 0; }

/* строка значения */
.bx_filter .bx_filter_param_label {
  display: block;
  padding: 6px 9px;
  margin: 1px 0;
  border-radius: 8px;
  color: var(--iff-text);
  transition: background .14s ease, color .14s ease;
}
.bx_filter .bx_filter_param_label:hover { background: var(--iff-tint-2); }
.bx_filter input[type="checkbox"]:checked + .bx_filter_param_label { background: var(--iff-tint); color: var(--iff-blue); font-weight: 600; }

/* чекбокс — штатный механизм Aspro (label::after = рамка, label::before = заливка
   при выборе, поверх неё ::after превращается в галочку-картинку). Свой квадрат НЕ
   рисуем, иначе получаются два чекбокса в строке — только перекрашиваем штатный. */
.bx_filter .bx_filter_param_label::after {
  border: 1.5px solid #b9cdea;
  border-radius: 6px;
  background-color: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}
.bx_filter .bx_filter_param_label:hover::after { border-color: var(--iff-blue-2); }
.bx_filter .bx_filter_param_label::before { border-radius: 6px; background-color: var(--iff-blue); }
/* когда выбрано — ::after это уже галочка, рамка ему не нужна */
.bx_filter input[type="checkbox"]:checked + .bx_filter_param_label::after { border: 0; background-color: transparent; }
.bx_filter input[type="checkbox"]:focus-visible + .bx_filter_param_label::after {
  box-shadow: 0 0 0 3px rgba(20, 87, 200, .22);
  border-color: var(--iff-blue);
}

/* число товаров в скобках */
.bx_filter .bx_filter_param_text [data-role^="count_"] { color: var(--iff-muted); font-weight: 400; }

/* скролл длинных списков */
.bx_filter .scrollblock { scrollbar-width: thin; scrollbar-color: #c3d6f2 transparent; }
.bx_filter .scrollblock::-webkit-scrollbar { width: 6px; }
.bx_filter .scrollblock::-webkit-scrollbar-thumb { background: #c3d6f2; border-radius: 6px; }
.bx_filter .scrollblock::-webkit-scrollbar-track { background: transparent; }

/* числовые диапазоны */
.bx_filter .prop_type_N .bx_filter_block input[type="text"] {
  border: 1px solid var(--iff-line);
  border-radius: 9px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bx_filter .prop_type_N .bx_filter_block input[type="text"]:focus {
  border-color: var(--iff-blue);
  box-shadow: 0 0 0 3px rgba(20, 87, 200, .14);
  outline: none;
}

/* ---------- «Показать N товаров» ---------- */
.bx_filter .bx_filter_button_box { background: transparent; }
.bx_filter .bx_filter_container_modef:not(:empty) {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--iff-blue-2), var(--iff-blue));
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(20, 87, 200, .8);
  transition: filter .16s ease, box-shadow .16s ease, transform .16s ease;
}
/* Aspro красит текст кнопки собственным тёмным цветом — на синей заливке он не читается */
.bx_filter .bx_filter_container_modef:not(:empty),
.bx_filter .bx_filter_container_modef:not(:empty) * { color: #fff !important; }
.bx_filter .bx_filter_container_modef:not(:empty) svg path { fill: #fff; }
.bx_filter .bx_filter_container_modef:not(:empty):hover { filter: brightness(1.06); box-shadow: 0 10px 22px -10px rgba(20, 87, 200, .9); }
.bx_filter .bx_filter_container_modef:not(:empty):active { transform: translateY(1px); }

/* ---------- вертикальный режим (узкие экраны / боковая колонка) ---------- */
@media (max-width: 991px) {
  .bx_filter.compact .bx_filter_parameters_box:not(.title) > .bx_filter_parameters_box_title { padding: 9px 29px 9px 12px; }
  .bx_filter .bx_filter_param_label { padding: 9px 9px; }  /* палец: цель по высоте ≥40px */
  .bx_filter .bx_filter_block { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bx_filter * { transition: none !important; }
}