/* ============================================================
   Prest1Ge — модалка входа (passwordless: Telegram / email-код)
   и индикатор состояния входа в шапке. Стиль — та же "тёмная стеклянная
   премиальная" система, что и order-modal.css/cart.css: те же токены
   (--r-xl, --border-hi, --shadow-glow, --ease-out), тот же паттерн
   backdrop+dialog+corner-tint. z-index 1400 — выше cart-toast (1300),
   модалка входа должна перекрывать любой другой оверлей сайта.
   ============================================================ */

/* safe-area инсеты как CSS-переменные — их читает positionAccountMenu() в JS, чтобы меню
   не заходило под «чёлку»/домашний индикатор на iPhone. Без поддержки env() → 0px. */
:root{--am-sat:env(safe-area-inset-top,0px);--am-sab:env(safe-area-inset-bottom,0px)}

/* ---------- триггер в шапке: иконка-кнопка / аватар ---------- */
.am-trigger-wrap{position:relative}
.am-icon-btn{
  width:44px;height:44px;border-radius:50%;flex:none;padding:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border-hi);color:var(--text-mid);
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.am-icon-btn svg{width:19px;height:19px}
.am-icon-btn:hover{
  border-color:rgba(139,92,246,.42);color:var(--text);
  box-shadow:0 0 0 4px rgba(99,102,241,.1), 0 8px 20px -12px rgba(99,102,241,.5);
  transform:scale(1.02);
}
.am-icon-btn:focus-visible{outline:2px solid rgba(139,92,246,.55);outline-offset:2px}
.am-icon-btn--avatar{
  background:linear-gradient(135deg,var(--electric),var(--violet));border-color:transparent;color:#fff;
  font-family:var(--f-display);font-weight:700;font-size:15px;
}
.am-icon-btn--avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* мобильная выезжающая панель — простой аватар/буква + имя, без dropdown */
.am-trigger{display:inline-flex;align-items:center;gap:8px}
.am-trigger__avatar{
  width:22px;height:22px;border-radius:50%;flex:none;overflow:hidden;
  background:linear-gradient(135deg,var(--electric),var(--violet));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--f-display);font-weight:700;font-size:11px;
}
.am-trigger__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.am-trigger__name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- выпадающее меню (десктоп, авторизован) ---------- */
.am-menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:1350;width:252px;
  border-radius:18px;padding:8px;
  background:linear-gradient(160deg, rgba(22,25,52,.97), rgba(9,11,24,.98));
  border:1px solid var(--border-hi);
  box-shadow:var(--shadow-glow), 0 30px 70px -25px rgba(0,0,0,.8);
  backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);
  transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),visibility var(--dur-fast);
}
.am-menu.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.am-menu__head{display:flex;align-items:center;gap:11px;padding:9px 10px 12px;min-width:0}
.am-menu__avatar{
  width:38px;height:38px;border-radius:50%;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--electric),var(--violet));color:#fff;
  font-family:var(--f-display);font-weight:700;font-size:14px;
}
.am-menu__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.am-menu__id{min-width:0}
.am-menu__name{color:var(--text);font-weight:700;font-size:13.5px;font-family:var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-menu__email{color:var(--text-faint);font-size:11.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-menu__sep{height:1px;background:var(--border);margin:4px 6px}
.am-menu__item{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 10px;border-radius:12px;
  background:none;border:none;color:var(--text-mid);font-family:var(--f-body);font-size:13.5px;text-align:left;
  cursor:pointer;text-decoration:none;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.am-menu__item svg{width:16px;height:16px;flex:none;opacity:.75}
.am-menu__item:hover{background:var(--surface-hi);color:var(--text)}
.am-menu__item--danger{color:#FCA5A5}
.am-menu__item--danger:hover{background:rgba(239,68,68,.1);color:#FCA5A5}

/* ---------- модалка ---------- */
.am-modal{
  position:fixed;inset:0;z-index:1400;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;
  transition:opacity var(--dur) var(--ease-out),visibility var(--dur);
}
.am-modal.is-open{opacity:1;visibility:visible}
.am-modal__backdrop{
  position:absolute;inset:0;
  background:radial-gradient(1000px 700px at 50% -10%, rgba(99,102,241,.22), transparent 60%), rgba(4,5,10,.78);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.am-modal__dialog{
  position:relative;z-index:1;
  width:100%;max-width:404px;max-height:92vh;overflow-y:auto;overflow-x:hidden;
  border-radius:var(--r-xl);
  background:linear-gradient(160deg, rgba(22,25,52,.94), rgba(9,11,24,.96));
  border:1px solid var(--border-hi);
  box-shadow:var(--shadow-glow), 0 40px 100px -30px rgba(0,0,0,.8);
  backdrop-filter:blur(30px) saturate(140%);-webkit-backdrop-filter:blur(30px) saturate(140%);
  padding:32px 28px 28px;
  transform:translateY(10px);
  transition:transform var(--dur) var(--ease-out);
  isolation:isolate;
}
.am-modal.is-open .am-modal__dialog{transform:translateY(0)}
.am-modal__dialog::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(600px 240px at 100% 0%, rgba(139,92,246,.16), transparent 60%),
            radial-gradient(500px 220px at 0% 0%, rgba(59,130,246,.14), transparent 60%);
}
.am-modal__close{
  position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);color:var(--text-mute);
  cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),color var(--dur-fast),background var(--dur-fast);
}
.am-modal__close:hover{transform:rotate(90deg);color:var(--text);background:var(--surface-hi)}
.am-modal__close svg{width:16px;height:16px}

.am-modal__eyebrow{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:4px;
}
.am-modal__title{
  font-family:var(--f-display);font-weight:800;font-size:21px;color:var(--text);margin:0 0 22px;
}

/* ---------- шаг 1: вход ---------- */
.am-divider{
  display:flex;align-items:center;gap:12px;margin:22px 0;
  color:var(--text-faint);font-size:12px;
}
.am-divider::before,.am-divider::after{content:"";flex:1;height:1px;background:var(--border)}

/* Telegram — чуть крупнее обычной вторичной кнопки (выше и заметнее .am-tg-btn),
   но остаётся "стеклянной" вторичной по заливке — не спорит с основной .am-submit. */
.am-tg-btn{
  display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
  padding:15px 18px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border-hi);color:var(--text);
  font-family:var(--f-display);font-weight:700;font-size:15.5px;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.am-tg-btn:hover{
  border-color:rgba(139,92,246,.42);background:var(--surface-hi);
  box-shadow:0 0 0 3px rgba(99,102,241,.1), 0 10px 24px -14px rgba(99,102,241,.45);
}
.am-tg-btn__icon{display:flex;flex:none;color:#4FA9EE;transition:transform var(--dur-fast) var(--ease-out)}
.am-tg-btn__icon svg{width:21px;height:21px;display:block}
.am-tg-btn:hover .am-tg-btn__icon{transform:scale(1.08) rotate(-4deg)}
.am-tg-wrap{display:flex;justify-content:center}
.am-tg-wrap:empty{display:none}

.am-label{display:block;font-size:12px;color:var(--text-faint);margin:0 0 6px;font-family:var(--f-body)}
.am-field{
  width:100%;padding:12px 16px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border-hi);color:var(--text);
  font-family:var(--f-body);font-size:14.5px;outline:none;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast);
}
.am-field::placeholder{color:var(--text-faint)}
.am-field:focus{border-color:rgba(139,92,246,.5);box-shadow:0 0 0 3px rgba(139,92,246,.14);background:var(--surface-hi)}

.am-submit{
  width:100%;margin-top:12px;padding:12px 16px;border-radius:999px;border:none;cursor:pointer;
  font-family:var(--f-display);font-weight:700;font-size:14px;color:#fff;
  background:linear-gradient(135deg,#3B82F6 0%,#6366F1 50%,#8B5CF6 100%);
  transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast);
}
.am-submit:hover{transform:translateY(-1px)}
.am-submit:disabled{opacity:.55;cursor:default;transform:none}

.am-legal{
  margin-top:20px;color:var(--text-faint);font-size:11.5px;line-height:1.6;text-align:center;
}
.am-legal a{color:#A5B4FC;text-decoration:underline;text-underline-offset:2px;transition:color var(--dur-fast) var(--ease-out)}
.am-legal a:hover{color:var(--text)}

/* ---------- переход между шагами (crossfade + небольшой slide) ---------- */
.am-step{transition:opacity .16s var(--ease-out), transform .18s var(--ease-out)}
.am-step--out{opacity:0;transform:translateX(-8px)}
.am-step--in-prep{opacity:0;transform:translateX(8px)}

/* ---------- шаг 2: код из письма ---------- */
.am-sent-to{color:var(--text-mid);font-size:13.5px;margin-bottom:18px;line-height:1.5}
.am-sent-to b{color:var(--text);font-weight:700}

.am-otp{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
.am-otp__cell{
  width:42px;height:52px;border-radius:13px;text-align:center;
  background:var(--surface);border:1px solid var(--border-hi);color:var(--text);
  font-family:var(--f-display);font-weight:700;font-size:20px;outline:none;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.am-otp__cell:focus{border-color:rgba(139,92,246,.55);box-shadow:0 0 0 3px rgba(139,92,246,.16)}
.am-otp__cell.is-error{border-color:rgba(239,68,68,.6);box-shadow:0 0 0 3px rgba(239,68,68,.14)}

.am-resend-row{display:flex;justify-content:center;margin-top:14px}
.am-resend{background:none;border:none;color:var(--electric);cursor:pointer;font-size:12.5px;font-family:var(--f-body);padding:0}
.am-resend:disabled{color:var(--text-faint);cursor:default}

.am-back{
  display:flex;align-items:center;justify-content:center;gap:5px;width:100%;
  color:var(--text-mute);font-size:12.5px;cursor:pointer;margin-top:16px;
  background:none;border:none;padding:0;font-family:var(--f-body);transition:color var(--dur-fast) var(--ease-out);
}
.am-back:hover{color:var(--text)}
.am-back svg{width:13px;height:13px}

.am-msg{
  margin-top:16px;padding:11px 14px;border-radius:12px;font-size:13px;line-height:1.5;display:none;
}
.am-msg.is-shown{display:block}
.am-msg--error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.24);color:#FCA5A5}
.am-msg--info{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.22);color:#93C5FD}

.am-spin{
  width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  display:inline-block;animation:amSpin .7s linear infinite;vertical-align:-3px;margin-right:8px;
}
@keyframes amSpin{to{transform:rotate(360deg)}}

@media (max-width:520px){
  .am-modal{align-items:flex-end;padding:0}
  .am-modal__dialog{
    max-width:none;border-radius:var(--r-xl) var(--r-xl) var(--r-xl) var(--r-xl);
    transform:translateY(100%);padding-bottom:calc(24px + env(safe-area-inset-bottom));
  }
  .am-modal.is-open .am-modal__dialog{transform:translateY(0)}
  /* Мобильное меню аккаунта позиционируется в JS (positionAccountMenu): координаты top/left/width
     и, при нехватке места, max-height считаются от кнопки через getBoundingClientRect, а само меню
     выносится в <body> (см. auth-modal.js). CSS лишь задаёт fixed-контекст, скролл ВНУТРИ меню и
     сброс жёстких offset'ов старого хака — без него меню считалось от трансформированной .hdr и уезжало вверх. */
  .am-menu{position:fixed;top:auto;bottom:auto;right:auto;left:auto;width:252px;max-width:calc(100vw - 28px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}

@media (prefers-reduced-motion:reduce){
  .am-modal,.am-modal__dialog,.am-modal__close,.am-tg-btn,.am-tg-btn__icon,.am-submit,.am-field,
  .am-icon-btn,.am-menu,.am-step{transition:none}
  .am-spin{animation-duration:1.4s}
}