/* ============================================================
   Выезжающее боковое меню (off-canvas) — поведение как на mbex.expert.
   Подключается на всех страницах; разметка — в /include/sidebar.php.
   Стиль фирменный для stroy (жёлтый #f9b707), а не тёмная палитра mbex.
   ============================================================ */

/* --- Кнопка-гамбургер: фиксирована в левом верхнем углу --- */
.sb-toggle {
    position: fixed;
    top: 8px;
    left: 15px;
    z-index: 1035;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: #f9b707;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, opacity .25s ease;
}

.sb-toggle:hover {
    background: #dca205;
}

.sb-toggle span {
    display: block;
    width: 24px;
    height: 3px;
    margin: 2.5px 0;
    border-radius: 2px;
    background: #fff;
}

/* Когда меню открыто — прячем гамбургер, чтобы не мешал */
.sb-open .sb-toggle {
    opacity: 0;
    pointer-events: none;
}

/* Узкие экраны (<1500px): ноутбуки, планшеты, мобильные.
   Здесь липкое меню во всю ширину прижимает логотип к левому углу, и кнопка
   вверху налезала бы на него. Поэтому переходим в режим круглой кнопки (FAB)
   в левом нижнем углу (правый низ занят чат-виджетом). Контент — на всю ширину. */
@media (max-width: 1499px) {
    .sb-toggle {
        top: auto;
        bottom: 74px;
        left: 12px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
    }
}

/* --- Резерв полосы слева под кнопку (как на mbex) ---
   Фиксированная навигация (с логотипом) занимает всю ширину, и её внутреннюю
   раскладку надёжно не сдвинуть. Поэтому резервируем слева общую полосу: весь
   статичный контент и шапку сдвигаем вправо отступом body — все логотипы остаются
   видимыми. Кнопку ставим в эту полосу, чуть ниже липкой плашки навигации. */
/* Широкие экраны (≥1500px): липкое меню центрируется (в контейнере с max-width),
   его логотип уходит вправо — кнопка чисто помещается в левом верхнем углу, как на mbex.
   Сдвигаем только основной логотип вверху страницы; контент НЕ трогаем (на всю ширину). */
@media (min-width: 1500px) {
    .header-logo {
        margin-left: 64px;
    }
}

/* --- Затемнение фона --- */
.sb-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1090;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.sb-open .sb-backdrop {
    opacity: 1;
    visibility: visible;
}

/* --- Выезжающая панель --- */
.sb-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 85%;
    z-index: 1095;
    padding: 18px 16px 40px;
    background: #fff;
    box-shadow: 2px 0 18px rgba(0, 0, 0, .25);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform .3s ease;
}

.sb-open .sb-panel {
    transform: translateX(0);
}

/* --- Шапка панели --- */
.sb-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.sb-panel__title {
    font-family: Montserrat-SemiBold, Arial, sans-serif;
    font-size: 20px;
    color: #000;
}

.sb-close {
    padding: 0 4px;
    border: none;
    background: none;
    font-size: 30px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    transition: color .2s ease;
}

.sb-close:hover {
    color: #000;
}

/* --- Меню внутри панели ---
   Переиспользуем /include/left_menu.php: показываем полный десктопный
   список (#accordion), мобильный дубль (#accordion_mobile) прячем.
   Селекторы со .sb-panel перебивают глобальные #accordion без !important. */
.sb-panel #accordion {
    display: block;
    margin: 0;
}

.sb-panel #accordion_mobile {
    display: none;
}

.sb-panel .btn-link {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    background-color: #f9b707;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: default;
}

.sb-panel .btn-link:first-child {
    margin-top: 0;
}

.sb-panel .service-menu {
    margin-top: -1px;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 0 0 4px 4px;
}

.sb-panel .service-menu a {
    display: block;
    width: 100%;
    padding: 8px 5px 8px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    color: #000;
    font-size: 14px;
    text-decoration: none;
}

.sb-panel .service-menu a:last-child {
    border-bottom: none;
}

.sb-panel .service-menu a:hover {
    background: #f7f7f7;
}

.sb-panel .service-menu a.service-menu-active {
    font-weight: 700;
    background: #fff3d6;
}