/* cn3-plus / menu: иконки пунктов и оформление мобильного меню */

/* на обычной шапке компьютера иконки не нужны */
.site-nav .cn3x-mi { display: none; }
.cn3x-mi { flex: 0 0 auto; }
.cn3x-mi .cn3-i { display: block; width: 20px; height: 20px; }

/* ---- Выезжающее меню (телефон, планшет) ---- */
.mobile-nav { padding: 8px 14px 12px; }
.mobile-nav .nav-menu > .menu-item { border-bottom: 0; margin: 2px 0; border-radius: 16px; transition: background-color .15s ease; }
.mobile-nav .nav-menu > .menu-item > a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 8px 56px 8px 8px !important;
  border-radius: 16px;
  font-size: 1.05rem;
  font-weight: var(--medium, 500);
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav .nav-menu > .menu-item > a:active { background: var(--greyBg); }
.mobile-nav .cn3x-mi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--greyBg);
  color: var(--mainColor);
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.mobile-nav .nav-menu > .menu-item > a:active .cn3x-mi { transform: scale(.94); }
/* активный раздел: плитка иконки закрашена, слева без жёсткой полосы */
.mobile-nav .current-menu-item, .mobile-nav .current-menu-ancestor { box-shadow: none; background: var(--greyBg); }
.mobile-nav .current-menu-item > a .cn3x-mi, .mobile-nav .current-menu-ancestor > a .cn3x-mi { background: var(--mainColor); color: var(--bodyBg, #fff); }
/* стрелка раскрытия справа на уровне иконки */
.mobile-nav .nav-menu > .menu-item-has-children::before { top: 14px; right: 10px; width: 30px; height: 30px; border-radius: 10px; }
.mobile-nav .sub-menu { padding: 0 0 8px 62px !important; }
.mobile-nav .sub-menu .menu-item > a { padding: 11px 8px !important; border-radius: 12px; }
.mobile-nav .sub-menu .menu-item > a:active { background: var(--greyBg); }

/* пункты появляются по очереди, когда меню открывается */
@keyframes cn3xMenuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mobile-nav-panel.is-open .mobile-nav .nav-menu > .menu-item { animation: cn3xMenuIn .3s ease both; }
.mobile-nav-panel.is-open .mobile-nav .nav-menu > .menu-item:nth-child(2) { animation-delay: .03s; }
.mobile-nav-panel.is-open .mobile-nav .nav-menu > .menu-item:nth-child(3) { animation-delay: .06s; }
.mobile-nav-panel.is-open .mobile-nav .nav-menu > .menu-item:nth-child(4) { animation-delay: .09s; }
.mobile-nav-panel.is-open .mobile-nav .nav-menu > .menu-item:nth-child(5) { animation-delay: .12s; }
.mobile-nav-panel.is-open .mobile-nav .nav-menu > .menu-item:nth-child(6) { animation-delay: .15s; }
.mobile-nav-panel.is-open .mobile-nav .nav-menu > .menu-item:nth-child(n+7) { animation-delay: .18s; }

/* нижняя строка меню: «Сохранённое» и подсказка про жест */
.cn3x-drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 14px 4px; padding: 12px 8px 4px; border-top: 1px solid var(--borderColor); font-size: var(--t-ui, .88rem); color: var(--cn3Muted, var(--greyColor)); }
.cn3x-drawer-foot a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--mainColor); text-decoration: none; font-weight: var(--medium, 500); }
.cn3x-drawer-foot svg { width: 20px; height: 20px; }
.cn3x-drawer-foot__n { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--mainColor); color: var(--bodyBg, #fff); font-size: var(--t-meta, .78rem); text-align: center; }

/* ---- Лента меню на планшетах: маленькая иконка перед названием ---- */
@media (min-width: 700px) and (max-width: 1100px) {
  html body .site-nav--inline .cn3x-mi { display: inline-flex; margin-right: 7px; vertical-align: -4px; }
  html body .site-nav--inline .cn3x-mi .cn3-i { width: 17px; height: 17px; }
  html body .site-nav--inline .menu-item > a { display: inline-flex !important; align-items: center; }
}
html.cn3-compact body .site-nav--inline .cn3x-mi { display: inline-flex; margin-right: 7px; vertical-align: -4px; }
html.cn3-compact body .site-nav--inline .cn3x-mi .cn3-i { width: 17px; height: 17px; }
html.cn3-compact body .site-nav--inline .menu-item > a { display: inline-flex !important; align-items: center; }