/* mobile-tweaks.css — iOS-style overrides for SPA bundle on small screens.
   Loaded AFTER /assets/index-Dy-UuZZd*.css. Targets actual classes from the bundle:
   .authOuter, .authContainer, .authCard, .authLogoWrapper, .authLogoRow, .authLogoIcon,
   .authTitle, .authSubtitle, .phoneFormInner, .phoneFieldRow, .phoneSubmitBtn,
   .phoneLegal, .phoneHint, .phoneExplainer__title, .header, .headerButton--help.
   Variants: --photos (purple bg), --premium (dark), --standoff (different bg).
*/

/* === safe-area helpers =============================================== */
:root {
  --m-safe-top:    env(safe-area-inset-top, 0px);
  --m-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* === phone portrait (≤ 540px) ======================================== */
@media (max-width: 540px) {

  /* page itself — no horizontal scroll */
  html, body {
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
  }

  /* ---------- HEADER (sticky pill at top, only when present) -------- */
  .header {
    left: 10px !important;
    right: 10px !important;
    top: calc(var(--m-safe-top) + 8px) !important;
    border-radius: 22px !important;
  }
  .headerTop {
    height: 56px !important;
    padding: 0 14px !important;
    gap: 10px !important;
    grid-template-columns: auto 1fr auto !important;
  }
  .header .logo,
  .header .logo svg {
    height: 28px !important;
  }

  /* ---------- AUTH CONTAINER — grid → flex, чтобы вертикально стейкать */
  /* По умолчанию у .authContainer стоит grid place-items:center, из-за чего
     .authLogoWrapper (position:absolute) и .authCard (z:1) накладываются.
     Переопределяем: контейнер вертикально стэкает дочерние элементы. */
  .authOuter {
    box-sizing: border-box !important;
    height: 100dvh !important;
    width: 100% !important;
    overflow: hidden auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .authContainer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    place-items: initial !important;            /* отключаем grid-центровку */
    min-height: 100dvh !important;
    height: auto !important;
    padding:
      calc(var(--m-safe-top) + 16px)
      12px
      calc(var(--m-safe-bottom) + 24px) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* ---------- LOGO WRAPPER — выводим в нормальный поток, делаем небольшим */
  /* На десктопе это огромный логотип-баннер 240px высотой с absolute pos.
     На мобиле возвращаем его в обычный flow и сжимаем над карточкой. */
  .authLogoWrapper {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 18px !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 1 !important;
    pointer-events: none;
  }
  .authLogoRow {
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    animation: none !important;             /* убираем logoJump на мобиле */
    gap: 8px !important;
  }
  .authLogoIcon {
    width: 38px !important;
    height: 38px !important;
  }
  .authLogoRow .bigLogo,
  .authLogoRow .logo,
  .authLogoRow svg,
  .authLogoRow img {
    height: 32px !important;
    width: auto !important;
  }

  /* ---------- AUTH CARD — главная карточка авторизации --------------- */
  .authCard {
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 28px 20px 24px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-sizing: border-box !important;
  }

  /* ---------- TITLE / SUBTITLE / EXPLAINER -------------------------- */
  .authTitle,
  .phoneExplainer__title {
    text-align: center !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.01em !important;
  }
  .authSubtitle,
  .phoneExplainer__sub {
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin: 0 0 16px !important;
  }

  /* ---------- PHONE FORM — растягиваем по карточке ------------------ */
  .phoneFormInner {
    width: 100% !important;
    max-width: 100% !important;
    gap: 14px !important;
  }
  .phoneField,
  .phoneFieldRow,
  .phoneInputContainer {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .phoneFieldRow {
    min-height: 56px !important;
    border-radius: 16px !important;
    padding: 0 14px !important;
  }
  .phoneNumberInput,
  .phoneInput,
  .phoneFieldRow input {
    font-size: 16px !important;            /* предотвращает iOS-zoom */
    line-height: 1.2 !important;
  }
  .phoneHint,
  .phoneHintText {
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    padding: 4px 8px !important;
    margin: 4px 0 4px !important;
  }

  /* ---------- SUBMIT BUTTON ---------------------------------------- */
  .phoneSubmitBtn {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 20px !important;
    border-radius: 16px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    transition: transform .12s ease, opacity .12s ease;
  }
  .phoneSubmitBtn:active {
    transform: scale(0.98);
  }
  /* Photos-вариант (фиолетовый) — не трогаем background, только размеры */
  .phoneSubmitBtn--photos {
    height: 54px !important;
    border-radius: 16px !important;
  }

  /* QR-кнопка под основной */
  .phoneFooterBtn {
    width: 100% !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
  }

  /* ---------- LEGAL footer ----------------------------------------- */
  .phoneLegal {
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
    margin: 6px 0 0 !important;
  }
  .phoneLegal a {
    text-decoration: none !important;
    border-bottom: 0 !important;
    font-weight: 500 !important;
  }
  .phoneLegal a:active {
    opacity: 0.7;
  }

  /* ---------- HEADER help-button — отодвигаем от safe-area --------- */
  .headerButton--help,
  .headerButton--back {
    top: calc(var(--m-safe-top) + 12px) !important;
  }

  /* ---------- BG pattern — сохраняем, но не растягиваем под скролл - */
  .authBg {
    position: fixed !important;
    inset: 0 !important;
  }
}

/* === очень узкие экраны (≤ 380px, iPhone SE 1st, старый android) ===== */
@media (max-width: 380px) {
  .authCard {
    padding: 24px 16px 20px !important;
    border-radius: 24px !important;
  }
  .authTitle,
  .phoneExplainer__title {
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }
  .phoneSubmitBtn,
  .phoneSubmitBtn--photos {
    height: 50px !important;
    font-size: 16px !important;
  }
  .authLogoIcon { width: 34px !important; height: 34px !important; }
  .authLogoRow svg, .authLogoRow img { height: 28px !important; }
}

/* === landscape phone — компактная карточка =========================== */
@media (max-height: 480px) and (orientation: landscape) {
  .authContainer {
    padding-top: calc(var(--m-safe-top) + 8px) !important;
  }
  .authCard {
    padding: 18px 22px 16px !important;
  }
  .authLogoWrapper {
    margin-bottom: 8px !important;
  }
  .authLogoIcon { width: 30px !important; height: 30px !important; }
}