/* =========================================================================
   EDIUSFA — LOGIN / REGISTER  ·  لایهٔ صفحه v1.0
   توکن‌ها و اجزا از tokens.css و components.css · هدر فشرده از header.css
   این فایل فقط چیدمان اختصاصی صفحهٔ حساب کاربری است؛ هیچ توکن جدیدی تعریف نمی‌شود.
   پنج نما: ورود / ثبت‌نام / بازیابی رمز / رمز جدید / موفقیت
   ========================================================================= */

/* قواعد display اجزا نباید صفت hidden را بازنویسی کنند (درس QA آرشیو) */
[hidden]{display:none!important}

/* ========================================================================
   ۱) چیدمان کلی
   ======================================================================== */
.auth-main{padding-block:24px 56px}
.auth-alert-demo{margin-block:0 22px}

/* پوستهٔ دو ستونی: کارت فرم (روشن) + پنل برند (تیره) */
.auth-shell{
  display:grid;grid-template-columns:minmax(0,1fr) 440px;
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--sh-md);overflow:hidden;
}

/* ستون فرم — محتوای فرم همیشه با عرض بهینه خوانا وسط ستون است */
.auth-side{padding:34px 40px 38px;display:flex;flex-direction:column}
.auth-side-inner{width:100%;max-width:462px;margin-inline:auto;display:flex;flex-direction:column}

/* ========================================================================
   ۲) سوییچ ورود / ثبت‌نام — سگمنت
   ======================================================================== */
.auth-seg{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  background:var(--surface-muted);border:1px solid var(--border);
  border-radius:var(--r-full);padding:4px;
  margin-bottom:22px;
}
.auth-seg button{
  border:0;background:transparent;cursor:pointer;font:inherit;
  border-radius:var(--r-full);padding:9px 20px;
  font-size:var(--fs-sm);font-weight:800;color:var(--text-muted);
  transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast);
}
.auth-seg button:hover{color:var(--text)}
.auth-seg button[aria-selected="true"]{
  background:var(--surface);color:var(--primary-ink);
  box-shadow:0 0 0 1px var(--border),var(--sh-xs);
}
.auth-seg button:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* عنوان هر نما — تنها H1 صفحه که با تعویض نما به‌روز می‌شود */
.auth-title{font-size:clamp(22px,1rem + .9vw,27px);font-weight:900;line-height:1.45;letter-spacing:var(--ls-tight)}
.auth-title:focus{outline:none}
.auth-lede{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.9;margin-top:6px;margin-bottom:20px}

/* ========================================================================
   ۳) هشدار سطح فرم (خطای سرور/ورود ناموفق) — role=alert
   ======================================================================== */
.auth-alert{margin-bottom:18px;animation:auth-slide .3s var(--ease)}
.auth-alert b{color:var(--danger)}
@keyframes auth-slide{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ========================================================================
   ۴) اجزای فرم اختصاصی صفحه
   ======================================================================== */
/* رمز عبور + دکمهٔ نمایش */
.pass-wrap{position:relative}
.pass-wrap .input{direction:ltr;text-align:start;padding-inline-end:46px}
.pass-toggle{
  position:absolute;inset-inline-end:7px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:0;background:transparent;cursor:pointer;
  border-radius:var(--r-xs);color:var(--text-subtle);
  display:grid;place-items:center;
  transition:background var(--t-fast),color var(--t-fast);
}
.pass-toggle:hover{background:var(--surface-muted);color:var(--text)}
.pass-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.pass-toggle .icon{width:19px;height:19px}
.pass-toggle[aria-pressed="true"]{color:var(--primary-ink)}

/* هشدار Caps Lock */
.caps-hint{
  display:none;align-items:center;gap:6px;margin-top:7px;
  font-size:var(--fs-2xs);font-weight:600;color:var(--warning);
}
.caps-hint.is-on{display:inline-flex}
.caps-hint .icon-sm{width:13px;height:13px}

/* ردیف «مرا به خاطر بسپار» + فراموشی رمز */
.form-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-block:2px 18px;
}
.form-row .choice{font-size:var(--fs-sm);color:var(--text-muted)}

/* سنجش قدرت رمز — ۴ پاره با رنگ‌های نقشی سیستم */
.meter{display:flex;align-items:center;gap:10px;margin-top:9px}
.meter-segs{display:flex;gap:5px;flex:1}
.meter-segs span{height:5px;flex:1;border-radius:var(--r-full);background:var(--border);transition:background var(--t-fast)}
.meter-label{font-size:var(--fs-2xs);font-weight:700;color:var(--text-subtle);white-space:nowrap}
.meter[data-level="1"] .meter-segs span:nth-child(-n+1){background:var(--danger)}
.meter[data-level="1"] .meter-label{color:var(--danger)}
.meter[data-level="2"] .meter-segs span:nth-child(-n+2){background:var(--secondary)}
.meter[data-level="2"] .meter-label{color:var(--secondary-strong)}
.meter[data-level="3"] .meter-segs span:nth-child(-n+3){background:var(--secondary-strong)}
.meter[data-level="3"] .meter-label{color:var(--secondary-strong)}
.meter[data-level="4"] .meter-segs span{background:var(--success)}
.meter[data-level="4"] .meter-label{color:var(--success)}

/* شبکهٔ فرم ثبت‌نام */
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 14px}
.auth-grid .is-full{grid-column:1/-1}

/* پیام کوچک زیر دکمهٔ ثبت‌نام */
.auth-foot-note{
  display:flex;align-items:flex-start;justify-content:center;gap:7px;
  margin-top:12px;font-size:var(--fs-2xs);color:var(--text-subtle);line-height:1.8;
}
.auth-foot-note .icon-sm{width:13px;height:13px;color:var(--success);flex-shrink:0;margin-top:2px}

/* لینک‌های رفت‌وبرگشت بین نماها */
.auth-back{margin-top:14px}
.auth-alt{
  margin-top:20px;padding-top:16px;border-top:1px dashed var(--border);
  text-align:center;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.9;
}
.auth-alt a{color:var(--primary-ink);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.auth-alt a:hover{color:var(--primary-hover)}

/* دکمهٔ اصلی فرم‌ها — همیشه تمام‌عرض کارت */
.auth-form .btn{width:100%;height:auto;padding-block:13px;margin-top:4px}
.auth-form .field{margin-bottom:16px}
.auth-form .field:last-of-type{margin-bottom:0}

/* ========================================================================
   ۵) نمای موفقیت — الگوی suc-check تسویه حساب
   ======================================================================== */
.auth-suc{padding-block:14px 4px}
.suc-check{
  width:74px;height:74px;border-radius:var(--r-full);
  background:var(--success-soft);color:var(--success);
  display:flex;align-items:center;justify-content:center;
  animation:auth-pop .5s var(--ease);margin-bottom:6px;
}
.suc-check .icon{width:34px;height:34px}
@keyframes auth-pop{0%{transform:scale(.45);opacity:0}62%{transform:scale(1.09)}100%{transform:scale(1);opacity:1}}
.auth-suc h2{font-size:var(--fs-xl);font-weight:900;line-height:1.5}
.auth-suc h2:focus{outline:none}
.auth-suc p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.95;max-width:42ch}
.auth-suc-echo{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--surface-muted);border-radius:var(--r-sm);
  padding:8px 16px;font-size:var(--fs-xs);color:var(--text-muted);
  max-width:100%;
}
.auth-suc-echo bdi{direction:ltr;unicode-bidi:isolate;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.auth-suc-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.auth-suc-actions .btn{min-width:172px;height:auto;padding-block:12px}
.auth-suc-note{font-size:var(--fs-2xs);color:var(--text-subtle)}

/* ========================================================================
   ۶) پنل برند — ستون تیرهٔ هویتی (روشنایی متن روی تیره مستند اینجاست)
   ======================================================================== */
.auth-brand{
  position:relative;overflow:hidden;
  background:var(--footer-bg);color:#fff;
  padding:36px 34px 32px;
  display:flex;flex-direction:column;
}
/* درخشش‌های ملایم نچرال teal/amber — بدون گرادیانت تزئینی تند */
.auth-brand::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 380px at 14% 6%,rgba(32,148,161,.26),transparent 62%);
}
.auth-brand::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(460px 340px at 92% 96%,rgba(240,173,53,.13),transparent 58%);
}
.auth-brand>*{position:relative;z-index:1}

.ab-head{display:flex;align-items:center;gap:12px}
.ab-mark{
  width:40px;height:40px;border-radius:10px;flex-shrink:0;
  background:var(--primary);color:#fff;
  display:grid;place-items:center;
  font-size:14px;font-weight:900;letter-spacing:.5px;
}
.ab-word b{display:block;font-size:16px;font-weight:900;line-height:1.6}
.ab-word span{display:block;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.5);letter-spacing:1.5px}
.ab-tagline{margin-top:10px;font-size:var(--fs-sm);font-weight:600;color:rgba(255,255,255,.72);line-height:1.9}

/* گالری محصول — محصول، قهرمان برند است (اصل محصول‌محوری) */
.ab-gallery{position:relative;margin-top:24px;min-height:252px}
.ab-gallery img{
  position:absolute;object-fit:cover;background:var(--surface-muted);
  border:1px solid rgba(255,255,255,.16);box-shadow:var(--sh-lg);
}
.ab-g1{inset-inline-start:0;top:0;width:74%;aspect-ratio:16/10;border-radius:var(--r-md);transform:rotate(-2deg)}
.ab-g2{inset-inline-end:0;bottom:6px;width:46%;aspect-ratio:4/3;border-radius:var(--r-md);transform:rotate(2.2deg);z-index:2}
.ab-g3{inset-inline-start:6%;bottom:-4px;width:34%;aspect-ratio:4/3;border-radius:var(--r-md);transform:rotate(-1.2deg);z-index:1;opacity:.94}

/* چرا حساب کاربری؟ — توضیح کوتاه و بدون اغراق */
.ab-why{margin-top:auto;padding-top:26px}
.ab-title{font-size:var(--fs-base);font-weight:900;margin-bottom:4px}
.ab-row{display:flex;align-items:flex-start;gap:12px;padding-block:13px;border-top:1px solid rgba(255,255,255,.09)}
.ab-row:first-of-type{border-top:0}
.ab-ic{
  width:34px;height:34px;border-radius:var(--r-sm);flex-shrink:0;
  background:rgba(56,168,181,.16);color:#6CC9D6;
  display:grid;place-items:center;
}
.ab-ic .icon-sm{width:17px;height:17px}
.ab-row b{display:block;font-size:var(--fs-sm);font-weight:800;line-height:1.7}
.ab-row p{font-size:var(--fs-xs);color:rgba(255,255,255,.6);line-height:1.85;margin-top:2px}
.ab-note{
  display:flex;align-items:flex-start;gap:8px;
  margin-top:14px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.12);
  font-size:var(--fs-2xs);color:rgba(255,255,255,.55);line-height:1.8;
}
.ab-note .icon-sm{width:14px;height:14px;color:#5FD3A5;flex-shrink:0;margin-top:2px}

/* ========================================================================
   ۷) نوار ارزش در موبایل — جایگزین پنل تیره در ≤۱۰۲۳
   ======================================================================== */
.auth-values{display:none;margin-top:18px;gap:12px}
.auth-values .ab-row{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:13px 15px;border-top:1px solid var(--border);
}
.auth-values .ab-row b{color:var(--text)}
.auth-values .ab-row p{color:var(--text-muted)}
.auth-values .ab-ic{background:var(--primary-soft);color:var(--primary-ink)}

/* ========================================================================
   ۸) لینک «بازگشت به فروشگاه» در هدر فشرده
   ======================================================================== */
.hf-c-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-2xs);font-weight:700;color:var(--text-muted);
  transition:color var(--t-fast);white-space:nowrap;
}
.hf-c-back:hover{color:var(--primary-ink)}
.hf-c-back .icon-sm{width:13px;height:13px;transform:scaleX(-1)}

/* ========================================================================
   ۹) فوتر نازک حساب کاربری — الگوی فوتر تسویه حساب
   ======================================================================== */
.auth-footer{border-top:1px solid var(--border);margin-top:30px}
.auth-footer .container{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-block:20px;font-size:var(--fs-2xs);color:var(--text-subtle);
}
.auth-footer nav{display:flex;gap:18px}
.auth-footer a{color:var(--text-subtle);transition:color var(--t-fast)}
.auth-footer a:hover{color:var(--primary-ink)}

/* ========================================================================
   ۱۰) ریسپانسیو — ۱۲۷۹ لپ‌تاپ · ۱۰۲۳ تبلت · ۶۳۹ موبایل
   ======================================================================== */
@media (max-width:1279px){
  .auth-shell{grid-template-columns:minmax(0,1fr) 392px}
  .auth-side{padding:30px 28px 34px}
  .auth-brand{padding:30px 26px 28px}
  .ab-gallery{min-height:224px}
}
@media (max-width:1023px){
  .auth-shell{grid-template-columns:1fr}
  .auth-brand{display:none}
  .auth-values{display:grid;grid-template-columns:repeat(3,1fr)}
}
@media (max-width:639px){
  .container{padding-inline:16px}
  .auth-main{padding-block:18px 40px}
  /* هدر فشردهٔ حساب: در موبایل فقط برند + عنوان کوتاه */
  .hf-c-back{display:none}
  .hf--compact .hf-c-title{font-size:12.5px}
  .hf--compact .hf-c-title small{font-size:9.5px}
  .auth-side{padding:22px 16px 26px}
  .auth-seg{margin-bottom:18px}
  .auth-grid{grid-template-columns:1fr}
  .auth-values{grid-template-columns:1fr;gap:10px}
  .auth-suc-actions .btn{min-width:100%}
  .auth-suc-echo{max-width:100%}
  .auth-suc-echo bdi{max-width:180px}
  .auth-footer .container{justify-content:center;text-align:center}
}

/* حرکت کاهش‌یافته — انیمیشن‌های لایهٔ صفحه خاموش می‌شوند */
@media (prefers-reduced-motion:reduce){
  .auth-alert,.suc-check{animation:none}
  .meter-segs span{transition:none}
}

/* ========================================================================
   v1.17.0 — ورود و عضویت با پیامک (پنل OTP · آی‌پی‌پنل)
   ======================================================================== */
.otp-panel{margin-top:2px}
.otp-step{display:flex;flex-direction:column;gap:14px}
.otp-step[hidden]{display:none!important}
.otp-phone-wrap{position:relative;display:block}
.otp-phone-wrap .otp-phone-ic{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);color:var(--text-subtle);width:20px;height:20px;display:flex}
.otp-phone-wrap .otp-phone-ic .icon{width:19px;height:19px}
.otp-phone-wrap .input{padding-inline-end:42px}
.otp-phone-back{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface-muted);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 12px}
.otp-back{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:700;color:var(--primary-ink)}
.otp-back:hover{color:var(--primary-hover)}
.otp-back .icon-sm{width:13px;height:13px;transform:scaleX(-1)}
.otp-phone-shown{font-size:var(--fs-sm);font-weight:800;color:var(--text)}
.otp-code-input{letter-spacing:.55em;text-align:center;font-size:22px;font-weight:800;height:56px}
.otp-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-xs);color:var(--text-subtle);margin:0}
.otp-resend{font-size:var(--fs-xs);font-weight:700;color:var(--primary-ink);display:inline-flex;align-items:center;gap:5px}
.otp-resend:disabled{color:var(--text-subtle);cursor:not-allowed;opacity:.7}
.otp-resend:not(:disabled):hover{color:var(--primary-hover)}
.otp-hint{font-size:var(--fs-xs);color:var(--text-subtle);line-height:1.9;margin:0;background:var(--surface-muted);border-radius:var(--r-sm);padding:10px 14px}
.otp-success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:30px 10px 14px}
.otp-success[hidden]{display:none!important}
.otp-success-ic{width:58px;height:58px;border-radius:50%;background:var(--success-soft);color:var(--success);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.otp-success-ic svg{width:26px;height:26px}
.otp-success b{font-size:var(--fs-lg);font-weight:800;color:var(--text)}
.otp-success p{font-size:var(--fs-sm);color:var(--text-muted);margin:0}
.frm-msg{font-size:var(--fs-sm);font-weight:600;margin:0;min-height:0}
.frm-msg:empty{display:none}
.frm-msg.is-err{color:var(--danger)}
.frm-msg.is-ok{color:var(--success)}
.otp-panel .btn .spinner{display:none;width:16px;height:16px;border-radius:50%}
.otp-panel .btn.is-loading .spinner{display:inline-block}
.otp-panel .btn.is-loading{opacity:.85;pointer-events:none}

/* تب‌های روش ورود (پیامک / رمز) — سگمنت موجود بازشده به نقش tab */
.auth-tabpanel[hidden]{display:none!important}