/* === ГЛОБАЛЬНЫЕ СТИЛИ ДЛЯ ЯКОРНОГО МЕНЮ (ВСЕ УСТРОЙСТВА) === */

/* 1. Гарантируем, что основное меню выше якорного */
header,
.navbar,
[class*="header"] {
    z-index: 10000 !important;
    position: relative !important;
}

/* 2. ОСНОВНЫЕ СТИЛИ ДЛЯ ЯКОРНОГО МЕНЮ:
   На десктопе - sticky, на мобильных - fixed (через медиазапрос) */
.main-top.card.position-sticky.top-0.section-maint-top {
    position: sticky; /* Работает на десктопе */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 19999 !important; /* Ниже основной шапки */
    background: white !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; /* Исправлено: 0 вместо 1 */
}

/* 3. Стили для внутреннего контейнера */
.main-top .card-body {
    padding: 10px 15px !important;
    margin: 0 !important;
}

/* === АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ (ГОРИЗОНТАЛЬНАЯ ПРОКРУТКА) === */
@media (max-width: 768px) {
    /* 1. ФИКСИРУЕМ КОНТЕЙНЕР - компактный, только для одной строки */
    [class*="main-top"].card.position-sticky {
        position: fixed !important;
        top: 80px !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background: white !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 60px !important; /* Фиксированная высота для одной строки */
        overflow: hidden !important; /* Прячем всё, что выходит за пределы */
    }
    
    /* 2. ВНУТРЕННИЙ КОНТЕЙНЕР - убираем вертикальные отступы */
    [class*="main-top"] .card-body {
        padding: 10px 15px !important;
        margin: 0 !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* 3. НАВИГАЦИЯ - ГОРИЗОНТАЛЬНАЯ ПРОКРУТКА */
    [class*="main-top"] .mod-custom nav,
    [class*="main-top"] .card-body > nav,
    [class*="main-top"] nav {
        display: flex !important;
        flex-direction: row !important; /* Горизонтально! */
        flex-wrap: nowrap !important; /* Не переносить на новую строку */
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow-x: auto !important; /* Горизонтальная прокрутка */
        overflow-y: hidden !important;
        align-items: center !important;
        -webkit-overflow-scrolling: touch !important; /* Плавная прокрутка на iOS */
        
        /* Скрываем стандартный скроллбар для красоты */
        scrollbar-width: none !important; /* Firefox */
    }
    
    /* Скрываем скроллбар в Chrome/Safari */
    [class*="main-top"] nav::-webkit-scrollbar {
        display: none !important;
    }
    
   /* На мобильных устройствах скрываем оригинальное меню */
@media (max-width: 768px) {
    .main-top.card.position-sticky.top-0.section-maint-top {
        display: none !important;
    }
}

  /* ФИКС Z-INDEX: чтобы меню было ПОВЕРХ всего контента */
@media (max-width: 768px) {
    /* 1. Основной контейнер меню - ОЧЕНЬ высокий z-index */
    .main-top.card.position-sticky.top-0.section-maint-top {
        z-index: 999999 !important; /* Увеличиваем в 100 раз */
        isolation: isolate !important; /* Создаём новый контекст наложения */
    }
    
    /* 2. Когда меню развёрнуто - оно должно быть поверх ВСЕГО */
    .main-top.card.position-sticky.top-0.section-maint-top.expanded,
    .main-top.card.position-sticky.top-0.section-maint-top.menu-open {
        z-index: 999999 !important;
    }
    
    /* 3. Сама навигация внутри */
    .main-top nav {
        z-index: 999999 !important;
        position: relative !important;
    }
    
    /* 4. Убеждаемся, что контент НИЖЕ меню */
    .container,
    .container-fluid,
    .content,
    .row,
    .col,
    [class*="col-"],
    section,
    article,
    div:not(.main-top) {
        z-index: auto !important;
        position: relative !important;
    }
    
    /* 5. Если есть модальные окна или другие элементы - они должны быть выше */
    .modal,
    .popup,
    [class*="modal"],
    [class*="popup"] {
        z-index: 1000000 !important; /* Ещё выше чем меню */
    }
}