/* =================================================
   MOBILE HEADER (<= 940px) — Stripe-like overlay
   Отдельно от desktop header.css
   ================================================= */

/* Показываем mobile только до 940 */
@media (min-width: 941px){
  .m-header{ display:none; }
}
@media (max-width: 940px){
  .site-header{ display:none; } /* твой desktop header скрываем */
}

/* Top bar */
.m-header{
  max-width: 1200px;
  margin: 14px auto;
  padding: 0 12px;
}

.m-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding: 12px 14px;

  background: linear-gradient(120deg, #ffffff, #f2f7ff);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.m-logo{
  display:inline-flex;
  align-items:center;
  flex: 0 0 auto;
}

.m-logo img{
  height: 40px;
  width: auto !important;
  display:block;
  object-fit: contain;
}

/* Burger button */
.m-burger{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,44,95,.12);
  background: #fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.m-burger:hover{
  background: rgba(0,108,255,.08);
}

.m-burger__lines{
  width: 20px;
  height: 14px;
  position: relative;
  display:block;
}

.m-burger__lines::before,
.m-burger__lines::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, top .2s ease, opacity .2s ease;
}

.m-burger__lines::before{ top: 2px; }
.m-burger__lines::after{ top: 10px; }

/* Overlay */
.m-overlay{
  position: fixed;
  inset: 0;
  z-index: 999;
  height: 100dvh;

  background: rgba(2,44,95,.25);
  backdrop-filter: blur(6px);
}

/* Panel (full screen like Stripe, но с аккуратными отступами) */
.m-panel{
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;

  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(2,44,95,.25);

  display:flex;
  flex-direction:column;

  overflow:hidden;
  min-height: 0;
}

/* Top inside panel */
.m-panel__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px 12px 14px;
  border-bottom: 1px solid rgba(0,44,95,.10);
}

.m-title{
  font-weight: 900;
  font-size: 18px;
  color: var(--ink);
}

/* Close button */
.m-close{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,44,95,.12);
  background: #fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.m-close:hover{
  background: rgba(0,108,255,.08);
}

.m-close__x{
  width: 18px;
  height: 18px;
  position: relative;
  display:block;
}

.m-close__x::before,
.m-close__x::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 18px;
  height:2px;
  background: var(--ink);
  border-radius: 2px;
  transform-origin: center;
}

.m-close__x::before{ transform: translate(-50%,-50%) rotate(45deg); }
.m-close__x::after{ transform: translate(-50%,-50%) rotate(-45deg); }

/* Nav (скроллится только этот блок) */
.m-nav{
  padding: 12px 14px 16px 14px;

  flex: 1 1 auto;
  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  display:block;
  -webkit-overflow-scrolling: touch;
}

/* ===== РАССТОЯНИЯ (аккуратно и стабильно) ===== */

/* расстояние между верхними пунктами/аккордеонами */
.m-link,
.m-acc{
  margin-bottom: 10px;
}
.m-nav > :last-child{
  margin-bottom: 0;
}

/* расстояние внутри аккордеона */
.m-acc__panel{
  padding: 8px 10px 12px 10px; /* немного воздуха сверху/снизу */
}
.m-acc__panel .m-sublink{
  margin-bottom: 8px;
}
.m-acc__panel .m-sublink:last-child{
  margin-bottom: 0;
}

/* Links */
.m-link{
  display:flex;
  align-items:center;
  gap: 12px;

  padding: 14px 12px;
  border-radius: 16px;

  text-decoration:none;
  color: var(--ink);
  font-weight: 800;
  background: rgba(0,108,255,.04);
  border: 1px solid rgba(0,44,95,.08);

  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.m-link:hover{
  background: rgba(0,108,255,.10);
  border-color: rgba(0,108,255,.18);
  color: var(--blue);
}

.m-ico{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display:block;
}

/* Accordion */
.m-acc{
  border: 1px solid rgba(0,44,95,.08);
  background: rgba(0,108,255,.03);
  border-radius: 16px;
  overflow:hidden;
}

.m-acc__btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  padding: 14px 12px;
  background: transparent;
  border: 0;
  cursor:pointer;

  font-family: 'Bender', sans-serif;
  font-weight: 900;
  font-size: 16px;
  color: var(--ink);
}

.m-acc__left{
  display:flex;
  align-items:center;
  gap: 12px;
}

.m-acc__chev{
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.m-sublink{
  display:flex;
  align-items:center;
  gap: 10px;

  padding: 12px 12px;
  border-radius: 14px;

  text-decoration:none;
  color: var(--ink);
  font-weight: 700;
  background: #fff;
  border: 1px solid rgba(0,44,95,.08);
}

.m-sublink:hover{
  background: rgba(0,108,255,.08);
  border-color: rgba(0,108,255,.18);
  color: var(--blue);
}

.m-subico{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display:block;
}

/* Accordion open state (JS ставит aria-expanded="true") */
.m-acc__btn[aria-expanded="true"] .m-acc__chev{
  transform: rotate(-135deg);
}

/* Actions (вынесены из .m-nav, не скроллятся) */
.m-actions{
  flex: 0 0 auto;

  margin-top: 0;
  padding: 12px 14px 14px;

  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;

  background: #fff;
  border-top: 1px solid rgba(0,44,95,.10);
}

.m-action{
  justify-content:center;
  width: 100%;
}

/* Body lock */
body.m-menu-open{
  overflow: hidden;
}

/* ===== FIX: hidden всегда скрывает аккордеон ===== */
.m-acc__panel[hidden]{
  display: none !important;
}