:root {
    /* --- 1. Основная цветовая палитра --- */
    --color-background-main: #17212B;       /* Основной фон страницы */
    --color-background-secondary: #242F3D;  /* Фон для карточек, сайдбара, хедера */
    --color-text-primary: #e0e0e0;          /* Основной цвет текста */
    --color-text-secondary: #7F91A4;       /* Второстепенный текст, иконки */
    --color-accent-primary: #7177F8;        /* Основной акцентный цвет (кнопки, ссылки) */
    --color-accent-hover: #8F94FA;          /* Цвет при наведении на акцентные элементы */
    --color-border: #3C4F67;                /* Цвет рамок и разделителей */
    --color-success: #4caf50;               /* Цвет для уведомлений об успехе */
    --color-error: #f44336;                 /* Цвет для ошибок */
    --color-warning: #ff9800;               /* Цвет для предупреждений */

    /* --- 2. Типографика --- */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-size-base: 16px;
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.75rem;
    --line-height-base: 1.6;

    /* --- 3. Размеры и отступы (сетка) --- */
    --spacing-unit: 8px;
    --spacing-xs: calc(var(--spacing-unit) * 0.5);  /* 4px */
    --spacing-sm: var(--spacing-unit);             /* 8px */
    --spacing-md: calc(var(--spacing-unit) * 2);   /* 16px */
    --spacing-lg: calc(var(--spacing-unit) * 3);   /* 24px */
    --spacing-xl: calc(var(--spacing-unit) * 4);   /* 32px */
    
    /* --- 4. Компоненты --- */
    --border-radius: 8px;
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    --sidebar-width: 300px;
    --header-height: 64px;
    --transition-speed: 0.2s;

    /* --- 5. Стили формы --- */
    --form-background: var(--color-background-secondary);
    --form-input-background: #1f1f3a; /* Чуть светлее основного фона */
    --form-input-color: var(--color-text-primary);
    --form-placeholder-color: var(--color-text-secondary);
    --form-border-color-focus: var(--color-accent-primary);
}

/* --- Базовые стили для body --- */
body {
    background-color: var(--color-background-main);
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    margin: 0;
    padding: 0;
    padding-top: var(--header-height);
}

/* --- Стили для ссылок --- */
a {
    color: var(--color-accent-primary);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

/* --- Основная структура макета --- */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background-color: var(--color-background-secondary);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    /* Убираем отсюда flex-свойства, они переедут в .header-content */
}

.header-content {
    height: 100%;
    width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left, .header-center, .header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.header-left {
    flex: 0 0 auto;
}

.header-center {
    flex: 1 1 auto;
    justify-content: center;
}

.header-right {
    flex: 0 0 auto;
}

.header-icon {
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    transition: color var(--transition-speed) ease;
}

.header-icon:hover {
    color: var(--color-text-primary);
}

.header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.app-container {
    max-width: 1400px;
    margin: var(--spacing-lg) auto;
    display: flex;
    gap: var(--spacing-lg);
    align-items: stretch; /* Растягиваем дочерние элементы на всю высоту */
    min-height: calc(100vh - var(--header-height) - var(--spacing-lg) * 2);
}

.app-sidebar {
    flex: 0 0 var(--sidebar-width);
    background-color: var(--color-background-secondary);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    /* position: sticky и top нужны, чтобы сайдбар "прилипал" при прокрутке */
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-lg));
    display: flex; /* Делаем контейнер flex */
    flex-direction: column; /* Элементы располагаются в колонку */
    height: calc(100vh - var(--header-height) - var(--spacing-lg) * 2); /* Занимает всю доступную высоту */
}

.main-content {
    flex-grow: 1;
    min-width: 0;
}

/* --- Навигация в сайдбаре --- */
.sidebar-nav {
    flex-grow: 1; /* Занимает все доступное пространство */
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    color: var(--color-text-primary);
    background-color: rgba(255, 255, 255, 0.05);
}

/* Стили для кнопки раскрытия подкатегорий */
.collapse-toggle-btn {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    padding: 0.5rem;
    line-height: 1;
}

.collapse-toggle-btn:hover {
    color: var(--color-text-primary);
}

.collapse-toggle-btn i {
    transition: transform 0.2s ease-in-out;
}

.collapse-toggle-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* --- Футер в сайдбаре --- */
.sidebar-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.sidebar-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-footer a {
    display: block;
    padding: var(--spacing-sm) 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

/* --- Стили для ленты Masonry --- */
.masonry-grid {
    width: 100%;
}

.product-card {
    /* Ширина для 2 колонок с учетом отступа (gutter) */
    width: calc(50% - 8px);
    margin-bottom: 16px;
    background-color: var(--color-background-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden; /* Чтобы изображение не вылезало за скругленные углы */
    /* break-inside больше не нужен, Masonry сам справится */
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 768px) {
    .product-card {
        width: 100%; /* Одна колонка */
    }
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.product-card a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.product-card img {
    width: 100%;
    height: auto;
    display: block;
}

.product-card-info {
    padding: var(--spacing-md);
    position: relative;
}

.product-card-info h3 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 1.1rem;
    color: var(--color-text-primary);
}

.product-card-info .price {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-text-primary);
}

.product-card-info .favorite-btn {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    transition: color var(--transition-speed) ease;
}

.product-card-info .favorite-btn:hover {
    color: #e53935; /* Ярко-красный для избранного */
}

.product-card-info .favorite-btn.favorited {
    color: #e53935;
}

/* --- Стили для формы создания товара --- */
.tag-checkboxes ul {
    list-style: none;
    padding: 0;
    columns: 2; /* Располагаем теги в 2 колонки */
}

.tag-checkboxes li {
    display: block;
}

#drop-zone-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Отступ между слотами */
}

.slot-wrapper {
    flex: 0 0 calc(20% - 0.8rem); /* 5 слотов в ряд с учетом gap */
    max-width: calc(20% - 0.8rem);
}

.drop-slot {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Делаем слот квадратным */
    border: 2px dashed var(--color-border);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
    overflow: hidden;
}

.drop-slot:hover, .drop-slot.drag-over {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--color-accent-primary);
}

.slot-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    color: var(--color-text-secondary);
}

.preview-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.delete-btn {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    z-index: 10;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.7)); /* Тень для лучшей видимости на светлых фото */
}

/* --- Общие стили для полей формы --- */
.form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

.form-control, .form-select {
    display: block;
    width: 100%;
    padding: var(--spacing-md);
    background-color: var(--form-input-background);
    color: var(--form-input-color);
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    transition: border-color var(--transition-speed) ease;
}

.form-control::placeholder {
    color: var(--form-placeholder-color);
}

.form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--form-border-color-focus);
}

.btn-custom-save {
    display: block;
    width: 100%;
    padding: var(--spacing-md);
    background-color: var(--color-accent-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color var(--transition-speed) ease;
}

.btn-custom-save:hover {
    background-color: var(--color-accent-hover);
}

/* Стилизация кнопки выхода */
.btn-primary {
    background-color: #7177F8; /* Фиолетовый цвет */
    border-color: #4a6572;
}

.btn-primary:hover {
    background-color: #8F94FA; /* Более темный фиолетовый при наведении */
    border-color: #4a6572;
}

/* Стилизация текста подтверждения */
.card-body p { /* Это будет применяться ко всем параграфам внутри .card-body */
    font-size: 1.1em;
    color: #333;
    text-align: center;
}

.card {
    background-color: #2c2f33; /* Пример: темно-серый фон */
    color: #ffffff; /* Пример: белый текст для контраста */
    border: 1px solid #4f545c; /* Пример: более темная граница */
    border-radius: 8px; /* Скругляем углы */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Добавляем тень */
}

/* Если вы хотите изменить цвет заголовка внутри карточки */
.card-header {
    background-color: #36393f; /* Пример: немного темнее, чем фон карточки */
    border-bottom: 1px solid #4f545c;
    color: #ffffff;
}

/* Если вы хотите изменить цвет текста внутри тела карточки */
.card-body {
    color: #cccccc; /* Светло-серый текст */
}
/* Стили для контейнера поиска и фильтров */
.search-and-filter-container {
    background-color: var(--color-background-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
}

.search-and-filter-container .input-group {
    flex-wrap: nowrap; /* Предотвращаем перенос элементов на новую строку */
}

/* Стили для поля ввода */
.search-input {
    border: 1px solid #4a6572; /* Цвет границы поля ввода */
    background-color: #3C4F67; /* Темный фон поля ввода */
    color: #ecf0f1; /* Светлый текст */
    padding: 10px 15px;
    border-radius: 5px 0 0 5px !important; /* Скругление только левых углов */
}

.search-input::placeholder {
    color: #bdc3c7; /* Цвет плейсхолдера */
}

.search-input:focus {
    border-color: #3498db; /* Цвет границы при фокусе */
    box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25); /* Тень при фокусе */
    background-color: #34495e; /* Сохраняем фон при фокусе */
    color: #ecf0f1; /* Сохраняем цвет текста при фокусе */
}

/* Стили для кнопки "Найти" */
.search-button {
    background-color: var(--color-accent-primary);
    border-color: var(--color-border);
    color: var(--color-text-primary);
    padding: 10px 40px;
    border-radius: 0 !important; /* Убираем скругление для интеграции */
}

.search-button:hover {
    background-color: #8F94FA; /* Цвет кнопки при наведении */
    border-color: #4a6572;
}
/* Стили для кнопки "Фильтры" */
.filter-toggle-button {
    background-color: var(--color-background-main);
    border-color: var(--color-border);
    color: var(--color-text-primary);
    padding: 10px 15px;
    border-radius: 0 5px 5px 0 !important; /* Скругление только правых углов */
}

.filter-toggle-button:hover {
    background-color: var(--color-background-main);
    border-color: var(--color-accent-hover);
    color: var(--color-text-primary);
}

/* Стили для карточки товара */
.product-card {
    background-color: var(--color-background-secondary);
    border: 0px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px; /* gutter */
    display: flex;
    flex-direction: column;
}

.product-card-image-container {
    position: relative;
}

.product-card-image-container .favorite-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.product-card-image-container .favorite-btn i {
    font-size: 18px;
    color: #212529; /* Цвет неактивного сердечка */
}

.product-card-image-container .favorite-btn:hover {
    background-color: rgba(255, 255, 255, 1);
}

.product-card-image-container .favorite-btn.favorited i {
    color: #dc3545; /* Красный цвет для избранного */
}

.product-card-info {
    padding: 12px;
    flex-grow: 1;
}

.product-card-info a {
    text-decoration: none;
    color: inherit;
}

.product-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.price {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.producer-info {
    font-size: 0.85rem;
    color: #6c757d;
}

.producer-info .producer-location {
    margin-left: 8px;
}

.product-card-footer {
    padding: 0 12px 12px;
    font-size: 0.8rem;
    color: #adb5bd;
    text-align: right;
}
/* Новые стили для оверлея с информацией о производителе */
.producer-overlay {
    position: absolute;
    bottom: 20px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-style: italic;
    font-size: 0.8rem;
}

.producer-overlay .producer-location {
    margin-left: 8px;
}

/* Новые стили для отображения названия и цены в одну строку */
.product-title-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.product-title-line .product-name-link {
    flex-grow: 1;
    text-decoration: none;
    color: inherit;
}

.product-title-line .product-name {
    margin-bottom: 0; /* Убираем нижний отступ у заголовка */
}

.product-title-line .price {
    flex-shrink: 0; /* Запрещаем цене сжиматься */
    margin-bottom: 0;
}

/* --- Стили для страницы детального просмотра товара --- */

.product-detail-container {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.product-detail-main {
    flex: 3; /* Занимает 3/4 ширины */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.product-detail-secondary {
    flex: 1; /* Занимает 1/4 ширины */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-lg));
}

/* --- Галерея изображений --- */
.product-gallery {
    background-color: var(--color-background-secondary);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
}

.gallery-main-image {
    position: relative;
    width: 100%;
    padding-top: 75%; /* Соотношение 4:3 */
    overflow: hidden;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
}

.gallery-main-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumbnails {
    display: flex;
    flex-wrap: wrap; /* Разрешаем перенос на новую строку */
    gap: var(--spacing-md);
}

.thumbnail-item {
    /* flex: 1; Убираем растягивание */
    flex-basis: calc(20% - var(--spacing-md) * 4 / 5); /* Задаем базовую ширину для 5 колонок с учетом gap */
    max-width: calc(20% - var(--spacing-md) * 4 / 5); /* Ограничиваем максимальную ширину */
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--border-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--transition-speed);
}

.thumbnail-item:hover, .thumbnail-item.active {
    border-color: var(--color-accent-primary);
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Карточка с основной информацией --- */
.product-info-card {
    background-color: var(--color-background-secondary);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
}

.product-title {
    font-size: var(--font-size-h2);
    margin: 0 0 var(--spacing-md) 0;
}

.product-price {
    font-size: var(--font-size-h1);
    font-weight: bold;
    margin-bottom: var(--spacing-lg);
}

.product-actions {
    display: flex;
    flex-direction: column; /* Располагаем кнопки в колонку */
    gap: var(--spacing-md);
}

.btn-favorite, .btn-write-producer {
    padding: var(--spacing-md) var(--spacing-lg);
    width: 100%; /* Растягиваем на всю ширину */
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: background-color var(--transition-speed);
}

.btn-favorite {
    background-color: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.btn-favorite:hover {
    background-color: rgba(255,255,255,0.05);
}

.btn-write-producer {
    background-color: var(--color-accent-primary);
    color: white;
}

.btn-write-producer:hover {
    background-color: var(--color-accent-hover);
}

.product-tags .tag-item {
    display: inline-block;
    background-color: var(--color-background-main);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 4px;
    font-size: 0.9rem;
    margin-right: var(--spacing-sm);
    margin-top: var(--spacing-md); /* Добавим отступ сверху */
}

/* --- Хлебные крошки на странице товара --- */
.product-breadcrumbs {
    background-color: var(--color-background-secondary);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius);
}

.breadcrumb {
    display: flex;
    align-items: center;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.breadcrumb-item {
    color: var(--color-text-secondary);
}

.breadcrumb-item:last-child {
    color: var(--color-text-primary);
    font-weight: 500;
}

.breadcrumb-separator {
    margin: 0 var(--spacing-sm);
    color: var(--color-text-secondary);
}

/* Отключаем стандартный разделитель Bootstrap */
.breadcrumb-item+.breadcrumb-item::before {
    content: none;
}

/* --- Карточки в правой колонке --- */
.producer-card, .product-description-card, .product-specs-card, .product-info-card, .product-actions-card {
    background-color: var(--color-background-secondary);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
}

/* --- Карточки в правой колонке --- */
/* This block is now part of the one above */

.producer-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.producer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.producer-name {
    font-weight: bold;
}

.producer-location {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.btn-view-producer {
    display: block;
    width: 100%;
    text-align: center;
    padding: var(--spacing-sm);
    background-color: var(--color-background-main);
    border-radius: var(--border-radius);
}

/* Стили для модального окна в темной теме */
.modal-content {
    background-color: var(--color-background-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.modal-header {
    border-bottom: 1px solid var(--color-border);
}

.modal-footer {
    border-top: 1px solid var(--color-border);
}

/* Стили для белой кнопки закрытия (крестик) */
.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* --- Стили для карточек товаров в дашборде --- */
#my-products-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.dashboard-product-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    background-color: var(--color-background-secondary);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
}

.dashboard-product-image {
    flex: 0 0 120px; /* Фиксированная ширина для изображения */
    aspect-ratio: 4 / 3;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.dashboard-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-product-info {
    flex-grow: 1; /* Занимает все доступное пространство */
}

.dashboard-product-info h3 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 1.2rem;
}

.dashboard-product-info h3 a {
    text-decoration: none;
    color: inherit;
}

.dashboard-product-info p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.dashboard-product-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 0 0 200px; /* Фиксированная ширина для кнопок */
}

.dashboard-product-stats {
    flex: 0 0 150px; /* Фиксированная ширина для статистики */
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    border-left: 1px solid var(--color-border);
    padding-left: var(--spacing-lg);
}

.dashboard-product-stats p {
    margin: 0;
}

/* Удаляем старые стили filter-container, так как теперь используется search-and-filter-container */
/* .filter-container {
    background-color: var(--color-background-secondary);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

.filter-header {
    margin-bottom: var(--spacing-md);
}

.filter-header a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 500;
}

.filter-header a:hover {
    color: var(--color-text-primary);
} */

.filter-body {
    background-color: var(--color-background-secondary);
    border-radius: var(--border-radius);
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-lg);
}

#filter-materials .form-check {
    background-color: var(--color-background-main);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 4px;
}

/* Стили для выпадающего списка локаций */
.dropdown-menu#location-dropdown-menu {
    max-height: 300px;
    overflow: hidden;
    display: block;
}

.location-list {
    max-height: 200px;
    overflow-y: auto;
}

.location-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.location-item:hover {
    background-color: #f8f9fa;
}

.location-item:last-child {
    border-bottom: none;
}

/* Скрытие меню по умолчанию */
#location-dropdown-menu:not(.show) {
    display: none;
}

/* Стили для выпадающего списка категорий */
.dropdown-menu#category-dropdown-menu {
    max-height: 300px;
    overflow: hidden;
    display: block;
}

.category-list {
    max-height: 200px;
    overflow-y: auto;
}

.category-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.category-item:hover {
    background-color: #f8f9fa;
}

.category-item:last-child {
    border-bottom: none;
}

/* Скрытие меню по умолчанию */
#category-dropdown-menu:not(.show) {
    display: none;
}