/* Стили для сайдбара фильтров */
.filter-sidebar {
    position: fixed;
    top: 0;
    left: -350px; /* Скрываем сайдбар за пределами экрана */
    width: 320px;
    height: 100%;
    background-color: #fff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); /* Изменяем тень для левой стороны */
    transition: left 0.3s ease-in-out; /* Изменяем transition для левой стороны */
    z-index: 1000;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto; /* Для прокрутки содержимого, если оно не помещается */
}

.filter-sidebar.open {
    left: 0; /* Показываем сайдбар */
}

.filter-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.filter-sidebar-header h3 {
    margin: 0;
    font-size: 1.4em;
    color: #333;
}

.filter-sidebar-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    line-height: 1;
}

.filter-sidebar-close:hover {
    color: #333;
		background-color: #eeeeee;
}

/* Стили для формы внутри сайдбара */
.filter-sidebar .search-form {
    margin-top: 0; /* Убираем верхний отступ, так как он уже есть в сайдбаре */
    padding: 0;
    box-shadow: none;
    border: none;
}

.filter-sidebar .search-form input[type="text"],
.filter-sidebar .search-form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
}

.filter-sidebar .search-form .filter-row {
    display: block; /* Изменяем на блочный, чтобы элементы были друг под другом */
}

.filter-sidebar .search-form .filter-row select {
    margin-right: 0; /* Убираем отступ справа */
    margin-bottom: 15px; /* Добавляем отступ снизу */
}

.filter-sidebar .search-form button {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    margin-bottom: 10px;
}

.filter-sidebar .search-form button.button-primary {
    background-color: #3498db;
    color: #fff;
    border: none;
}

.filter-sidebar .search-form button.button-secondary {
    color: #fff !important;
    border: none;
		justify-content: center;
}

/* Overlay для затемнения фона */
.filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none; /* Скрыт по умолчанию */
}

.filter-overlay.open {
    display: block; /* Показываем, когда сайдбар открыт */
}

/* Кнопка открытия фильтров */
.open-filter-btn { /* Общие стили для обеих кнопок */
    background-color: #28a745;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.open-filter-btn:hover {
    background-color: #218838;
}

/* Стили для десктопной кнопки */
#open-filter-btn-desktop {
    display: flex; /* Показываем на десктопе */
		display: inline-block;
    padding: 10px 8px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    background-color: #8c9aa6;
		color: #ffffff!important

}
#open-filter-btn-desktop:hover {
    background: #647c90;
}

/* Обертка для мобильной кнопки фильтров */
.mobile-filter-button-wrapper {
    display: none; /* Скрываем по умолчанию на больших экранах */
}

/* Адаптивность */
@media (max-width: 768px) {
    .filter-sidebar {
        width: 100%;
        height: auto; /* Высота будет зависеть от содержимого */
        max-height: 80vh; /* Ограничиваем максимальную высоту */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto; /* Отменяем top: 0 */
        transform: translateY(100%); /* Скрываем сайдбар снизу */
        transition: transform 0.3s ease-in-out;
        border-radius: 10px 10px 0 0; /* Скругленные углы сверху */
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }

    .filter-sidebar.open {
        transform: translateY(0); /* Показываем сайдбар */
    }

    /* Скрываем десктопную кнопку на мобильных устройствах */
    #open-filter-btn-desktop {
        display: none;
    }

    /* Отображаем и стилизуем плавающую кнопку на мобильных устройствах */
    .mobile-filter-button-wrapper {
        display: flex; /* Используем flex для центрирования */
        justify-content: center; /* Центрируем по горизонтали */
        position: fixed;
        bottom: 65px; /* Отступ от низа */
        z-index: 1000;
        pointer-events: none; /* Позволяет кликать сквозь обертку, если кнопка не активна */
    }

    .mobile-filter-button-wrapper #open-filter-btn-mobile {
        position: static; /* Отменяем fixed, так как родитель уже fixed */
        display: flex;
        width: 30px; /* Фиксированная ширина для круглой кнопки */
        height: 30px; /* Фиксированная высота для круглой кнопки */
        padding: 0; /* Убираем padding */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        pointer-events: auto; /* Восстанавливаем события для кнопки */
    }
}

@media (max-width: 480px) {

    .mobile-filter-button-wrapper #open-filter-btn-mobile {
        position: static; /* Отменяем fixed, так как родитель уже fixed */
        display: flex;
        width: 25px; /* Фиксированная ширина для круглой кнопки */
        height: 25px; /* Фиксированная высота для круглой кнопки */
        padding: 0; /* Убираем padding */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        pointer-events: auto; /* Восстанавливаем события для кнопки */
				font-size: 13px;
    }
}