/**
 * Общая тёмная тема мобильного drawer оверлея фильтров (каталог + категория).
 * Подключать после mobile-controls.css.
 */

@keyframes listing-mobile-filters-drawer-in {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@media (max-width: 992px) {
    :is(#catalog-mobile-filters-overlay, #category-mobile-filters-overlay).listing-mobile-filters-overlay {
        --filter-chip-min-height: 40px;
        --filter-chip-padding-y: 8px;
        --filter-chip-padding-x: 12px;
        --filter-chip-font-size: 14px;
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-start;
        min-height: 100dvh;
        background: transparent;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-mobile-filters-overlay__backdrop,
    .category-mobile-filters-overlay .listing-mobile-filters-overlay__backdrop {
        flex: 0 0 calc(25% + 4px);
        max-width: calc(25% + 4px);
        min-width: 0;
        min-height: 100dvh;
        align-self: stretch;
        margin-right: -4px;
        cursor: pointer;
        position: relative;
        z-index: 0;
        background: transparent;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        transform: translateZ(0);
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-sidebar-shell {
        display: flex;
        flex-direction: column;
        gap: 21px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        overflow: visible;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-sidebar-shell::before,
    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-sidebar-shell::after {
        display: none;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-filter-card .listing-filter-actions--card {
        display: none;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-filter-card--price > .listing-filter-actions {
        display: none;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-mobile-filters-overlay__footer--idle,
    #category-mobile-filters-overlay .listing-mobile-filters-overlay__footer--idle {
        display: none !important;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-mobile-filters-overlay__panel,
    .category-mobile-filters-overlay__panel {
        position: relative;
        z-index: 1;
        flex: 0 0 75%;
        max-width: 75%;
        width: 75%;
        box-sizing: border-box;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        border: 3px solid #0e216d;
        background: linear-gradient(160deg, rgba(15, 25, 55, 0.995) 0%, rgba(25, 40, 80, 0.99) 52%, rgba(18, 32, 65, 0.995) 100%);
        box-shadow: 0 0 0 1px #ffffff, 0 0 25px rgba(92, 141, 255, 0.3);
        animation: listing-mobile-filters-drawer-in 0.3s ease forwards;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-mobile-filters-overlay__panel::before,
    .category-mobile-filters-overlay__panel::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 20% 20%, rgba(92, 141, 255, 0.16), transparent 45%),
            radial-gradient(circle at 80% 30%, rgba(111, 230, 176, 0.12), transparent 50%),
            radial-gradient(circle at 50% 90%, rgba(88, 195, 255, 0.12), transparent 50%),
            linear-gradient(135deg, rgba(112, 241, 255, 0.1), transparent 28%),
            linear-gradient(320deg, rgba(87, 102, 255, 0.12), transparent 34%);
        pointer-events: none;
        opacity: 0.55;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-mobile-filters-overlay__panel::after,
    .category-mobile-filters-overlay__panel::after {
        content: "";
        position: absolute;
        top: 18px;
        left: 18px;
        right: 18px;
        height: 1px;
        background: linear-gradient(90deg, rgba(98, 226, 255, 0), rgba(98, 226, 255, 0.42), rgba(98, 226, 255, 0));
        pointer-events: none;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-mobile-filters-overlay__header,
    .category-mobile-filters-overlay__header {
        padding: 18px;
        border-bottom: 2px solid #0e216d;
        background: rgba(15, 25, 55, 0.96);
        box-shadow: 0 4px 20px rgba(92, 141, 255, 0.15);
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-mobile-filters-overlay__title,
    .category-mobile-filters-overlay__title {
        color: #ffffff;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        text-shadow:
            0 0 10px rgba(98, 226, 255, 0.8),
            0 0 20px rgba(98, 226, 255, 0.5),
            0 0 30px rgba(92, 141, 255, 0.3);
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-mobile-popup-close,
    .category-mobile-filters-overlay .category-mobile-popup-close {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(127, 156, 228, 0.2);
        border-radius: 12px;
        background: rgba(10, 18, 42, 0.72);
        color: #d7e2ff;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-mobile-popup-close:hover,
    .category-mobile-filters-overlay .category-mobile-popup-close:hover {
        border-color: rgba(103, 236, 255, 0.3);
        background: rgba(19, 34, 74, 0.92);
        transform: translateY(-1px);
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-mobile-filters-overlay__body,
    .category-mobile-filters-overlay__body {
        flex: 1 1 auto;
        min-height: 0;
        padding: 21px 14px;
        gap: 21px;
        position: relative;
        z-index: 1;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-mobile-filters-overlay__footer,
    .category-mobile-filters-overlay__footer {
        flex-shrink: 0;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        background: rgba(12, 22, 50, 0.97);
        border-top: 2px solid #0e216d;
        box-shadow: 0 -4px 20px rgba(92, 141, 255, 0.15);
        backdrop-filter: blur(18px);
        z-index: 2;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-sidebar-card,
    .category-mobile-filters-overlay .listing-sidebar-card {
        background: linear-gradient(180deg, rgba(15, 27, 59, 0.97) 0%, rgba(10, 18, 42, 0.98) 100%);
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-sidebar-card::before,
    .category-mobile-filters-overlay .listing-sidebar-card::before {
        opacity: 0.55;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-mobile-filters-overlay__footer .listing-filter-action,
    .category-mobile-filters-overlay__footer .listing-filter-action {
        min-height: 52px;
        padding: 12px 18px;
        font-size: 15px;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-filter-search__input-wrap .listing-filter-search__input,
    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-price-field input,
    .category-mobile-filters-overlay .listing-filter-search__input-wrap .listing-filter-search__input,
    .category-mobile-filters-overlay .listing-price-field input {
        height: 40px;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-filter-search__input-wrap .listing-filter-search__input,
    .category-mobile-filters-overlay .listing-filter-search__input-wrap .listing-filter-search__input {
        height: 42px;
        font-size: 16px;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-filter-search__btn,
    .category-mobile-filters-overlay .listing-filter-search__btn {
        min-width: calc(96px / 1.8);
        min-height: 46px;
        padding: 12px calc(12px / 1.8);
        font-size: 15px;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .product-types-filter,
    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .platforms-filter,
    .category-mobile-filters-overlay .product-types-filter,
    .category-mobile-filters-overlay .platforms-filter {
        flex-direction: column;
        gap: 7px;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-price-slider .ui-slider-handle,
    .category-mobile-filters-overlay .listing-price-slider .ui-slider-handle {
        width: 24px;
        height: 24px;
        top: -10px;
        margin-left: -12px;
        box-shadow: 0 2px 10px rgba(23, 35, 63, 0.35);
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-price-slider,
    .category-mobile-filters-overlay .listing-price-slider {
        margin: 18px 36px;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-filter-card--price .listing-price-slider,
    .category-mobile-filters-overlay .listing-filter-card--price .listing-price-slider {
        margin-bottom: 8px;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-price-field,
    .category-mobile-filters-overlay .listing-price-field {
        font-size: var(--filter-chip-font-size);
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-price-field input,
    .category-mobile-filters-overlay .listing-price-field input {
        font-size: 16px;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-filter-checkbox-list .checkbox-item,
    .category-mobile-filters-overlay .listing-filter-checkbox-list .checkbox-item {
        min-height: var(--filter-chip-min-height);
        padding: var(--filter-chip-padding-y) var(--filter-chip-padding-x);
        box-sizing: border-box;
        font-size: var(--filter-chip-font-size);
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-filter-checkbox-list .checkbox-item span:not(.filter-item__dismiss),
    .category-mobile-filters-overlay .listing-filter-checkbox-list .checkbox-item span:not(.filter-item__dismiss) {
        font-size: var(--filter-chip-font-size);
        line-height: 1.2;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-filter-card--mobile-section .product-types-filter__item,
    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-filter-card--mobile-section .platforms-filter__item,
    .category-mobile-filters-overlay .listing-filter-card--mobile-section .product-types-filter__item,
    .category-mobile-filters-overlay .listing-filter-card--mobile-section .platforms-filter__item {
        min-height: var(--filter-chip-min-height);
        padding: var(--filter-chip-padding-y) var(--filter-chip-padding-x);
        box-sizing: border-box;
        font-size: var(--filter-chip-font-size);
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-filter-card--mobile-section .product-types-filter__text,
    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-filter-card--mobile-section .platforms-filter__text,
    .category-mobile-filters-overlay .listing-filter-card--mobile-section .product-types-filter__text,
    .category-mobile-filters-overlay .listing-filter-card--mobile-section .platforms-filter__text {
        font-size: var(--filter-chip-font-size);
        line-height: 1.2;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-filter-card--mobile-section .product-types-filter,
    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .listing-filter-card--mobile-section .platforms-filter,
    .category-mobile-filters-overlay .listing-filter-card--mobile-section .product-types-filter,
    .category-mobile-filters-overlay .listing-filter-card--mobile-section .platforms-filter {
        gap: 8px;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .filter-item--dismissable,
    .category-mobile-filters-overlay .filter-item--dismissable,
    :is(#catalog-mobile-filters-overlay, #category-mobile-filters-overlay).listing-mobile-filters-overlay .listing-filter-card--mobile-section .filter-item--dismissable,
    .category-mobile-filters-overlay .listing-filter-card--mobile-section .filter-item--dismissable {
        justify-content: flex-start;
        gap: 8px;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .filter-item--dismissable .filter-item__dismiss,
    .category-mobile-filters-overlay .filter-item--dismissable .filter-item__dismiss {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        padding: 0;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.22);
        background: rgba(255, 255, 255, 0.08);
        color: #f7fbff;
        font-size: 10px;
        flex-shrink: 0;
    }

    :is(#catalog-mobile-filters-overlay, #listing-mobile-filters-overlay) .filter-item--dismissable .filter-item__dismiss i,
    .category-mobile-filters-overlay .filter-item--dismissable .filter-item__dismiss i {
        font-size: inherit;
        line-height: 1;
        transform: translateY(1px);
    }
}