/* ==========================================================================
   Базовые стили страницы
   ========================================================================== */
body, html {
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: 'Roboto', sans-serif;
    background-color: #e0e0e0;
    overflow-x: hidden;
}

/* ==========================================================================
   Стили header (шапка)
   ========================================================================== */
/* Основные стили шапки (десктоп) */
#header {
    background-color: #000; /* Чёрный фон для десктопа */
    padding: 10px 20px;
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1001;
    box-shadow: 0 2px 5px rgba(255, 0, 0, 0.3);
    box-sizing: border-box;
}

#header img.logo {
    height: 40px;
    flex-shrink: 0;
}

#header .title {
    margin-left: 20px;
    font-size: 30px;
    font-weight: 300;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff; /* Белый цвет текста */
}

#header .search-container {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

#header .search-container input {
    padding: 5px;
    font-size: 14px;
    border: none;
    border-radius: 3px 0 0 3px;
    background-color: #333; /* Серый фон поля ввода */
    color: #fff;
}

#header .search-container button {
    background-color: #af2222; /* Красный фон кнопки */
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 0 3px 3px 0;
}

#header .search-container button:hover {
    background-color: #8a1b1b; /* Темнее при наведении */
}

#header .header-icons {
    display: none; /* Скрыто в десктопе */
    align-items: center;
    gap: 10px; /* Расстояние между иконками */
}

#header .search-icon {
    cursor: pointer;
    width: 32px; /* Фиксированный размер */
    height: 32px;
}

#header .search-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Сохраняем пропорции */
}

#header .search-container.active {
    display: none; /* Скрыто по умолчанию в десктопе */
    position: absolute;
    top: 50px; /* Чуть выше */
    left: 10%; /* Центрирование */
    width: 80%; /* 80% ширины по центру */
    z-index: 1002; /* Выше карты */
}

#header .search-container.active input {
    width: 100%;
    border-radius: 5px;
    background-color: #fff; /* Белый фон */
    color: #333; /* Тёмный текст */
    font-size: 12px;
    border: 1px solid #ccc; /* Лёгкая рамка */
    padding: 8px;
}

#header .nav-links {
    display: flex;
    align-items: center;
}

#header .bot-link {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: 20px;
}

#header .bot-link:hover {
    color: #af2222;
}

#header .geo-button {
    background-color: #af2222;
    color: #fff;
    border: none;
    padding: 5px 10px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 3px;
}

#header .geo-button:hover {
    background-color: #8a1b1b;
}

#header .hamburger {
    display: none; /* Скрыто в десктопе */
    cursor: pointer;
    width: 32px; /* Фиксированный размер */
    height: 32px;
}

#header .hamburger img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Сохраняем пропорции */
}

/* ==========================================================================
   Стили карты
   ========================================================================== */
#map {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #e0e0e0;
}

/* ==========================================================================
   Стили контента (list.html)
   ========================================================================== */
#content {
    margin-top: 60px;
    padding: 20px;
    padding-bottom: 60px;
    box-sizing: border-box;
    min-height: calc(100vh - 120px);
    overflow-y: auto;
    background-color: #e0e0e0;
    color: #000;
}

#statistics {
    text-align: center;
    margin-bottom: 20px;
    font-size: 16px;
    color: #666;
}

/* ==========================================================================
   Стили индикатора загрузки
   ========================================================================== */
#loading-indicator {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    z-index: 1001;
    display: none;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 3px;
}

.spinner {
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-left: 3px solid #af2222;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Стили элементов карты (тултипы, иконки, попапы)
   ========================================================================== */
/* Тултипы с именами */
.custom-tooltip-name {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #af2222;
    border-radius: 5px;
    padding: 3px 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #af2222;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    min-width: 100px; /* Минимальная ширина для коротких названий */
    max-width: 200px; /* Максимальная ширина тултипа */
    line-height: 1.2;
    z-index: 1000 !important;
    display: inline-block;
    position: relative;
    left: 50%; /* Смещаем влево на 50% от родительского контейнера */
    transform: translateX(-50%); /* Центрируем относительно своей ширины */
}

div.custom-tooltip-name.partner-tooltip-name {
    border: 1px solid #0088cc !important;
    color: #0088cc !important;
    left: 50%;
    transform: translateX(-50%);
}

div.custom-tooltip-name.partner-tooltip-name.premium-partner-tooltip {
    border: 1px solid #0088cc !important;
    color: #0088cc !important;
}

.leaflet-container .custom-tooltip-name a {
    color: #af2222 !important;
    text-decoration: none;
}

.leaflet-container .custom-tooltip-name a:hover {
    text-decoration: underline;
}

/* Иконки на карте */
.custom-icon {
    border: 2px solid #af2222 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    box-sizing: border-box;
}

.leaflet-marker-icon {
    max-width: none !important;
    max-height: none !important;
}

.partner-icon {
    border: 2px solid #0088cc !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    box-sizing: border-box;
}

.premium-partner-icon {
    border: 5px solid #0088cc !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    box-sizing: border-box;
}

.group-member-icon {
    border: 3px solid #ffd700 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

/* Попапы на карте */
.custom-popup {
    padding: 5px;
}

.custom-popup .profile-img {
    width: 200px !important;
    height: 200px !important;
    object-fit: cover !important;
    display: block;
    margin: 2px auto;
}

.custom-popup p {
    margin: 2px 0;
}

.custom-popup .partner-name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.custom-popup .partner-name a {
    color: #0088cc;
    text-decoration: none;
}

.custom-popup .partner-name a:hover {
    text-decoration: underline;
}

.contact-icons {
    display: flex;
    gap: 10px;
    margin-top: 2px;
    margin-bottom: 8px;
    justify-content: center;
    align-items: center;
}

/* Стили для ссылок и иконок */
.phone-link, .telegram-link, .whatsapp-link, .url-link, .yandex-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    background: transparent !important;
}

/* Стили для иконок */
.phone-icon, .telegram-icon, .whatsapp-icon, .url-icon {
    width: 32px;
    height: 32px;
    font-size: 32px;
    display: inline-block;
    line-height: 32px;
    text-align: center;
    background: transparent !important;
    box-shadow: none !important;
}

.yandex-icon {
    width: 32px;
    height: 32px;
    display: inline-block;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain;
}

.custom-popup .partner-name .inline-telegram.telegram-link, .custom-popup .partner-name .inline-yandex.yandex-link {
    background: transparent !important;
    box-shadow: none !important;
    margin-left: 1px !important; /* Уменьшаем расстояние до 1px */
    margin-right: 0 !important; /* Убираем возможные правые отступы */
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.custom-popup .inline-telegram .telegram-icon, .custom-popup .inline-yandex .yandex-icon {
    background: transparent !important;
    box-shadow: none !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    font-size: 20px !important;
    vertical-align: middle;
}

.telegram-icon { color: #0088cc; }
.whatsapp-icon { color: #25D366; }
.url-icon { color: #0088cc; }

.delete-icon {
    color: red;
    cursor: pointer;
    margin-left: 5px;
}

/* Стили для раскрывающихся полей */
.details-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 2px;
    text-align: center;
    color: #af2222;
    font-size: 14px;
    transition: transform 0.2s ease;
}

.details-toggle:hover {
    transform: scale(1.1); /* Лёгкое увеличение при наведении */
}

.details-toggle i {
    width: 20px;
    height: 20px;
    line-height: 20px; /* Центрируем по вертикали */
    text-align: center; /* Центрируем по горизонтали */
    background-color: #af2222;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.details-toggle span {
    font-weight: 500;
}

.details-content {
    display: none;
    margin-top: 2px;
}

/* ==========================================================================
   Стили футера
   ========================================================================== */
#footer {
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 1001;
    font-size: 14px;
}

#footer a {
    color: #ccc;
    text-decoration: none;
}

#footer a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Стили элементов list.html (фильтры, таблицы, пагинация)
   ========================================================================== */
/* Фильтры */
.filter-form {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.filter-form label {
    margin-right: 10px;
    font-weight: bold;
    color: #333;
    font-size: 14px;
    display: flex;
    align-items: center;
    height: 34px;
}

.filter-form input, .filter-form select {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    color: #333;
    height: 34px;
    box-sizing: border-box;
    font-size: 14px;
}

.filter-form input {
    flex: 1;
    min-width: 200px;
}

.filter-form select {
    min-width: 150px;
}

.filter-form button {
    padding: 5px 15px;
    background-color: #af2222;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    height: 34px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.filter-form button:hover {
    background-color: #8a1b1b;
}

.filter-toggle {
    display: none;
    cursor: pointer;
    background-color: #8a1b1b;
    color: #fff;
    padding: 8px 15px;
    border-radius: 5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.filter-icon {
    display: inline-flex;
    align-items: center;
}

.plus-icon, .minus-icon {
    width: 16px;
    height: 16px;
}

.filter-label {
    font-size: 14px;
    font-weight: bold;
    color: #fff !important;
}

/* Вкладки */
.tabs {
    display: flex;
    border-bottom: 2px solid #af2222;
    margin-bottom: 20px;
}

.tab {
    padding: 10px 20px;
    cursor: pointer;
    background-color: #d0d0d0;
    color: #333;
    border: none;
    font-size: 16px;
    transition: background-color 0.3s;
}

.tab:hover {
    background-color: #b0b0b0;
}

.tab.active {
    background-color: #af2222;
    color: #fff;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Таблица */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    color: #333;
}

th {
    background-color: #af2222;
    cursor: pointer;
    color: #fff;
}

th a {
    color: #fff;
    text-decoration: none;
}

th a:hover {
    text-decoration: underline;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

.action-buttons button {
    padding: 5px;
    margin-right: 5px;
    cursor: pointer;
    border: none;
    border-radius: 3px;
}

.approve-btn {
    background-color: #4CAF50;
    color: white;
}

.delete-btn {
    background-color: #f44336;
    color: white;
}

.ban-btn {
    background-color: #666;
    color: white;
    padding: 5px;
    margin-left: 5px;
    cursor: pointer;
    border: none;
    border-radius: 3px;
}

.ban-btn:hover {
    background-color: #555;
}

.no-users {
    text-align: center;
    color: #666;
    margin-top: 20px;
}

/* Обновлено: Ячейка имени/названия */
.list-name-cell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
}

.list-name-link {
    color: #af2222;
    text-decoration: none;
    font-weight: bold;
    flex: 1;
    min-width: 0;
    white-space: normal;
}

.list-name-link:hover {
    text-decoration: underline;
}

.expand-icon {
    cursor: pointer;
    color: #af2222;
    font-size: 16px;
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    flex-shrink: 0;
}

.expand-icon:hover {
    color: #d32f2f;
}

.list-contact-links {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.list-phone-link, .list-telegram-link, .list-whatsapp-link, .list-geo-link, .list-url-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

.list-phone-icon, .list-telegram-icon, .list-whatsapp-icon, .list-geo-icon, .list-url-icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
    display: inline-block;
    line-height: 16px;
    text-align: center;
}

.list-phone-icon {
    background-color: #28a745;
    border-radius: 4px;
}

.list-telegram-icon {
    color: #0088cc;
}

.list-whatsapp-icon {
    color: #25D366;
}

.list-geo-icon, .list-url-icon {
    color: #0088cc;
}

.list-geo-link {
    color: #0088cc;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.list-geo-link:hover {
    color: #005f99;
}

.list-geo-link svg {
    width: 16px;
    height: 16px;
}

.list-premium-partner {
    background-color: #ffebee;
    border-left: 4px solid #af2222;
}

/* Обновлено: Раскрывающееся содержимое */
.expanded-content {
    display: none;
    transition: all 0.3s ease;
}

.expanded-row + .expanded-content {
    display: table-row;
}

.expanded-content-inner {
    padding: 10px;
    background-color: #fff;
    border-top: 1px solid #ddd;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Обновлено: Центрирование изображения в раскрытом аккордионе */
.expanded-content-inner img {
    max-width: 400px;
    width: auto; /* Убираем width: 100%, чтобы изображение не растягивалось */
    height: auto;
    border-radius: 5px;
    margin: 0 auto 10px auto; /* Центрируем изображение */
    display: block;
}

.expanded-content-inner p {
    margin: 8px 0;
    font-size: 14px;
    color: #333;
    padding: 0 10px;
}

.expanded-content .list-contact-links {
    display: flex;
    justify-content: center;
    margin: 10px 0;
    gap: 12px;
    padding: 0 10px;
}

.expanded-content .list-phone-icon,
.expanded-content .list-telegram-icon,
.expanded-content .list-whatsapp-icon,
.expanded-content .list-geo-icon,
.expanded-content .list-url-icon {
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 24px;
}

/* Пагинация */
.pagination {
    text-align: center;
    margin-top: 20px;
}

.pagination a, .pagination span {
    color: #af2222;
    padding: 5px 10px;
    text-decoration: none;
    margin: 0 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
}

.pagination a:hover {
    background-color: #f0f0f0;
}

.pagination .current {
    background-color: #af2222;
    color: #fff;
    border: 1px solid #af2222;
}

/* ==========================================================================
   Стили выпадающего списка городов
   ========================================================================== */
#city-options {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #000;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    max-width: 90%;
    text-align: center;
}

#city-options button {
    display: block;
    width: 100%;
    padding: 5px;
    margin: 5px 0;
    background-color: #f0f0f0;
    color: #000;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
    white-space: normal;
}

#city-options button:hover {
    background-color: #d0d0d0;
}

/* ==========================================================================
   Стили иконки геолокации
   ========================================================================== */
#geo-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    background-color: #fff;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

#geo-icon:hover {
    background-color: #f0f0f0;
}

#geo-icon svg {
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   Стили уведомительного баннера
   ========================================================================== */
.notification {
    display: none;
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 600px;
    background-color: #fff;
    color: #333;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.notification.show {
    opacity: 1;
}

.notification-content {
    position: relative;
}

.notification-close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #af2222;
    cursor: pointer;
    transition: color 0.2s;
}

.notification-close:hover {
    color: #8a1b1b;
}

.notification h2 {
    font-size: 22px;
    color: #af2222;
    margin: 0 0 15px 0;
    text-align: center;
}

.notification p {
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}

.notification ol {
    padding-left: 20px;
    margin: 8px 0;
}

.notification ol li {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}

.notification a {
    color: #af2222;
    text-decoration: none;
    font-weight: bold;
}

.notification a:hover {
    color: #666666;
    text-decoration: underline;
}

/* ==========================================================================
   Стили кнопок управления масштабом карты
   ========================================================================== */
.leaflet-control-zoom {
    margin-top: 70px !important;
}

/* ==========================================================================
   Стили заголовков в list.html
   ========================================================================== */
h2 {
    color: #af2222;
    margin-top: 40px;
}

/* ==========================================================================
   Медиа-запросы для мобильной версии (< 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Header для index.html (с картой) */
    #header {
        background: none; /* Убираем фон для наложения на карту */
        padding: 10px;
        justify-content: space-between;
        position: absolute; /* Наложение на карту */
        box-shadow: none; /* Убираем тень, чтобы не перекрывать контент */
    }

    /* Header для list.html (без карты) */
    body.list-page #header {
        background-color: #000; /* Оставляем чёрный фон */
        position: fixed; /* Оставляем фиксированное положение */
        box-shadow: none;
    }

    /* Цвет иконки бургер-меню для list.html */
    body.list-page #header .hamburger svg {
        fill: #fff; /* Делаем иконку белой */
    }

    #header .title {
        display: none; /* Убираем "RAM КАРТА" */
    }
    #header .search-container {
        display: none; /* Скрываем десктопный поиск */
    }
    #header .search-container.active {
        display: block; /* Показываем при активации */
        top: 50px; /* Чуть выше */
        left: 10%; /* Центрирование */
        width: 80%; /* 80% ширины по центру */
        z-index: 1002; /* Выше карты */
    }
    #header .header-icons {
        display: flex; /* Показываем контейнер с иконками */
    }
    #header .search-icon {
        display: block; /* Показываем иконку поиска */
        margin-left: 0;
        margin-right: 10px; /* Расположение рядом с гамбургером */
    }
    #header .geo-button {
        display: none; /* Убираем кнопку "Где я?" */
    }
	#header .nav-links {
	        display: none;
	        position: absolute;
	        top: 60px;
	        right: 10px;
	        background-color: #1a1a1a;
	        flex-direction: column;
	        padding: 10px;
	        border-radius: 5px;
	        box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
	        z-index: 1002;
	    }
    #header .nav-links.active {
        display: flex;
    }
	#header .bot-link {
	        font-size: 18px; /* Увеличиваем шрифт с 14px до 18px */
	        margin-left: 0;
	        margin-bottom: 10px;
	        text-align: left; /* Выравниваем текст влево */
	    }
    #header .bot-link:last-child {
        margin-bottom: 0;
    }
    #header .hamburger {
        display: block; /* Показываем гамбургер-меню */
    }

    /* Тултипы */
    .custom-tooltip-name {
        max-width: 120px; /* Уменьшаем максимальную ширину тултипа */
        font-size: 10px;
        padding: 2px 6px;
        left: 50%;
        transform: translateX(-50%);
    }
    div.custom-tooltip-name.partner-tooltip-name {
        max-width: 120px; /* Уменьшаем максимальную ширину тултипа для партнеров */
        left: 50%;
        transform: translateX(-50%);
    }

    /* Контент */
	#content {
	        margin-top: 70px; /* Увеличиваем отступ сверху с 60px до 70px, чтобы учесть высоту шапки */
	        padding: 0; /* Убираем отступы, чтобы карточки растянулись до краёв */
	        padding-bottom: 50px;
	        width: 100%;
	        box-sizing: border-box;
	    }

    /* Добавляем отступы для дочерних элементов, чтобы компенсировать убирание padding у #content */
    #content > #statistics,
    #content > .filter-toggle,
    #content > .filter-form,
    #content > h2,
    #content > .no-users,
    #content > .pagination {
        padding: 0 10px;
    }

    #statistics {
        font-size: 14px;
    }

    /* Фильтры */
    .filter-form {
        padding: 10px;
        flex-direction: column;
        gap: 8px;
        display: none;
    }
    .filter-toggle {
        display: flex;
    }
    .filter-form label {
        margin-bottom: 0;
        height: 30px;
        font-size: 12px;
    }
    .filter-form input, .filter-form select {
        width: 100%;
        margin-right: 0;
        margin-bottom: 0;
        height: 30px;
        font-size: 12px;
    }
    .filter-form button {
        width: 100%;
        height: 30px;
        font-size: 12px;
    }

    /* Обновлено: Таблица (убраны боковые отступы для карточек в закрытом состоянии) */
    table {
        display: block;
        padding: 0; /* Убраны боковые отступы */
        margin: 0;
        width: 100% !important;
        box-sizing: border-box;
    }

    thead {
        display: none;
    }

    tr.accordion-row {
        display: block;
        margin-bottom: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #fff;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
    }

    tr.accordion-row td {
        display: block;
        text-align: left;
        padding: 8px 10px; /* Отступы внутри карточки */
        border: none;
        width: 100% !important;
        box-sizing: border-box;
    }

    td.list-name-cell {
        font-size: 16px;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        width: 100% !important;
    }

    td.list-name-cell .list-name-link {
        flex: 1;
        font-size: 14px;
    }

    tr.accordion-row td:not(.list-name-cell) {
        font-size: 14px;
        color: #333;
        width: 100% !important;
    }

    tr.expanded-content {
        display: none;
        width: 100% !important;
        margin: 0;
    }

    tr.expanded-row + tr.expanded-content {
        display: block;
        border-top: 1px solid #ddd;
        width: 100% !important;
        margin: 0;
    }

    tr.expanded-content td {
        padding: 0;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    .expanded-content-inner {
        padding: 10px;
        text-align: center;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 0 0 5px 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* Обновлено: Центрирование изображения в раскрытом аккордионе */
    .expanded-content-inner img {
        max-width: 500px;
        width: auto; /* Убираем width: 100%, чтобы изображение не растягивалось */
        height: auto;
        border-radius: 5px;
        margin: 0 auto 10px auto; /* Центрируем изображение */
        display: block;
    }

    .expanded-content-inner p {
        font-size: 14px;
        padding: 0 10px;
        margin: 8px 0;
        width: 100%;
        box-sizing: border-box;
    }

    .date-created, .date-updated, .status-mobile {
        display: none;
    }

    .date-mobile, .status-mobile {
        display: block;
    }

    tr.accordion-row td.action-buttons {
        display: flex;
        justify-content: flex-start;
        gap: 5px;
        padding: 8px 10px;
        width: 100%;
    }

    tr.accordion-row td.action-buttons button {
        padding: 3px 6px;
        font-size: 12px;
    }

    .expanded-content .list-contact-links {
        justify-content: flex-start;
        gap: 10px;
        padding: 0 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .list-contact-links {
        gap: 6px;
    }

    .list-phone-icon, .list-telegram-icon, .list-whatsapp-icon, .list-geo-icon, .list-url-icon {
        width: 12px;
        height: 12px;
        font-size: 12px;
    }

    .expanded-content .list-phone-icon,
    .expanded-content .list-telegram-icon,
    .expanded-content .list-whatsapp-icon,
    .expanded-content .list-geo-icon,
    .expanded-content .list-url-icon {
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 20px;
    }

    .list-geo-link svg {
        width: 12px;
        height: 12px;
    }

    /* Вкладки */
    .tabs {
        flex-direction: row;
        flex-wrap: nowrap; /* Убираем перенос, вкладки в одну линию */
        overflow-x: auto; /* Добавляем горизонтальную прокрутку */
        white-space: nowrap; /* Запрещаем перенос текста */
        gap: 5px;
        -webkit-overflow-scrolling: touch; /* Плавная прокрутка на iOS */
    }
    .tab {
        padding: 6px 12px; /* Уменьшаем отступы */
        font-size: 12px; /* Уменьшаем шрифт */
        flex: 0 0 auto; /* Запрещаем растяжку вкладок */
        text-align: center;
    }

    /* Пагинация */
    .pagination a, .pagination span {
        padding: 3px 6px;
        font-size: 12px;
    }

    /* Выпадающий список городов */
    #city-options {
        top: 110px;
        max-width: 80%;
    }
    #city-options button {
        font-size: 12px;
        padding: 3px;
    }

    /* Кнопки масштаба */
    .leaflet-control-zoom {
        margin-top: 120px !important;
    }

    /* Уведомления */
    .notification {
        top: 60px;
        max-width: 90%;
        padding: 10px;
    }
    .notification h2 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    .notification p, .notification ol li {
        font-size: 12px;
        margin: 6px 0;
    }
    .notification ol {
        padding-left: 15px;
        margin: 6px 0;
    }
    .notification-close {
        font-size: 18px;
        top: 3px;
    }

    /* Тултипы */
    .custom-tooltip-name {
        font-size: 10px;
        padding: 2px 6px;
    }
}

/* ==========================================================================
   Медиа-запросы для десктопных фильтров (> 768px)
   ========================================================================== */
@media (min-width: 769px) {
    .filter-form {
        display: flex !important;
    }
    .filter-toggle {
        display: none !important;
    }
}