/* п.468 (архив Сергея metro-services-menu-handoff 30.09.2026, «приступай»): меню «Услуги» в шапке.
   Разметка панели - include/desktop-header.php (данные - 'menu' в local/config/services-pages.php),
   поведение - js/services-menu.js. Размеры и цвета - по ТЗ комплекта (services-menu.css эталона),
   всё внутри .ms-* - на страницы не влияет и от их CSS не зависит. */
.ms-menu[hidden], .ms-shade[hidden] { display: none !important; }
.ms-menu { box-sizing: border-box; position: fixed; z-index: 10040; width: min(960px, calc(100vw - 32px)); background: #fff; border: 1px solid #dfe5ef; border-radius: 18px; box-shadow: 0 20px 64px rgba(9, 26, 61, .14); color: #0a1b42; padding: 25px 28px 22px; overflow: auto; overscroll-behavior: contain; font: 14px/1.45 Arial, sans-serif; text-align: left; letter-spacing: normal; }
.ms-menu * { box-sizing: border-box; }
.ms-menu h2, .ms-menu h3, .ms-menu ul, .ms-menu li, .ms-menu p { margin: 0; padding: 0; }
.ms-heading { display: flex; align-items: center; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid #e4e9f1; margin-bottom: 22px; }
.ms-menu .ms-heading h2 { font: 700 23px/1.2 Arial, sans-serif; letter-spacing: -.5px; color: #0a1b42; }
.ms-menu .ms-all { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; color: #0a1b42; text-decoration: none; font-size: 13px; font-weight: 600; }
.ms-menu .ms-all:hover { color: #ee1234; }
.ms-menu svg { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ms-menu .ms-close { display: grid; place-items: center; width: 30px; height: 30px; margin: 0; border: 0; border-radius: 7px; background: #f2f4f8; cursor: pointer; color: #64748b; padding: 5px; }
.ms-menu .ms-close:hover { color: #0a1b42; }
.ms-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.ms-group + .ms-group { border-left: 1px solid #e4e9f1; padding-left: 24px; }
.ms-menu .ms-group h3 { display: flex; align-items: center; gap: 10px; font: 700 13px/1.4 Arial, sans-serif; margin: 0 0 16px; color: #0a1b42; }
.ms-icon { display: grid; place-items: center; color: #ee1234; background: #fff1f3; border-radius: 9px; min-width: 33px; height: 33px; }
.ms-menu .ms-group ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.ms-menu .ms-group li { list-style: none; background: none; }
.ms-menu .ms-group li::before, .ms-menu .ms-group li::after { display: none; content: none; }
.ms-menu .ms-group li > a { display: block; margin: 0 -10px; padding: 10px; border-radius: 9px; text-decoration: none; color: #0a1b42; transition: background .15s; }
.ms-menu .ms-group li > a:hover, .ms-menu .ms-group li > a:focus-visible, .ms-menu .ms-group li > a[aria-current="page"] { background: #f3f5fa; }
.ms-title { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 14px; font-weight: 600; line-height: 1.45; }
.ms-title svg { height: 15px; width: 15px; opacity: 0; color: #ee1234; }
.ms-group a:hover .ms-title, .ms-group a:focus-visible .ms-title, .ms-group a[aria-current="page"] .ms-title { color: #ee1234; }
.ms-group a:hover .ms-title svg, .ms-group a:focus-visible .ms-title svg { opacity: 1; }
.ms-caption { display: block; margin-top: 5px; color: #718098; font-size: 12px; line-height: 1.45; font-weight: 400; }
.ms-menu a:focus-visible, .ms-menu button:focus-visible, .ms-trigger:focus-visible { outline: 2px solid #ee1234; outline-offset: 4px; }
.ms-shade { position: fixed; inset: 0; z-index: 10039; background: rgba(8, 26, 61, .33); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* панель выше плавающей кнопки чата, ниже окна «Связаться» (.yhc-ov, 10050) и окон главной */

/* кнопка в шапке компьютера - как «О компании» (.ymdh-subbtn); открыто - красная с чертой снизу */
.ymdh .ymdh-nav .ms-trigger[aria-expanded="true"] { color: var(--dh-red, #ee1234); box-shadow: inset 0 -2px 0 var(--dh-red, #ee1234); }

/* кнопка у логотипа на телефоне: без JS - ссылка на все услуги */
.ym-head-services-m { display: none; }
@media (max-width: 767px) {
    body .header-top .ym-head-services-m { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 40px; margin: 0; padding: 0 4px; border: 0; background: none; color: #07183f; font: 600 13px/1 Arial, sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    body .header-top .ym-head-services-m svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s; }
    body .header-top .ym-head-services-m[aria-expanded="true"] { color: #ee1234; }
    body .header-top .ym-head-services-m[aria-expanded="true"] svg { transform: rotate(180deg); }

    .ms-menu { inset: auto 0 0 0 !important; width: 100%; max-height: calc(100dvh - 24px) !important; border-radius: 20px 20px 0 0; border-bottom: 0; padding: 0 22px max(24px, env(safe-area-inset-bottom)); }
    .ms-heading { position: sticky; top: 0; z-index: 1; background: #fff; padding: 23px 0 18px; margin-bottom: 19px; gap: 14px; }
    .ms-menu .ms-heading h2 { font-size: 22px; }
    .ms-columns { grid-template-columns: 1fr; gap: 22px; }
    .ms-group + .ms-group { border-left: 0; padding-left: 0; border-top: 1px solid #e4e9f1; padding-top: 20px; }
    .ms-menu .ms-group h3 { margin-bottom: 8px; }
    .ms-menu .ms-group li > a { padding: 12px 10px; }
    .ms-title { font-size: 15px; }
    .ms-title svg { opacity: 1; color: #93a0b4; }
    .ms-menu .ms-all { font-size: 12px; gap: 6px; }
    .ms-menu .ms-close { width: 32px; height: 32px; }
    .ms-menu .ms-group:last-child { padding-bottom: 15px; }
    html.ms-lock, html.ms-lock body { overflow: hidden !important; }
}
/* до 374 px логотип слева (п.372) - «Услуги» сразу за ним, логотип чуть меньше, чтобы не задеть «Связаться» */
@media (max-width: 374px) {
    body .header-top .ym-head-services-m { position: static; transform: none; order: 2; margin-left: 4px; padding: 0; font-size: 12px; }
    body .header-top .logo { order: 1; width: auto; margin-right: 0; }
    body .header-top .logo img { width: 96px; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .ms-menu *, .ms-trigger svg, .ym-head-services-m svg { transition: none !important; }
}