/* ==========================================================================
   1. СЕТКА И КАРКАС ФИЛЬТРА (СТРОГО ФИКСИРОВАННЫЕ ШИРИНЫ ДЛЯ ДЕСКТОПА)
   ========================================================================== */

.row--search-input {position: relative; width: 100%;}
form .filter-block {display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 15px;  width: 100%; margin-top: 0;}
#filter-block.filter-block .filter__cell {position: relative; display: flex; flex-direction: column; min-width: 0;}

/* РАЗМЕРЫ ДЛЯ СЕЛЕКТОВ */
#filter-block.filter-block .col--genre { flex: 0 0 180px; }
#filter-block.filter-block .col--year { flex: 0 0 170px; }
#filter-block.filter-block .col--rating { flex: 0 0 140px; }
#filter-block.filter-block .col--type { flex: 0 0 160px; }

#filter-block.filter-block .filter__cell--submit {flex: 1; flex-direction: row;  align-items: center; gap: 15px;}
#filter-block.filter-block .btn--form-submit {flex: 1; width: 140px; height: 42px; border-radius: 6px; font-weight: 600; cursor: pointer;}
#filter-block.filter-block .btn--reset-form-filter {flex: 0 0 42px; width: 42px; height: 42px; border-radius: 6px; cursor: pointer;}

.select-box-label {font-size: 13px; color: var(--tt-fade, #b3b3b3); margin-bottom: 5px; display: block; white-space: nowrap;}
#filter-block.filter-block select {display: none; }
#filter-block.filter-block #year {opacity: 0; position: absolute; z-index: -1; width: 100%;}


/* ==========================================================================
   2. ШАПКА КАСТОМНЫХ 
   ========================================================================== */

.anime-select-wrapper, .year-slider-wrapper {position: relative; width: 100%; user-select: none;}
.anime-select-trigger {color: var(--input--color, --color--input); background-color: var(--input--background, var(--color--block-light));
    border: 1px solid rgba(255, 255, 255, 0.12); color: var(--tt, #ffffff); padding: 10px 35px 10px 14px;  min-height: 42px;
    position: relative; cursor: pointer; border-radius: 6px; display: flex; align-items: center; font-size: 14px;
    width: 100%; transition: border-color 0.2s ease, background-color 0.2s ease;}
.anime-select-wrapper:hover .anime-select-trigger,
.year-slider-wrapper:hover .anime-select-trigger {border-color: var(--color--red);}
.anime-select-wrapper.is-open .anime-select-trigger,
.year-slider-wrapper.is-open .anime-select-trigger {position: relative; z-index: 9999; background: transparent; border-color: transparent;}

.anime-select-trigger::after {content: ""; position: absolute; right: 12px; top: 50%; transform:translateY(-50%);
    width: 22px; height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2725%27 height=%2724%27 fill=%27none%27 viewBox=%270 0 25 24%27%3E%3Cpath stroke=%27%236B7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m7.267 10 5 5 5-5%27/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat;
    background-position: center; transition: transform 0.2s ease; pointer-events: none;
}

.anime-select-wrapper.is-open .anime-select-trigger::after,
.year-slider-wrapper.is-open .year-slider-dropdown::after {transform: translateY(-50%) rotate(180deg);}
.anime-select-text {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;}

.anime-select-wrapper.is-open .anime-select-dropdown,
.year-slider-wrapper.is-open .year-slider-dropdown {display: block;}

/* ==========================================================================
   3. ВЫПАДАЮЩИЕ ОКНА
   ========================================================================== */

.anime-select-dropdown, .year-slider-dropdown {display: none;  position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box;
    background-color: var(--input--background, var(--color--block-light)); border: 1px solid var(--color--red); padding: 45px 12px 12px 12px; 
    border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); z-index: 9998; height: auto;}


/* ==========================================================================
   4. ВНУТРЕННИЕ СПИСКИ (ЖАНРЫ, ТИПЫ, РЕЙТИНГИ)
   ========================================================================== */

/*
.anime-select-list {list-style: none; padding: 0; margin: 0; max-height: 220px; 
    overflow-y: auto; overflow-x: hidden; width: 100%;}

.anime-select-list::-webkit-scrollbar {width: 5px;}
.anime-select-list::-webkit-scrollbar-track {background: #111111; border-radius: 4px;}
.anime-select-list::-webkit-scrollbar-thumb {background: #333333; border-radius: 4px;}
.anime-select-list::-webkit-scrollbar-thumb:hover {background: #444444;}

.anime-select-item {position: relative; display: flex; align-items: center; padding: 8px 8px 8px 32px; 
    color: #b3b3b3; font-size: 13px; cursor: pointer; border-radius: 6px; transition:
        background-color 0.15s, color 0.15s;}
.anime-select-item:hover {color: var(--accent, #ff3b30);}
.anime-select-item::before {content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 4px; background: transparent;
    transition: background-color 0.15s, border-color 0.15s;}
.anime-select-item.selected {color: #ffffff;}
.anime-select-item.selected::before {background-color: var(--accent, #ff3b30); border-color: var(--accent, #ff3b30);}
.anime-select-item.selected::after {content: ""; position: absolute; left: 15px; top: 50%; transform: translateY(-65%) rotate(45deg);
    width: 4px; height: 7px; border: solid #ffffff; border-width: 0 2px 2px 0;}
*/


.anime-select-list {list-style: none; padding: 0; margin: 0; max-height: 220px; 
    overflow-y: auto; overflow-x: hidden; width: 100%;}

.anime-select-list::-webkit-scrollbar {width: 4px;}
.anime-select-list::-webkit-scrollbar-track {background: #111111; border-radius: 4px;}
.anime-select-list::-webkit-scrollbar-thumb {background: #333333; border-radius: 4px;}
.anime-select-list::-webkit-scrollbar-thumb:hover {background: #444444;}

.anime-select-item {position: relative; display: flex; align-items: center; padding: 8px 8px 8px 28px; 
    color: #b3b3b3; font-size: 13px; cursor: pointer; border-radius: 6px; transition:
        background-color 0.15s, color 0.15s;}
.anime-select-item:hover {color: var(--accent, #ff3b30);}

/* Базовый пустой чекбокс */
.anime-select-item::before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 4px; background: transparent;
    transition: background-color 0.15s, border-color 0.15s, background-image 0.15s;}

/* Активное состояние строки */
.anime-select-item.selected {color: #ffffff;}

/* Новое активное состояние чекбокса: белый фон + SVG-галочка */
.anime-select-item.selected::before {
    background-color: var(--color--white, #ffffff); 
    border-color: var(--color--white, #ffffff);
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 fill=%27none%27 viewBox=%270 0 16 16%27%3E%3Cpath stroke=%27%23DB1035%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m13.333 4.667-6.666 6.666L3.333 8%27/%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}


/* ==========================================================================
   5. ОКНО ДЛЯ ION RANGE SLIDER 
   ========================================================================== */

.year-slider-container {display: flex; flex-direction: column; gap: 15px; width: 100%; box-sizing: border-box;}
.range-slider-box {padding: 0 6px; height: 24px; position: relative; box-sizing: border-box;}
.year-inputs-row {display: flex; justify-content: space-between; align-items: center; gap: 10px;  width: 100%; box-sizing: border-box;}
#filter-block.filter-block .year-num-input {flex: 1 1 calc(50% - 5px);  min-width: 0; height: 34px;
    background-color: var(--color--black); border: 1px solid rgb(255 255 255 / 20%); border-radius: 6px; color: #ffffff; font-size: 14px;
    font-weight: 500; text-align: center; display: flex; justify-content: center; align-items: center; padding: 0;  margin: 0;
    outline: none; box-sizing: border-box; -moz-appearance: textfield; }
#filter-block.filter-block .year-num-input::-webkit-outer-spin-button,
#filter-block.filter-block .year-num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Отрезок и линия слайдера */
.year-slider-container .irs { position: relative; display: block; height: 24px; }
.year-slider-container .irs-line {
    position: absolute; display: block; height: 5px; top: 9px; left: 0; width: 100%;
    background-color: var(--color--block); 
    border-radius: 3px;
}
.year-slider-container .irs-bar {position: absolute; display: block; height: 5px; top: 9px;  background-color: var(--color--red); border-radius: 3px;}

.year-slider-container .irs-line-left, 
.year-slider-container .irs-line-mid, 
.year-slider-container .irs-line-right, 
.year-slider-container .irs-bar-edge, 
.year-slider-container .irs-shadow { display: none; }

/* Базовые стили ползунков */
.year-slider-container .irs-handle {position: absolute; display: block; cursor: pointer; width: 18px; height: 18px; top: 3px; 
    border-radius: 50%;  background-color: var(--color--white); border: 5px solid var(--color--red);}
.year-slider-container .irs-min, 
.year-slider-container .irs-max, 
.year-slider-container .irs-from, 
.year-slider-container .irs-to, 
.year-slider-container .irs-single, 
.year-slider-container .irs-grid {display: none;}

.year-slider-container .irs-handle:hover {
    cursor: grab;
    transform: translateX(var(--ys--thumb-position, var(--ys--thumb--position, 0px))) scale(calc(var(--ys--thumb--scale, 1) * 1.35)) !important;
}

/* ==========================================================================
   6. МОБИЛЬНАЯ АДАПТИВНОСТЬ (ОТ 0 ДО 1200px)
   ========================================================================== */
@media screen and (max-width: 1200px) {form .filter-block {flex-direction: column; align-items: stretch; gap: 15px;}
    
    #filter-block.filter-block .col--genre,
    #filter-block.filter-block .col--year,
    #filter-block.filter-block .col--rating,
    #filter-block.filter-block .col--type {
        flex: 0 0 auto;
        width: 100%;
    }

    #filter-block.filter-block .filter__cell--submit {
        flex: 0 0 auto;
        width: 100%; 
        display: flex;
        flex-direction: row; 
        align-items: center;
        gap: 15px; 
    }

    #filter-block.filter-block .btn--form-submit {
        flex: 1; 
        margin: 0;
    }
    
    #filter-block.filter-block .btn--reset-form-filter {
        flex: 0 0 42px; 
        margin: 0;
    }
}