/**
 * Стили для мобильного меню
 *
 * @package TaycanEvgeniiMudrenko
 */

/* Скрываем мобильное меню и мобильный хедер на десктопах */
@media (min-width: 993px) {
    .mobile-menu-overlay,
    .mobile-menu-container,
    .mobile-header {
        display: none !important;
    }

    .header-top .mobile-menu-toggle {
        display: none;
    }
}

/* Общий класс для элементов, видимых только на мобильных устройствах */
.mobile-only {
    display: none;
}

@media (max-width: 992px) {
    .mobile-only {
        display: block;
    }

    /* Для flex-контейнеров */
    .mobile-only.flex,
    .mobile-header {
        display: flex;
    }
}

/* Стили для мобильных устройств */
@media (max-width: 992px) {
    /* Скрываем десктопный хедер */
    .header {
        display: none !important;
    }

    /* Показываем мобильный хедер только на мобильных устройствах */
    .mobile-header {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        z-index: 99999;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        transition: transform 0.3s ease;
    }

    /* Гарантируем, что мобильный хедер не будет виден на десктопах */
    @media (min-width: 993px) {
        .mobile-header {
            display: none !important;
        }
    }

    /* Когда меню открыто, хедер находится под меню */
    body.mobile-menu-open .mobile-header {
        z-index: 99998;
    }

    /* Стили для логотипа в мобильном хедере */
    .mobile-header-logo {
        max-height: 40px;
        display: flex;
        align-items: center;
    }

    .mobile-header-logo img,
    .mobile-logo img,
    .custom-logo.mobile-only {
        max-height: 40px;
        width: auto;
    }

    /* Скрытие мобильного логотипа на десктопах */
    @media (min-width: 993px) {
        .mobile-header-logo,
        .mobile-logo,
        .custom-logo.mobile-only {
            display: none !important;
        }
    }

    /* Скрываем десктопное меню */
    .header-nav {
        display: none;
    }

    /* Кнопка бургер-меню */
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 22px;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 100005; /* Увеличиваем z-index чтобы кнопка была поверх всего */
        position: relative;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #0071CE;
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    /* Стили для активной кнопки бургер-меню */
    .mobile-menu-toggle.active {
        position: relative;
        z-index: 100005; /* Выше чем контейнер меню */
    }

    .mobile-menu-toggle.active span:nth-child(1) {
        transform: translateY(9.5px) rotate(45deg);
        background-color: #0071CE; /* Цвет как у неактивной кнопки */
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: translateY(-9.5px) rotate(-45deg);
        background-color: #0071CE; /* Цвет как у неактивной кнопки */
    }

    /* Затемнение фона при открытом меню */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 100000;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Контейнер мобильного меню */
    .mobile-menu-container {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 85%;
        max-width: 360px;
        background: #ffffff;
        z-index: 100001;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
    }

    /* Верхняя часть меню с логотипом */
    .mobile-menu-header {
        padding: 20px 20px 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(0, 113, 206, 0.1);
    }

    .mobile-menu-logo {
        display: flex;
        align-items: center;
    }

    .mobile-menu-logo img {
        max-height: 40px;
        width: auto;
    }

    .mobile-menu-close {
        color: #0071CE;
        background: transparent;
        border: none;
        font-size: 28px;
        cursor: pointer;
        padding: 5px;
        opacity: 0.8;
    }

    /* Навигация в мобильном меню */
    .mobile-menu-nav {
        padding: 20px 0;
    }

    .mobile-menu-nav-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-menu-nav-item {
        border-bottom: 1px solid rgba(0, 113, 206, 0.1);
    }

    .mobile-menu-nav-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        color: #0071CE;
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        transition: background-color 0.2s;
    }

    .mobile-menu-nav-link:hover,
    .mobile-menu-nav-link:focus {
        background-color: rgba(0, 113, 206, 0.05);
    }

    .mobile-menu-nav-link.has-children {
        position: relative;
    }

    .mobile-submenu-toggle {
        background: transparent;
        border: none;
        color: #0071CE;
        width: 40px;
        height: 40px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .mobile-submenu-toggle svg {
        transition: transform 0.3s ease;
    }

    .mobile-submenu-toggle.active svg {
        transform: rotate(180deg);
    }

    /* Выпадающее подменю */
    .mobile-submenu {
        display: none;
        background-color: rgba(0, 113, 206, 0.05);
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .mobile-submenu.active {
        display: block;
    }

    .mobile-submenu-item {
        border-bottom: 1px solid rgba(0, 113, 206, 0.05);
    }

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

    .mobile-submenu-link {
        display: block;
        padding: 12px 20px 12px 40px;
        color: rgba(0, 113, 206, 0.8);
        text-decoration: none;
        font-size: 15px;
        transition: background-color 0.2s;
    }

    .mobile-submenu-link:hover,
    .mobile-submenu-link:focus {
        background-color: rgba(0, 113, 206, 0.08);
    }

    /* Контактная информация внизу меню */
    .mobile-menu-contacts {
        padding: 20px;
        border-top: 1px solid rgba(0, 113, 206, 0.1);
    }

    .mobile-contact-item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        color: #0071CE;
        text-decoration: none;
    }

    .mobile-contact-item svg {
        margin-right: 12px;
        flex-shrink: 0;
    }

    .mobile-contact-item:last-child {
        margin-bottom: 0;
    }

    /* Социальные иконки */
    .mobile-social-icons {
        padding: 0 20px 20px;
        display: flex;
        gap: 15px;
    }

    .mobile-social-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba(0, 113, 206, 0.1);
        color: #0071CE;
        text-decoration: none;
        transition: background-color 0.2s;
    }

    .mobile-social-icon:hover {
        background-color: rgba(0, 113, 206, 0.2);
    }

    /* Кнопка "Заказать звонок" */
    .mobile-call-button {
        display: block;
        margin: 0 20px 20px;
        padding: 14px 20px;
        background-color: #0071CE;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-weight: 700;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.2s;
    }

    .mobile-call-button:hover {
        background-color: #005baa;
    }

    /* Активные состояния */
    .mobile-menu-overlay.active {
        display: block;
        opacity: 1;
    }

    .mobile-menu-container.active {
        display: block;
        transform: translateX(0);
    }

    /* Верхний отступ для первого элемента меню */
    .mobile-menu-header {
        margin-top: 0;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    /* Анимации для мобильного меню */
    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .mobile-menu-nav-item {
        animation: fadeInRight 0.3s ease forwards;
        opacity: 0;
    }

    .mobile-menu-nav-item:nth-child(1) { animation-delay: 0.1s; }
    .mobile-menu-nav-item:nth-child(2) { animation-delay: 0.15s; }
    .mobile-menu-nav-item:nth-child(3) { animation-delay: 0.2s; }
    .mobile-menu-nav-item:nth-child(4) { animation-delay: 0.25s; }
    .mobile-menu-nav-item:nth-child(5) { animation-delay: 0.3s; }
    .mobile-menu-nav-item:nth-child(6) { animation-delay: 0.35s; }
    .mobile-menu-nav-item:nth-child(7) { animation-delay: 0.4s; }
    .mobile-menu-nav-item:nth-child(8) { animation-delay: 0.45s; }
}