/* Styles for Aberhol Sale Filter Component */

:root {
    --aberhol-color-primary: #02ad41;
    --aberhol-color-primary-hover: #028837;
    --aberhol-color-text: #333333;
    --aberhol-color-text-muted: #999999;
    --aberhol-color-discount: #e65e5e;
    --aberhol-color-border: #e0e0e0;
    --aberhol-color-pagination-border: #dddddd;
    --aberhol-color-overlay: rgba(0, 0, 0, 0.5);
    --aberhol-color-preloader-bg: rgba(255, 255, 255, 0.7);
    --aberhol-shadow-sidebar: rgba(0, 0, 0, 0.1);
    --aberhol-spacing-xs: 5px;
    --aberhol-spacing-sm: 10px;
    --aberhol-spacing-md: 15px;
    --aberhol-spacing-lg: 20px;
    --aberhol-radius-sm: 4px;
    --aberhol-radius-md: 8px;
}

.aberhol-sale-wrapper {
    display: flex;
    flex-direction: row;
}

.aberhol-sidebar {
    width: 15%;
    padding-right: var(--aberhol-spacing-lg);
}

.aberhol-content-area {
    width: 85%;
    position: relative; /* Необходимо для позиционирования preloader'а */
}

.filter-group {
    margin-bottom: var(--aberhol-spacing-sm);
}

.filter-group select {
    width: 100%;
    box-sizing: border-box;
}

.filter-group .select2-container {
    width: 100% !important;
}

#aberhol-filters-form button[type="submit"] {
    margin-top: var(--aberhol-spacing-sm);
}

.aberhol-preloader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--aberhol-color-preloader-bg);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: var(--aberhol-color-text);
}

/* --- Мобильные стили --- */
@media (max-width: 768px) {
    .aberhol-sale-wrapper {
        flex-direction: column;
    }

    .aberhol-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 80% !important;
        height: 100vh;
        background: white;
        z-index: 10000;
        padding: var(--aberhol-spacing-lg);
        overflow-y: auto;
        box-shadow: 2px 0 5px var(--aberhol-shadow-sidebar);
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        padding-top: 120px;
        padding-right: var(--aberhol-spacing-lg); /* Reset from desktop */
    }

    .aberhol-sale-wrapper.sidebar-open .aberhol-sidebar {
        display: block !important;
        transform: translateX(0) !important;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--aberhol-color-overlay);
        z-index: 9999;
    }

    .aberhol-sale-wrapper.sidebar-open .sidebar-overlay {
        display: block !important;
    }

    .aberhol-content-area {
        width: 100%;
    }

    .aberhol-sidebar .filter-group .select2-container,
    .aberhol-sidebar .price-filter input[type="number"],
    .aberhol-sidebar #aberhol-filters-form button[type="submit"] {
        width: 100% !important;
        box-sizing: border-box;
    }

    .aberhol-sidebar .price-filter {
        display: flex;
        flex-direction: column;
        gap: var(--aberhol-spacing-sm);
    }

    .aberhol-sidebar .price-filter label {
        width: 100%;
    }
}

#aberhol-toggle-filters-btn {
    display: none; /* Скрыта по умолчанию */
}

@media (max-width: 768px) {
    #aberhol-toggle-filters-btn {
        display: block !important; /* Показываем только на мобильных */
    }
}

/* --- Стили пагинации --- */
.aberhol-pagination {
    text-align: center;
    margin-top: var(--aberhol-spacing-lg);
}

.aberhol-pagination .page-numbers {
    border: none;
    background: none;
    padding: var(--aberhol-spacing-sm);
    margin: 0 var(--aberhol-spacing-xs);
    text-decoration: none;
    color: var(--aberhol-color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    transition: background-color 0.3s, color 0.3s;
}

.aberhol-pagination .page-numbers.current,
.aberhol-pagination .page-numbers:hover {
    background-color: var(--aberhol-color-primary);
    color: #ffffff;
    border-radius: var(--aberhol-radius-md);
    text-decoration: none;
}


/* --- Стили для нового фильтра по цене --- */
.price-filter-v2 {
    display: flex;
    align-items: center;
    gap: var(--aberhol-spacing-xs); /* Небольшой отступ между элементами */
}

.price-filter-v2 input[type="number"],
.price-filter-v2 button {
    height: 40px; /* Установим одинаковую высоту для всех элементов */
    box-sizing: border-box;
}

.price-filter-v2 input[type="number"] {
    width: 100%; /* Позволит flex-контейнеру управлять шириной */
    flex: 1 1 0; /* Адаптивность: расти, сжиматься, базовая ширина 0 */
    min-width: 50px; /* Минимальная ширина, чтобы поле не исчезло */
}

.price-filter-v2 .price-filter-separator {
    flex: 0 0 auto; /* Разделитель не должен расти или сжиматься */
}

#apply-price-filter-btn {
    flex: 0 0 auto; /* Кнопка не должна расти или сжиматься */
    background-color: var(--aberhol-color-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--aberhol-radius-sm);
    padding: 0 var(--aberhol-spacing-sm);
}

#apply-price-filter-btn:hover {
    background-color: var(--aberhol-color-primary-hover);
}

#apply-price-filter-btn i {
    font-size: 16px;
}