/**
 * Memberlux Sidebar Menu Styles
 */

/* Обертка для контента с меню */
.mlsm-content-wrapper {
    display: flex;
    width: 100%;
    gap: 20px;
    align-items: flex-start;
}

.mlsm-content-wrapper.mlsm-sidebar-left {
    flex-direction: row;
}

.mlsm-content-wrapper.mlsm-sidebar-right {
    flex-direction: row-reverse;
}

/* Контейнер основного контента */
.mlsm-main-content {
    flex: 1;
    min-width: 0; /* Позволяет контенту сжиматься */
}

/* Контейнер бокового меню */
.mlsm-sidebar-container {
    flex: 0 0 280px; /* Фиксированная ширина, не сжимается */
    width: 280px;
    align-self: flex-start;
    overflow: visible !important; /* Не обрезать скруглённые углы меню */
    border-radius: 5px;
    /* Меню часть потока документа, не фиксированное */
}

/* Контейнер меню материалов — та же скруглённость, не обрезаем углы */
.mlsm-materials-menu-container {
    overflow: visible !important;
    border-radius: 5px;
}

/* Специальные стили для меню внутри page-title-row (стартовая страница и страницы продажи доступа) */
/* Применяем Flexbox только когда есть меню - используем фиксированную ширину как на странице Материала */
.page-title-row .row[data-mlsm-integrated="true"] {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 20px; /* Отступ между меню и контентом, как на странице Материала */
    margin-left: 0 !important; /* Убираем отрицательные margin от Bootstrap */
    margin-right: 0 !important; /* Убираем отрицательные margin от Bootstrap */
}

/* Убираем padding у container внутри page-title-row когда есть меню */
.page-title-row[data-mlsm-integrated="true"] .container,
.page-title-row .container[data-mlsm-integrated="true"] {
    padding-left: 15px; /* Оставляем только минимальный padding для контейнера */
    padding-right: 15px;
}

.page-title-row .mlsm-sidebar-container {
    position: relative;
    top: 0;
    max-height: none;
    margin-top: 10px;
    margin-bottom: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

.page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center {
    flex: 1 1 auto;
    min-width: 0; /* Позволяет контенту сжиматься */
    padding-left: 0 !important; /* Убираем лишний padding слева */
    padding-right: 0 !important; /* Убираем лишний padding справа */
    max-width: 100% !important; /* Контент занимает всю доступную ширину */
    width: 100% !important; /* Занимает всю доступную ширину */
    text-align: center !important; /* Устанавливаем выравнивание по центру для контента */
}

.page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center > * {
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Явно отменяем стили для .page-title - убираем инлайн стили, которые могли быть добавлены */
.page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center > .page-title,
.page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center > h1.page-title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Исключение: контейнер описания должен быть по центру и занимать 100% ширины на десктопе */
.page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center > .page-description-content {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* На десктопе описание занимает 100% ширины когда меню интегрировано */
@media (min-width: 1280px) {
    body .page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center > .page-description-content.visible,
    body .page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center > .page-description-content,
    body .page-title-row .row[data-mlsm-integrated="true"] .col-xs-12.text-center .page-description-content.visible,
    body .page-title-row .row[data-mlsm-integrated="true"] .col-xs-12.text-center .page-description-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
    
    /* Вложенный .content внутри описания тоже на 100% */
    body .page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center > .page-description-content.visible > .content,
    body .page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center > .page-description-content > .content,
    body .page-title-row .row[data-mlsm-integrated="true"] .col-xs-12.text-center .page-description-content.visible .content,
    body .page-title-row .row[data-mlsm-integrated="true"] .col-xs-12.text-center .page-description-content .content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
}

/* Исключение: кнопка "подробнее" должна быть по центру */
.page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center .toggle-category-description-button,
.page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center .page-description-content .toggle-category-description-button,
.page-title-row .row[data-mlsm-integrated="true"] .col-xs-12.text-center .toggle-category-description-button {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: auto !important;
    float: none !important;
}

.page-title-row #mlsm-sidebar-menu {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 0;
}

/* КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: Папки на стартовой странице должны адаптироваться к ширине контейнера */
/* Убираем фиксированные размеры папок и делаем их адаптивными к ширине колонки */
.page-title-row .folder-wrap.folder-with-files,
.page-title-row .folder-wrap.folder-with-subfolders {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* SVG папки должны масштабироваться пропорционально */
.page-title-row .folder-wrap .folder-front,
.page-title-row .folder-wrap .folder-sub-front,
.page-title-row .folder-wrap .folder-back,
.page-title-row .folder-wrap .folder-sub-back {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Переопределяем для всех медиа-запросов */
@media (min-width: 1400px) {
    .page-title-row .folder-wrap.folder-with-files,
    .page-title-row .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .page-title-row .folder-wrap .folder-front,
    .page-title-row .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1280px) and (max-width: 1399px) {
    .page-title-row .folder-wrap.folder-with-files,
    .page-title-row .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .page-title-row .folder-wrap .folder-front,
    .page-title-row .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1280px) and (max-width: 1399px) {
    .page-title-row .folder-wrap.folder-with-files,
    .page-title-row .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .page-title-row .folder-wrap .folder-front,
    .page-title-row .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1280px) and (max-width: 1399px) {
    .page-title-row .folder-wrap.folder-with-files,
    .page-title-row .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .page-title-row .folder-wrap .folder-front,
    .page-title-row .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

/* Для мобильных устройств - вертикальная раскладка */
@media (max-width: 1279px) {
    .page-title-row .row[data-mlsm-integrated="true"] {
        flex-wrap: wrap !important;
    }
    
    .page-title-row .mlsm-sidebar-container {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
    }
    
    .page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Для планшетов и десктопов (общие стили для всех экранов >= 993px) */
@media (min-width: 1280px) {
    .page-title-row .mlsm-sidebar-container {
        flex: 0 0 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }
    
    .page-title-row .row[data-mlsm-integrated="true"] > .col-xs-12.text-center {
        flex: 1 1 auto !important;
    }
}

/* Стили для страниц с подкатегориями (folders-row) */
.folders-row .container[data-mlsm-integrated="true"] {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 20px;
    box-sizing: border-box;
}

.folders-row .mlsm-sidebar-container {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Обертка для контента - изолирует Bootstrap grid от flex-контейнера */
.folders-row .mlsm-materials-content {
    flex: 1 1 auto;
    /* Убираем min-width: 0, чтобы не ограничивать ширину */
    /* Критично: display должен быть block, а НЕ flex */
    display: block;
    box-sizing: border-box;
}

/* .row внутри обертки работает как обычный Bootstrap row */
/* НО: убираем отрицательные margin, так как flex-контейнер уже обрабатывает padding */
.folders-row .mlsm-materials-content > .row {
    /* Убираем отрицательные margin, как в page-title-row */
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Колонки Bootstrap должны работать с float как обычно */
/* НО: оставляем стандартные padding от Bootstrap - они нужны для отступов между колонками */
.folders-row .mlsm-materials-content > .row [class*="col-"] {
    float: left !important;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: Папки должны адаптироваться к ширине контейнера */
/* Убираем фиксированные размеры папок и делаем их адаптивными к ширине колонки */
.folders-row .mlsm-materials-content .folder-wrap.folder-with-files,
.folders-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* SVG папки должны масштабироваться пропорционально */
.folders-row .mlsm-materials-content .folder-wrap .folder-front,
.folders-row .mlsm-materials-content .folder-wrap .folder-sub-front,
.folders-row .mlsm-materials-content .folder-wrap .folder-back,
.folders-row .mlsm-materials-content .folder-wrap .folder-sub-back {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Переопределяем для всех медиа-запросов */
@media (min-width: 1400px) {
    .folders-row .mlsm-materials-content .folder-wrap.folder-with-files,
    .folders-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .folders-row .mlsm-materials-content .folder-wrap .folder-front,
    .folders-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1280px) and (max-width: 1399px) {
    .folders-row .mlsm-materials-content .folder-wrap.folder-with-files,
    .folders-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .folders-row .mlsm-materials-content .folder-wrap .folder-front,
    .folders-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1280px) and (max-width: 1399px) {
    .folders-row .mlsm-materials-content .folder-wrap.folder-with-files,
    .folders-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .folders-row .mlsm-materials-content .folder-wrap .folder-front,
    .folders-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1280px) and (max-width: 1399px) {
    .folders-row .mlsm-materials-content .folder-wrap.folder-with-files,
    .folders-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .folders-row .mlsm-materials-content .folder-wrap .folder-front,
    .folders-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

/* Clearfix для .row */
.folders-row .mlsm-materials-content > .row::before,
.folders-row .mlsm-materials-content > .row::after {
    display: table;
    content: " ";
    box-sizing: border-box;
}

.folders-row .mlsm-materials-content > .row::after {
    clear: both;
}

.folders-row #mlsm-sidebar-menu {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 0;
}

/* Для мобильных устройств - вертикальная раскладка */
@media (max-width: 1279px) {
    .folders-row .container[data-mlsm-integrated="true"] {
        flex-wrap: wrap !important;
    }
    
    .folders-row .mlsm-sidebar-container {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 20px;
    }
    
    .folders-row .mlsm-materials-content {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* Для планшетов и десктопов (общие стили для всех экранов >= 993px) */
@media (min-width: 1280px) {
    .folders-row .mlsm-sidebar-container {
        flex: 0 0 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }
    
    .folders-row .mlsm-materials-content {
        flex: 1 1 auto !important;
    }
}

/* УНИВЕРСАЛЬНОЕ ИСПРАВЛЕНИЕ: Папки везде где есть меню должны быть адаптивными */
/* Применяется ко всем контейнерам с интегрированным меню */
/* МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ - переопределяет все правила из app.css */
body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
body .folders-row .container .mlsm-materials-content .folder-wrap.folder-with-files,
body .folders-row .container .mlsm-materials-content .folder-wrap.folder-with-subfolders,
body .folders-row .mlsm-materials-content .row .folder-wrap.folder-with-files,
body .folders-row .mlsm-materials-content .row .folder-wrap.folder-with-subfolders {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap .folder-front,
body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap .folder-sub-front,
body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap .folder-back,
body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap .folder-sub-back,
body .folders-row[data-mlsm-integrated="true"] .folder-wrap .folder-front,
body .folders-row[data-mlsm-integrated="true"] .folder-wrap .folder-sub-front,
body .folders-row[data-mlsm-integrated="true"] .folder-wrap .folder-back,
body .folders-row[data-mlsm-integrated="true"] .folder-wrap .folder-sub-back,
body .folders-row .mlsm-materials-content .folder-wrap .folder-front,
body .folders-row .mlsm-materials-content .folder-wrap .folder-sub-front,
body .folders-row .mlsm-materials-content .folder-wrap .folder-back,
body .folders-row .mlsm-materials-content .folder-wrap .folder-sub-back {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Медиа-запросы для универсального правила - МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ */
@media (min-width: 1400px) {
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
    body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
    body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
    body .folders-row .mlsm-materials-content .folder-wrap.folder-with-files,
    body .folders-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        float: none !important;
    }
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap .folder-front,
    body .folders-row .mlsm-materials-content .folder-wrap .folder-front,
    body .folders-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1280px) and (max-width: 1399px) {
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
    body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
    body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
    body .folders-row .mlsm-materials-content .folder-wrap.folder-with-files,
    body .folders-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        float: none !important;
    }
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap .folder-front,
    body .folders-row .mlsm-materials-content .folder-wrap .folder-front,
    body .folders-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1280px) and (max-width: 1399px) {
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
    body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
    body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
    body .folders-row .mlsm-materials-content .folder-wrap.folder-with-files,
    body .folders-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        float: none !important;
    }
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap .folder-front,
    body .folders-row .mlsm-materials-content .folder-wrap .folder-front,
    body .folders-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1280px) and (max-width: 1399px) {
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
    body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-files,
    body .folders-row[data-mlsm-integrated="true"] .folder-wrap.folder-with-subfolders,
    body .folders-row .mlsm-materials-content .folder-wrap.folder-with-files,
    body .folders-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        float: none !important;
    }
    body .folders-row .container[data-mlsm-integrated="true"] .folder-wrap .folder-front,
    body .folders-row .mlsm-materials-content .folder-wrap .folder-front,
    body .folders-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

/* Стили для страниц категорий - общая обертка для page-title-row и materials-row */
.mlsm-category-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 20px;
    max-width: 1280px; /* 2 колонки материалов */
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.mlsm-category-wrapper .mlsm-sidebar-container {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    box-sizing: border-box;
}

.mlsm-category-wrapper .mlsm-category-content {
    flex: 1 1 auto !important;
    min-width: 0;
    box-sizing: border-box;
}

/* Контейнеры внутри контента должны быть на всю ширину */
.mlsm-category-wrapper .mlsm-category-content .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin: 0 !important;
}

/* Убираем margin и другие стили у секций внутри обертки */
.mlsm-category-wrapper .page-title-row,
.mlsm-category-wrapper .materials-row {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
    clear: both !important;
}

/* КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: Папки в category-wrapper должны адаптироваться к ширине контейнера */
/* Убираем фиксированные размеры папок и делаем их адаптивными к ширине колонки */
.mlsm-category-wrapper .folder-wrap.folder-with-files,
.mlsm-category-wrapper .folder-wrap.folder-with-subfolders {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* SVG папки должны масштабироваться пропорционально */
.mlsm-category-wrapper .folder-wrap .folder-front,
.mlsm-category-wrapper .folder-wrap .folder-sub-front,
.mlsm-category-wrapper .folder-wrap .folder-back,
.mlsm-category-wrapper .folder-wrap .folder-sub-back {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Переопределяем для всех медиа-запросов */
@media (min-width: 1400px) {
    .mlsm-category-wrapper .folder-wrap.folder-with-files,
    .mlsm-category-wrapper .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .mlsm-category-wrapper .folder-wrap .folder-front,
    .mlsm-category-wrapper .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1280px) and (max-width: 1399px) {
    .mlsm-category-wrapper .folder-wrap.folder-with-files,
    .mlsm-category-wrapper .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .mlsm-category-wrapper .folder-wrap .folder-front,
    .mlsm-category-wrapper .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1280px) and (max-width: 1399px) {
    .mlsm-category-wrapper .folder-wrap.folder-with-files,
    .mlsm-category-wrapper .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .mlsm-category-wrapper .folder-wrap .folder-front,
    .mlsm-category-wrapper .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1280px) and (max-width: 1399px) {
    .mlsm-category-wrapper .folder-wrap.folder-with-files,
    .mlsm-category-wrapper .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .mlsm-category-wrapper .folder-wrap .folder-front,
    .mlsm-category-wrapper .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

/* Для мобильных устройств - вертикальная раскладка */
@media (max-width: 1279px) {
    .mlsm-category-wrapper {
        flex-wrap: wrap !important;
    }
    
    .mlsm-category-wrapper .mlsm-sidebar-container {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
    }
    
    .mlsm-category-wrapper .mlsm-category-content {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* Десктоп: при 1 колонке материалов обертка категории уже */
@media (min-width: 1280px) {
    .mlsm-category-wrapper:has(.materials-row.one-in-line) {
        max-width: 1050px !important;
    }
}

/* Старый способ интеграции (для совместимости) */
.materials-row .container[data-mlsm-integrated="true"] {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
}

.materials-row .mlsm-sidebar-container {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

.materials-row .mlsm-materials-content {
    flex: 1 1 auto;
    min-width: 0; /* Позволяет контенту сжиматься */
}

.materials-row #mlsm-sidebar-menu {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 0;
}

/* Для мобильных устройств - вертикальная раскладка */
@media (max-width: 1279px) {
    .materials-row .container[data-mlsm-integrated="true"] {
        flex-wrap: wrap !important;
    }
    
    .materials-row .mlsm-sidebar-container {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 20px;
    }
    
    .materials-row .mlsm-materials-content {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Список материалов на мобильных: одна и две колонки — одинаково: контейнер 100%, блок материалов макс. 750px по центру */
    .materials-row .container,
    .materials-row .container[data-mlsm-integrated="true"] {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .materials-row .mlsm-materials-content {
        max-width: 750px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* При выводе материалов в 2 колонки — на мобильной колонки в одну (100% ширины) */
    .mlsm-materials-content .row .col-md-6 {
        width: 100% !important;
    }
    
    /* Меню перенесено в контейнер крошек (страница списка материалов): ширина как у крошек, отступ сверху и снизу 20px.
       position + z-index обеспечивают приём кликов поверх возможных оверлеев темы. */
    .breadcrumbs-row .container .mlsm-sidebar-container {
        width: 100% !important;
        flex: none !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        position: relative !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
}

/* Ширина окна ниже 750px: блок материалов уже (макс. 340px), без бокового padding — при любой настройке 1/2 колонки */
@media (max-width: 749px) {
    .materials-row .mlsm-materials-content {
        max-width: 340px !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }
}

/* Для планшетов */
@media (min-width: 1280px) and (max-width: 1399px) {
    .materials-row .mlsm-sidebar-container {
        flex: 0 0 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }
    
    .materials-row .mlsm-materials-content {
        flex: 1 1 auto !important;
    }
}

/* Десктоп (1280px+): отступ margin 20px справа у меню (без gap), ширины по режиму 1/2 колонки */
@media (min-width: 1280px) {
    .materials-row .mlsm-sidebar-container {
        flex: 0 0 280px !important;
        max-width: 280px !important;
        width: 280px !important;
        margin-right: 20px !important; /* отступ между меню и блоком материалов, как на странице Материала */
    }
    
    /* 2 колонки: контейнер 1280px (width перебивает тему 1170px), контент до 980px */
    .materials-row .container[data-mlsm-integrated="true"] {
        width: 1280px !important;
        max-width: 1280px !important;
    }
    .materials-row .mlsm-materials-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 980px !important;
    }
    
    /* 1 колонка (.one-in-line): контейнер 1050px, контент 750px — как без меню */
    .materials-row.one-in-line .container[data-mlsm-integrated="true"] {
        width: 1050px !important;
        max-width: 1050px !important;
    }
    .materials-row.one-in-line .mlsm-materials-content {
        max-width: 750px !important;
    }
}

/* КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: Папки в materials-row должны адаптироваться к ширине контейнера */
/* Убираем фиксированные размеры папок и делаем их адаптивными к ширине колонки */
.materials-row .mlsm-materials-content .folder-wrap.folder-with-files,
.materials-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* SVG папки должны масштабироваться пропорционально */
.materials-row .mlsm-materials-content .folder-wrap .folder-front,
.materials-row .mlsm-materials-content .folder-wrap .folder-sub-front,
.materials-row .mlsm-materials-content .folder-wrap .folder-back,
.materials-row .mlsm-materials-content .folder-wrap .folder-sub-back {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Переопределяем для всех медиа-запросов */
@media (min-width: 1400px) {
    .materials-row .mlsm-materials-content .folder-wrap.folder-with-files,
    .materials-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .materials-row .mlsm-materials-content .folder-wrap .folder-front,
    .materials-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1280px) and (max-width: 1399px) {
    .materials-row .mlsm-materials-content .folder-wrap.folder-with-files,
    .materials-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .materials-row .mlsm-materials-content .folder-wrap .folder-front,
    .materials-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1280px) and (max-width: 1399px) {
    .materials-row .mlsm-materials-content .folder-wrap.folder-with-files,
    .materials-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .materials-row .mlsm-materials-content .folder-wrap .folder-front,
    .materials-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 1280px) and (max-width: 1399px) {
    .materials-row .mlsm-materials-content .folder-wrap.folder-with-files,
    .materials-row .mlsm-materials-content .folder-wrap.folder-with-subfolders {
        width: 100% !important;
        height: auto !important;
    }
    .materials-row .mlsm-materials-content .folder-wrap .folder-front,
    .materials-row .mlsm-materials-content .folder-wrap .folder-sub-front {
        width: 100% !important;
        height: auto !important;
    }
}


/* Стили для страниц материалов (lesson-row) - идентично materials-row */
/* box-sizing: border-box — ширина 1280/1000 считается вместе с padding, без переполнения на 30px */
.lesson-row .container.mlsm-has-sidebar,
.lesson-row .container[data-mlsm-integrated="true"].mlsm-has-sidebar,
.materials-row .container,
.materials-row .container[data-mlsm-integrated="true"],
.breadcrumbs-row .container,
.header-row .top-nav-row .container {
    box-sizing: border-box !important;
}

/* Хлебные крошки: боковые отступы на всех страницах */
.breadcrumbs {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.lesson-row .container.mlsm-has-sidebar,
.lesson-row .container[data-mlsm-integrated="true"].mlsm-has-sidebar {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.lesson-row .container.mlsm-has-sidebar {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
}

.lesson-row .mlsm-sidebar-container {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

.lesson-row .mlsm-lesson-content {
    flex: 1 1 auto;
    min-width: 0; /* Позволяет контенту сжиматься */
}

/* Убираем отрицательные margin у .row внутри контента урока (Bootstrap grid-framework) */
body .lesson-row .mlsm-lesson-content .row,
body .lesson-row .container.mlsm-has-sidebar .mlsm-lesson-content .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.lesson-row .mlsm-materials-menu-container {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* При вкладках «Контент»/«Вложения» в блоке контента — опускаем боковые меню на десктопе для выравнивания с контентом */
@media (min-width: 1280px) {
    .lesson-row:has(.lesson-content-nav) .mlsm-sidebar-container,
    .lesson-row:has(.lesson-content-nav) .mlsm-materials-menu-container {
        margin-top: 44px !important;
    }
}

.lesson-row #mlsm-sidebar-menu {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 0;
}

.lesson-row #mlsm-materials-menu {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: 0;
}

/* ============================================
   МОБИЛЬНОЕ ПЕРЕКЛЮЧЕНИЕ МЕЖДУ МЕНЮ (replace mode)
   ============================================ */

/* Пункты переключения между меню - скрыты на десктопе */
.mlsm-menu-switch-item {
    display: none !important;
}

/* Стили для пункта переключения на мобильных - как десктопные стрелки навигации */
@media (max-width: 1279px) {
    .mlsm-menu-switch-item.mlsm-mobile-only {
        display: flex !important;
        align-items: center !important;
        padding: 15px 20px !important;
        color: #333 !important;
        font-weight: 400 !important;
        font-size: 16px !important;
        background-color: transparent !important;
        border-bottom: 1px solid #E3E3E3;
        margin: 0 !important;
        cursor: pointer !important;
        transition: background-color 0.2s ease !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        list-style: none !important;
    }
    
    .mlsm-menu-switch-item.mlsm-mobile-only:hover,
    .mlsm-menu-switch-item.mlsm-mobile-only:active {
        background-color: #f5f5f5 !important;
    }
    
    /* Скрытие неактивного меню на мобильных (при режиме replace) */
    #mlsm-sidebar-menu.mlsm-mobile-menu-hidden,
    #mlsm-materials-menu.mlsm-mobile-menu-hidden {
        display: none !important;
    }
}

/* На десктопе switch-items (mlsm-mobile-only) всегда скрыты — навигация через заголовок + стрелки */
@media (min-width: 1280px) {
    .mlsm-menu-switch-item.mlsm-mobile-only {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
}

/* Общие стили для переключателей меню (применяются ко всем устройствам) */
.mlsm-menu-switch-item .mlsm-switch-arrow {
    font-size: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

.mlsm-menu-switch-item .mlsm-menu-text {
    flex: 1;
}

/* Общие стили для переключателей меню */
.mlsm-menu-switch-item[data-switch-to="rubrics"],
.mlsm-menu-switch-item[data-switch-to="materials"] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* Общие стили для текста в переключателях */
.mlsm-menu-switch-item[data-switch-to="rubrics"] .mlsm-menu-text,
.mlsm-menu-switch-item[data-switch-to="materials"] .mlsm-menu-text {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
}

/* Общие стили для стрелок в переключателях */
.mlsm-menu-switch-item[data-switch-to="rubrics"] .mlsm-switch-arrow,
.mlsm-menu-switch-item[data-switch-to="materials"] .mlsm-switch-arrow {
    margin-left: auto !important;
    flex-shrink: 0;
    padding-right: 0 !important;
}

/* Общие стили для иконок в переключателях (16px размер, одинаково на всех устройствах) */
.mlsm-menu-switch-item[data-switch-to="rubrics"] .icon-folder-open-o,
.mlsm-menu-switch-item[data-switch-to="rubrics"] .iconmoon.icon-folder-open-o,
.mlsm-menu-switch-item[data-switch-to="materials"] .icon-file-text-o,
.mlsm-menu-switch-item[data-switch-to="materials"] .iconmoon.icon-file-text-o {
    font-size: 16px !important;
    width: 20px;
    height: 19px;
    line-height: 20px;
    margin-right: 8px !important; /* Унифицированный отступ между иконкой и текстом - 8px */
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: #333 !important;
}

/* Для мобильных устройств - вертикальная раскладка */
@media (max-width: 1279px) {
    /* Фиксированный отступ сверху у блока урока, страницы материалов и страницы рубрик на мобильной (всегда 20px) */
    .lesson-row.clearfix,
    .materials-row.clearfix,
    .materials-row.one-in-line.clearfix {
        margin-top: 20px !important;
    }
    .lesson-row .container.mlsm-has-sidebar {
        flex-wrap: wrap !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Дополнительная специфичность для переопределения стилей Memberlux */
    .lesson-row .container[data-mlsm-integrated="true"].mlsm-has-sidebar {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Меню ВСЕГДА над контентом на мобильной (и «Справа», и «Вместо рубрик») */
    .lesson-row .mlsm-menu-switch-wrapper,
    .lesson-row .mlsm-sidebar-container,
    .lesson-row .mlsm-materials-menu-container {
        order: -1 !important;
    }
    .lesson-row .mlsm-lesson-content {
        order: 0 !important;
    }
    
    /* Меню должно занимать 100% ширины своего контейнера */
    .lesson-row .mlsm-sidebar-container {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
    }
    
    /* Меню внутри контейнера должно занимать 100% ширины */
    .lesson-row #mlsm-sidebar-menu {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Обертка переключения меню должна занимать 100% ширины контейнера */
    .lesson-row .mlsm-menu-switch-wrapper {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .lesson-row .mlsm-lesson-content {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .lesson-row .mlsm-materials-menu-container {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
    }
}

/* Для планшетов и десктопов (общие стили для всех экранов >= 1280px) */
@media (min-width: 1280px) {
    .lesson-row .container.mlsm-has-sidebar,
    .lesson-row .container[data-mlsm-integrated="true"].mlsm-has-sidebar {
        max-width: 1280px !important;
        width: 100%;
        box-sizing: border-box !important;
    }
    .lesson-row .container.mlsm-has-sidebar,
    .breadcrumbs-row .container {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .lesson-row .mlsm-sidebar-container {
        flex: 0 0 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }
    
    .lesson-row .mlsm-lesson-content {
        flex: 1 1 auto !important;
    }
    
    .lesson-row .mlsm-materials-menu-container {
        flex: 0 0 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }
    
    /* Слева от контента (replace + отключённые рубрики): Меню Материалов | Контент */
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="left"] {
        flex-direction: row !important;
    }
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="left"] .mlsm-materials-menu-container {
        order: 1 !important;
    }
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="left"] .mlsm-lesson-content {
        order: 2 !important;
    }

    /* Справа от контента: Рубрики | Контент | Материалы */
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="right"] {
        flex-direction: row !important;
    }
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="right"] .mlsm-sidebar-container {
        order: 1 !important;
    }
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="right"] .mlsm-lesson-content {
        order: 2 !important;
    }
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="right"] .mlsm-materials-menu-container {
        order: 3 !important;
    }
    
    /* Между рубриками и контентом: Рубрики | Материалы | Контент */
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="between"] {
        flex-direction: row !important;
    }
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="between"] .mlsm-sidebar-container {
        order: 1 !important;
    }
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="between"] .mlsm-materials-menu-container {
        order: 2 !important;
    }
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="between"] .mlsm-lesson-content {
        order: 3 !important;
    }
    
    /* Отступ только у меню уроков в варианте Рубрики | Уроки | Контент (между рубриками и меню уроков) */
    /* В варианте Рубрики | Контент | Уроки отступа у меню уроков не добавляем */
    .lesson-row .container.mlsm-has-sidebar[data-materials-position="between"] .mlsm-materials-menu-container {
        margin-left: 15px;
    }
}


/* Само меню */
#mlsm-sidebar-menu {
    width: 100%;
    background: #ffffff;
    border-radius: 5px;
    padding: 0 !important; /* Убираем все внутренние отступы контейнера - отступы только внутри элементов */
    /* Меню скрыто по умолчанию только если есть класс pending-integration */
    /* Без класса pending-integration меню будет видно (fallback) */
    position: relative;
    top: 0;
    max-height: none;
    overflow: hidden; /* Обеспечивает обрезку по скруглённым углам, без «квадратного» слоя поверх */
}

/* Скрываем меню до интеграции (если есть класс pending-integration) */
/* НО: если меню уже интегрировано в контейнер, показываем его */
#mlsm-sidebar-menu.mlsm-pending-integration:not(.mlsm-integrated):not(:has(+ .mlsm-materials-content)),
#mlsm-materials-menu.mlsm-pending-integration:not(.mlsm-integrated):not(:has(+ .mlsm-materials-content)) {
    display: none !important;
    visibility: hidden !important;
}

/* Показываем меню, если оно интегрировано, даже если есть pending-integration */
.mlsm-sidebar-container #mlsm-sidebar-menu,
.mlsm-materials-menu-container #mlsm-materials-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fallback: если меню не интегрировано через 2 секунды, показываем его */
/* Это предотвращает ситуацию, когда меню остается скрытым из-за проблем с JavaScript */
@keyframes mlsm-show-fallback {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Через 2 секунды после загрузки показываем меню, если оно все еще имеет класс pending-integration */
/* Это будет переопределено JavaScript, если интеграция произойдет раньше */

/* Отступ сверху для обертки меню рубрик убран для совпадения с меню Материалов */

/* Меню материалов - использует те же стили, что и основное меню */
#mlsm-materials-menu {
    width: 100%;
    background: #ffffff;
    border-radius: 5px;
    padding: 0 !important; /* Убираем все внутренние отступы контейнера - отступы только внутри элементов */
    /* Меню скрыто по умолчанию только если есть класс pending-integration */
    /* Без класса pending-integration меню будет видно (fallback) */
    position: relative;
    top: 0;
    max-height: none;
    overflow: hidden; /* Обеспечивает обрезку по скруглённым углам, без «квадратного» слоя поверх */
}

/* Отступ сверху для обертки меню материалов убран по запросу пользователя */

/* Когда меню материалов интегрировано в контейнер */
.mlsm-materials-menu-container #mlsm-materials-menu {
    display: block !important;
    position: sticky;
    top: 20px;
    max-height: none;
}

/* На десктопе контент меню материалов всегда виден, мобильный toggle скрыт (кроме опции «сворачивать на странице материалов») */
@media (min-width: 1280px) {
    #mlsm-materials-menu.mlsm-mobile-collapsed:not(.mlsm-collapsed-default-on-materials) .mlsm-mobile-toggle {
        display: none !important;
    }
    #mlsm-materials-menu.mlsm-mobile-collapsed:not(.mlsm-collapsed-default-on-materials) .mlsm-mobile-collapsed-content {
        display: block !important;
    }
}

/* desktop=yes / mobile=no: на мобильных контент виден, toggle скрыт (нет mobile-collapsed класса) */
@media (max-width: 1279px) {
    #mlsm-sidebar-menu.mlsm-collapsed-default-on-materials:not(.mlsm-mobile-collapsed) .mlsm-mobile-collapsed-content {
        display: block !important;
    }
    #mlsm-sidebar-menu.mlsm-collapsed-default-on-materials:not(.mlsm-mobile-collapsed) .mlsm-mobile-toggle {
        display: none !important;
    }
    #mlsm-materials-menu.mlsm-collapsed-default-on-materials:not(.mlsm-mobile-collapsed) .mlsm-mobile-collapsed-content {
        display: block !important;
    }
    #mlsm-materials-menu.mlsm-collapsed-default-on-materials:not(.mlsm-mobile-collapsed) .mlsm-mobile-toggle {
        display: none !important;
    }
}

/* При опции «сворачивать на странице материалов» на десктопе: только mobile-toggle (как на мобильном), без широкого заголовка */
@media (min-width: 1280px) {
    /* Скрываем десктопный заголовок — показываем только компактный toggle */
    #mlsm-sidebar-menu.mlsm-collapsed-default-on-materials .mlsm-menu-header.mlsm-desktop-header,
    #mlsm-materials-menu.mlsm-collapsed-default-on-materials .mlsm-materials-menu-header {
        display: none !important;
    }
    /* Показываем toggle — фон и скругление задаются из настроек в inline-стилях (как на мобильном), без лишних рамок */
    #mlsm-sidebar-menu.mlsm-collapsed-default-on-materials .mlsm-mobile-toggle,
    #mlsm-materials-menu.mlsm-collapsed-default-on-materials .mlsm-mobile-toggle {
        display: flex !important;
        align-items: center !important;
        padding: 20px !important;
        cursor: pointer !important;
        user-select: none !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    #mlsm-sidebar-menu.mlsm-collapsed-default-on-materials .mlsm-mobile-toggle-icon,
    #mlsm-sidebar-menu.mlsm-collapsed-default-on-materials .mlsm-mobile-toggle-title,
    #mlsm-materials-menu.mlsm-collapsed-default-on-materials .mlsm-mobile-toggle-icon,
    #mlsm-materials-menu.mlsm-collapsed-default-on-materials .mlsm-mobile-toggle-title {
        display: flex !important;
        align-items: center !important;
    }
    #mlsm-sidebar-menu.mlsm-collapsed-default-on-materials .mlsm-mobile-toggle-title,
    #mlsm-materials-menu.mlsm-collapsed-default-on-materials .mlsm-mobile-toggle-title {
        flex: 1 !important;
        font-weight: 500 !important;
        font-size: 16px !important;
    }
    /* Стрелка вниз всегда видна в свернутом состоянии */
    #mlsm-sidebar-menu.mlsm-collapsed-default-on-materials .mlsm-mobile-toggle-arrow,
    #mlsm-materials-menu.mlsm-collapsed-default-on-materials .mlsm-mobile-toggle-arrow {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        font-size: 16px !important;
    }
    #mlsm-sidebar-menu.mlsm-collapsed-default-on-materials .mlsm-mobile-toggle-arrow.icon-arrow-down,
    #mlsm-materials-menu.mlsm-collapsed-default-on-materials .mlsm-mobile-toggle-arrow.icon-arrow-down {
        display: inline-flex !important;
    }
    #mlsm-sidebar-menu.mlsm-collapsed-default-on-materials .mlsm-mobile-toggle-arrow.icon-close,
    #mlsm-materials-menu.mlsm-collapsed-default-on-materials .mlsm-mobile-toggle-arrow.icon-close {
        display: none !important;
    }
    #mlsm-sidebar-menu.mlsm-collapsed-default-on-materials.mlsm-mobile-expanded .mlsm-mobile-toggle-arrow.icon-arrow-down,
    #mlsm-materials-menu.mlsm-collapsed-default-on-materials.mlsm-mobile-expanded .mlsm-mobile-toggle-arrow.icon-arrow-down {
        display: none !important;
    }
    #mlsm-sidebar-menu.mlsm-collapsed-default-on-materials.mlsm-mobile-expanded .mlsm-mobile-toggle-arrow.icon-close,
    #mlsm-materials-menu.mlsm-collapsed-default-on-materials.mlsm-mobile-expanded .mlsm-mobile-toggle-arrow.icon-close {
        display: inline-flex !important;
    }
    #mlsm-sidebar-menu.mlsm-collapsed-default-on-materials .mlsm-mobile-collapsed-content,
    #mlsm-materials-menu.mlsm-collapsed-default-on-materials .mlsm-mobile-collapsed-content {
        display: none !important;
    }
    #mlsm-sidebar-menu.mlsm-collapsed-default-on-materials.mlsm-mobile-expanded .mlsm-mobile-collapsed-content,
    #mlsm-materials-menu.mlsm-collapsed-default-on-materials.mlsm-mobile-expanded .mlsm-mobile-collapsed-content {
        display: block !important;
    }
}

/* Replace mode + collapsed-default: показываем переключатель «Курсы школы ←»
   внутри развёрнутого меню материалов */
@media (min-width: 1280px) {
    .mlsm-menu-switch-wrapper #mlsm-materials-menu.mlsm-collapsed-default-on-materials.mlsm-mobile-expanded .mlsm-materials-menu-header {
        display: flex !important;
        align-items: center !important;
        padding: 15px 20px !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        width: 100% !important;
        border-bottom: 1px solid #E3E3E3;
    }
}

/* .mlsm-desktop-header в режиме collapsed-default НЕ показываем принудительно:
   его роль выполняет .mlsm-mobile-toggle ("Курсы школы ×").
   Строка-переключатель «→ Уроки курса» вставляется JS-ом как .mlsm-desktop-switch-to-materials. */

/* Стили для мобильного свернутого меню материалов */
@media (max-width: 1279px) {
    #mlsm-materials-menu.mlsm-mobile-collapsed .mlsm-mobile-toggle {
        display: flex !important;
        align-items: center !important;
        padding: 20px !important;
        cursor: pointer !important;
        user-select: none !important;
    }
    #mlsm-materials-menu.mlsm-mobile-collapsed .mlsm-mobile-collapsed-content {
        display: none !important;
    }
    #mlsm-materials-menu.mlsm-mobile-collapsed.mlsm-mobile-expanded .mlsm-mobile-collapsed-content {
        display: block !important;
    }
    /* Стрелка меню материалов на мобильном: всегда видна, прижата вправо как у меню рубрик */
    #mlsm-materials-menu.mlsm-mobile-collapsed .mlsm-mobile-toggle-arrow {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    #mlsm-materials-menu.mlsm-mobile-collapsed .mlsm-mobile-toggle-arrow.icon-arrow-down {
        display: inline-flex !important;
    }
    #mlsm-materials-menu.mlsm-mobile-collapsed .mlsm-mobile-toggle-arrow.icon-close {
        display: none !important;
    }
    #mlsm-materials-menu.mlsm-mobile-collapsed.mlsm-mobile-expanded .mlsm-mobile-toggle-arrow.icon-arrow-down {
        display: none !important;
    }
    #mlsm-materials-menu.mlsm-mobile-collapsed.mlsm-mobile-expanded .mlsm-mobile-toggle-arrow.icon-close {
        display: inline-flex !important;
    }
    /* Стрелка меню рубрик на мобильном: всегда видна в свернутом виде */
    #mlsm-sidebar-menu.mlsm-mobile-collapsed .mlsm-mobile-toggle-arrow {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
    }
    #mlsm-sidebar-menu.mlsm-mobile-collapsed .mlsm-mobile-toggle-arrow.icon-arrow-down {
        display: inline-flex !important;
    }
    #mlsm-sidebar-menu.mlsm-mobile-collapsed .mlsm-mobile-toggle-arrow.icon-close {
        display: none !important;
    }
    #mlsm-sidebar-menu.mlsm-mobile-collapsed.mlsm-mobile-expanded .mlsm-mobile-toggle-arrow.icon-arrow-down {
        display: none !important;
    }
    #mlsm-sidebar-menu.mlsm-mobile-collapsed.mlsm-mobile-expanded .mlsm-mobile-toggle-arrow.icon-close {
        display: inline-flex !important;
    }
}

/* Когда меню интегрировано в контейнер, применяем эти стили */
.mlsm-sidebar-container #mlsm-sidebar-menu {
    display: block !important;
    position: sticky;
    top: 20px;
    max-height: none;
}

.mlsm-menu-wrapper {
    width: 100%;
}

.mlsm-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mlsm-menu-item {
    margin: 0 !important;
    padding: 0 !important;
    /* Убираем padding-bottom, отступы будут через margin-bottom */
}

/* Убираем отступ у первого пункта меню на всех устройствах */
.mlsm-menu-list > .mlsm-menu-item:first-child,
.mlsm-menu-list > .mlsm-menu-item:not(.mlsm-menu-switch-item):first-of-type {
    margin-top: 0 !important;
}

.mlsm-menu-list > .mlsm-menu-switch-item:first-child ~ .mlsm-menu-item:first-of-type {
    margin-top: 0 !important;
}

.mlsm-submenu-item {
    margin: 0;
    padding: 0;
    padding-bottom: 0px !important;
}

.mlsm-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px !important; /* Единые отступы для всех устройств (как у заголовка и "Назад") */
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    font-family: "PT Sans", sans-serif;
    font-size: 16px;
}

.mlsm-menu-link:hover {
    background-color: #f5f5f5;
}

.mlsm-menu-item.mlsm-current > .mlsm-menu-link,
.mlsm-menu-item.mlsm-ancestor > .mlsm-menu-link {
    font-weight: 600;
}

.mlsm-submenu-item.mlsm-current > .mlsm-menu-link,
.mlsm-submenu-item.mlsm-ancestor > .mlsm-menu-link {
    font-weight: 600;
}

.mlsm-menu-text {
    flex: 1;
}

.mlsm-access-icon {
    margin-right: 8px !important; /* Унифицированный отступ между иконкой и текстом - 8px для всех элементов */
    font-size: 16px;
    flex-shrink: 0;
    width: 20px;
    height: 19px;
    display: block;
    line-height: 20px;
    text-align: left;
    position: relative;
    float: left;
}

/* Иконка открытого доступа (зеленый замок открыт) */
.mlsm-access-icon.icon-unlock::before {
    content: "\f09c"; /* fa-unlock */
    font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 5 Pro";
    font-weight: 900;
    color: #5FA34E; /* Зеленый цвет для открытого доступа */
    display: block;
}

/* Иконка частичного доступа (оранжевый замок частично открыт) */
.mlsm-access-icon.icon-unlock-alt::before {
    content: "\f13e"; /* fa-unlock-alt */
    font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 5 Pro";
    font-weight: 900;
    color: #F5A623; /* Оранжевый цвет для частичного доступа */
    display: block;
}

/* Иконка закрытого доступа (красный замок закрыт) */
.mlsm-access-icon.icon-lock::before {
    content: "\f023"; /* fa-lock */
    font-family: "FontAwesome", "Font Awesome 5 Free", "Font Awesome 5 Pro";
    font-weight: 900;
    color: #B85A5A; /* Красный цвет для закрытого доступа */
    display: block;
}

/* Цвета для иконок папок в меню рубрик (сохраняем те же цвета что были у замков)
   НО эти цвета применяются только если не переопределены цветами текста из настроек */
#mlsm-sidebar-menu .mlsm-rubric-icon.mlsm-access-lock {
    color: #cd2a27 !important; /* Красный - заблокировано */
}

#mlsm-sidebar-menu .mlsm-rubric-icon.mlsm-access-unlock-alt {
    color: #ff9f09 !important; /* Оранжевый - частично доступно */
}

#mlsm-sidebar-menu .mlsm-rubric-icon.mlsm-access-unlock {
    color: #56bf50 !important; /* Зеленый - доступно */
}

/* Цвета для иконок файлов в меню материалов (сохраняем те же цвета что были у замков)
   НО эти цвета применяются только если не переопределены цветами текста из настроек */
#mlsm-materials-menu .mlsm-material-icon.mlsm-access-lock {
    color: #cd2a27 !important; /* Красный - заблокировано */
}

#mlsm-materials-menu .mlsm-material-icon.mlsm-access-unlock {
    color: #56bf50 !important; /* Зеленый - доступно */
}

.mlsm-toggle-icon {
    width: 20px;
    height: 19px;
    text-align: center;
    font-weight: bold;
    font-size: 16px !important;
    line-height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 8px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Стрелка drill-down навигации */
.mlsm-drill-down-arrow {
    flex-shrink: 0;
    margin-left: 8px;
    cursor: pointer;
    font-size: 16px !important;
    color: #666;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    transition: color 0.2s ease;
}

.mlsm-drill-down-arrow:hover {
    color: #333;
}

/* Кнопка "Назад" в drill-down режиме */
.mlsm-drill-down-back-item {
    margin: 0 !important;
    padding: 0 !important;
    /* Отступ создается через padding внутри .mlsm-menu-link */
}

.mlsm-drill-down-back-item .mlsm-menu-link {
    font-weight: 500;
    color: #0073aa;
}

.mlsm-drill-down-back-item .mlsm-menu-link:hover {
    color: #005177;
    background-color: #f5f5f5;
}

.mlsm-drill-down-back-item .icon-arrow-left {
    margin-right: 8px;
    font-size: 16px;
}

/* На десктопе иконки переключения видны и работают, как на мобильных */
@media (min-width: 1280px) {
    /* Иконки переключения теперь видны на десктопе */
    .mlsm-toggle-icon {
        display: inline-block !important;
    }
    
    /* Стрелки drill-down навигации видны на десктопе */
    .mlsm-drill-down-arrow {
        display: inline-block !important;
    }
    
    /* Подменю управляются через JavaScript, не принудительно показываются */
    /* Позволяем JavaScript управлять видимостью через inline стили */
    .mlsm-submenu[style*="display: none"] {
        display: none !important;
    }
    .mlsm-submenu[style*="display: block"] {
        display: block !important;
    }
    
    /* Скрываем мобильный тоггл на десктопе (кроме меню с опцией «сворачивать на странице материалов») */
    #mlsm-sidebar-menu:not(.mlsm-collapsed-default-on-materials) .mlsm-mobile-toggle,
    #mlsm-materials-menu:not(.mlsm-collapsed-default-on-materials) .mlsm-mobile-toggle {
        display: none !important;
    }
    
    /* На десктопе контент меню всегда виден (кроме меню с опцией «сворачивать на странице материалов») */
    #mlsm-sidebar-menu:not(.mlsm-collapsed-default-on-materials) .mlsm-mobile-collapsed-content,
    #mlsm-materials-menu:not(.mlsm-collapsed-default-on-materials) .mlsm-mobile-collapsed-content {
        display: block !important;
    }
}

.mlsm-submenu {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
    /* background-color теперь управляется через настройки */
}

/* Первый элемент подменю - отступ сверху равен отступу между пунктами меню (10px padding-bottom родителя + 10px padding-top = 20px) */
.mlsm-submenu > .mlsm-submenu-item:first-child > .mlsm-menu-link {
    padding-top: 20px;
}

/* Последний элемент подменю - отступ снизу равен padding-bottom элемента меню (10px) */
.mlsm-submenu > .mlsm-submenu-item:last-child > .mlsm-menu-link {
    padding-bottom: 10px;
}

.mlsm-submenu .mlsm-menu-link {
    padding-left: 35px;
    font-size: 0.95em;
}

.mlsm-submenu .mlsm-submenu .mlsm-menu-link {
    padding-left: 50px;
}

/* ============================================
   АДАПТИВНОСТЬ - РАЗЛИЧИЯ МЕЖДУ МОБИЛЬНЫМИ И ДЕСКТОПОМ
   ============================================ */

/* Общие стили для десктопа (применяются ко всем экранам >= 993px) */
@media (min-width: 1280px) {
    .mlsm-sidebar-container {
        flex: 0 0 280px;
        width: 280px;
        max-width: 280px;
    }
}

/* На мобильных устройствах (телефоны) - меню на всю ширину */
@media (max-width: 1279px) {
    .mlsm-content-wrapper {
        flex-direction: column !important;
    }
    
    .mlsm-sidebar-container {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
        top: 0;
        max-height: none;
        margin-bottom: 20px;
    }
    
    /* Переопределяем ширину меню для всех типов страниц на мобильных */
    .page-title-row .mlsm-sidebar-container,
    .folders-row .mlsm-sidebar-container,
    .materials-row .mlsm-sidebar-container,
    .lesson-row .mlsm-sidebar-container {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    #mlsm-sidebar-menu {
        max-height: none;
    }
}

/* Скроллбар */
#mlsm-sidebar-menu::-webkit-scrollbar,
#mlsm-materials-menu::-webkit-scrollbar {
    width: 6px;
}

#mlsm-sidebar-menu::-webkit-scrollbar-track,
#mlsm-materials-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#mlsm-sidebar-menu::-webkit-scrollbar-thumb,
#mlsm-materials-menu::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

#mlsm-sidebar-menu::-webkit-scrollbar-thumb:hover,
#mlsm-materials-menu::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Показываем меню рубрик только когда оно интегрировано */
.mlsm-sidebar-container #mlsm-sidebar-menu,
#mlsm-sidebar-menu.mlsm-integrated,
.mlsm-sidebar-container #mlsm-sidebar-menu.mlsm-pending-integration {
    display: block !important;
    visibility: visible !important;
}


/* Показываем меню материалов только когда оно интегрировано */
.mlsm-materials-menu-container #mlsm-materials-menu,
#mlsm-materials-menu.mlsm-integrated {
    display: block !important;
    visibility: visible !important;
}

/* Стили для стрелок навигации между меню */
.mlsm-menu-nav-arrow {
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    margin: 0;
    transition: all 0.2s ease;
    color: #333;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Минимальный размер для touch-устройств */
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    -webkit-touch-callout: none;
    user-select: none;
}

.mlsm-menu-nav-arrow:hover {
    color: #0073aa;
    transform: scale(1.1);
}

/* Базовые стили для стрелок навигации (унифицированные) */
.mlsm-menu-nav-back,
.mlsm-menu-nav-forward {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    font-size: 16px !important; /* Размер как на мобильных */
    line-height: 1 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Стрелка "Назад" - отступ справа */
.mlsm-menu-nav-back {
    margin-right: 8px !important;
    margin-left: 0 !important;
}

/* Стрелка "Вперед" - отступ слева */
.mlsm-menu-nav-forward {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* Стрелка в wrapper должна иметь такой же отступ, как и стрелка в заголовке */
.mlsm-menu-switch-wrapper > .mlsm-menu-nav-arrow.mlsm-switch-wrapper-arrow {
    margin: 0 !important;
}

/* Стили для заголовка меню материалов с навигацией - только для десктопа */
@media (min-width: 1280px) {
    .mlsm-materials-menu-header,
    #mlsm-materials-menu .mlsm-materials-menu-header {
        display: flex !important;
        align-items: center !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        font-weight: 500 !important;
        font-size: 16px !important;
        line-height: 1 !important;
        min-height: 44px !important; /* Минимальная высота для консистентности */
        cursor: pointer !important; /* Весь заголовок кликабельный, как на мобильных */
    }
    
    /* Отступ между заголовком и списком на десктопе - через margin-top первого элемента (как на мобильном) */
    #mlsm-materials-menu .mlsm-menu-wrapper .mlsm-menu-list > .mlsm-menu-item:first-child,
    #mlsm-materials-menu .mlsm-menu-wrapper .mlsm-menu-list > .mlsm-menu-item:not(.mlsm-menu-switch-item):first-of-type {
        margin-top: 0 !important;
    }
}

/* На мобильных заголовок меню материалов скрыт (используется мобильный toggle) */
@media (max-width: 1279px) {
    .mlsm-materials-menu-header,
    #mlsm-materials-menu .mlsm-materials-menu-header {
        display: none !important;
    }
}

/* Стили для заголовка меню рубрик с навигацией - унифицированные с меню Материалов */
@media (min-width: 1280px) {
    .mlsm-menu-header.mlsm-desktop-header,
    #mlsm-sidebar-menu .mlsm-menu-header.mlsm-desktop-header {
        display: flex !important;
        align-items: center !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        font-weight: 500 !important;
        font-size: 16px !important;
        line-height: 1 !important;
        min-height: 44px !important; /* Минимальная высота для консистентности */
        gap: 0 !important; /* Убираем gap для контроля через margin */
        cursor: pointer !important; /* Весь заголовок кликабельный, как на мобильных */
    }
    
    /* Убираем отступ у первого элемента списка на десктопе */
    #mlsm-sidebar-menu .mlsm-menu-wrapper .mlsm-menu-list > .mlsm-menu-item:first-child,
    #mlsm-sidebar-menu .mlsm-menu-wrapper .mlsm-menu-list > .mlsm-menu-item:not(.mlsm-menu-switch-item):first-of-type {
        margin-top: 0 !important;
    }
}


/* Унифицированные стили для всех иконок в заголовках меню (18px размер, как в списках) - применяются ко всем устройствам */
.mlsm-menu-header.mlsm-desktop-header .mlsm-menu-header-icon,
#mlsm-sidebar-menu .mlsm-menu-header.mlsm-desktop-header .mlsm-menu-header-icon,
.mlsm-materials-menu-header .mlsm-materials-menu-icon,
#mlsm-materials-menu .mlsm-materials-menu-header .mlsm-materials-menu-icon,
.mlsm-mobile-toggle-icon {
    margin-right: 8px !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 18px !important;
    line-height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    width: 20px;
    height: 19px;
}

/* Унифицированные стили для заголовков текста - применяются ко всем устройствам */
.mlsm-menu-header.mlsm-desktop-header .mlsm-menu-header-title,
#mlsm-sidebar-menu .mlsm-menu-header.mlsm-desktop-header .mlsm-menu-header-title,
.mlsm-materials-menu-header .mlsm-materials-menu-title,
#mlsm-materials-menu .mlsm-materials-menu-header .mlsm-materials-menu-title {
    flex: 1 !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    vertical-align: middle !important;
}

/* Для десктопа заголовок должен быть flex */
@media (min-width: 1280px) {
    .mlsm-menu-header.mlsm-desktop-header .mlsm-menu-header-title,
    #mlsm-sidebar-menu .mlsm-menu-header.mlsm-desktop-header .mlsm-menu-header-title {
        display: flex !important;
    }
}

/* Заголовок меню материалов в режиме replace (← Курсы школы) — кликабелен */
.mlsm-materials-menu-header,
#mlsm-materials-menu .mlsm-materials-menu-header {
    cursor: pointer;
}

/* Унифицированные стили для навигационных стрелок в заголовках */
.mlsm-materials-menu-header .mlsm-menu-nav-back,
#mlsm-materials-menu .mlsm-materials-menu-header .mlsm-menu-nav-back {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    font-size: 14px !important; /* Размер стрелки "Назад" - 14px */
    line-height: 1 !important;
    padding: 0 !important;
    width: 20px !important; /* Единый размер для всех стрелок */
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
}

/* Стили для стрелки "Вперед" в заголовке рубрик - вынесены отдельно для точного контроля */
.mlsm-menu-header.mlsm-desktop-header .mlsm-menu-nav-forward,
#mlsm-sidebar-menu .mlsm-menu-header.mlsm-desktop-header .mlsm-menu-nav-forward {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
}

/* Специфичные стили для стрелки "Назад" на десктопе - справа, как стрелка "Вперед" (порядок элементов в HTML: иконка → текст → стрелка) */
/* Стрелка с классом mlsm-mobile-only показывается только на мобильных (опция «Общее меню 2 в 1») */
@media (min-width: 1280px) {
    .mlsm-materials-menu-header .mlsm-menu-nav-back.mlsm-mobile-only,
    #mlsm-materials-menu .mlsm-materials-menu-header .mlsm-menu-nav-back.mlsm-mobile-only {
        display: none !important;
        visibility: hidden !important;
    }
    .mlsm-materials-menu-header .mlsm-menu-nav-back:not(.mlsm-mobile-only),
    #mlsm-materials-menu .mlsm-materials-menu-header .mlsm-menu-nav-back:not(.mlsm-mobile-only) {
        margin-left: auto !important;
        margin-right: 0 !important;
    }
}

/* Специфичные стили для стрелки "Вперед" на десктопе */
@media (min-width: 1280px) {
    .mlsm-menu-header.mlsm-desktop-header .mlsm-menu-nav-forward,
    #mlsm-sidebar-menu .mlsm-menu-header.mlsm-desktop-header .mlsm-menu-nav-forward {
        margin-left: auto !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        vertical-align: middle !important;
        font-size: 14px !important;
        line-height: 1 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
}

/* Скрытие меню при переключении */
.mlsm-sidebar-menu.mlsm-hidden-by-materials,
.mlsm-sidebar-container.mlsm-hidden-by-materials {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Показ меню при переключении обратно */
.mlsm-sidebar-container:not(.mlsm-hidden-by-materials),
.mlsm-menu-switch-wrapper .mlsm-sidebar-container:not(.mlsm-hidden-by-materials) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.mlsm-materials-menu-container.mlsm-replace-mode {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Скрытие меню материалов при переключении на меню рубрик */
.mlsm-materials-menu-container.mlsm-replace-mode.mlsm-hidden-by-materials,
.mlsm-materials-menu-container.mlsm-replace-mode[style*="display: none"],
#mlsm-materials-menu.mlsm-hidden-by-materials,
#mlsm-materials-menu[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Обертка для переключения между меню в режиме replace */
.mlsm-menu-switch-wrapper {
    position: relative;
    flex: 0 0 280px !important;
    max-width: 280px !important;
    width: 280px !important;
}

/* На мобильных устройствах обертка должна занимать 100% ширины контейнера */
@media (max-width: 1279px) {
    .mlsm-menu-switch-wrapper {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Стрелка навигации в wrapper - больше не используется, стрелка остается в заголовке меню */
/* Убрано: стрелка больше не перемещается в wrapper, остается в заголовке для правильного flexbox выравнивания */
.mlsm-menu-switch-wrapper > .mlsm-menu-nav-arrow.mlsm-switch-wrapper-arrow {
    /* Этот класс больше не используется - стрелка остается в заголовке меню */
    display: none !important;
}

/* Убеждаемся, что стрелка "Вперед" не видна в заголовке меню материалов */
.mlsm-materials-menu-header .mlsm-menu-nav-forward,
#mlsm-materials-menu .mlsm-materials-menu-header .mlsm-menu-nav-forward {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* На мобильных стрелки должны быть всегда видны и доступны */
@media (max-width: 1279px) {
    .mlsm-menu-nav-arrow {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 16px !important;
        pointer-events: auto !important;
        z-index: 1000 !important; /* Высокий z-index для мобильных */
    }
}

/* Для режима replace - оба контейнера внутри обертки */
.mlsm-menu-switch-wrapper .mlsm-sidebar-container.mlsm-replace-mode,
.mlsm-menu-switch-wrapper .mlsm-materials-menu-container.mlsm-replace-mode {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

/* Когда меню материалов активно, оно должно быть поверх меню рубрик */
.mlsm-menu-switch-wrapper .mlsm-materials-menu-container.mlsm-replace-mode {
    z-index: 2;
}

/* Когда меню рубрик активно, оно должно быть поверх меню материалов */
.mlsm-menu-switch-wrapper .mlsm-sidebar-container.mlsm-replace-mode:not(.mlsm-hidden-by-materials) {
    z-index: 2;
}

/* Скрытие боковых меню по настройкам: на мобильных или на десктопах (брейкпоинт 1280px) */
@media (max-width: 1279px) {
    body.mlsm-hide-menus-on-mobile .mlsm-sidebar-container,
    body.mlsm-hide-menus-on-mobile .mlsm-materials-menu-container,
    body.mlsm-hide-menus-on-mobile .mlsm-menu-switch-wrapper,
    body.mlsm-hide-menus-on-mobile .folders-row .mlsm-sidebar-container,
    body.mlsm-hide-menus-on-mobile .materials-row .mlsm-sidebar-container,
    body.mlsm-hide-menus-on-mobile .mlsm-category-wrapper .mlsm-sidebar-container,
    body.mlsm-hide-menus-on-mobile .mlsm-category-wrapper .mlsm-materials-menu-container,
    body.mlsm-hide-menus-on-mobile .mlsm-category-wrapper .mlsm-menu-switch-wrapper {
        display: none !important;
    }
    /* При скрытых меню на мобильных — отступ между хлебными крошками и списком материалов (селектор без wrapper; padding не схлопывается) */
    body.mlsm-hide-menus-on-mobile .materials-row {
        padding-top: 30px !important;
    }
}
@media (min-width: 1280px) {
    body.mlsm-hide-menus-on-desktop .mlsm-sidebar-container,
    body.mlsm-hide-menus-on-desktop .mlsm-materials-menu-container,
    body.mlsm-hide-menus-on-desktop .mlsm-menu-switch-wrapper,
    body.mlsm-hide-menus-on-desktop .folders-row .mlsm-sidebar-container,
    body.mlsm-hide-menus-on-desktop .materials-row .mlsm-sidebar-container,
    body.mlsm-hide-menus-on-desktop .mlsm-category-wrapper .mlsm-sidebar-container,
    body.mlsm-hide-menus-on-desktop .mlsm-category-wrapper .mlsm-materials-menu-container,
    body.mlsm-hide-menus-on-desktop .mlsm-category-wrapper .mlsm-menu-switch-wrapper {
        display: none !important;
    }
    /* При скрытых меню на десктопе — блок контента на всю ширину контейнера и по центру */
    body.mlsm-hide-menus-on-desktop .lesson-row .mlsm-lesson-content {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0;
    }
    body.mlsm-hide-menus-on-desktop .lesson-row .mlsm-lesson-content .row,
    body.mlsm-hide-menus-on-desktop .lesson-row .mlsm-lesson-content .row .col-xs-12 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    /* При скрытых меню на десктопе — контент списка материалов на всю ширину */
    body.mlsm-hide-menus-on-desktop .folders-row .mlsm-materials-content,
    body.mlsm-hide-menus-on-desktop .materials-row .mlsm-materials-content {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0;
    }
}

/* Строка-переключатель «→ Уроки курса» в меню рубрик (replace mode, десктоп).
   Вставляется JS-ом перед <ul> внутри .mlsm-menu-wrapper, вне списка,
   поэтому нативная навигация по подрубрикам её не затрагивает. */
.mlsm-desktop-switch-to-materials {
    display: none; /* по умолчанию скрыта; JS устанавливает display:flex через setProperty */
    align-items: center;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #E3E3E3;
    box-sizing: border-box;
    width: 100%;
    list-style: none;
    transition: background 0.15s;
}
.mlsm-desktop-switch-to-materials:hover {
    background: #f5f5f5;
}
.mlsm-desktop-switch-to-materials .mlsm-switch-arrow {
    margin-left: auto;
    font-size: 14px;
    color: #666;
}

/* =====================================================
   РЕЖИМ "2 В 1" — replace mode v3.15
   Два меню склеены вертикально. Заголовки — PHP mobile-toggle
   с admin-цветами. Expand/collapse — initMobileToggle().
   ===================================================== */

/* Обёртка-колонка: два меню вертикально, без зазора.
   align-self: flex-start — не растягиваемся на всю высоту row-контейнера. */
.mlsm-accordion-wrapper {
    display: flex;
    flex-direction: column;
    width: 280px;
    flex-shrink: 0;
    align-self: flex-start;
    height: auto;
    flex: 0 0 280px;
}
@media (max-width: 1279px) {
    .mlsm-accordion-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        align-self: auto;
        order: -1 !important;
        margin-bottom: 20px;
    }
}

/* Контейнеры внутри обёртки: полная ширина, авто-высота.
   Переопределяем flex: 0 0 280px из .lesson-row правил —
   в column-контексте flex-basis задаёт ВЫСОТУ, а не ширину.

   ВАЖНО: sidebar-контейнер получает flex: 0 0 280px от PHP inline-стиля
   с одинаковой специфичностью. Используем 3-классовый селектор (0,0,3,0)
   чтобы гарантированно перекрыть PHP-правило (0,0,2,0).

   Materials-container уже правильно: .mlsm-replace-mode даёт 3 класса.  */
.mlsm-accordion-wrapper .mlsm-sidebar-container.mlsm-integrated,
.lesson-row .mlsm-accordion-wrapper .mlsm-sidebar-container,
.page-title-row .mlsm-accordion-wrapper .mlsm-sidebar-container,
.folders-row .mlsm-accordion-wrapper .mlsm-sidebar-container,
.materials-row .mlsm-accordion-wrapper .mlsm-sidebar-container,
.mlsm-accordion-wrapper .mlsm-materials-menu-container.mlsm-replace-mode {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    height: auto !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Сами div-меню всегда видимы */
.mlsm-accordion-wrapper #mlsm-sidebar-menu,
.mlsm-accordion-wrapper #mlsm-materials-menu {
    display: block !important;
    visibility: visible !important;
}

/* Скрываем пункты переключения (data-switch-to) — в новом режиме не нужны */
.mlsm-accordion-wrapper .mlsm-menu-switch-item {
    display: none !important;
}

/* "Склейка": убираем нижнюю границу рубрик и верхние скругления материалов */
.mlsm-accordion-wrapper .mlsm-sidebar-container #mlsm-sidebar-menu {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
}
.mlsm-accordion-wrapper .mlsm-materials-menu-container #mlsm-materials-menu {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    margin-top: 0 !important;
}
/* Toggle меню материалов: без верхних скруглений (нижняя секция аккордеона) */
.mlsm-accordion-wrapper #mlsm-materials-menu .mlsm-mobile-toggle {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* hide-menus: учитываем accordion-wrapper наряду с обычными контейнерами */
@media (max-width: 1279px) {
    body.mlsm-hide-menus-on-mobile .mlsm-accordion-wrapper {
        display: none !important;
    }
}
@media (min-width: 1280px) {
    body.mlsm-hide-menus-on-desktop .mlsm-accordion-wrapper {
        display: none !important;
    }
}

/* ── Мобильные исправления навбара при активном плагине боковых меню ── */
@media (max-width: 1279px) {
    /* Элементы навбара всегда в одну строку */
    .top-nav-row .top-nav-row--inner {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /* Убираем вертикальные отступы у пунктов навбара — они распирают строку */
    .top-nav-row .nav-item,
    .top-nav-row .mobile-menu-button {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Боковые отступы иконок навбара: 15px → 8px только на мобильных */
    .top-nav-row .nav-item,
    .top-nav-row .shop-menu-item {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .top-nav-row .navbar-cart-inner {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .top-nav-row .mblg-notifications-wrap,
    .top-nav-row .mbln-notifications-wrap {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .top-nav-row .mblg-gamification-wrap {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Гамбургер-меню: позиция сразу под навбаром (переопределяет hardcoded top: 53px из Memberlux) */
    .mobile-menu-row {
        top: var(--mlsm-navbar-h, 53px) !important;
    }

    /* Гамбургер-меню (mobile-menu-row) на всю ширину экрана */
    .mobile-menu-row .container {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Все dropdown-меню навбара — на всю ширину от края экрана.
       top задаётся JS-переменной --mlsm-navbar-h (с fallback 53px). */
    .top-nav-row .dropdown.open > .dropdown-menu,
    .top-nav-row .mblg-gamification-wrap.open .mblg-dropdown {
        position: fixed !important;
        top: var(--mlsm-navbar-h, 53px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        z-index: 9999 !important;
    }
}

/* ==============================================
   Автотренинг: заблокированные уроки в меню
   ============================================== */

/* Заблокированный пункт — общие свойства (cursor, без pointer-events: none — чтобы hover работал) */
#mlsm-materials-menu .mlsm-menu-item.mlsm-inaccessible > .mlsm-menu-link {
    cursor: default !important;
    opacity: 0.92 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* Заблокированные — диагональная штриховка, background-attachment: fixed для непрерывных линий */
#mlsm-materials-menu .mlsm-menu-item.mlsm-inaccessible > .mlsm-menu-link {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(0, 0, 0, 0.05) 4px,
        rgba(0, 0, 0, 0.05) 8px
    ) !important;
    background-repeat: repeat !important;
    background-attachment: fixed !important;
}

/* Заблокированный пункт при hover — как обычный интерфейс (без overlay) */
#mlsm-materials-menu .mlsm-menu-item.mlsm-inaccessible > .mlsm-menu-link:hover {
    opacity: 1 !important;
    background-image: none !important;
    background-color: inherit !important;
    color: inherit !important;
}

/* Подпись «пройдите предыдущий урок» — цвет и фон из output_inline_styles (MemberLux) */
#mlsm-materials-menu .mlsm-menu-item.mlsm-inaccessible .mlsm-doc-label-locked {
    display: block !important;
    width: 100% !important;
    flex-basis: 100% !important;
    flex-shrink: 0 !important;
    margin-top: 4px !important;
    margin-left: 0 !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
    border-radius: 4px !important;
    text-align: center !important;
    color: #fff !important;
    background: #838788 !important;
}

/* При hover — подпись остаётся, но фон пункта нормальный */
#mlsm-materials-menu .mlsm-menu-item.mlsm-inaccessible > .mlsm-menu-link:hover .mlsm-doc-label-locked {
    display: block !important;
}

/* ==============================================
   Автотренинг: цвета иконок по статусу урока
   ============================================== */

/* Одобрен / пройден без ДЗ → зелёный */
#mlsm-materials-menu .mlsm-access-icon.mlsm-lesson-status-approved {
    color: #56bf50 !important;
}

/* Ожидает проверки → оранжевый */
#mlsm-materials-menu .mlsm-access-icon.mlsm-lesson-status-checking {
    color: #f0a500 !important;
}

/* Не начат (доступен, но ещё не открыт) → серый */
#mlsm-materials-menu .mlsm-access-icon.mlsm-lesson-status-not-started {
    color: #959595 !important;
}

/* Не одобрено (ДЗ отклонено) → красный */
#mlsm-materials-menu .mlsm-access-icon.mlsm-lesson-status-rejected {
    color: #cd2a27 !important;
}

/* Заблокирован (последовательный замок) → серый */
#mlsm-materials-menu .mlsm-access-icon.mlsm-lesson-status-locked {
    color: #959595 !important;
}