/* ============================================================
   WELL · Поп-ап авторизації (#login-modal) — стилі 1:1 з well-auth
   Значення повністю співпадають з макетом; шрифт — сайтовий (inherit).
   Усе скоуплено під #login-modal, щоб не зачіпати інші модалки.
   ============================================================ */
#login-modal{
  --auth-ink:#141414; --auth-sub:#605E5A; --auth-mut:#8C8881;
  --auth-line:#E6DADA; --auth-field:#F7EFEF; --auth-ok:#1D9E75; --auth-err:#D7443E;
}

/* картка (.modal) */
#login-modal .modal-wrapper__main-block{ position:relative; background:#fff; border:none; border-radius:0; box-shadow:0 22px 50px -26px rgba(60,20,20,.28); padding:26px 26px 24px; text-align:center; }
#login-modal .auth-form{ display:block; gap:0; }

/* кнопка закриття (.x) */
#login-modal .modal-wrapper__close-btn{ top:14px; right:14px; width:30px; height:30px; color:#9a958c; }
#login-modal .modal-wrapper__close-btn:hover{ color:var(--auth-ink); }

/* заголовок (h3.tt) */
#login-modal .auth-tt{ display:block; font-weight:600; font-size:25px; text-transform:none; letter-spacing:0; color:var(--auth-ink); margin:6px 0 0; }

/* підзаголовок (.sub) */
#login-modal .auth-sub{ display:block; font-size:14px; color:var(--auth-sub); line-height:1.5; margin:8px 0 0; }
#login-modal .auth-sub span{ display:block; margin-top:3px; color:var(--auth-ink); font-weight:600; }

/* перемикач SMS / Email (.seg) */
#login-modal .auth-seg{ display:inline-flex; padding:4px; background:var(--auth-field); border-radius:6px; margin:18px 0 22px; }
#login-modal .login-form__tab{ font:inherit; font-size:13px; padding:7px 16px; border:none; background:none; border-radius:4px; color:var(--auth-sub); cursor:pointer; transition:.15s; text-transform:none; font-weight:400; }
#login-modal .login-form__tab.black{ background:#fff; color:var(--auth-ink); box-shadow:0 1px 2px rgba(0,0,0,.07); }

/* поле (.lbl / .field) */
#login-modal .auth-field-wrap{ text-align:left; }
#login-modal .auth-lbl{ display:block; text-align:left; font-size:12.5px; color:var(--auth-sub); margin:0 0 6px; text-transform:none; font-weight:400; }
#login-modal .auth-field{ width:100%; height:48px; padding:0 14px; border:1px solid var(--auth-line); border-radius:8px; background:#fff; font:inherit; font-size:14.5px; color:var(--auth-ink); text-align:left; }
#login-modal .auth-field::placeholder{ color:#C2B8B8; }
#login-modal .auth-field:focus{ outline:none; border-color:var(--auth-ink); box-shadow:0 0 0 3px rgba(20,20,20,.05); }

/* кнопка (.btn) */
#login-modal .auth-btn{ width:100%; max-width:100%; height:48px; margin-top:18px; border:none; border-radius:0; background:var(--auth-ink); color:#fff; font:inherit; font-size:14.5px; font-weight:500; cursor:pointer; transition:.15s; }
#login-modal .auth-btn:hover{ background:#000; }
#login-modal .auth-btn:active{ transform:scale(.99); }

/* згода / захищене з'єднання (.consent / .secure) */
#login-modal .auth-consent{ display:block; font-size:12.5px; color:var(--auth-sub); line-height:1.6; margin:16px 0 0; }
#login-modal .auth-consent a{ display: block; color:var(--auth-ink); text-decoration:underline; text-underline-offset:2px; }
#login-modal .auth-secure{ margin:18px 0 0; display:flex; align-items:center; justify-content:center; gap:6px; font-size:12px; color:var(--auth-mut); }
#login-modal .auth-secure svg{ width:14px; height:14px; }

/* статус / помилка (.status) */
#login-modal .auth-status{ margin-top:16px; font-size:13.5px; line-height:1.5; padding:11px 13px; text-align:left; background:#FBEDEC; color:var(--auth-err); }

/* OTP-бокси (.otp) */
#login-modal .auth-otp{ display:flex; justify-content:center; gap:10px; margin:20px 0 18px; }
#login-modal .auth-otp__box{ width:50px; height:58px; text-align:center; font-size:22px; font-weight:600; font-family:inherit; border:1.5px solid var(--auth-line); border-radius:8px; background:#fff; color:var(--auth-ink); caret-color:var(--auth-ink); transition:.16s; }
#login-modal .auth-otp__box:focus{ outline:none; border-color:var(--auth-ink); box-shadow:0 0 0 4px rgba(20,20,20,.06); transform:translateY(-1px); }
#login-modal .auth-otp__box.f{ border-color:var(--auth-ink); }
#login-modal .auth-otp__box.err{ border-color:var(--auth-err); color:var(--auth-err); box-shadow:0 0 0 4px rgba(215,68,62,.07); }
#login-modal .auth-otp.shake{ animation:authShake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes authShake{ 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-5px)} 40%,60%{transform:translateX(5px)} }

/* таймер (.timer) */
#login-modal .auth-timer{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:13px; color:var(--auth-sub); margin:0 0 8px; }
#login-modal .auth-timer svg{ width:16px; height:16px; flex:none; }

/* повтор / довіра пристрою (.resend / .trust) */
#login-modal .auth-resend{ font-size:13px; color:var(--auth-sub); margin:0 0 18px; }
#login-modal .auth-countdown{ color:var(--auth-sub); font-weight:400; font-size:13px; }
#login-modal .auth-resend__btn{ color:var(--auth-ink); text-decoration:underline; text-underline-offset:2px; }
#login-modal .auth-trust{ display:flex; align-items:center; justify-content:center; gap:9px; font-size:13.5px; color:var(--auth-sub); margin:0 0 18px; cursor:pointer; }
#login-modal .auth-trust .checkbox-group{ display:inline-flex; cursor:pointer; }
#login-modal .auth-trust .checkbox-group__title{ font-size:13.5px; color:var(--auth-sub); }

/* кнопка "назад" (.back) */
#login-modal .auth-back{ position:absolute; top:18px; left:18px; display:inline-flex; align-items:center; gap:6px; border:none; background:none; color:var(--auth-sub); font:inherit; font-size:13px; cursor:pointer; }
#login-modal .auth-back:hover{ color:var(--auth-ink); }
#login-modal .auth-back svg{ width:16px; height:16px; }

/* стан успіху (.ok-state) */
#login-modal .auth-ok{ text-align:center; padding:8px 0; }
#login-modal .auth-ok__ic{ width:54px; height:54px; border-radius:50%; background:#E7F5EF; color:var(--auth-ok); display:grid; place-items:center; margin:8px auto 14px; }
#login-modal .auth-ok__ic svg{ width:26px; height:26px; }
#login-modal .auth-ok p{ font-size:14px; color:var(--auth-sub); margin:6px 0 0; }

@media (prefers-reduced-motion: reduce){ #login-modal .auth-otp.shake{ animation:none; } }
@media (max-width:600px){
  #login-modal .modal-wrapper__main-block{ padding:26px 20px 22px; }
  #login-modal .auth-seg{ display:flex; }
  #login-modal .login-form__tab{ flex:1; }
  #login-modal .auth-otp{ gap:8px; }
  #login-modal .auth-otp__box{ width:46px; height:54px; font-size:20px; }
}