/* Общие стили для 1200px и меньше */
@media (max-width: 1300px) {
    .logo-description {
        display: none;
    }
}

@media (max-width: 1200px) {
    /* Основные стили меню */
    .nav-menu {
        flex-direction: column;
    }

    .nav-menu__container {
        margin: 0;
        padding: 0;
    }

    .nav-menu__item {
        display: flex;
        width: 100%;
        padding: 15px 10px;
    }

    .nav-menu__item:hover{
        background: #0a7aff;
        color: #fff;
    }

    .nav-menu__item:before{
        display: none;
    }

    .nav-menu__item.active{
        background: #0a7aff;
        color: #fff;
    }

    /* Стили подменю */
    .nav-submenu {
        margin-top: 59px;
        height: 100vh;
        z-index: 99999;
        box-shadow: none;
        overflow-x: hidden;
    }

    .nav-submenu__container {
        height: calc(100vh - 60px);
        background: #fff;
        position: fixed;
        width: 100%;
        overflow: scroll;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
    }

    .nav-submenu__columns {
        flex-direction: column;
        height: auto;
        min-height: 100%;
    }

    .nav-submenu__left {
        width: 100%;
        flex: 1;
        border-right: none;
        border-bottom: 1px solid #e0e6ed;
        padding: 0;
        overflow-y: auto;
    }

    .nav-submenu__right {
        display: none;
    }

    .nav-submenu-new__cont {
        grid-template-columns: 1fr;
    }

    /* Элементы интерфейса */
    span.arrow-category {
        display: block;
    }

    .nav-submenu__item-link {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }


    /* Шапка и логотип */
    .site-header {
        margin-bottom: 60px;
    }

    .container {
        width: 100%;
    }

    .container-up {
        position: fixed;
        z-index: 9999;
        background: #fff;
        height: 60px;
        justify-content: flex-end;
        box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
    }

    .container-up > .logo {
        position: absolute;
        left: 0;
    }

    .logo img {
        max-width: 80%;
    }

    .header-hamburger {
        display: flex;
    }

    .header-contacts {
        display: none;
    }

    /* Мобильное меню */
    .nav-menu__container {
        position: fixed;
        display: none;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #fff;
        z-index: 9999;
        overflow-y: auto;
        flex-direction: column;
    }

    .nav-menu__container.active {
        display: block;
    }

    .nav-menu__items {
        flex-direction: column;
        width: 100%;
        margin-top: 60px;
    }

    /* Подкатегории */
    .nav-submenu-childs {
        transition: all 0.3s ease;
        max-height: 0;
        overflow: hidden;
    }

    .nav-submenu__item.active .nav-submenu-childs {
        max-height: 100%;
    }

    .nav-submenu-childs__title-link {
        font-size: 16px;
        padding: 12px 20px;

        background: #f8f9fa;
    }

    .nav-submenu-childs__item {
        padding: 10px 20px;
        border-bottom: 1px solid #f0f0f0;
    }

    /* Фикс для iOS */
    @supports (-webkit-touch-callout: none) {
        .nav-submenu__container {
            height: calc(100vh - 60px - env(safe-area-inset-bottom));
        }
    }

    /* Кнопка "Назад" */
    .back-button {
        padding: 15px 20px;
        border-bottom: 1px solid #e0e6ed;
    }

    .back-button__btn {
        background: none;
        border: none;
        color: #007bff;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        padding: 5px 0;
    }

    /* Фиксация body */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    /* Адаптивность */




    /* Стили для выпадающих подкатегорий */
    .nav-submenu-childs {
        display: none;
        /*padding: 10px 0 10px 20px;*/
        background: rgba(255,255,255,0.1);
        border-left: 2px solid #007bff;
    }

    .nav-submenu__item.active .nav-submenu-childs {
        display: block;
    }

    .nav-submenu-new__cont {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .nav-submenu-new__block {
        break-inside: avoid;
    }

    .nav-submenu-childs__title-link {
        display: block;
        font-weight: 600;
        color: #003151;
        margin-bottom: 8px;
        font-size: 14px;
        padding: 10px 20px;
        background: #f0f0f0;
    }

    .nav-submenu-childs__items {
        display: flex;
        flex-direction: column;
        gap: 6px;
        /*padding-left: 10px;*/
    }

    .nav-submenu-childs__item {
        font-size: 16px;
        color: #555;
        transition: color 0.2s;
        padding: 10px 20px;
    }

    .nav-submenu-childs__item:hover {
        color: #fff;
        background: #0a7aff;
    }


    /* Стрелка для категорий */
    .arrow-category {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-left: 8px;
        position: relative;
        cursor: pointer;
    }

    .arrow-category::before,
    .arrow-category::after {
        content: '';
        position: absolute;
        width: 8px;
        height: 2px;
        background: currentColor;
        top: 50%;
        transition: transform 0.3s ease;
    }

    .arrow-category::before {
        transform: translateY(-50%) rotate(45deg);
        right: 5px;
    }

    .arrow-category::after {
        transform: translateY(-50%) rotate(-45deg);
        right: 0;
    }

    /* Анимация стрелки при открытии */
    .nav-submenu__item.active .arrow-category::before {
        transform: translateY(-50%) rotate(-45deg);
    }

    .nav-submenu__item.active .arrow-category::after {
        transform: translateY(-50%) rotate(45deg);
    }

    .nav-submenu__item.js-submenu-child.active>a{
        background: #0a7aff;
        color: #fff;
    }

    /* Анимация в крест */



    .header-hamburger__link.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .header-hamburger__link.active span:nth-child(2) {
        opacity: 0;
    }

    .header-hamburger__link.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    .header-hamburger__link span {
        display: block;
        height: 3px;
        width: 40%;
        background: #000;
        border-radius: 2px;
        transition: 0.3s;
        transform-origin: center;
    }


    /* Улучшаем отображение скроллбара */
    .nav-submenu__container::-webkit-scrollbar {
        width: 4px;
    }

    .nav-submenu__container::-webkit-scrollbar-thumb {
        background: #007bff;
        border-radius: 2px;
    }

    /* Фикс для Firefox */
    @-moz-document url-prefix() {
        .nav-submenu__container {
            scrollbar-width: thin;
            scrollbar-color: #007bff transparent;
        }
    }
}