/* ── popup/popup.css — overlay + modal shell only ──
   .qz сам приносит свой radial-gradient и paddings из /public/style.css.
   Здесь только overlay (с blur), невидимая обёртка-модалка, и крестик.
*/

.ma-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 32, 44, 0.45);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  backdrop-filter: blur(8px) saturate(110%);
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity 0.22s ease, backdrop-filter 0.22s ease;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px;
  overflow-y: auto;
}

.ma-overlay.on {
  display: flex;
  opacity: 1;
}

/* Модалка — невидимая обёртка. Сама .qz внутри несёт фон, скругление и
   паддинги (см. .qz в public/style.css: radial-gradient + border-radius:28px). */
.ma-modal {
  position: relative;
  width: 100%;
  max-width: 860px;
  background: transparent;
  /* небольшой external glow, чтобы карточка визуально оторвалась от blurred-фона */
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.35));
  margin: auto 0;
}

.ma-modal-body {
  /* .qz попадает сюда через JS appendChild; ничего не накладываем */
}

/* Крестик закрытия. Чистый × без обводки и без фона —
   просто белый штрих над тёмным градиентом .qz. */
.ma-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  z-index: 2;
  transition: color 0.15s, transform 0.12s;
  padding: 0;
}

.ma-close:hover {
  color: #fff;
}

.ma-close:active {
  transform: scale(0.92);
}

/* Внутри попапа .qz всё ещё имеет свой top margin / centering — обнуляем
   только то что мешает идеальной посадке внутри модалки.
   padding-top увеличен, чтобы прогресс не упирался в крестик. */
.ma-modal-body .qz {
  margin: 0;
  width: 100%;
  max-width: 100%;
  padding-top: 64px;
}

/* В попапе ставим прогрессу запас справа, чтобы текст «3 / 5» не наезжал на ×. */
.ma-modal-body .qz-prog {
  padding-right: 48px;
}

/* Mobile: фуллскрин без скруглений по краям */
@media (max-width: 600px) {
  .ma-overlay {
    padding: 0;
    align-items: stretch;
  }

  .ma-modal {
    max-width: 100%;
    filter: none;
    margin: 0;
  }

  .ma-modal-body .qz {
    border-radius: 0;
    min-height: 100vh;
    padding: 28px 20px 32px;
  }

  .ma-close {
    top: 12px;
    right: 12px;
  }
}

/* Если у браузера нет backdrop-filter (старый Firefox) — fallback темнее */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ma-overlay {
    background: rgba(17, 34, 44, 0.78);
  }
}

/* ─── Embed-режим — лендинг внутри iframe из app.ankerai.co/audit ───
   Прячем всю обвязку и нерелевантные секции, оставляем только попап. */
body.ma-embed > *:not(#ma-popup-root):not(script):not(style) {
  display: none !important;
}
body.ma-embed {
  background: transparent !important;
}
body.ma-embed .ma-overlay {
  /* Уже на сайте есть свой dark-mode фон — поверх iframe это излишне.
     Прозрачный фон чтобы хост-страница (cabinet) подложила свой backdrop. */
  background: rgba(20, 32, 44, 0.0);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 24px;
}
body.ma-embed .ma-modal {
  filter: none;
}