.filter-card {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: none;
}
.filter-card.visible {
    display: block;
}
.filter-label { font-weight: 600; margin-bottom: 8px; display: block; }
.scrollable-checkbox { max-height: 200px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 5px; padding: 10px; background: white; }
.form-check { margin-bottom: 8px; padding-left: 1.5rem; }
.form-check-input { margin-left: -1.5rem; margin-top: 0.2rem; }
.form-check-label img { border: 1px solid #dee2e6; border-radius: 2px; }
#selected-filters .badge {
    font-size: 14px;
    padding: 6px 10px;
    background-color: #6c757d;
    color: white;
    display: inline-flex;
    align-items: center;
    cursor: pointer; /* Указываем, что весь тег кликабелен */
}
#selected-filters .remove-filter {
    margin-left: 6px;
    font-size: 16px;
    line-height: 1;
}
#selected-filters .filter-tag:hover .remove-filter {
    color: #ff4d4d; /* Красный крестик при наведении */
}
#selected-filters .remove-filter:hover { color: #ff4d4d; }

/* Новые стили для кнопки и контейнера */
.filter-toggle-container {
    margin-bottom: 15px;
}
.toggle-filters-btn {
    width: 100%;
    max-width: 200px;
    margin: 0 auto 15px auto; /* Добавляем нижний отступ 15px */
    display: block;
    transition: all 0.3s ease;
}
.toggle-filters-btn i {
    margin-right: 5px;
}

.mobile-filter-buttons {
    margin-bottom: 15px;
}

/* Медиа-запросы */
@media (max-width: 767px) {
    .filter-card {
        display: none; /* Уже есть, оставляем для мобильных */
    }
    .filter-card.visible {
        display: block; /* Уже есть, оставляем */
    }
	
	.form-check-input {
        width: 24px; /* Увеличиваем размер чекбокса */
        height: 24px;
        margin-top: 0; /* Центрируем */
        margin-left: -2rem; /* Сдвигаем чуть левее */
    }
    .form-check-label {
        font-size: 16px; /* Увеличиваем шрифт текста */
        padding-left: 0.5rem; /* Увеличиваем отступ слева для выравнивания текста */
        line-height: 24px; /* Выравниваем по высоте чекбокса */
    }
    .form-check {
        margin-bottom: 12px; /* Больше пространства между элементами */
    }
	
	.scrollable-checkbox {
        padding: 15px; /* Увеличиваем внутренний отступ */
        max-height: 250px; /* Чуть больше высоты для прокрутки */
    }
	
	#filter-submit, #filter-reset {
        font-size: 16px; /* Увеличиваем шрифт */
        padding: 10px 20px; /* Увеличиваем внутренний отступ */
        min-width: 120px; /* Минимальная ширина для удобства */
        margin: 0 10px; /* Больше пространства между кнопками */
    }
	
	.filter-label {
        font-size: 18px; /* Увеличиваем шрифт заголовков */
        margin-bottom: 12px; /* Больше пространства под заголовком */
    }
	
	.flag-icon {
        width: 24px; /* Увеличиваем флаг */
        height: 16px;
        margin-right: 8px; /* Больше отступа справа */
    }
	
	#selected-filters .badge {
        font-size: 16px; /* Увеличиваем текст */
        padding: 8px 12px; /* Увеличиваем область клика */
    }
	
	#selected-filters .remove-filter {
        font-size: 20px; /* Увеличиваем крестик */
    }
}
@media (min-width: 768px) {
    .toggle-filters-btn {
        display: none;
    }
    .filter-card {
        display: block !important; /* Всегда видно на десктопе */
    }
	
	.mobile-filter-buttons {
        display: none; /* Скрываем на десктопе */
    }
}

/* Анимация появления */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.filter-card.visible {
    animation: fadeIn 0.3s ease-in-out;
}
#filter-loader { padding: 20px; display: none; } /* Скрываем лоадер сразу */