/**
 * Mobile Menu Styles
 * Стили для мобильного меню категорий
 */

/* Основные стили для мобильных устройств */
@media (max-width: 767px) {
    
    /* Кнопка мобильного меню */
    .mobile-menu-toggle {
        display: block !important;
        position: relative;
        background: #586db4;
        color: white;
        border: none;
        padding: 12px 20px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        text-decoration: none;
        text-align: center;
        margin: 10px 0;
        border-radius: 5px;
        transition: all 0.3s ease;
    }
    
    .mobile-menu-toggle:hover {
        background: #4a5a9c;
        color: white;
        text-decoration: none;
    }
    
    .mobile-menu-toggle:active {
        transform: scale(0.98);
    }
    
    /* Иконка гамбургера */
    .mobile-menu-toggle::before {
        content: "☰";
        margin-right: 8px;
        font-size: 16px;
    }
    
    /* Скрытие десктопной кнопки каталога */
    #menuCatalogActivate {
        display: none !important;
    }
    
    /* Мобильное меню категорий */
    .menu-category-fix {
        width: 85% !important;
        max-width: 320px !important;
        margin: 0 !important;
        left: -320px;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    
    .menu-category-fix-active .menu-category-fix {
        left: 0;
    }
    
    /* Улучшенная кнопка закрытия */
    .menu-category-fix .close-menu-category {
        position: sticky;
        top: 0;
        background: #586db4 !important;
        color: white !important;
        z-index: 100;
        font-size: 14px !important;
        padding: 15px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        margin-bottom: 0;
    }
    
    .menu-category-fix .close-menu-category::before {
        content: "✕ ";
        font-weight: bold;
    }
    
    /* Стили для ссылок меню */
    .menu-category-fix .link {
        position: relative;
        padding: 15px 20px !important;
        font-size: 14px !important;
        border-bottom: 1px solid #e5e5e5;
        transition: background-color 0.2s ease;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }
    
    .menu-category-fix .link:hover,
    .menu-category-fix .link:active {
        background-color: #f8f8f8 !important;
        color: #586db4 !important;
    }
    
    /* Иконка раскрытия для мобильных */
    .toggle-icon {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        color: #999;
        transition: transform 0.2s ease;
    }
    
    .open > .link .toggle-icon {
        transform: translateY(-50%) rotate(90deg);
    }
    
    /* Кнопка "назад" */
    .back-to-parent {
        display: flex;
        align-items: center;
        padding: 12px 20px !important;
        background: #f5f5f5 !important;
        border-bottom: 2px solid #e0e0e0 !important;
        font-size: 13px !important;
        color: #666 !important;
        font-weight: bold;
    }
    
    .back-icon {
        margin-right: 8px;
        font-size: 16px;
        font-weight: bold;
    }
    
    .back-to-parent:hover {
        background: #ebebeb !important;
        color: #333 !important;
    }
    
    /* Подменю для мобильных */
    .menu-category-fix .expanded ul.menu {
        position: fixed !important;
        top: 0 !important;
        left: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 1200 !important;
        transition: left 0.3s ease;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    }
    
    .menu-category-fix .expanded.open > ul.menu {
        left: 0 !important;
    }
    
    /* Стили для элементов подменю */
    .menu-category-fix ul > li > ul > li > a {
        padding: 15px 20px !important;
        font-size: 14px !important;
        border-bottom: 1px solid #f0f0f0;
        color: #333 !important;
        transition: all 0.2s ease;
    }
    
    .menu-category-fix ul > li > ul > li > a:hover,
    .menu-category-fix ul > li > ul > li > a:active {
        background-color: #586db4 !important;
        color: white !important;
    }
    
    /* Загрузка индикатора */
    .link-loaded {
        padding: 20px !important;
        text-align: center !important;
        color: #999 !important;
        font-style: italic;
    }
    
    /* Оверлей для мобильных */
    #overlay {
        background: rgba(0,0,0,0.5) !important;
        backdrop-filter: blur(2px);
    }
    
    /* Улучшение скролла */
    .menu-category-fix,
    .menu-category-fix ul.menu {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Активные состояния */
    .menu-category-fix .link:active {
        background-color: #586db4 !important;
        color: white !important;
    }
    
    /* Скрытие иконок десктопной версии */
    .menu-category-fix ul > li span.close-icon {
        display: none !important;
    }
    
    /* Улучшение для touch устройств */
    .menu-category-fix * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .menu-category-fix .link {
        -webkit-tap-highlight-color: rgba(88, 109, 180, 0.1);
    }
    
    /* Адаптация для маленьких экранов */
    @media (max-width: 480px) {
        .menu-category-fix {
            width: 90% !important;
            max-width: 280px !important;
        }
        
        .menu-category-fix .link {
            padding: 12px 15px !important;
            font-size: 13px !important;
        }
        
        .back-to-parent {
            padding: 10px 15px !important;
            font-size: 12px !important;
        }
    }
    
    @media (max-width: 320px) {
        .menu-category-fix {
            width: 95% !important;
            max-width: 260px !important;
        }
        
        .mobile-menu-toggle {
            font-size: 12px;
            padding: 10px 15px;
        }
    }
}

/* Десктопные стили (не изменяем) */
@media (min-width: 768px) {
    .mobile-menu-toggle {
        display: none !important;
    }
    
    /* Восстанавливаем оригинальные десктопные стили */
    .menu-category-fix {
        left: auto;
        transition: none;
    }
    
    .menu-category-fix .expanded ul.menu {
        position: fixed !important;
        left: auto !important;
        margin-left: 240px !important;
        top: 0;
        bottom: 0;
        width: 240px;
        background-color: #3c3c3c;
        transition: none;
    }
    
    .menu-category-fix .expanded.depth-0 > ul.menu {
        margin-left: 300px !important;
    }
    
    .toggle-icon,
    .back-to-parent {
        display: none !important;
    }
}

/* Общие улучшения */
.menu-category-fix {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Smooth transitions */
.menu-category-fix ul.menu,
.menu-category-fix .link {
    transition: all 0.2s ease;
}

/* Улучшение доступности */
.menu-category-fix .link:focus {
    outline: 2px solid #586db4;
    outline-offset: -2px;
}

.mobile-menu-toggle:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}