/* 93 · Main Menu overlay — перенос из Figma (149:84819 / 156:128497 и соседние ширины).
   Числа взяты из макета; десктоп — фрейм 1600, одноколоночная раскладка — фрейм 375. */

.mnu {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.mnu[hidden] { display: none; }

/* Подложка */
.mnu-dim {
  position: absolute;
  inset: 0;
  background: rgba(67, 67, 67, 0.32);
  backdrop-filter: blur(10.1px);
  -webkit-backdrop-filter: blur(10.1px);
  opacity: 0;
  transition: opacity 320ms linear;
}

/* Полотно: правый лист, слева видна полоса страницы */
.mnu-sheet {
  --mnu-left: 41px;
  --mnu-radius: 38px;
  --mnu-head: 80px;

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--mnu-left);
  display: flex;
  flex-direction: column;
  border-radius: var(--mnu-radius) 0 0 var(--mnu-radius);
  background: #eaeaea;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mnu.is-open .mnu-dim { opacity: 1; }
.mnu.is-open .mnu-sheet { transform: none; }

/* ---------- Шапка оверлея ---------- */
.mnu-head {
  flex: none;
  height: var(--mnu-head);
  padding: 12px;
}

.mnu-bar {
  position: relative;
  height: 56px;
  border-radius: 32px;
  background: #f7f7f7;
}

.mnu-logo {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 8px;
  text-decoration: none;
}

.mnu-logo-symbol { display: block; width: 48px; height: 48px; }
.mnu-logo-wordmark { display: block; width: 153px; height: 18px; }

.mnu-close {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 94px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: #171719;
  cursor: pointer;
}

.mnu-close img { display: block; width: 28px; height: 28px; }

/* ---------- Тело ---------- */
.mnu-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 712fr 839fr;
  /* Строка ровно по высоте листа: без ограничения колонка формы растит строку,
     тянет за собой соседнюю и уводит контакты за нижний край. */
  grid-template-rows: minmax(0, 1fr);
  column-gap: 4px;
  padding: 0 12px 12px 4px;
}

/* Каждая колонка живёт своей высотой: нижний блок прижат margin-top:auto,
   верхний ужимается. Общая строка сетки связала бы их и вытолкнула низ. */
.mnu-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mnu-form { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.mnu-nav { flex: 0 1 auto; min-height: 0; }
.mnu-social,
.mnu-contacts { flex: none; margin-top: auto; }

/* ---------- Навигация ---------- */
.mnu-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 8px;
}

.mnu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-radius: 16px;
  background: #eaeaea;
  font: italic 400 22px/40px "Inter", sans-serif;
  color: #171719;
  text-decoration: none;
  opacity: 0.64;
  transition: opacity 240ms linear, background-color 240ms linear, border-radius 240ms linear;
}

.mnu-item-chevron {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  opacity: 0;
  transition: opacity 240ms linear;
}

/* Наведение и «где я сейчас» — разные сообщения, поэтому и знаки разные.
   Ховер только проявляет текст: ни жирности, ни сдвига, ни капсулы. Иначе
   наведение неотличимо от текущего пункта и на экране два выбранных сразу,
   а смена веса и паддинга ещё и дёргает строку под курсором. */
.mnu-item:hover,
.mnu-item:focus-visible {
  opacity: 1;
}

/* Текущий пункт: белая капсула с шевроном — состояние из макета */
.mnu-item.is-current {
  padding-right: 20px;
  border-radius: 32px;
  background: #f7f7f7;
  font-weight: 500;
  opacity: 1;
}

.mnu-item.is-current .mnu-item-chevron { opacity: 1; }

/* ---------- Соцсети ---------- */
.mnu-social {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 0 12px 12px;
}

.mnu-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px 26px 26px 26px;
  background: #f7f7f7;
}

.mnu-social-btn img { display: block; width: 26px; height: 26px; }

/* ---------- Контакты ---------- */
.mnu-contacts {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  /* 258 — высота карточки во фрейме 1600. Ниже по ширине чипсы переносятся
     в две строки, поэтому это нижняя граница, а не фиксированная высота. */
  min-height: 258px;
  padding: 32px 12px 12px;
  border-radius: 34px;
  background: #f7f7f7;
}

.mnu-contacts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding: 0 20px;
}

.mnu-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.mnu-contact-label {
  font: 400 17px/28px "Inter", sans-serif;
  color: #171719;
  opacity: 0.56;
}

.mnu-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 18px 6px 6px;
  border-radius: 12px;
  background: #eaeaea;
  font: 500 17px/20px "Inter", sans-serif;
  color: #232325;
  text-decoration: none;
  opacity: 0.72;
}

.mnu-chip-qr {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  opacity: 0.9;
}

.mnu-chip--flag { padding: 10px 18px 10px 11px; }

.mnu-chip-flag {
  display: block;
  flex: none;
  width: 27px;
  height: 18px;
  border-radius: 2px;
}

.mnu-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex: none;
  height: 72px;
  padding: 16px 40px;
  border-radius: 24px;
  background: #eaeaea;
  font: 600 16px/20px "Inter", sans-serif;
  text-transform: uppercase;
  color: #171719;
  text-decoration: none;
}

.mnu-chat img { display: block; width: 22px; height: 22px; }

/* ---------- Форма ---------- */
.mnu-form {
  display: flex;
  flex-direction: column;
  gap: 44px;
  margin: 8px 8px 0 12px;
  padding: 12px;
  border-radius: 34px;
  background: #f7f7f7;
}

.mnu-form-title {
  margin: 0;
  padding: 32px 19px 0 32px;
  max-width: 546px;
  font: 400 44px/50px "Inter", sans-serif;
  letter-spacing: -0.88px;
  color: #171719;
}

.mnu-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 32px;
}

.mnu-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mnu-field--tg { max-width: 334px; }

.mnu-field-label {
  font: 400 18px/24px "Inter", sans-serif;
  color: #171719;
}

.mnu-field-optional { color: rgba(23, 23, 25, 0.44); }

.mnu-input {
  height: 56px;
  padding: 0 20px;
  border: 1px solid rgba(164, 164, 164, 0.28);
  border-radius: 12px;
  background: #fff;
  font: 400 16px/20px "Inter", sans-serif;
  color: #171719;
}

.mnu-input::placeholder { color: #818181; }
.mnu-input:focus-visible { outline: 2px solid rgba(23, 23, 25, 0.44); outline-offset: 1px; }

.mnu-submit {
  height: 72px;
  margin-top: -18px;   /* макетный зазор между полями и кнопкой 26 при общем gap 44 */
  padding: 16px 40px;
  border: 0;
  border-radius: 24px;
  background: #eaeaea;
  font: 600 16px/20px "Inter", sans-serif;
  text-transform: uppercase;
  color: #171719;
  cursor: pointer;
}

/* ---------- 1200: лист прижимается ближе к краю ---------- */
@media (max-width: 1200px) {
  .mnu-sheet { --mnu-left: 48px; }
  .mnu-form-title { font-size: 38px; line-height: 44px; letter-spacing: -0.76px; }
}

/* ---------- 1024 и ниже: одна колонка на всю ширину ---------- */
@media (max-width: 1024px) {
  .mnu-sheet {
    --mnu-left: 0px;
    --mnu-radius: 0px;
  }

  .mnu-body {
    display: flex;
    flex-direction: column;
    padding: 0 8px 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mnu-col { display: contents; }
  .mnu-nav { order: 1; padding-top: 16px; flex: none; }
  .mnu-social { order: 2; justify-content: flex-end; padding: 24px 0 0; margin-top: 0; }
  .mnu-contacts { order: 3; margin-top: 8px; }
  .mnu-form { order: 4; margin: 8px 0 0; flex: none; overflow: visible; }

  .mnu-item { font-size: 17px; line-height: 28px; }

  .mnu-social-btn { width: 52px; height: 52px; border-radius: 10px 20px 20px 20px; }
  .mnu-social-btn img { width: 20px; height: 20px; }

  .mnu-contacts { min-height: 0; padding: 24px 12px 12px; }
  .mnu-contacts-row { gap: 20px 12px; padding: 0 12px; }
  .mnu-chip { font-size: 14px; line-height: 18px; }
  .mnu-chip-qr { width: 24px; height: 24px; }
  .mnu-chip--flag { padding: 9px 18px 9px 9px; }

  .mnu-form { gap: 44px; }
  .mnu-form-title {
    padding: 12px 64px 0 12px;
    max-width: none;
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.64px;
  }
  .mnu-fields { padding: 0 12px; }
  .mnu-field--tg { max-width: none; }
  .mnu-submit { margin-top: -14px; }
}

/* ---------- 430 и ниже: шапка ниже, как в макете 430/320 ---------- */
@media (max-width: 430px) {
  .mnu-sheet { --mnu-head: 68px; }
  .mnu-head { padding: 8px; }
  .mnu-bar { height: 52px; }
  .mnu-close { width: 56px; }
  .mnu-logo-symbol { width: 44px; height: 44px; }
  .mnu-logo-wordmark { width: 128px; height: 15px; }
  .mnu-form-title { font-size: 28px; line-height: 34px; letter-spacing: -0.56px; }
}

@media (prefers-reduced-motion: reduce) {
  .mnu-dim,
  .mnu-sheet { transition-duration: 1ms; }
}