/* ============================================================
   МОБИЛЬНОЕ МЕНЮ (бургер) — Figma 516:1471 (пиксель-в-пиксель).
   Дроп-панель сверху: «Menu» + пункты-пилюли (пунктир) + телефон +
   кнопка «Umów wizytę». Кнопка закрытия — по центру бургера (#4),
   чтобы при открытии/закрытии не «прыгала».
   ============================================================ */
.mmenu {
  position: fixed; left: 16px; right: 16px; top: 16px; z-index: 95;   /* меню поднято на 80px (было 96) */
  max-height: calc(100dvh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-radius: 12px; background: #0f0f0f; padding: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  /* затемняющий бэкдроп вокруг панели (страница не просвечивает) — без доп. слоя */
  box-shadow: 0 0 0 100vmax rgba(3, 3, 3, .72);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .26s ease, transform .26s ease, visibility .26s;
}
.mmenu.is-open { opacity: 1; visibility: visible; transform: none; }

/* шапка: «Menu» по центру (z0), кнопка закрытия — абсолют по центру бургера (40,40) */
.mmenu__top { position: static; align-self: stretch; display: flex; align-items: center; justify-content: center; height: 32px; }
.mmenu__title {
  font-family: var(--ff-body); font-weight: 700; font-size: 20px; line-height: 32px;
  letter-spacing: .6px; text-transform: uppercase; color: var(--light-1000);
}
.mmenu__close {
  position: absolute; left: 8px; top: 8px; z-index: 2;     /* крестик — в углу панели (вверху), на своём месте */
  width: 32px; height: 32px; border-radius: 100px;
  background: var(--light-40); color: var(--light-600);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.mmenu__close:hover { background: var(--light-80); color: var(--light-1000); }
.mmenu__close .icon { width: 12px; height: 12px; }

/* навигация — столбик пунктов-пилюль (без общей рамки и сепараторов) */
.mmenu__nav { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.mmenu__sep { display: none; }                  /* разделители не нужны — у каждого пункта свой пунктир */
.mmenu__link {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  height: 44px; border-radius: 8px;
  border: 1px dashed rgba(255,255,255,.08);     /* пунктирная обводка */
  font-family: var(--ff-body); font-weight: 400; font-size: 14px;
  letter-spacing: var(--ls-body); text-transform: uppercase; color: var(--light-600);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.mmenu__link:hover { color: var(--light-1000); border-color: rgba(255,255,255,.16); }
/* активный пункт «Główna» — сплошная белая 4% плашка, без пунктира */
.mmenu__link--active {
  background: var(--light-40); color: var(--light-1000); font-weight: 700;
  border: 1px solid transparent; letter-spacing: normal; }
/* Usługi — пунктирная плашка с дропдаун-шевроном справа */
.mmenu__trigger { position: relative; }
.mmenu__trigger .icon {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; transition: transform .25s ease;
}

/* аккордеон USŁUGI */
.mmenu__acc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.mmenu__acc-inner { overflow: hidden; }
.mmenu__svcs { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.mmenu__svcs.is-open .mmenu__acc { grid-template-rows: 1fr; }
.mmenu__svcs.is-open .mmenu__trigger .icon { transform: translateY(-50%) rotate(180deg); }
.mmenu__svc { display: flex; align-items: center; gap: 16px; padding: 8px 6px; border-radius: 10px; }
.mmenu__svc:hover { background: var(--light-40); }
.mmenu__svc img { width: 72px; height: 54px; flex: none; border-radius: 8px; object-fit: cover; }
.mmenu__svc span {
  font-family: var(--ff-body); font-weight: 700; font-size: 14px; line-height: 18px;
  text-transform: uppercase; color: var(--light-1000); letter-spacing: normal; }

/* нижний блок: телефон + кнопка — gap 16 */
.mmenu__phone {
  align-self: stretch; flex: none; display: flex; align-items: stretch;
  height: 56px; border-radius: 8px; overflow: hidden;
  color: var(--light-1000);
  font-family: var(--ff-body); font-weight: 700; font-size: 16px; letter-spacing: .3px;
}
/* левый контейнер иконки (36px) + номер по центру (Figma call-icon-container) */
.mmenu__phone-ic {
  width: 36px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--light-40); border-right: 1px solid var(--light-40);
}
.mmenu__phone-ic .icon { width: 16px; height: 16px; }
.mmenu__phone-num {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  background: var(--light-40); text-align: center; transition: background .15s ease;
}
.mmenu__phone:hover .mmenu__phone-num { background: var(--light-80); }

/* CTA «Umów wizytę» (белая, текст + стрелка) — сброс мобильного .btn-appt из hero */
.mmenu__cta { align-self: stretch; flex: none; order: 0; width: 100%; max-width: none; height: 56px; margin: 0; }
.mmenu__cta .btn-appt__label { flex: 1 1 0; justify-content: center; }

/* на десктопе меню недоступно */
@media (min-width: 769px) { .mmenu { display: none !important; } }