/**
 * Стили для фильтров каталога
 * @version 1.0
 */

/* Индикатор загрузки */
.loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.loading-indicator .spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Состояние загрузки */
.products-container.loading {
    position: relative;
    min-height: 400px;
}

/* Анимация появления товаров */
.product-card {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Фильтры - улучшенные стили */
.filter-section {
    margin-bottom: 1.5rem;
}

.filter-section h6 {
    font-weight: 600;
    margin-bottom: 1rem;
    color: #2c3e50;
}

/* Подкатегории - новый отдельный блок */
.subcategory-link {
    transition: all 0.2s ease;
    padding: 0.25rem 0;
}

.subcategory-link:hover {
    color: #198754 !important;
    padding-left: 0.25rem;
}

.subcategory-hidden {
    animation: fadeIn 0.3s ease-in;
}

#showMoreSubcategories {
    transition: all 0.2s ease;
}

#showMoreSubcategories:hover {
    background-color: #198754;
    border-color: #198754;
    color: white;
}

#showMoreSubcategories i {
    transition: transform 0.2s ease;
}

#showMoreSubcategories.expanded i {
    transform: rotate(180deg);
}

/* Подкатегории */
.subcategory-list {
    padding-left: 1.5rem;
    margin-top: 0.5rem;
    border-left: 2px solid #e9ecef;
}

.subcategory-list li {
    padding-left: 0.5rem;
}

/* Кнопка раскрытия категорий */
.category-toggle {
    background: none;
    border: none;
    padding: 0;
    margin-right: 0.25rem;
    color: #6c757d;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.category-toggle:hover {
    color: #198754;
}

.category-toggle i {
    transition: transform 0.2s ease;
}

/* Активные фильтры */
.active-filters-panel {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Чекбоксы фильтров */
.form-check {
    margin-bottom: 0.5rem;
}

.form-check-input:checked {
    background-color: #198754;
    border-color: #198754;
}

.form-check-label {
    cursor: pointer;
    user-select: none;
}

/* Поля цены */
.price-inputs {
    display: flex;
    gap: 0.5rem;
}

.price-inputs input {
    flex: 1;
}

/* Multi-select */
select[multiple] {
    border-radius: 0.25rem;
}

select[multiple] option {
    padding: 0.5rem;
}

select[multiple] option:checked {
    background-color: #198754;
    color: white;
}

/* Кнопки фильтров */
.filter-buttons {
    margin-top: 1rem;
}

.filter-buttons .btn {
    width: 100%;
}

/* Счетчик товаров */
.products-count {
    font-weight: 600;
    color: #198754;
}

/* Бейджи характеристик */
.badge {
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

/* Счетчики товаров в фильтрах */
.form-check-label .badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    background-color: #e9ecef !important;
    color: #6c757d !important;
    font-weight: 400;
}

.form-check-input:checked + .form-check-label .badge {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
}

.form-check:hover .badge {
    background-color: #198754 !important;
    color: white !important;
}

/* Select options с счетчиками */
select[multiple] option {
    padding: 0.5rem;
    font-size: 0.9rem;
}

/* Карточки товаров - fade эффект при загрузке */
.products-container.loading .product-card {
    opacity: 0.3;
    pointer-events: none;
}

/* Адаптивность для мобильных */
@media (max-width: 991.98px) {
    .filter-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: white;
        z-index: 1050;
        transition: left 0.3s ease;
        overflow-y: auto;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    }

    .filter-sidebar.show {
        left: 0;
    }

    .filter-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
    }

    .filter-overlay.show {
        display: block;
    }

    .mobile-filter-toggle {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1030;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
}

@media (max-width: 767.98px) {
    .loading-indicator {
        padding: 1.5rem;
    }

    .loading-indicator .spinner-border {
        width: 2rem;
        height: 2rem;
    }
}

/* Скрытие элементов во время загрузки */
.loading .empty-state,
.loading .pagination {
    display: none;
}

/* Плавная прокрутка */
html {
    scroll-behavior: smooth;
}

/* Улучшенные состояния для interactive elements */
.category-toggle:focus,
.form-check-input:focus,
select:focus,
input:focus {
    outline: 2px solid #198754;
    outline-offset: 2px;
}

/* Disabled состояние */
.filter-section.disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Подсветка активной категории */
.category-list a.active {
    font-weight: 600;
    color: #198754 !important;
}

/* Sticky sidebar */
@media (min-width: 992px) {
    .filter-sidebar-sticky {
        position: sticky;
        top: 20px;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }
}

/* Кастомный scrollbar для фильтров */
.filter-sidebar-sticky::-webkit-scrollbar {
    width: 6px;
}

.filter-sidebar-sticky::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.filter-sidebar-sticky::-webkit-scrollbar-thumb {
    background: #198754;
    border-radius: 3px;
}

.filter-sidebar-sticky::-webkit-scrollbar-thumb:hover {
    background: #157347;
}

/* ========== Price Range Slider ========== */

.price-slider-container {
    padding: 1rem 0.5rem;
    user-select: none;
}

.price-slider-track {
    position: relative;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    cursor: pointer;
}

.price-slider-range {
    position: absolute;
    height: 100%;
    background: linear-gradient(90deg, #198754, #20c997);
    border-radius: 3px;
    pointer-events: none;
}

.price-slider-handle {
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border: 3px solid #198754;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    transition: all 0.2s ease;
    z-index: 10;
}

.price-slider-handle:hover {
    transform: translate(-50%, -50%) scale(1.2);
    border-color: #157347;
    box-shadow: 0 2px 8px rgba(25, 135, 84, 0.3);
}

.price-slider-handle:active,
.price-slider-container.dragging .price-slider-handle {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 3px 12px rgba(25, 135, 84, 0.4);
}

.price-slider-tooltip {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: #198754;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.price-slider-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #198754;
}

.price-slider-handle:hover .price-slider-tooltip,
.price-slider-container.dragging .price-slider-tooltip {
    opacity: 1;
}

/* Анимация при загрузке */
.price-slider-range {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: scaleX(0);
        transform-origin: left;
    }
    to {
        transform: scaleX(1);
    }
}


/* 2026 storefront refresh */
.catalog-page { --catalog-line:#e2e9e4; --catalog-muted:#6b776f; }
.catalog-page > .row { --bs-gutter-x: 1.6rem; }
.catalog-toolbar { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.catalog-toolbar h1 { letter-spacing:-.025em; font-weight:750; }
.catalog-toolbar .products-count { font-weight:500; }
.catalog-sort { display:flex; align-items:center; white-space:nowrap; }
.catalog-sort .form-select { min-width:180px; border-radius:10px; border-color:#dce4df; }
.catalog-page .col-lg-3 > .card, .catalog-page .filter-sidebar-sticky { overflow:hidden; border:1px solid var(--catalog-line); border-radius:15px; box-shadow:0 3px 14px rgba(24,55,38,.045); }
.catalog-page .card-header { padding:13px 15px; border-bottom:1px solid var(--catalog-line); background:#f8faf9 !important; color:#26372e !important; }
.catalog-page .card-header h5, .catalog-page .card-header h6 { font-size:.9rem; font-weight:720; }
.catalog-page .card-header i { color:#148255; }
.catalog-page .card-body { padding:15px; }
.catalog-page .filter-sidebar-sticky hr { margin:17px 0; color:#dce3de; opacity:1; }
.catalog-page .filter-sidebar-sticky h6 { color:#34443a; font-size:.8rem; font-weight:700; }
.catalog-page .form-check { margin-bottom:7px; }
.catalog-page .form-check-label { color:#56635b; }
.catalog-page .category-toggle { color:#7e8a83 !important; }
.catalog-page .category-toggle:hover { color:#148255 !important; }
.catalog-page .active-filters-panel .alert-info { padding:10px 12px; border:1px solid #d8e8df; border-radius:12px; color:#435249; background:#f2f8f4; }
.catalog-page .active-filters-panel .alert-info strong { margin-right:7px; font-size:.78rem; }
.catalog-page .active-filters-panel .badge { padding:6px 8px; border-radius:999px; color:#405148 !important; background:#fff !important; border:1px solid #d9e3dd; font-weight:550; }
.catalog-page .pagination { justify-content:center; gap:3px; }
.catalog-page .pagination .page-link { min-width:38px; min-height:38px; display:grid; place-items:center; border-radius:9px !important; border-color:#e0e7e2; }
@media(min-width:992px){.catalog-page .filter-sidebar-sticky{top:112px;max-height:calc(100vh - 132px)}}
@media(max-width:767.98px){
 .catalog-toolbar{align-items:flex-end}.catalog-toolbar h1{font-size:1.45rem}.catalog-sort .form-select{min-width:145px;max-width:165px}
}

.catalog-mobile-filter{min-height:46px;border-radius:12px;font-weight:650}

/* 2026-09-03 UI/UX r3: catalog usability */
.catalog-toolbar__count{color:#7a867f;font-size:.82rem}.catalog-toolbar__count .products-count{color:#394940;font-weight:750}.catalog-mobile-toolbar{position:sticky;top:64px;z-index:1015;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 16px;padding:8px;background:rgba(255,255,255,.96);border:1px solid #e1e8e4;border-radius:14px;box-shadow:0 8px 22px rgba(30,54,41,.07);backdrop-filter:blur(12px)}.catalog-mobile-toolbar__button,.catalog-mobile-toolbar__sort{min-height:42px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;color:#304239;background:#f3f7f4;font-size:.8rem;font-weight:700}.catalog-mobile-toolbar__sort{position:relative}.catalog-mobile-toolbar__sort select{max-width:100%;padding:0 18px 0 0;border:0;outline:0;color:inherit;background:transparent;font:inherit;appearance:auto}.catalog-mobile-toolbar__sort i{color:#148255}.catalog-sidebar__mobile-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;border-bottom:1px solid #e2e8e4}.catalog-sidebar__mobile-head strong,.catalog-sidebar__mobile-head span{display:block}.catalog-sidebar__mobile-head strong{font-size:1.05rem}.catalog-sidebar__mobile-head span{margin-top:2px;color:#7d8982;font-size:.75rem}.catalog-sidebar__close{width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:12px;background:#f2f5f3;color:#536158}.catalog-sidebar-overlay{display:none}.catalog-filter-card .card-body{padding:8px 15px 15px}.catalog-filter-reset{color:#6d7972;font-size:.72rem;text-decoration:none}.catalog-filter-reset:hover{color:#148255}.filter-group{border-bottom:1px solid #edf0ee}.filter-group:last-of-type{border-bottom:0}.filter-group summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;color:#34443a;font-size:.8rem;font-weight:720}.filter-group summary::-webkit-details-marker{display:none}.filter-group summary>span{display:flex;align-items:center;gap:7px;min-width:0}.filter-group summary small{min-width:20px;height:20px;display:grid;place-items:center;border-radius:99px;color:#148255;background:#e9f5ee;font-size:.63rem}.filter-group summary i{color:#8a958f;font-size:.72rem;transition:transform .18s ease}.filter-group[open] summary i{transform:rotate(180deg)}.filter-group__body{padding:0 0 14px}.filter-group__body .form-control{min-height:40px;border-color:#dfe6e2;border-radius:10px;font-size:.8rem}.filter-range-caption{margin-top:7px;color:#89938d;font-size:.68rem}.catalog-stock-filter{margin:8px 0;border-bottom:1px solid #edf0ee;padding:7px 0 15px}.catalog-stock-filter input{position:absolute;opacity:0;pointer-events:none}.catalog-stock-filter label{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}.catalog-stock-filter label>span strong,.catalog-stock-filter label>span small{display:block}.catalog-stock-filter label>span strong{color:#34443a;font-size:.8rem}.catalog-stock-filter label>span small{margin-top:2px;color:#89948e;font-size:.65rem;line-height:1.35}.catalog-stock-filter label>i{width:36px;height:22px;display:grid;place-items:center;flex:0 0 36px;border-radius:99px;color:transparent;background:#dfe6e2;font-size:.72rem;transition:.18s}.catalog-stock-filter input:checked+label>i{justify-content:end;padding-right:5px;color:#fff;background:#198754}.filter-value{margin:0;padding:6px 0 6px 28px}.filter-value .form-check-input{margin-left:-28px}.filter-value .form-check-label{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#59675f;font-size:.75rem}.filter-value .form-check-label small{color:#9aa49e;font-size:.66rem}.filter-value--extra{display:none}.filter-values.is-expanded .filter-value--extra{display:block}.filter-values-more{display:flex;align-items:center;gap:6px;margin-top:5px;padding:4px 0;border:0;color:#148255;background:transparent;font-size:.72rem;font-weight:700}.filter-values-more i{font-size:.65rem;transition:transform .18s}.filter-values.is-expanded .filter-values-more i{transform:rotate(180deg)}.catalog-filter-actions{position:sticky;bottom:0;display:grid;gap:8px;padding-top:14px;background:#fff}.catalog-filter-actions .btn{min-height:44px;border-radius:11px;font-size:.8rem;font-weight:700}.active-filter-chips{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:16px}.active-filter-chips__label{margin-right:2px;color:#79857e;font-size:.72rem}.active-filter-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:6px 9px;border:1px solid #dce6df;border-radius:999px;color:#44534a;background:#f8faf9;font-size:.7rem;text-decoration:none}.active-filter-chip:hover{border-color:#bcd7c7;color:#148255;background:#f1f8f4}.active-filter-chip i{font-size:.82rem}.active-filter-chips__reset{margin-left:3px;color:#738078;font-size:.7rem}.catalog-empty-state{max-width:620px;margin:45px auto;padding:44px 24px;text-align:center}.catalog-empty-state__icon{width:68px;height:68px;display:grid;place-items:center;margin:0 auto 18px;border-radius:20px;color:#148255;background:#e8f5ed;font-size:1.7rem}.catalog-empty-state h2{margin-bottom:8px;color:#21332a;font-size:1.45rem;font-weight:780}.catalog-empty-state p{max-width:500px;margin:0 auto 20px;color:#738078;line-height:1.55}
@media(min-width:992px){.catalog-sidebar__scroll{position:sticky;top:108px}.catalog-filter-actions{position:static}.catalog-filter-card .card-body{padding-top:5px}}
@media(max-width:991.98px){.catalog-breadcrumb{display:none}.catalog-page{padding-top:12px!important}.catalog-layout>.catalog-sidebar{position:fixed;inset:0 auto 0 0;z-index:1085;width:min(88vw,370px);max-width:none;padding:0;background:#fff;box-shadow:18px 0 45px rgba(19,38,27,.2);transform:translateX(-105%);transition:transform .22s ease}.catalog-layout>.catalog-sidebar.is-open{transform:translateX(0)}.catalog-sidebar__scroll{height:calc(100dvh - 79px);overflow:auto;padding:12px 14px 90px}.catalog-sidebar-overlay{position:fixed;inset:0;z-index:1080;width:100%;height:100%;border:0;background:rgba(18,31,23,.48)}.catalog-sidebar-overlay.is-open{display:block}.catalog-page .col-lg-3>.card,.catalog-page .filter-sidebar-sticky{border-radius:13px;box-shadow:none}.catalog-page .catalog-sidebar .card{border-color:#e6ebe8}.catalog-sidebar .filter-sidebar-sticky{max-height:none;overflow:visible}.catalog-toolbar{min-height:auto}.catalog-toolbar h1{font-size:1.55rem}.catalog-toolbar__count{font-size:.75rem}}
@media(max-width:575.98px){.catalog-mobile-toolbar{top:58px;margin-left:-2px;margin-right:-2px}.catalog-toolbar{margin-bottom:13px!important}.active-filter-chips{flex-wrap:nowrap;overflow:auto;margin:0 -12px 14px;padding:0 12px 3px;scrollbar-width:none}.active-filter-chips::-webkit-scrollbar{display:none}.active-filter-chips__label{display:none}.active-filter-chip,.active-filter-chips__reset{flex:0 0 auto}.catalog-empty-state{margin:20px auto;padding:30px 14px}.catalog-empty-state h2{font-size:1.25rem}}

/* r14: variants in product cards */
.product-card__variants{display:flex;align-items:center;gap:7px;min-height:22px;margin-top:-2px;color:#77847c;font-size:.69rem}.product-card__variants span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.product-card__variants a{margin-left:auto;flex:0 0 auto;color:var(--primary-color);font-weight:700;text-decoration:none}.product-card__variants a:hover{text-decoration:underline}@media(max-width:575.98px){.product-card__variants{font-size:.64rem;gap:5px}.product-card__variants a{max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}