/* ورود با OTP — استخراج‌شده از `ui/login.html`. رفتار مرجع همان‌جاست. */
/* ============ ورود با OTP ============ */
body.authbody{background:var(--surface);min-height:100vh;display:flex;flex-direction:column}

.auth-top{background:var(--bg);border-bottom:1px solid var(--border)}
.auth-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding-block:var(--s4);flex-wrap:wrap}
.auth-top .logo{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-6);font-weight:800;
  color:var(--fg)}
.auth-top .logo-mark{width:36px;height:36px;border-radius:11px;background:var(--primary);
  color:var(--on-solid);display:grid;place-items:center}
.auth-top .back{font-size:var(--fs-2);font-weight:700;color:var(--fg-muted);display:inline-flex;
  align-items:center;gap:var(--s1)}
.auth-top .back:hover{color:var(--primary-text)}

.authwrap{flex:1;display:grid;gap:var(--s5);grid-template-columns:1fr;
  max-width:960px;width:100%;margin-inline:auto;padding:var(--s6) var(--s4)}
@media(min-width:900px){.authwrap{grid-template-columns:1fr 320px;align-items:start}}

@media(max-width:519px){.authcard{padding:var(--s5) var(--s4)}}

.auth-step{display:none;flex-direction:column;gap:var(--s3)}
.auth-step.on{display:flex}
.auth-step h1{font-size:var(--fs-7);font-weight:800;letter-spacing:-.02em}
.auth-step .sub{font-size:var(--fs-3);color:var(--fg-muted);line-height:1.9;margin-top:-4px}
.auth-step .sub b{color:var(--fg);font-weight:700}
.auth-step .note{margin-top:var(--s2)}
.auth-step .btn-lg{width:100%}  /* 🔴 ۲۰-ظ۲۴۱: `min-height` و `font-size` اینجا بودند چون پایه
     غلط بود — `.btn-lg` از `.btn` کوچک‌تر بود و این صفحه دستی
     درستش می‌کرد. حالا پایه درست است و فقط عرض می‌ماند. */


/* شماره‌ی موبایل */
.phbox{display:flex;align-items:center;gap:var(--s2);border:1.5px solid var(--border-strong);
  border-radius:var(--r);background:var(--bg);padding-inline:var(--s3);height:54px}
.phbox:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-subtle)}
.phbox .pfx{font-size:var(--fs-3);font-weight:700;color:var(--fg-subtle);
  border-inline-end:1px solid var(--border);padding-inline-end:var(--s3);
  font-variant-numeric:tabular-nums;flex-shrink:0}
.phbox input{flex:1;min-width:0;border:none;outline:none;background:none;font:inherit;
  font-size:var(--fs-5);font-weight:700;direction:ltr;text-align:left;letter-spacing:.08em;
  font-variant-numeric:tabular-nums}

.inp{height:52px;border:1.5px solid var(--border-strong);border-radius:var(--r);
  padding-inline:var(--s3);font:inherit;font-size:var(--fs-4);background:var(--bg);width:100%}
.inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-subtle)}

.ferr{display:flex;gap:var(--s2);align-items:flex-start;font-size:var(--fs-2);line-height:1.8;
  color:var(--accent-text);font-weight:600}
.ferr svg{flex-shrink:0;margin-top:var(--s1)}
.ferr b{font-weight:800}


/* خانه‌های کد */
.otps{display:flex;gap:var(--s2);justify-content:center;margin-block:var(--s3)}
.otp{width:54px;height:64px;border:1.5px solid var(--border-strong);border-radius:var(--r);
  text-align:center;font:inherit;font-size:var(--fs-8);font-weight:800;background:var(--bg);
  font-variant-numeric:tabular-nums;transition:border-color var(--t),box-shadow var(--t)}
.otp:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-subtle)}
.otp:disabled{background:var(--surface-2);color:var(--fg-muted);cursor:not-allowed}
@media(max-width:519px){.otp{width:46px;height:56px;font-size:var(--fs-7)}.otps{gap:var(--s2)}}

.resend{display:flex;justify-content:center;font-size:var(--fs-2);color:var(--fg-muted)}
.resend b{font-variant-numeric:tabular-nums;color:var(--fg)}

/* نوع خریدار */
.btypes{display:flex;flex-direction:column;gap:var(--s2)}
.btype{display:flex;gap:var(--s3);align-items:flex-start;border:1.5px solid var(--border);
  border-radius:var(--r);padding:var(--s3) var(--s4);cursor:pointer;background:var(--bg)}
.btype:hover{border-color:var(--border-strong)}
.btype:has(input:checked){border-color:var(--primary);background:var(--primary-subtle)}
.btype input{margin-top:var(--s1);width:17px;height:17px;accent-color:var(--primary);flex-shrink:0}
.btype > span > b{display:block;font-size:var(--fs-3);font-weight:700}
.btype > span > span{display:block;font-size:var(--fs-1);color:var(--fg-muted);line-height:1.75;
  margin-top:var(--s1)}

/* پایان */
.okmark{width:76px;height:76px;border-radius:var(--r-full);background:var(--success-subtle);
  color:var(--success-text);display:grid;place-items:center;margin-inline:auto}
.auth-step[data-step="done"]{text-align:center;align-items:center}
.auth-step[data-step="done"] .sub{max-width:44ch}
.dngo{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center;width:100%;
  margin-top:var(--s3)}
.dngo .btn{flex:1;min-width:170px;min-height:52px}

/* ستون کناری */
.authside{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s5)}
.authside h2{font-size:var(--fs-4);font-weight:800;display:flex;align-items:center;gap:var(--s2);
  margin-bottom:var(--s3)}
.authside ul{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s4)}
.authside li{font-size:var(--fs-2);color:var(--fg-muted);line-height:1.9;padding-inline-start:var(--s4);
  position:relative}
.authside li::before{content:"";position:absolute;inset-inline-start:0;top:9px;width:5px;
  height:5px;border-radius:var(--r-full);background:var(--primary)}
.authside li b{color:var(--fg);font-weight:700}

.authfoot{background:var(--bg);border-top:1px solid var(--border);font-size:var(--fs-1);
  color:var(--fg-subtle)}
.authfoot .wrap{display:flex;justify-content:space-between;gap:var(--s4);
  padding-block:var(--s4);flex-wrap:wrap}
.authfoot a{color:var(--fg-muted)}
.authfoot a:hover{color:var(--primary-text)}

/* نوار بازبینی روی صفحه‌ی ورود */
.authbody .rolebar{background:var(--restricted-subtle);border:1px dashed var(--restricted);
  border-radius:var(--r-lg);padding:var(--s3) var(--s4)}

/* ابزار بازبینی و لینک متنی — panel.css اینجا بار نمی‌شود، پس تکرارشان لازم است */
.rolebar{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.rolebar .rl{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-1);
  font-weight:700;color:var(--restricted-text)}
.rolebar.wide .rl{flex-basis:100%}
.rolebar .rbs{display:flex;gap:var(--s2);flex-wrap:wrap}
.rolebar .rb{min-height:32px;padding-inline:var(--s3);border-radius:var(--r-full);
  border:1.5px solid var(--border-strong);background:var(--bg);font:inherit;font-size:var(--fs-2);
  font-weight:700;color:var(--fg-muted);cursor:pointer;transition:all var(--t)}
.rolebar .rb:hover{border-color:var(--restricted);color:var(--restricted-text)}
.rolebar .rb.on{background:var(--restricted);border-color:var(--restricted);color:var(--on-solid)}
.rolebar .rd{flex-basis:100%;font-size:var(--fs-1);color:var(--fg-muted);line-height:1.75}
.lnk{color:var(--primary-text);font-weight:700;font-size:var(--fs-2);text-decoration:underline;
  background:none;border:none;cursor:pointer;font-family:inherit}
.lnk:hover{color:var(--primary-hover)}


/* ═══ برش ۱۵-د — دو کلاسِ بی‌تعریفِ صفحه‌ی ورود ═══ */

/* ردیفِ شمارشِ معکوسِ ارسال دوباره‌ی کد. */
.cdrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  font-size:var(--fs-2);color:var(--fg-muted);min-height:22px}

/* 🔴 جعبه‌ی «چرا فقط پیامک؟» — کنارِ فرم می‌نشیند و در موبایل زیرش می‌رود. */
.whybox{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s5);align-self:start}
.whybox h2{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-4);font-weight:800;
  color:var(--fg);margin-bottom:var(--s3)}
.whybox h2 svg{color:var(--primary-text);flex-shrink:0}
.whybox p{font-size:var(--fs-2);color:var(--fg-muted);line-height:1.95}


/* ═══ برش ۲۰-ظ۲۳۳ — درِ دومِ ورود ═══ */

/* 🔴 جمله‌ی زیرِ فرم: راهِ دیگر، با وزنی کمتر از دکمه‌ی اصلی. درِ دوم باید
   دیده شود، ولی نباید هم‌وزنِ درِ اول به نظر برسد. */
.auth-alt{margin-top:var(--s4);font-size:var(--fs-2);color:var(--fg-muted);
  text-align:center;line-height:1.9}

/* ── نشانِ focus روی جعبه، نه روی ورودیِ بی‌قاب — برش ۲۰-ظ۲۴۱ ─────────────
   🔴 ورودیِ داخلِ این جعبه `border:none` دارد، پس قاب مالِ جعبه است — و
      حلقه هم باید مالِ همان جعبه باشد، وگرنه حلقه‌ای وسطِ یک قابِ دیگر
      کشیده می‌شود. این تنها جایی است که `outline:none` مانده، و دلیلش
      همین یک خط است.

   ⚠️ `:has(:focus-visible)` و نه `:focus-within`: دومی با کلیکِ ماوس هم
      روشن می‌شود، و حلقه‌ای که همیشه هست، نشانِ هیچ‌چیز نیست. */
.phbox:has(:focus-visible){outline:2.5px solid var(--focus);outline-offset:2px}

/* ── حالتِ خطا — برش ۲۰-ظ۲۴۳ ─────────────────────────────────────────────
   ⛔⛔ **و اینجا قاعده‌ی ۲۰-ظ۲۴۱ همان‌جا به کار آمد:** ورودیِ داخلِ `.phbox`
        حاشیه ندارد — قاب مالِ جعبه است. پس نشانِ خطا هم مالِ جعبه است،
        دقیقاً مثلِ حلقه‌ی focus. یک قاعده، دو حالت. */
.phbox:has([aria-invalid="true"]){border-color:var(--accent);background:var(--accent-subtle)}
.otp[aria-invalid="true"]{border-color:var(--accent);background:var(--accent-subtle)}
.otp[aria-invalid="true"]:focus{border-color:var(--accent)}