/* Torkzt · каталог: доработки поверх catalog.css и catalog_new.css.
   Подключается последним из стилей — иначе не перекроет. */

/* ═══════════ кнопка действий (троеточие) ═══════════
   Была серым квадратом поверх постера: цеплялась за угол карточки
   и выглядела как ошибка вёрстки. */

.cat-act {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;

    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;

    color: #fff;
    background: rgba(20, 22, 26, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .22);

    opacity: .85;
    transition: opacity .15s, background .15s, transform .15s;
}
.cat-act:hover,
.cat-act:focus-visible {
    opacity: 1;
    background: rgba(20, 22, 26, .82);
    transform: scale(1.06);
    outline: none;
}
.cat-act svg { width: 16px; height: 16px; }

/* Точки-индикатора на кнопке нет намеренно: она читалась как непонятный
   значок, а состояние релиза и так видно меткой статуса на постере. */

/* ═══════════ метки статуса и счётчик раздач ═══════════ */

/* Метка статуса — тёмная плашка с белой иконкой, в одном стиле со
   счётчиком раздач: две пометки на одном постере не должны выглядеть
   по-разному. Словами не помещается — «Хочу посмотреть» на телефоне
   занимает половину строки, поэтому подпись в title.

   Иконка контурная, пока статус не выбран, и залитая у выбранного —
   так состояние видно без цвета, а цвет остаётся вспомогательным. */
.cat-status,
.cat-list-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 26px;
    border-radius: 6px;
    line-height: 1;
    background: #2b2f36;
    color: #fff;
}
.cat-status svg,
.cat-list-status svg {
    width: 17px;
    height: 17px;
    display: block;
}

/* Счётчик раздач — тёмная плашка с белым текстом, как было до правки. */
.cat-torrents,
.cat-list-torrents {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
    background: #2b2f36;
    color: #fff;
}

.cat-list-upd,
.cat-upd {
    font-size: .74rem;
    opacity: .6;
    white-space: nowrap;
}

/* строка метаданных: перенос без разрывов внутри плашек */
.cat-list-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

/* иконки в шторке действий — те же цвета, что у меток */
.cat-act-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: currentColor;
}
.cat-act-item .cat-act-ico {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}
/* В шторке иконка идёт рядом с подписью — плашка там не нужна,
   только цвет статуса. */
.cat-act-item .cat-act-ico.cat-status-want,
.cat-act-item .cat-act-ico.cat-status-watching,
.cat-act-item .cat-act-ico.cat-status-watched,
.cat-act-item .cat-act-ico.cat-status-dislike {
    background: none;
    border: 0;
    width: 20px;
    height: 20px;
}
.cat-act-item .cat-act-ico.cat-status-want     { color: #4f93c7; }
.cat-act-item .cat-act-ico.cat-status-watching { color: #e07b00; }
.cat-act-item .cat-act-ico.cat-status-watched  { color: #2f9174; }
.cat-act-item .cat-act-ico.cat-status-dislike  { color: #7d848c; }

/* ═══════════ поля фильтров ═══════════
   На телефоне при фокусе iOS зумил страницу (шрифт меньше 16px), и вёрстка
   «уезжала»: после закрытия клавиатуры масштаб не возвращался. */

.cat-sheet input[type="text"],
.cat-sheet input[type="number"],
.cat-sheet input[type="search"],
.cat-sheet select,
.cat-input {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(128, 128, 128, .3);
    background: rgba(128, 128, 128, .07);
    color: inherit;
    font-size: 16px;              /* меньше — iOS зумит при фокусе */
    -webkit-appearance: none;
    appearance: none;
}
.cat-sheet input:focus,
.cat-input:focus {
    outline: none;
    border-color: #38ef7d;
    background: rgba(56, 239, 125, .06);
}

/* поля «от / до» рядом, а не в столбик */
.cat-row {
    display: flex;
    gap: 8px;
}
.cat-row > * { flex: 1 1 0; min-width: 0; }

.cat-group + .cat-group { margin-top: 18px; }
.cat-group-title { margin-bottom: 8px; font-weight: 700; font-size: .88rem; }
.cat-group .cat-input + .cat-input { margin-top: 8px; }

@media (max-width: 991.98px) {
    /* Шторка фильтров: высота фиксированная, прокручивается только тело.
       Иначе при открытой клавиатуре кнопка «Показать» уезжала за экран
       и до неё нельзя было дотянуться. */
    .cat-sheet-bottom {
        max-height: 88vh;
        display: flex;
        flex-direction: column;
    }
    .cat-sheet-bottom .cat-sheet-body,
    .cat-sheet-bottom form {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
    }
    .cat-sheet-foot {
        flex: 0 0 auto;
        position: sticky;
        bottom: 0;
        background: inherit;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .cat-act { width: 32px; height: 32px; top: 6px; right: 6px; }
}

/* ═══════════ метка статуса на постере ═══════════
   Свободный угол — правый нижний: слева сверху рейтинги, справа сверху
   кнопка действий, слева снизу счётчик раздач. */
.cat-poster,
.cat-list-poster { position: relative; }

/* Счётчик раздач занимает правый нижний угол, поэтому статус — в левом. */
.cat-card .cat-status,
.cat-list-card .cat-list-status {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

/* ═══════════ режиссёр и актёр: плашка и подсказки ═══════════ */

.cat-person { position: relative; margin-top: 8px; }

.cat-pill-chosen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 6px 8px 6px 12px;
    border-radius: 20px;
    background: rgba(56, 239, 125, .14);
    color: #2eb872;
    font-size: .85rem;
    font-weight: 600;
}
.cat-pill-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-pill-x {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: rgba(46, 184, 114, .18);
    color: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.cat-pill-x:hover { background: rgba(46, 184, 114, .35); }

.cat-person-drop {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid rgba(128, 128, 128, .28);
    background: var(--t-bg-elevated, #fff);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.cat-person-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: none;
    color: inherit;
    font-size: .9rem;
    text-align: left;
    cursor: pointer;
}
.cat-person-item:hover { background: rgba(128, 128, 128, .12); }

.cat-person-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-person-cnt {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 20px;
    font-size: .74rem;
    background: rgba(128, 128, 128, .18);
    opacity: .8;
}

.cat-person-empty {
    padding: 9px 12px;
    font-size: .86rem;
    opacity: .75;
    cursor: pointer;
}
.cat-person-empty:hover { background: rgba(128, 128, 128, .12); }

/* Класс is-marked остаётся в разметке (его ставит и JS), но визуально
   теперь не отличается: состояние показывает метка на постере, а вторая
   пометка на кнопке только сбивала с толку. */
.cat-act.is-marked { }