/* Фильтр каталога (бренды и характеристики) — оформление в стиле ostrov92.
   Разметку дополняет /js/catalogfilter.js: .cf-box, .cf-list, .cf-tools, .cf-seg. 14.11.2026 */

/* разделы фильтра — карточки */
#catalog-form .field-catalogues-art_bra_id,
#catalog-form [class*="field-cataloguesfilter-"] {
  clear: both;
  display: flow-root;
  background: #F8F9FC;
  border: 1px solid #E8EBF5;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
#catalog-form .field-catalogues-art_bra_id .help-block:empty {
  display: none;
}
#catalog-form .form-group .control-label {
  margin: 0;
}
#catalog-form .form-group .control-label a {
  background: transparent;
  font-size: 17px;
  font-weight: 700;
  color: #081625;
}

/* список значений: прокручивается только он, поиск и переключатели стоят на месте */
#catalog-form .collapse.in.cf-box {
  max-height: none;
  overflow: visible;
  padding-top: 10px;
}
#catalog-form .cf-list {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
#catalog-form .cf-box.cf-short .cf-list {
  max-height: none;
}
#catalog-form .cf-list::-webkit-scrollbar {
  width: 6px;
}
#catalog-form .cf-list::-webkit-scrollbar-track {
  background: #E8EBF5;
  border-radius: 3px;
}
#catalog-form .cf-list::-webkit-scrollbar-thumb {
  background: #B7C4D7;
  border-radius: 3px;
}

/* поле поиска */
#catalog-form .cf-box .catalogues-form-search__block {
  height: 40px;
  margin: 0 0 10px;
}
#catalog-form .cf-box .catalogues-form-search {
  height: 40px;
  padding: 0 40px 0 12px;
  background: #fff;
  border: 1px solid #B7C4D7;
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#catalog-form .cf-box .catalogues-form-search:focus {
  border-color: #2d3e74;
  box-shadow: 0 0 0 3px rgba(45, 62, 116, .12);
}
#catalog-form .cf-box .catalogues-form-search::placeholder {
  color: #818FA3;
}
#catalog-form .cf-box .catalogues-form-search__block button {
  right: 10px;
  width: 20px;
  height: 20px;
  padding: 0;
  color: #818FA3;
}
#catalog-form .cf-box .catalogues-form-search__block button .icon {
  width: 20px;
  height: 20px;
}

/* «Популярные / Все (N)», «Показать все (N)», «Сбросить (N)» */
#catalog-form .cf-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.3;
}
#catalog-form .cf-tools:empty {
  display: none;
}
#catalog-form .cf-tools a {
  color: #2d3e74;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dashed #2d3e74;
}
#catalog-form .cf-tools a:hover {
  color: #DC2626;
  border-bottom-color: #DC2626;
}
#catalog-form .cf-tools .cf-seg {
  display: inline-flex;
  padding: 3px;
  background: #E8EBF5;
  border-radius: 8px;
}
#catalog-form .cf-tools .cf-seg a {
  padding: 5px 12px;
  border: 0;
  border-radius: 6px;
  color: #2d3e74;
  font-weight: 600;
}
#catalog-form .cf-tools .cf-seg a:hover {
  color: #DC2626;
}
#catalog-form .cf-tools .cf-seg a.cf-active {
  background: #fff;
  color: #081625;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(8, 22, 37, .15);
  cursor: default;
}
#catalog-form .cf-tools a.cf-reset {
  padding: 4px 10px;
  border: 1px solid #DC2626;
  border-radius: 8px;
  color: #DC2626;
  font-weight: 600;
}
#catalog-form .cf-tools a.cf-reset:hover {
  background: #DC2626;
  color: #fff;
}
#catalog-form .cf-empty {
  display: none;
  margin: 4px 0 6px;
  color: #818FA3;
  font-size: 14px;
}

/* строки с галочками */
#catalog-form .cf-list > .checkbox {
  margin: 0;
}
#catalog-form .cf-list > .checkbox label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  transition: background .15s ease;
}
#catalog-form .cf-list > .checkbox label:hover {
  background: #E8EBF5;
}
#catalog-form .cf-list > .checkbox label a {
  color: #081625;
  text-decoration: none;
  word-break: normal;
  overflow-wrap: anywhere;
}
#catalog-form .cf-list > .checkbox label:hover a {
  color: #DC2626;
}
#catalog-form .collapse.in .cf-list > .checkbox input[type="checkbox"],
#catalog-form .cf-list > .checkbox input[type="checkbox"] {
  position: static;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  top: auto;
  accent-color: #DC2626;
  cursor: pointer;
}
#catalog-form .cf-list > .checkbox input[type="checkbox"]:checked + a {
  font-weight: 700;
}

/* короткие значения (вязкость и т.п.) — в 2 колонки */
#catalog-form .cf-cols2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6px;
}
#catalog-form .cf-cols2 > .checkbox {
  float: none;
  width: auto;
  padding: 0;
}
#catalog-form .cf-cols2:after {
  content: none;
}

/* кнопки внизу */
#catalog-form .catalogues-form-btn {
  height: 50px;
  border-radius: 8px;
}