/* Фильтры под списком категорий: селект сортировки + поле поиска (логика добавится позже).
   Макеты селекта: mobile 5166:26876 (390), tablet 5192:52913 (834), desktop 5171:40628 (2560);
   открытый список — 5197:63402; иконка сортировки — 5171:41071.
   Макеты поиска: mobile 5197:58983, tablet 5192:53130, desktop 5171:40852.
   Оформление общее с .category-btn: обводка — горизонтальный градиент #2e3235 → #303538 → #33383b
   (border-box), заливка #2d2d2d (padding-box), круглый бегунок справа с иконкой; размер иконки — как у
   иконки категории (--cat-btn-icon из category-btn.css), hover / active — иконка жёлтая.
   Брейкпоинты как в divider.css: 0 / 600 / 1280. */

.filter-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--banner-gap);
    width: 100%;
    max-width: calc(var(--content-max-width) + 2 * var(--divider-wrapper-px));
    margin: 0 auto;
    padding: 0 var(--flt-px) var(--flt-pb);
}

/* ---------- Общая «пилюля» селекта и поиска ---------- */

.sort-select__toggle,
.filter-search {
    position: relative;
    height: var(--flt-h);
    padding: 0 calc(var(--flt-knob) + var(--flt-label-gap)) 0 var(--flt-label-gap);
    border-style: solid;
    border-width: var(--flt-bw-y) var(--flt-bw-x);
    border-color: transparent;
    border-radius: 999px;
    background:
            linear-gradient(#2d2d2d, #2d2d2d) padding-box,
            linear-gradient(90deg, #2e3235 0%, #303538 76.7%, #33383b 100%) border-box;
    font-family: inherit;
    font-size: var(--flt-fs);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.5px;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    transition: filter 0.15s ease;
}

.sort-select__toggle:hover,
.filter-search:hover {
    filter: brightness(1.25);
}

.sort-select__toggle:focus-visible,
.sort-select__option:focus-visible {
    outline: 3px solid #ffbc00;
    outline-offset: 3px;
}

/* Круглый бегунок справа: SVG-ассет из макета */
.filter-knob {
    position: absolute;
    top: 50%;
    right: var(--flt-knob-right);
    width: var(--flt-knob);
    height: var(--flt-knob);
    transform: translateY(-50%);
    pointer-events: none;
}

/* Иконка на бегунке, центрируется по нему */
.filter-icon {
    --flt-icon-color: #a9abae;
    position: absolute;
    top: 50%;
    right: calc(var(--flt-knob-right) + (var(--flt-knob) - var(--flt-icon)) / 2);
    width: var(--flt-icon);
    height: var(--flt-icon);
    transform: translateY(-50%);
    pointer-events: none;
}

/* hover / active — иконка жёлтая, как у .category-btn */
.sort-select__toggle:hover .filter-icon,
.sort-select__toggle:active .filter-icon,
.sort-select__toggle[aria-expanded="true"] .filter-icon,
.filter-search:hover .filter-icon,
.filter-search:focus-within .filter-icon,
.filter-search__input:not(:placeholder-shown) ~ .filter-icon { /* в поиске что-то введено — иконка подсвечена как при hover */
    --flt-icon-color: #FFA500;
}

/* Иконка сортировки (5171:41071): стрелка — SVG-ассет (красится через mask, как .category-btn__icon)
   + три «строки» — в макете это скруглённые прямоугольники */
.filter-icon--sort i {
    position: absolute;
    left: 6.89%;
    height: 10.35%;
    border-radius: 31px;
    background-color: var(--flt-icon-color);
    transition: background-color 0.15s ease;
}

.filter-icon--sort i:nth-child(1) { top: 12.14%; width: 86.2%; }
.filter-icon--sort i:nth-child(2) { top: 36.27%; width: 51.7%; }
.filter-icon--sort i:nth-child(3) { top: 63.86%; width: 44.8%; }

.filter-icon--sort::after,
.filter-icon--search {
    background-color: var(--flt-icon-color);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    transition: background-color 0.15s ease;
}

.filter-icon--sort::after {
    content: "";
    position: absolute;
    inset: 12.5% 8.33%;
    mask-image: url("../img/filter/sort-arrow.svg");
    -webkit-mask-image: url("../img/filter/sort-arrow.svg");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}

/* Иконка поиска (лупа из макета 5197:58983) */
.filter-icon--search {
    mask-image: url("../img/filter/search.svg");
    -webkit-mask-image: url("../img/filter/search.svg");
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* ---------- Селект сортировки ---------- */

.sort-select {
    position: relative;
    flex: none;
    width: var(--flt-w);
    height: var(--flt-h);
}

/* Обёртка (#32373A, радиус 30 — стили из макета) окружает и само поле, и выпадающий список.
   В закрытом состоянии прозрачная; при открытии вырастает на --flt-list-gap во все стороны,
   поэтому кнопка остаётся на месте, а отступы (вокруг поля, между полем и списком, между пунктами)
   одинаковые */
.sort-select__panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    border-radius: var(--flt-panel-radius);
}

.sort-select.is-open .sort-select__panel {
    top: calc(-1 * var(--flt-list-gap));
    left: calc(-1 * var(--flt-list-gap));
    right: calc(-1 * var(--flt-list-gap));
    padding: var(--flt-list-gap) var(--flt-list-gap) var(--flt-panel-pb);
    background: #32373A;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

.sort-select__toggle {
    display: block;
    width: 100%;
    cursor: pointer;
    /* слой создаётся заранее — иначе при нажатии текст «подпрыгивает» (см. show-more.css) */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 0.1s ease, filter 0.15s ease;
}

.sort-select__toggle:active {
    transform: translateZ(0) scale(0.97);
    filter: brightness(0.9);
}

.sort-select__label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Открытый список (макет 5197:63402): две пилюли #2d2d2d в общей обёртке (.sort-select__panel) */
.sort-select__list {
    display: flex;
    flex-direction: column;
    gap: var(--flt-list-gap);
    margin: var(--flt-list-gap) 0 0;
    padding: 0;
    list-style: none;
}

.sort-select__list[hidden] {
    display: none;
}

.sort-select__option {
    height: calc(var(--flt-h) * 0.704);
    border-radius: 999px;
    background: #2d2d2d;
    font-size: var(--flt-fs);
    line-height: calc(var(--flt-h) * 0.704);
    letter-spacing: 0.5px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    color: #ffffff;
    cursor: pointer;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 0.1s ease, background-color 0.15s ease;
}

.sort-select__option:hover {
    background: #3a3a3a;
}

.sort-select__option:active {
    transform: translateZ(0) scale(0.97);
    background: #262626;
}

/* выбранный пункт подсвечивается жёлтым текстом (выбран может быть только один) */
.sort-select__option {
    position: relative;
}

.sort-select__option[aria-selected="true"] {
    color: #ffbc00;
}

/* ---------- Поле поиска ---------- */

.filter-search {
    display: block;
    flex: none;
    width: var(--flt-w);
    margin-left: auto;
    cursor: text;
}

.filter-search__input {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-align: center;
    color: #ffffff;
    caret-color: #ffbc00;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.filter-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.filter-search__input::placeholder {
    color: #ffffff;
    text-transform: uppercase;
    opacity: 1;
    transition: opacity 0.15s ease;
}

/* focus — placeholder скрывается; иконка становится жёлтой (см. правило hover / active выше), обводка не меняется */
.filter-search__input:focus::placeholder {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .sort-select__toggle,
    .sort-select__option,
    .filter-search,
    .filter-icon--sort i,
    .filter-icon--sort::after,
    .filter-icon--search,
    .filter-search__input::placeholder {
        transition: none;
    }
}

/* mobile: 130×37.6, бегунок 33.4, текст 8px, обводка 2.15 / 2 */
@media (min-width: 0px) {
    :root {
        --flt-px: 12px;
        --flt-w: clamp(110px, 33.33vw, 166px);
        --flt-h: clamp(32px, 9.64vw, 42px);
        --flt-fs: clamp(8px, 2.05vw, 12px);
        --flt-knob: clamp(28px, 8.56vw, 41.5px);
        --flt-knob-right: -2.7px;
        --flt-icon: var(--cat-btn-icon);
        --flt-label-gap: 4px;
        --flt-bw-x: 2px;
        --flt-bw-y: 2.15px;
        --flt-list-gap: calc(var(--flt-h) * 0.08);
        /* отступ от последнего пункта до нижнего края обёртки: 12px при высоте поля 62.55 (desktop), дальше пропорционально */
        --flt-panel-pb: calc(var(--flt-h) * 0.192);
        /* радиус обёртки: 30px при высоте поля 62.55 (desktop), на mobile заметно меньше (~11px) — иначе панель почти овальная */
        --flt-panel-radius: calc(var(--flt-h) * 0.3);
    }
}

/* mobile: фильтры визуально стоят внизу хедера (16px от его нижнего и боковых краёв), хотя в разметке
   лежат в .content сразу под хедером — одна разметка на все размеры, без дублирования и JS.
   bottom: calc(100% + 16px) относительно .content ставит нижний край фильтров на 16px выше верха .content,
   т.е. над нижней границей хедера */
@media (max-width: 599px) {
    .content {
        position: relative;
    }

    .filter-wrapper {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: calc(100% + 16px);
        z-index: 2;
        width: auto;
        padding: 0;
    }
}

/* tablet: 166.6×41.9, бегунок 41.5, текст 12px, обводка 2.7 / 3.6 */
@media (min-width: 600px) {
    :root {
        --flt-px: var(--divider-wrapper-px);
        --flt-w: clamp(166px, 19.97vw, 244px);
        --flt-h: clamp(42px, 5.02vw, 62.5px);
        --flt-fs: clamp(12px, 1.44vw, 16px);
        --flt-knob: clamp(41px, 4.97vw, 61px);
        --flt-knob-right: -4.3px;
        --flt-label-gap: 8px;
        --flt-bw-x: 3.6px;
        --flt-bw-y: 2.7px;
        --flt-pb: 10px;
        --flt-panel-radius: 30px;
    }
}

/* desktop: 244.7×62.5, бегунок 61, текст 16px, обводка 4.06 / 5.3 */
@media (min-width: 1280px) {
    :root {
        --flt-w: 244.73px;
        --flt-h: 62.55px;
        --flt-fs: 16px;
        --flt-knob: 61px;
        --flt-knob-right: -6.5px;
        --flt-label-gap: 12px;
        --flt-bw-x: 5.3px;
        --flt-bw-y: 4.06px;
        --flt-pb: 18px;
    }
}