.mobile-menu {
    display: none;
}

body.menu-open {
    overflow: hidden;
}

@media (max-width: 991px) {
    .mobile-menu {
        --mm-bg: #ffffff;
        --mm-accent: #e02b2b;
        --mm-surface: #e2ebee;
        --mm-text: #333333;
        --mm-muted: #8a919c;
        --mm-line: #edf0f4;
        --mm-num: #b7bdc7;
        --mm-radius: 10px;

        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--mm-bg);
        z-index: 9999;
        padding: calc(14px + env(safe-area-inset-top, 0px)) 22px calc(20px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .45s cubic-bezier(.22, 1, .36, 1);
    }

    .mobile-menu.is-open {
        transform: translateX(0);
    }

    .mobile-menu a,
    .mobile-menu a:link,
    .mobile-menu a:visited,
    .mobile-menu a:hover,
    .mobile-menu a:focus,
    .mobile-menu a:active {
        text-decoration: none;
    }

    .mobile-menu__top {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 16px;
    }

    .mobile-menu__logo {
        margin-right: auto;
    }

    .mobile-menu__logo img {
        display: block;
        max-height: 44px;
        width: auto;
    }

    .mobile-menu__actions {
        display: flex;
        gap: 8px;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .4s ease .18s, transform .4s ease .18s;
    }

    .mobile-menu.is-open .mobile-menu__actions {
        opacity: 1;
        transform: none;
    }

    .mobile-menu__action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: none;
        border-radius: var(--mm-radius);
        background: var(--mm-surface);
        color: #3f4650;
        cursor: pointer;
        transition: background .2s, color .2s, transform .1s;
    }

    .mobile-menu__action i {
        font-size: 18px;
    }

    .mobile-menu__action:active {
        transform: scale(.94);
    }

    .mobile-menu__action.is-auth {
        color: var(--mm-accent);
    }

    .mobile-menu__close {
        position: relative;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        cursor: pointer;
        transition: transform .35s;
    }

    .mobile-menu__close span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 18px;
        height: 2px;
        background: var(--mm-muted);
        transition: background .2s;
    }

    .mobile-menu__close span:first-child {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .mobile-menu__close span:last-child {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .mobile-menu__close:active span {
        background: var(--mm-accent);
    }

    .mobile-menu__close:active {
        transform: rotate(90deg);
    }

    .mobile-menu__list {
        margin: 4px 0 0;
        padding: 0;
        list-style: none;
    }

    .mobile-menu__list > li {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .45s ease, transform .45s ease;
    }

    .mobile-menu.is-open .mobile-menu__list > li {
        opacity: 1;
        transform: none;
        transition-delay: calc(.12s + var(--i, 0) * .05s);
    }

    .mobile-menu__list > li > a {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 15px 2px;
        border-bottom: 1px solid var(--mm-line);
        color: var(--mm-text);
        font-size: 18px;
        font-weight: 500;
        letter-spacing: .01em;
    }

    .mobile-menu__list > li > a:active {
        color: var(--mm-accent);
    }

    .mm-num {
        flex: 0 0 auto;
        min-width: 26px;
        color: var(--mm-num);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .14em;
    }

    .mm-arrow {
        margin-left: auto;
        width: 9px;
        height: 9px;
        border-top: 2px solid var(--mm-num);
        border-right: 2px solid var(--mm-num);
        transform: rotate(45deg);
        opacity: .8;
        transition: transform .25s, border-color .25s;
    }

    .mobile-menu__list > li > a:active .mm-arrow {
        transform: rotate(45deg) translate(3px, -3px);
        border-color: var(--mm-accent);
    }

    .mobile-menu__list > li.current > a,
    .mobile-menu__list > li.is-current > a {
        color: var(--mm-accent);
    }

    .mobile-menu__list ul {
        margin: 0;
        padding: 4px 0 12px 40px;
        list-style: none;
        border-bottom: 1px solid var(--mm-line);
    }

    .mobile-menu__list ul a {
        display: block;
        padding: 8px 2px;
        color: var(--mm-muted);
        font-size: 15px;
    }

    .mobile-menu__list ul a:active {
        color: var(--mm-text);
    }

    .mobile-menu__footer {
        margin-top: auto;
        padding-top: 22px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        opacity: 0;
        transition: opacity .5s ease .35s;
    }

    .mobile-menu.is-open .mobile-menu__footer {
        opacity: 1;
    }

    .mobile-menu__phone {
        color: var(--mm-text);
        font-size: 20px;
        font-weight: 700;
        letter-spacing: .02em;
    }

    .mobile-menu__phone:active {
        color: var(--mm-accent);
    }

    .mobile-menu__meta {
        color: var(--mm-muted);
        font-size: 13px;
        line-height: 1.5;
    }

    .mobile-menu__meta a {
        color: var(--mm-muted);
        transition: color .2s;
    }

    .mobile-menu__meta a:active {
        color: var(--mm-accent);
    }
}

@media print {
    .mobile-menu {
        display: none;
    }
}