/* ============================================================
   mobile.css — адаптив основного сайта inharmony.ru
   Подключается ПОСЛЕ style.css и vg.css.
   Правки только для экранов уже 992px; вёрстка десктопа не затрагивается.
   2026-09
   ============================================================ */

/* ---------- 1. Общее: убираем горизонтальную прокрутку ---------- */
@media (max-width: 991px) {
    html, body { overflow-x: hidden; }
    img, iframe, video, embed, object { max-width: 100%; }
    img { height: auto; }
}

/* ---------- 2. Бургер-меню ---------- */

/* кнопка-бургер: скрыта на десктопе.
   Иконка — inline-SVG, а не псевдоэлементы на <span>: внутри .toplinks
   у span есть собственные стили сайта, которые ломали полоски. */
#mm-burger {
    display: none;
    width: 46px;
    height: 40px;
    border: 1px solid #c9d2e3;
    border-radius: 4px;
    background: #fff !important;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
}
#mm-burger svg { display: block; width: 22px; height: 16px; }
#mm-burger svg rect { fill: #294079; transition: transform .2s ease, opacity .2s ease; transform-origin: 50% 50%; }
body.mm-open #mm-burger svg rect:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.mm-open #mm-burger svg rect:nth-child(2) { opacity: 0; }
body.mm-open #mm-burger svg rect:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* выезжающая панель */
#mm-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 86%;
    max-width: 360px;
    background: #fff;
    box-shadow: -2px 0 14px rgba(0,0,0,.25);
    transform: translateX(105%);
    transition: transform .25s ease;
    z-index: 10001;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: none;
}
body.mm-open #mm-panel { transform: translateX(0); }

#mm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    display: none;
}
body.mm-open #mm-overlay { opacity: 1; pointer-events: auto; }
body.mm-open { overflow: hidden; }

#mm-panel .mm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #294079;
    color: #fff;
    font: 600 15px/1.2 Helvetica, Arial, sans-serif;
}
#mm-panel .mm-close {
    background: none;
    border: 0;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

/* пункты меню внутри панели */
#mm-panel ul { list-style: none; margin: 0; padding: 0; }
#mm-panel li { border-bottom: 1px solid #edf0f5; position: relative; }
#mm-panel li a {
    display: block;
    padding: 14px 52px 14px 16px;
    color: #23374f;
    font: 15px/1.35 Helvetica, Arial, sans-serif;
    text-decoration: none;
}
#mm-panel li a:hover,
#mm-panel li a:focus { background: #f4f6fa; color: #294079; }
#mm-panel li i { display: none; }              /* стрелки из десктопного меню */

/* вложенные уровни */
#mm-panel ul ul { display: none; background: #f7f9fc; }
#mm-panel li.mm-expanded > ul { display: block; }
#mm-panel ul ul a { padding-left: 32px; font-size: 14px; color: #47566c; }
#mm-panel ul ul ul a { padding-left: 48px; }

/* кнопка раскрытия подпунктов */
#mm-panel .mm-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 48px;
    border: 0;
    border-left: 1px solid #edf0f5;
    background: transparent;
    cursor: pointer;
}
#mm-panel .mm-toggle::before {
    content: "";
    position: absolute;
    top: 19px;
    left: 19px;
    width: 9px;
    height: 9px;
    border-right: 2px solid #7b8aa1;
    border-bottom: 2px solid #7b8aa1;
    transform: rotate(45deg);
    transition: transform .2s ease;
}
#mm-panel li.mm-expanded > .mm-toggle::before { transform: rotate(-135deg); top: 23px; }

/* быстрые ссылки в конце панели */
#mm-panel .mm-extra { padding: 16px; border-top: 1px solid #edf0f5; }
#mm-panel .mm-extra a {
    display: block;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: #294079;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    font: 600 14px/1 Helvetica, Arial, sans-serif;
    text-decoration: none;
}
#mm-panel .mm-extra a.mm-phone { background: #5c7099; }

/* строка «Новости | Расписание | бургер» */
@media (max-width: 991px) {
    .toplinks {
        display: flex !important;
        align-items: stretch;
        width: 100%;
    }
    .toplinks > a {
        flex: 1 1 auto;
        margin: 4px 4px 4px 0;
        padding: 10px 6px !important;
        background: #294079 !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 4px;
        text-align: center;
        font: 600 13px/1.1 Helvetica, Arial, sans-serif;
        text-decoration: none;
    }
    .toplinks > a:hover,
    .toplinks > a:focus { background: #1e3060 !important; color: #fff !important; }
    .toplinks > a i { display: none; }
    .toplinks > .bvi-open {
        flex: 0 0 auto;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        background: transparent !important;
    }
    .toplinks > .bvi-open svg { display: block; width: 21px; height: 19px; }
    .toplinks > .bvi-open i { display: block; line-height: 0; }
    #mm-burger { flex: 0 0 auto; margin: 4px 6px 4px 0; }
}

/* включаем бургер и прячем прежние варианты меню */
@media (max-width: 991px) {
    #mm-burger { display: flex; }
    #mm-panel, #mm-overlay { display: block; }
    nav.tm_navbar ul.sf-menu { display: none !important; }
    nav.tm_navbar select.select-menu { display: none !important; }
}

/* ---------- 3. Подвал: сворачиваем на мобильном ---------- */
@media (max-width: 767px) {
    footer {
        position: relative;
        max-height: 240px;
        overflow: hidden;
        transition: max-height .3s ease;
    }
    footer.mm-footer-open { max-height: none; }
    footer::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 70px;
        background: linear-gradient(to bottom, var(--mm-footer-bg-0, rgba(78,78,78,0)), var(--mm-footer-bg, #4e4e4e));
        pointer-events: none;
    }
    footer.mm-footer-open::after { display: none; }

    #mm-footer-more {
        display: block;
        width: calc(100% - 30px);
        margin: 0 15px 18px;
        padding: 11px;
        border: 1px solid #c9d2e3;
        border-radius: 4px;
        background: #fff;
        color: #294079;
        font: 600 14px/1 Helvetica, Arial, sans-serif;
        cursor: pointer;
    }
    footer [class*="col-"] { margin-bottom: 4px; }
}
#mm-footer-more { display: none; }

/* ---------- 4. Кнопка «наверх» ----------
   Штатную кнопку сайта #toTop прячем и используем свою. */
#toTop { display: none !important; }

#mm-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(41,64,121,.9);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 9990;
    padding: 0;
}
#mm-top.mm-visible { opacity: 1; pointer-events: auto; }
#mm-top::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: 4px auto 0;
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
    transform: rotate(45deg);
}
@media (max-width: 767px) {
    #mm-top { right: 12px; bottom: 12px; }
}

/* ---------- 5. Широкие таблицы (расписания) ---------- */
.mm-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 14px;
}
.mm-table-scroll > table { margin-bottom: 0; }

.mm-table-hint {
    display: none;
    font: 12px/1.3 Helvetica, Arial, sans-serif;
    color: #7b8aa1;
    margin: 0 0 6px;
}
@media (max-width: 767px) {
    .mm-table-hint { display: block; }
    /* Bootstrap задаёт таблице width:100%; внутри прокручиваемого контейнера
       это сжимает колонки до нечитаемого состояния и обнуляет картинки.
       Возвращаем натуральную ширину — контейнер прокручивается вбок. */
    .mm-table-scroll > table { width: auto !important; min-width: 100%; }
    /* при table-layout:auto картинка с max-width:100% не задаёт ширину колонке,
       и ячейка схлопывается до нескольких пикселей — задаём размер явно */
    .mm-table-scroll table img { width: 104px; max-width: none; height: auto; }
    .mm-table-scroll > table { font-size: 13px; }
    .mm-table-scroll > table td,
    .mm-table-scroll > table th { padding: 6px 8px; }
}

/* ---------- 6. Старая плашка про cookie: делаем читаемой ----------
   Временная мера. На третьем этапе плашка заменяется полноценным
   виджетом согласия с выбором категорий.                           */
.cookies {
    opacity: 1 !important;
    background: #4e4e4e !important;
    padding: 12px 56px 12px 14px !important;
    z-index: 9995;
}
.cookies p { font: 13px/1.4 Helvetica, Arial, sans-serif; }
.cookies span {
    right: 12px !important;
    top: 50%;
    margin-top: -13px;
    width: 26px !important;
    height: 26px;
    line-height: 26px !important;
    padding: 0 !important;
    font: 14px/26px Helvetica, Arial, sans-serif;
}
@media (max-width: 767px) {
    .cookies p { font-size: 12px; }
}

/* ---------- 7. Мелочи ---------- */
@media (max-width: 767px) {
    /* пустые блоки-остатки в шапке не занимают место */
    .add_top_menu > div:empty { display: none; }
    /* подписи и поля форм крупнее для пальца */
    .form-control { font-size: 16px; }   /* 16px — iOS не увеличивает страницу при фокусе */
}