/*
 * Фильтр каталога, поиска и подборок — оформление в стиле кнопки «Не нашли, что искали?»:
 * белая карточка с тонкой светлой рамкой и скруглением вместо тени, разделы — через тонкие линии,
 * стрелка раздела справа, мягкие галочки (тёмная отметка на жёлтом), «Сбросить фильтр» — кнопка с рамкой.
 * Разметка прежняя (основа — main.css, здесь только перекрытия); подключается на всех страницах.
 * Окно фильтра на телефоне тоже имеет класс .filters — вид карточки задан только для компьютера.
 */

/* ── компьютер: карточка фильтра ── */
@media (min-width: 1001px) {
    .filters { padding: 4px 0 16px; background: #fff; border: 1px solid #EAEAEA; border-radius: 12px; box-shadow: none; }
    .filters .filter { margin: 0; border-top: 1px solid #F0F0F0; }
    .filters .filter:first-child { border-top: 0; }
    .filters .filter.active { margin-bottom: 0; padding-bottom: 12px; }

    /* заголовок раздела: название слева, стрелка справа */
    .filters .title-filter { flex-direction: row-reverse; justify-content: space-between; margin: 0; padding: 14px 16px;
        font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: 0; color: #303030; background: transparent; }
    /* фон при наведении из main.css — убран всегда */
    .filters .title-filter:hover { background: transparent; }
    .filters .title-filter img,
    .filters .title-filter svg { width: 10px; height: 10px; margin: 0 0 0 12px; fill: #9A9A9A; }

    /* значения */
    .filters .var-filter { padding: 0 16px; font-weight: 400; letter-spacing: 0; color: #303030; }
    .filters .var-filter label { margin: 0; padding: 5px 0; }
    .filters .var-filter-toggle { padding: 6px 16px 0; }

    .filters .clear-filter { margin: 16px 16px 0; }
}
/* подсветка при наведении — только мышью (на планшете после нажатия она «застревала» бы) */
@media (min-width: 1001px) and (hover: hover) {
    .filters .title-filter:hover { color: #000; }
    .filters .title-filter:hover svg { fill: #303030; }
    .filters .var-filter:hover { color: #000; }
}

/* ── галочки (компьютер и окно фильтра на телефоне) ── */
.filters .checkbox { min-width: 18px; max-width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid #CDD1D6; border-radius: 5px;
    background: #fff; transition: border-color .15s, background-color .15s; }
/* наведение — только там, где есть мышь (на телефоне после нажатия оно «застревает» на элементе) */
@media (hover: hover) {
    .filters label:hover .checkbox { border-color: #FEDC29; }
    .filters .var-filter-toggle-btn:hover { opacity: 1; border-bottom-color: #FEDC29; color: #000 !important; }
    .filters .clear-filter:hover { background: #FFD600; }
}
.filters .checkbox::after { background-color: #FEDC29; background-size: 11px 9px; transition: opacity .15s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2l3 3L10.5 1.8' fill='none' stroke='%23303030' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.filters input:checked + .checkbox { border-color: #FEDC29; }
/* недоступное значение (в каталоге — нет товаров при выбранных условиях) */
.filters input:disabled + .checkbox { background-color: #F3F4F6 !important; border-color: #E4E6E9; cursor: default; }
.filters input:disabled ~ span:not(.checkbox) { color: #B4B4B4; }
/* фильтр раздела (catalog-filter.js, №45): пока пересчитываем после щелчка, прежние «недоступные» выглядят так же,
   но уже нажимаются; строка для экранного диктора («Посмотреть N товаров») — без видимого места */
.filters input.cf-off + .checkbox { background-color: #F3F4F6 !important; border-color: #E4E6E9; }
.filters input.cf-off ~ span:not(.checkbox) { color: #B4B4B4; }
.cf-live { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* «Показать ещё» — спокойная ссылка с пунктиром */
.filters .var-filter-toggle-btn { padding: 0; border: 0; border-bottom: 1px dashed #B9BDC2; font-size: 13px; line-height: 18px; font-weight: 600;
    color: #303030 !important; transition: border-color .15s, color .15s; }

/* «Сбросить фильтр» — жёлтая кнопка (как кнопки сайта); на телефоне — в конце списка фильтров */
.filters .clear-filter { padding: 11px 12px; background: #FEDC29; border: 0; border-radius: 6px; text-transform: none; letter-spacing: 0;
    font-size: 14px; line-height: 18px; font-weight: 700; color: #303030 !important; transition: background-color .15s; }

/* ── телефон: окно фильтра — те же разделы, линии и стрелка справа ── */
@media (max-width: 1000px) {
    .catalog-filter-mobile .filter-padding { border-top: 1px solid #F0F0F0; }
    .catalog-filter-mobile .filter-padding .clear-filter.drop-filter-values { padding: 13px 12px; background: #FEDC29; border: 0; border-radius: 6px;
        text-transform: none; letter-spacing: 0; font-size: 15px; line-height: 18px; font-weight: 700; color: #303030; }
    .catalog-filter-mobile .filter-block-mobile { padding: 14px 16px; border-top: 1px solid #F0F0F0; }
    .catalog-filter-mobile .filter-block-mobile .head-ff { cursor: pointer; }
    .catalog-filter-mobile .filter-block-mobile .head-ff span { padding-left: 0; font-size: 16px; line-height: 20px; font-weight: 600; color: #303030; }
    .catalog-filter-mobile .filter-block-mobile .head-ff svg { left: auto; right: 0; width: 11px; height: 11px; fill: #9A9A9A; }
    .catalog-filter-mobile .drop-filter-checkbox label { padding: 6px 0; color: #303030; }
}