/* ==========================================================================
   МЕГАМЕНЮ
   --------------------------------------------------------------------------

   ВАЖНО: порядок секций значим.
   Секция 6 гасит подсветку пунктов и перекрашивает плашки иконок в жёлтый,
   поэтому она должна оставаться последней. Если её поднять выше, вернётся
   синяя тема иконок и заливка пунктов при наведении.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Токены
   -------------------------------------------------------------------------- */

:root {
    /* Цвета */
    --mm-blue: #0080ff;
    --mm-blue-strong: #006fe0;
    --mm-yellow: #fff126;
    --mm-yellow-strong: #ffe500;
    --mm-icon-ink: #1e1e1e;
    --mm-title: #17324d;
    --mm-text: #52677b;
    --mm-panel: #ffffff;
    --mm-shell-bg: #f4f8fc;
    --mm-shell-border: #dce8f3;

    /* Геометрия десктопного меню */
    --mm-w: min(1180px, calc(100vw - 40px));
    --mm-pad: 10px;
    --mm-col-w: 260px;
    --mm-h: min(620px, 70vh);

    /* Место под нижнюю CTA-полоску.
       ВНИМАНИЕ: --mm-wrapper-trim (78px) не равен --mm-cta-space (88px).
       Так было в исходном файле, оставлено как есть, чтобы не менять вид.
       Скорее всего должны совпадать — см. заметки к рефакторингу. */
    --mm-cta-space: 88px;
    --mm-wrapper-trim: 78px;
}


/* --------------------------------------------------------------------------
   2. Общее для всех ширин
   -------------------------------------------------------------------------- */

/* Показываются только на своих брейкпоинтах */
.mega-menu-cta,
.mobile-submenu-toggle {
    display: none;
}


/* --------------------------------------------------------------------------
   3. Десктоп: каркас выпадающего меню (>= 768px)
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

    /* Оболочка */
    .nav__level-1 {
        left: 50%;
        right: auto;
        width: var(--mm-w);
        transform: translateX(-50%);

        /* нижний отступ = место под CTA-полоску */
        padding: var(--mm-pad) var(--mm-pad) var(--mm-cta-space);

        background: var(--mm-shell-bg);
        border: 1px solid var(--mm-shell-border);
        border-radius: 20px;
        box-shadow: 0 18px 50px rgba(25, 61, 94, 0.15);
    }

    /* Левая колонка */
    .nav__level-1-wrapper {
        width: var(--mm-col-w);
        min-width: var(--mm-col-w);
        padding-right: var(--mm-pad);
    }

    /* Правая панель. Левый отступ = ширина колонки + два внутренних отступа */
    .nav-level-2 {
        top: var(--mm-pad);
        right: var(--mm-pad);
        bottom: var(--mm-cta-space);
        left: calc(var(--mm-col-w) + var(--mm-pad) * 2);

        padding: 28px 30px !important;
        background: var(--mm-panel);
        border-radius: 16px;
    }

    /* Базовая карточка пункта первого уровня */
    .nav-level-1 > li > a,
    .nav-level-1 > li > span {
        position: relative;
        padding: 15px 38px 15px 18px;
        border-radius: 14px;

        color: var(--mm-title);
        text-decoration: none;
        cursor: pointer;
    }
}


/* --------------------------------------------------------------------------
   4. Десктоп: содержимое меню (>= 576px)
   -------------------------------------------------------------------------- */

@media (min-width: 576px) {

    /* --- Оболочка и высота ------------------------------------------------ */

    .nav__level-1 {
        margin-top: 5px;
        padding-bottom: var(--mm-cta-space);
    }

    .nav__level-1-wrapper {
        height: calc(var(--mm-h) - var(--mm-wrapper-trim));
    }

    /* --- Левая колонка --------------------------------------------------- */

    .nav-level-1 {
        padding: 0 !important;
    }

    .nav-level-1 > li + li {
        margin-top: 4px;
    }

    .nav-level-1 > li > a,
    .nav-level-1 > li > span {
        display: flex;
        align-items: center;
        gap: 12px;

        border: 1px solid transparent;

        font-weight: 500;
        line-height: 1.25;
    }

    /* Стрелка справа */
    .nav-level-1 > li > a .caret,
    .nav-level-1 > li > span .caret {
        right: 14px;
        color: #8296a8;
    }

    .nav-level-1 > li > a .caret svg,
    .nav-level-1 > li > span .caret svg {
        width: 11px;
        height: 11px;
    }

    .nav-level-1 > li.opened > a .caret,
    .nav-level-1 > li.opened > span .caret,
    .nav-level-1 > li.list-opened > a .caret,
    .nav-level-1 > li.list-opened > span .caret {
        color: var(--mm-blue);
    }

    /* --- Правая панель: колонки ------------------------------------------ */

    .nav-level-2 {
        align-content: flex-start;
        bottom: var(--mm-cta-space);
    }

    .nav-level-2 > li {
        flex: 0 0 33.333%;
        max-width: 33.333%;
        box-sizing: border-box;
        padding: 0 24px 24px;
    }

    .nav-level-2 > li:first-child {
        padding-left: 0;
    }

    .nav-level-2 > li:last-child {
        padding-right: 0;
    }

    .nav-level-2 > li + li {
        border-left: 1px solid #e2ebf3;
    }

    .nav-level-3 {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* --- Группы внутри колонки ------------------------------------------- */

    .level-2-header:not(:first-child) {
        margin-top: 24px;
    }

    .level-2-header + .level-2-header {
        padding-top: 22px;
        border-top: 1px solid #e7eef5;
    }

    /* Заголовок группы */
    .level-2-header > .level-2 {
        display: flex;
        align-items: center;
        gap: 9px;

        margin: 0 -8px 12px;
        padding: 7px 8px;
        border-radius: 9px;

        color: var(--mm-title);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.3;
        text-decoration: none;
    }

    /* Скрываем стрелку у заголовков групп */
    .js-menu-link.level-2 > .menu-link-caret {
        display: none !important;
    }

    /* --- Вложенный список ссылок ----------------------------------------- */

    .level-2-header > ul {
        margin: 6px 0 0 9px;
        padding: 0 0 0 10px;
        border-left: 0;
        list-style: none;
    }

    /* Короткая линия перед вложенными ссылками */
    .level-2-header > ul::before {
        content: "";
        display: block;

        width: 28px;
        height: 2px;
        margin: 0 0 9px 8px;

        background: #d6e7f5;
        border-radius: 20px;
    }

    .level-2-header > ul > li + li {
        margin-top: 6px;
    }

    /* Базовое оформление ссылки */
    .level-2-header > ul > li > a {
        display: block;
        margin: 0 -7px;
        padding: 5px 7px;
        border-radius: 7px;

        color: var(--mm-text);
        font-size: 14px;
        line-height: 1.35;
        text-decoration: none;

        transition:
            color 0.2s ease,
            background-color 0.2s ease,
            padding-left 0.2s ease;
    }

    .level-2-header > ul > li > a:hover {
        color: var(--mm-blue);
        text-decoration: none;
    }

    /* Одинаковая строка для ссылок и некликабельных пунктов */
    .level-2-header > ul > li > .level-3 {
        display: flex;
        align-items: flex-start;
        gap: 8px;

        margin: 0 -7px;
        padding: 5px 7px 5px 8px;
        border-radius: 7px;
    }

    .level-2-header > ul > li > .level-3:hover {
        padding-left: 12px;
        color: var(--mm-blue);
        background: #f5f9fc;
    }

    /* --- Иконки ---------------------------------------------------------- */

    .nav__level-1 .menu-icon {
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        color: var(--mm-blue);
        stroke-width: 1.8;
    }

    /* Плашка иконки в левой колонке */
    .nav-level-1 > li > a .menu-icon,
    .nav-level-1 > li > span .menu-icon {
        width: 34px;
        height: 34px;
        padding: 7px;
        box-sizing: border-box;
        border-radius: 10px;
    }

    /* Плашка иконки заголовка группы */
    .level-2-header > .level-2 .menu-icon {
        width: 32px;
        height: 32px;
        padding: 6px;
        box-sizing: border-box;
        border-radius: 9px;
        stroke-width: 2.3;
    }

    .level-2-header > ul .menu-icon {
        width: 15px;
        height: 15px;
    }

    /* Одинаковое место под иконку в конечных ссылках */
    .level-2-header > ul > li > .level-3 .menu-icon {
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
        margin-top: 1px;
    }

    /* --- Текущая страница ------------------------------------------------ */

    .nav__level-1 .js-menu-link.is-active {
        color: var(--mm-blue);
        font-weight: 700;
    }

    .level-2-header > ul > li > .level-3.is-active {
        padding-left: 12px;
        color: var(--mm-blue);
        background: #eef6ff;
    }

    /* --- Нижняя CTA-полоска ---------------------------------------------- */

    .mega-menu-cta {
        position: absolute;
        right: var(--mm-pad);
        bottom: var(--mm-pad);
        left: var(--mm-pad);

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;

        min-height: 68px;
        padding: 12px 14px 12px 16px;

        background: #eef6fc;
        border: 1px solid #d6e7f5;
        border-radius: 14px;
    }

    .mega-menu-cta__content {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mega-menu-cta__icon {
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        padding: 8px;

        color: var(--mm-blue);
        background: var(--mm-panel);
        border-radius: 10px;
        stroke-width: 2.2;
    }

    .mega-menu-cta__title {
        color: var(--mm-title);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
    }

    .mega-menu-cta__text {
        margin-top: 3px;
        color: #60778b;
        font-size: 13px;
        line-height: 1.3;
    }

    /* Кнопка: работает и как <button>, и как <a> */
    .mega-menu-cta__button {
        flex: 0 0 auto;
        padding: 11px 18px;

        color: var(--mm-panel);
        font: inherit;
        font-size: 14px;
        font-weight: 600;

        background: var(--mm-blue);
        border: 0;
        border-radius: 9px;
        cursor: pointer;

        transition:
            background-color 0.2s ease,
            transform 0.2s ease;
    }

    .mega-menu-cta a.mega-menu-cta__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
    }

    .mega-menu-cta a.mega-menu-cta__button,
    .mega-menu-cta a.mega-menu-cta__button:hover,
    .mega-menu-cta a.mega-menu-cta__button:focus,
    .mega-menu-cta a.mega-menu-cta__button:visited {
        color: var(--mm-panel);
        text-decoration: none;
    }

    .mega-menu-cta__button:hover,
    .mega-menu-cta a.mega-menu-cta__button:hover {
        background: var(--mm-blue-strong);
        transform: translateY(-1px);
    }

    /* --- Прокрутка длинных списков --------------------------------------- */

    .nav__level-1-wrapper,
    .nav-level-2 {
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #c9d9e7 transparent;
    }

    .nav__level-1-wrapper::-webkit-scrollbar,
    .nav-level-2::-webkit-scrollbar {
        width: 6px;
    }

    .nav__level-1-wrapper::-webkit-scrollbar-thumb,
    .nav-level-2::-webkit-scrollbar-thumb {
        background: #c9d9e7;
        border-radius: 20px;
    }

    .nav__level-1-wrapper::-webkit-scrollbar-track,
    .nav-level-2::-webkit-scrollbar-track {
        background: transparent;
    }
}


/* --------------------------------------------------------------------------
   5. Мобильная версия (<= 575px)
   -------------------------------------------------------------------------- */

@media (max-width: 575px) {

    /* --- Сброс десктопного каркаса --------------------------------------- */

    .nav__level-1 {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .nav__level-1-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .nav-level-1,
    .nav-level-2,
    .nav-level-3 {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    /* --- Первый уровень -------------------------------------------------- */

    .nav-level-1 > li {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-bottom: 1px solid #e4ebf2;
    }

    .nav-level-1 > li:last-child,
    .nav-level-1 > li.list-opened {
        border-bottom: 0;
    }

    /* Линия после раскрытого пункта */
    .nav-level-1 > li.list-opened:not(:last-child) {
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #dfe6ed !important;
    }

    .nav-level-1 > li > .level-1 {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 54px;
        padding: 11px 42px 11px 12px;

        color: #1f2d3d;
        font-size: 17px;
        font-weight: 600;
        line-height: 1.3;

        background: transparent;
        border: 0;
        border-bottom: 1px solid #e5e9ed;
        border-radius: 0;
        box-shadow: none;
    }

    /* Одинаковое положение ссылок и пунктов без ссылки */
    .nav-level-1 > li > a.level-1,
    .nav-level-1 > li > span.level-1 {
        position: relative;
        width: 100%;
        margin: 0 !important;
        padding-left: 12px !important;
        box-sizing: border-box;
        transform: none !important;
    }

    /* Убираем десктопный сдвиг при наведении */
    .nav-level-1 > li > a.level-1:hover,
    .nav-level-1 > li > a.level-1:focus,
    .nav-level-1 > li > span.level-1:hover {
        transform: none !important;
    }

    .nav-level-1 > li > .level-1.has-children {
        padding-right: 42px !important;
        cursor: pointer;
    }

    /* --- Второй уровень -------------------------------------------------- */

    /* По умолчанию закрыт */
    .nav-level-1 > li > .nav-level-2 {
        display: none !important;
    }

    .nav-level-1 > li.list-opened > .nav-level-2 {
        display: block !important;
    }

    .nav-level-2 {
        padding: 6px 0 10px !important;
        background: var(--mm-panel) !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .nav-level-2 > li,
    .nav-level-3 {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .level-2-header {
        position: relative;
        width: 100%;
        margin: 2px 8px !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .nav-level-3 > .level-2-header {
        margin: 0 8px 2px !important;
    }

    /* Короткие разделители третьего уровня */
    .nav-level-3 > .level-2-header::after {
        content: "";
        display: block;

        width: calc(100% - 78px);
        height: 1px;
        margin: 3px 64px 3px 14px;

        background: #e4ebf2;
    }

    .level-2-header > .level-2 {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 48px;
        margin: 0 !important;
        padding: 11px 42px 11px 18px !important;

        color: #34455f;
        font-size: 16px;
        font-weight: 600;

        background: transparent;
        border: 0 !important;
        border-radius: 8px;
    }

    .level-2-header.list-opened > .level-2 {
        color: var(--mm-blue);
        background: #eef6ff;
    }

    .level-2-header > .level-2.has-children {
        position: relative;
        padding-right: 42px !important;
        cursor: pointer;
    }

    /* --- Третий и четвёртый уровни --------------------------------------- */

    .level-2-header > ul {
        display: none !important;

        margin: 2px 0 6px 18px !important;
        padding: 3px 0 3px 8px !important;

        background: transparent !important;
        border: 0 !important;
        border-left: 2px solid #dcecff !important;
        border-radius: 0 !important;
    }

    .level-2-header.list-opened > ul {
        display: block !important;
    }

    .level-2-header > ul::before {
        display: none !important;
    }

    .level-2-header > ul > li {
        border: 0 !important;
    }

    .level-2-header > ul > li > .level-3 {
        display: flex;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 8px 14px 8px 18px !important;

        color: #52627b;
        font-size: 15px;
        font-weight: 400;

        background: transparent;
        border: 0 !important;
        border-radius: 7px;
    }

    .level-2-header > ul > li > .level-3.is-active {
        color: var(--mm-blue);
        background: #eef6ff;
    }

    /* --- Иконки ---------------------------------------------------------- */

    .nav__level-1 .menu-icon {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        margin-right: 10px;
        padding: 0;

        color: var(--mm-blue);
        background: transparent;
        border-radius: 0;
    }

    .nav-level-1 > li > .level-1 .menu-icon,
    .level-2-header > .level-2 .menu-icon {
        width: 22px !important;
        height: 22px !important;
        padding: 0 !important;

        color: var(--item-icon-color, var(--mm-icon-ink)) !important;
        background: var(--item-icon-bg, var(--mm-yellow)) !important;
        border-radius: 4px !important;
        
        /* расширяем фон наружу, не уменьшая иконку */
        box-shadow: 0 0 0 3px var(--item-icon-bg, var(--mm-yellow));
    }

    /* --- Зона раскрытия справа ------------------------------------------- */

    /* ВНИМАНИЕ: эти два правила проигрывают по специфичности правилам ниже,
       которые показывают стрелку внутри ссылки (display: flex !important).
       Оставлено как в исходнике — см. заметки к рефакторингу. */
    .level-1.has-children > .caret,
    .level-2.has-children > .caret {
        display: none !important;
    }

    .nav-level-1 > li > .js-menu-link > .caret,
    .level-2-header > .js-menu-link > .caret {
        display: none !important;
    }

    .nav-level-1 > li > .js-menu-link::before,
    .nav-level-1 > li > .js-menu-link::after,
    .level-2-header > .js-menu-link::before,
    .level-2-header > .js-menu-link::after {
        display: none !important;
        content: none !important;
        background-image: none !important;
    }

    /* Стрелка внутри ссылки первого уровня */
    .nav-level-1 > li > .level-1.has-children > .caret {
        position: absolute;
        top: 50%;
        right: 12px;

        display: flex !important;
        align-items: center;
        justify-content: center;

        color: var(--mm-blue);
        transform: translateY(-50%);
    }

    .nav-level-1 > li.list-opened > .level-1.has-children > .caret {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Стрелка внутри заголовка второго уровня */
    .level-2-header > .level-2.has-children > .caret {
        position: absolute;
        top: 50%;
        right: 12px;

        display: flex !important;
        align-items: center;
        justify-content: center;

        color: var(--mm-blue);
        transform: translateY(-50%);
    }

    .level-2-header.list-opened > .level-2.has-children > .caret {
        transform: translateY(-50%) rotate(180deg);
    }

    .nav-level-1 > li > .level-1.has-children > .caret svg,
    .level-2-header > .level-2.has-children > .caret svg {
        width: 12px;
        height: 12px;
    }

    /* Правая половина строки раскрывает подменю */
    .mobile-submenu-toggle {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 3;

        display: flex;
        align-items: center;
        justify-content: flex-end;

        width: 50%;
        padding: 0 14px;

        color: var(--mm-blue);
        background: transparent;
        border: 0;
        cursor: pointer;
    }

    .nav-level-1 > li > .mobile-submenu-toggle {
        height: 54px;
    }

    .level-2-header > .mobile-submenu-toggle {
        height: 48px;
    }

    .mobile-submenu-toggle > .caret {
        display: flex !important;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease;
    }

    .mobile-submenu-toggle .caret svg {
        width: 12px;
        height: 12px;
    }

    .nav-level-1 > li.list-opened > .mobile-submenu-toggle .caret,
    .level-2-header.list-opened > .mobile-submenu-toggle .caret {
        transform: rotate(180deg);
    }
}


/* --------------------------------------------------------------------------
   6. Финальные переопределения — ДОЛЖНЫ ОСТАВАТЬСЯ ПОСЛЕДНИМИ
   Жёлтые плашки иконок и «плоские» состояния пунктов без заливки.
   -------------------------------------------------------------------------- */

/* Цвета иконок из админки или стандартные */
.nav-level-1 > li > .level-1 .menu-icon,
.level-2-header > .level-2 .menu-icon {
    color: var(--item-icon-color, var(--mm-icon-ink));
    background: var(--item-icon-bg, var(--mm-yellow));
}

/* Активный пункт сохраняет выбранные цвета */
.nav-level-1 > li.opened > a .menu-icon,
.nav-level-1 > li.opened > span .menu-icon,
.nav-level-1 > li.list-opened > a .menu-icon,
.nav-level-1 > li.list-opened > span .menu-icon {
    color: var(--item-icon-color, var(--mm-icon-ink)) !important;
    background: var(--item-icon-bg, var(--mm-yellow)) !important;
}

/* Затемнение выбранного цвета при наведении
.nav-level-1 > li > .level-1:hover .menu-icon,
.level-2-header > .level-2:hover .menu-icon {
    filter: brightness(0.94);
}
 */
/* Поворот иконки при наведении */
@media (min-width: 576px) {
    .nav-level-1 > li > .level-1 .menu-icon,
    .level-2-header > .level-2 .menu-icon {
        transition:
            transform 0.2s ease,
            filter 0.2s ease,
            box-shadow 0.2s ease;
    }

    .nav-level-1 > li > .level-1:hover .menu-icon,
    .level-2-header > .level-2:hover .menu-icon {
        transform: rotate(-4deg) scale(1.06);
        filter: brightness(0.97);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }
}

/* Иконки конечных ссылок: тёмные, без фона, цвет не меняется */
.level-2-header > ul > li > .level-3 .menu-icon,
.level-2-header > ul > li > .level-3:hover .menu-icon,
.level-2-header > ul > li > .level-3:focus .menu-icon,
.level-2-header > ul > li > .level-3.is-active .menu-icon {
    color: var(--mm-icon-ink) !important;
    background: transparent !important;
}

/* Левая колонка: возвращаем оформление пунктов карточками */
@media (min-width: 576px) {
    .nav-level-1 > li > .level-1 {
        transition:
            color 0.2s ease,
            background-color 0.2s ease,
            border-color 0.2s ease,
            box-shadow 0.2s ease,
            transform 0.2s ease;
    }

    /* Наведение */
    .nav-level-1 > li > .level-1:hover,
    .nav-level-1 > li > .level-1:focus {
        color: var(--mm-title);
        font-weight: 600;

        background: var(--mm-panel);
        border-color: var(--mm-shell-border);
        box-shadow: 0 6px 18px rgba(25, 61, 94, 0.08);

        text-decoration: none;
        transform: translateX(2px);
    }

    /* Выбранный пункт */
    .nav-level-1 > li.opened > .level-1,
    .nav-level-1 > li.list-opened > .level-1 {
        color: var(--mm-title);
        font-weight: 600;

        background: var(--mm-panel);
        border-color: #cfe0ee;
        box-shadow: 0 8px 22px rgba(25, 61, 94, 0.1);

        text-decoration: none;
        transform: none;
    }
}

/* Не заливаем заголовок группы */
.level-2-header > .level-2:hover,
.level-2-header > .level-2:focus,
.level-2-header > .level-2.is-active {
    color: var(--mm-title);
    font-weight: 800;

    background: transparent;
    text-decoration: none;
}