/* ── панель инструментов ── */
.cat-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.cat-tool {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(128,128,128,.25);
    background: var(--t-bg-elevated, #fff);
    color: var(--t-text, #212529);
    border-radius: 10px;
    padding: 9px 14px;
    font-size: .87rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.cat-tool:hover { border-color: #0a58ca; }
.cat-tool svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .7; }
.cat-tool-label { white-space: nowrap; }
.cat-tool-badge {
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px;
    background: #0a58ca; color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
}

.cat-view {
    display: inline-flex;
    margin-left: auto;
    border: 1px solid rgba(128,128,128,.25);
    border-radius: 10px;
    overflow: hidden;
}
.cat-view button {
    border: 0;
    background: transparent;
    padding: 9px 12px;
    cursor: pointer;
    color: var(--t-text-muted, #6c757d);
    display: flex;
}
.cat-view button svg { width: 15px; height: 15px; }
.cat-view button.is-active { background: #0a58ca; color: #fff; }

/* ── чипсы активных фильтров ── */
.cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(10,88,202,.1);
    color: #0a58ca;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}
.cat-chip:hover { background: rgba(10,88,202,.18); color: #0a58ca; }
.cat-chip svg { width: 11px; height: 11px; opacity: .7; }
.cat-chip-reset { background: transparent; color: var(--t-text-muted, #6c757d); text-decoration: underline; }
.cat-chip-reset:hover { background: transparent; color: #dc3545; }

.cat-found { font-size: .85rem; color: var(--t-text-muted, #6c757d); margin-bottom: 14px; }

/* ── КАРКАС ШТОРКИ (база; медиа ниже только переопределяют) ──
   Без этих правил голова/тело/подвал не имеют размеров:
   тело не скроллится и подвал с кнопками уезжает за экран. */
.cat-sheet {
    background: var(--t-bg-elevated, #fff);
    color: var(--t-text, #212529);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.cat-sheet-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(128,128,128,.12);
}
.cat-sheet-title { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.cat-sheet-close {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(128,128,128,.12);
    color: inherit;
    cursor: pointer;
}
.cat-sheet-close:hover { background: rgba(128,128,128,.22); }
.cat-sheet-close svg { width: 13px; height: 13px; display: block; }
.cat-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 4px 18px 16px;
}

/* ── подложка (только мобильный: на десктопе фильтры всегда на виду) ── */
.cat-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0; visibility: hidden;
    transition: opacity .18s;
    z-index: 100000;
}
.cat-backdrop.show { opacity: 1; visibility: visible; }
body.cat-sheet-open { overflow: hidden; }

/* ============================================================
   ДЕСКТОП (≥992px): фильтры — обычная колонка-сайдбар,
   сортировка — выпадашка под кнопкой. Разметка та же.
   ============================================================ */
@media (min-width: 992px) {
    .cat-backdrop { display: none; }

    /* фильтр — липкая колонка со своим скроллом:
       список жанров длинный, страницу за собой тянуть не должен */
    .cat-sheet-full {
        position: sticky;
        top: 80px;
        width: auto;
        transform: none;
        visibility: visible;
        box-shadow: none;
        border: 1px solid rgba(128,128,128,.16);
        border-radius: 14px;
        max-height: calc(100vh - 96px);
        overflow: hidden;
    }
    .cat-sheet-full .cat-sheet-head { padding-top: 14px; }
    .cat-sheet-full .cat-sheet-close { display: none; }   /* закрывать нечего */
    .cat-sheet-full .cat-sheet-foot { border-radius: 0 0 14px 14px; }
    /* кнопка «Фильтр» не нужна — панель и так открыта */
    .cat-tool[data-sheet="filtersSheet"] { display: none; }

    /* сортировка — выпадашка, привязанная к кнопке */
    .cat-toolbar { position: relative; }
    .cat-sheet-bottom {
        position: absolute;
        top: calc(100% + 6px);
        left: 0; right: auto; bottom: auto;
        width: 240px;
        max-height: none;
        border-radius: 12px;
        border: 1px solid rgba(128,128,128,.18);
        box-shadow: 0 12px 32px rgba(0,0,0,.18);
        transform: translateY(-6px);
        opacity: 0;
        padding-bottom: 0;
        z-index: 1055;
        transition: opacity .14s, transform .14s, visibility .14s;
    }
    .cat-sheet-bottom.show { transform: translateY(0); opacity: 1; }
    .cat-sheet-bottom .cat-sheet-head { display: none; }  /* заголовок избыточен */
    .cat-sheet-bottom .cat-sheet-body { padding: 6px 10px; }
    .cat-radio { padding: 9px 4px; font-size: .87rem; }
}

/* ============================================================
   МОБИЛЬНЫЙ (<992px): те же элементы — шторки
   ============================================================ */
@media (max-width: 991.98px) {
    .cat-sheet {
        position: fixed;
        background: var(--t-bg-elevated, #fff);
        /* чат-виджет висит на 99999 — иначе его кнопка лезет поверх шторки */
        z-index: 100001;
        display: flex;
        flex-direction: column;
        visibility: hidden;
        transition: transform .22s ease, visibility .22s;
    }
    .cat-sheet.show { visibility: visible; }

    /* снизу — сортировка */
    .cat-sheet-bottom {
        left: 0; right: 0; bottom: 0;
        max-height: 70vh;
        border-radius: 18px 18px 0 0;
        transform: translateY(100%);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .cat-sheet-bottom.show { transform: translateY(0); }

    /* справа — фильтр на весь экран */
    .cat-sheet-full {
        top: 0; right: 0;
        width: 100%;
        height: 100dvh;
        transform: translateX(100%);
        box-shadow: -8px 0 40px rgba(0,0,0,.25);
    }
    .cat-sheet-full.show { transform: translateX(0); }
}

/* ── сортировка: радио-строки ── */
.cat-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 2px;
    text-decoration: none;
    color: var(--t-text, #212529);
    font-size: .95rem;
    border-bottom: 1px solid rgba(128,128,128,.1);
}
.cat-radio:last-child { border-bottom: 0; }
.cat-radio:hover { color: #0a58ca; }
.cat-radio-dot {
    width: 20px; height: 20px; flex-shrink: 0;
    border: 2px solid rgba(128,128,128,.4);
    border-radius: 50%;
    position: relative;
}
.cat-radio.is-active .cat-radio-dot { border-color: #ff5500; }
.cat-radio.is-active .cat-radio-dot::after {
    content: '';
    position: absolute; inset: 3px;
    border-radius: 50%;
    background: #ff5500;
}
.cat-radio.is-active { font-weight: 600; }

/* ── группы фильтров ── */
.cat-group { padding: 14px 0; border-bottom: 1px solid rgba(128,128,128,.1); }
.cat-group:last-child { border-bottom: 0; }
.cat-group-title { font-size: .95rem; font-weight: 700; margin-bottom: 10px; }
.cat-group-mod .cat-group-title { color: #ff9900; }

.cat-search { position: relative; display: flex; align-items: center; }
.cat-search svg {
    position: absolute; left: 12px; width: 15px; height: 15px;
    color: var(--t-text-faint, #9aa0a6); pointer-events: none;
}
.cat-search input {
    width: 100%; height: 44px;
    padding: 0 12px 0 36px;
    border: 1px solid rgba(128,128,128,.25);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: .9rem;
}

.cat-input {
    width: 100%; height: 42px;
    padding: 0 12px;
    margin-bottom: 8px;
    border: 1px solid rgba(128,128,128,.25);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: .88rem;
}
.cat-input:last-child { margin-bottom: 0; }

.cat-row { display: flex; gap: 8px; }
.cat-row input {
    flex: 1;
    height: 42px; padding: 0 12px;
    border: 1px solid rgba(128,128,128,.25);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: .88rem;
}

/* ── таблетки выбора ── */
.cat-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.cat-pill { cursor: pointer; }
.cat-pill input { position: absolute; opacity: 0; pointer-events: none; }
.cat-pill span {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 9px;
    background: rgba(128,128,128,.1);
    font-size: .84rem;
    transition: background .15s, color .15s;
}
.cat-pill:hover span { background: rgba(128,128,128,.18); }
.cat-pill input:checked + span { background: #0a58ca; color: #fff; font-weight: 600; }
/* видимый фокус для клавиатуры — таблетки это не кнопки, легко потерять */
.cat-pill input:focus-visible + span { outline: 2px solid #0a58ca; outline-offset: 2px; }

/* ── блок «Жанр»: поиск, счётчики, свёртка ── */
.cat-search-sm { margin-bottom: 10px; }
.cat-search-sm input { height: 38px; font-size: .85rem; }
.cat-search-sm svg { left: 11px; width: 13px; height: 13px; }

.cat-pill-cnt {
    margin-left: 6px;
    font-style: normal;
    font-size: .72rem;
    font-weight: 600;
    opacity: .45;
}
.cat-pill input:checked + span .cat-pill-cnt { opacity: .75; }

/* хвост списка скрыт, пока не нажали «Ещё N» */
.cat-pills:not(.is-expanded):not(.is-searching) .cat-pill.is-extra { display: none; }
.cat-pill.is-filtered { display: none; }

.cat-pills-empty {
    width: 100%;
    padding: 10px 2px;
    font-size: .84rem;
    color: var(--t-text-muted, #6c757d);
}

.cat-more {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0a58ca;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
}
.cat-more:hover { text-decoration: underline; }

/* ── низ шторки фильтров ── */
.cat-sheet-foot {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(128,128,128,.15);
    background: var(--t-bg-elevated, #fff);
}
.cat-btn-reset {
    flex: 0 0 auto;
    padding: 0 18px;
    height: 48px;
    display: flex; align-items: center;
    border-radius: 11px;
    background: rgba(128,128,128,.12);
    color: var(--t-text, #212529);
    text-decoration: none;
    font-size: .9rem; font-weight: 600;
}
.cat-btn-apply {
    flex: 1;
    height: 48px;
    border: 0; border-radius: 11px;
    background: #0a58ca;
    color: #fff;
    font-size: .95rem; font-weight: 700;
    cursor: pointer;
}
.cat-btn-apply:hover { filter: brightness(1.08); }

/* ── тёмная тема ── */
body[data-bs-theme='dark'] .cat-tool,
body[data-bs-theme='dark'] .cat-sheet,
body[data-bs-theme='dark'] .cat-sheet-foot { background: #1a1c20; color: #e8eaed; }
body[data-bs-theme='dark'] .cat-radio { color: #e8eaed; }
body[data-bs-theme='dark'] .cat-btn-reset { background: rgba(255,255,255,.1); color: #e8eaed; }
body[data-bs-theme='dark'] .cat-sheet-close { background: rgba(255,255,255,.1); }
body[data-bs-theme='dark'] .cat-pills-empty { color: #9aa0a6; }

/* ── мобильные ── */
@media (max-width: 576px) {
    .cat-toolbar { gap: 6px; }
    .cat-tool { padding: 8px 11px; font-size: .82rem; }
    .cat-view { margin-left: auto; }
    .cat-sheet-full { width: 100%; }
    .cat-sheet-body { padding: 10px 14px 16px; }
    .cat-sheet-head { padding: 14px; }
    .cat-sheet-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
}