/* Скрываем кнопку по умолчанию (на ПК) */
.menu-toggle {
    display: none;
}

/* Обёртка кнопки */
.mobile-menu-button {
    display: none;
    width: 100%;
    text-align: right;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Затемнение фона */
.menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1400;
}

.menu-overlay.active {
    display: block;
}

/* Блокировка прокрутки */
body.menu-open {
    overflow: hidden;
    height: 100vh;
    touch-action: none;
}

/* --- Мобильная версия --- */
@media (max-width: 768px) {
    .main {
        flex-direction: column;
    }

    /* Кнопка видна */
    .mobile-menu-button {
        display: block;
    }

    .menu-toggle {
        display: inline-block;
        background-color: #fff0;
        border: none;
        padding: 0;
        font-size: 2em;
        cursor: pointer;
        margin: 0;
    }

    /* Правая панель — выезжающее меню */
    .right_bar {
        position: fixed;
        top: 0;
        right: 0;
        width: 240px;
        height: 100%;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 1500;
        box-shadow: -2px 0 5px rgba(0,0,0,0.3);

        /* сохранили оригинальный стиль */
        background: #1224005e;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .right_bar.active {
        transform: translateX(0);
    }

    /* Внутренние блоки сохраняют оригинальный цвет */
    .main_info {
        background: #122400a1;
    }

    /* Чтобы правая панель не выглядела прижатой */
    .menu {
        margin-top: auto;
    }
}