/* ==========================================================================
   OptionAi — تب ورود / ثبت‌نام
   دو بخش: سمت چپ لوگو، سمت راست باکس. با order کنترل می‌شود تا هم جهت‌گیری
   راست‌به‌چپ کل سایت دست‌نخورده بماند و هم لوگو قطعاً سمت چپ بنشیند.
   ========================================================================== */

.login-shell{ display:flex; height:100% }

/* ------------------------------ پنل لوگو (چپ) ------------------------------ */
.login-brand-pane{
  order:2;
  flex:1 1 44%;
  min-width:0;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  background-color:var(--surface-2);
  background-image:radial-gradient(680px 420px at 50% 42%, var(--gold-soft), transparent 68%);
  border-inline-start:1px solid var(--line-soft);
}
/* اندازهٔ لوگو در theme.css از --brand-logo-h و نسبت --brand-logo-ar می‌آید که
   برای نوار برند تنظیم شده‌اند. اینجا هر دو را کنار می‌گذاریم و کادر لوگو را
   مستقیم به پنل می‌بندیم؛ چون background-size:contain است، خودِ نقش هر نسبتی
   داشته باشد داخل همین کادر بزرگ‌ترین اندازهٔ ممکن را می‌گیرد. */
.login-logo{
  width:min(92%, 680px);
  height:min(62vh, 520px);
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.25));
}
@media (max-width:820px){
  .login-brand-pane{ display:none }
}

/* ------------------------------ پنل فرم (راست) ----------------------------- */
.login-form-pane{
  order:1;
  flex:1 1 56%;
  min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.1rem;
  padding:2rem 1.25rem;
  overflow-y:auto;
}

.login-tagline{
  font-size:clamp(21px, 2.5vw, 31px);
  font-weight:800; color:var(--txt-strong); letter-spacing:-.01em;
  line-height:1.6; text-align:center;
  margin-bottom:.15rem;
}

.login-card{
  width:min(100%, 400px);
  padding:1.35rem 1.5rem 1.55rem;
  flex:none;
}

/* ------------------------------ تب کپسولی --------------------------------- */
.auth-seg{
  position:relative;
  display:flex; align-items:center; gap:2px; padding:3px;
  width:max-content; margin:0 auto 1.3rem;
  background-color:var(--surface-3); border:1px solid var(--line); border-radius:999px;
}

/* کپسول طلایی که بین دو دکمه سُر می‌خورد؛ جای آن را app.js تنظیم می‌کند */
.auth-seg-ink{
  position:absolute; top:3px; bottom:3px; left:0; width:0;
  border-radius:999px; pointer-events:none;
  background-image:linear-gradient(180deg,#FFD65A,#F5B60F);
  box-shadow:0 6px 16px -6px rgba(255,197,49,.7);
  transition:left .42s var(--ease-out), width .42s var(--ease-out);
}
/* پیش از اولین جای‌گذاری، کپسول نباید از گوشهٔ چپ سُر بخورد */
.auth-seg.no-ink-anim .auth-seg-ink{ transition:none }

.auth-seg-btn{
  position:relative; z-index:1;               /* روی کپسول بنشیند */
  min-width:98px; padding:.5rem 1.1rem; border-radius:999px;
  font-size:12.5px; font-weight:700; color:var(--txt-mute); cursor:pointer; text-align:center;
  background:transparent;
  transition:color .28s var(--ease-soft);
}
.auth-seg-btn:hover{ color:var(--txt) }
.auth-seg-btn.active{ color:var(--on-gold) }

/* ---------------------- جابه‌جایی نرم بین دو فرم -------------------------- */
.login-forms{
  position:relative;
  overflow:hidden;
  /* حاشیهٔ منفی + پدینگ تا حلقهٔ فوکوس ورودی‌ها با overflow:hidden بریده نشود */
  margin-inline:-6px; padding-inline:6px;
  transition:height .42s var(--ease-out);
}
@keyframes authInFromRight{ from{opacity:0; transform:translateX(26px)} to{opacity:1; transform:none} }
@keyframes authInFromLeft { from{opacity:0; transform:translateX(-26px)} to{opacity:1; transform:none} }
.login-form.in-right{ animation:authInFromRight .42s var(--ease-out) both }
.login-form.in-left { animation:authInFromLeft  .42s var(--ease-out) both }

.login-form-title{
  font-size:15.5px; font-weight:800; color:var(--txt-strong);
  text-align:center; margin-bottom:1.1rem;
}

.login-form.hidden{ display:none }

/* ------------------------------ دکمهٔ گوگل --------------------------------- */
.btn-google{
  width:100%; display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.62rem 1rem; border-radius:11px; cursor:pointer;
  background-color:var(--surface-3); border:1px solid var(--line); color:var(--txt);
  font-size:13px; font-weight:700;
  transition:border-color .22s var(--ease-soft), background .22s var(--ease-soft), transform .22s var(--ease-out);
}
.btn-google:hover{ border-color:var(--line-strong); background-color:var(--surface-4); transform:translateY(-1px) }
.btn-google:active{ transform:translateY(0) scale(.98) }
.btn-google svg{ width:18px; height:18px; flex:none }

/* --------------------------------- جداکننده -------------------------------- */
.login-divider{
  display:flex; align-items:center; gap:.6rem; margin:1.05rem 0;
  color:var(--txt-mute); font-size:11px;
}
.login-divider::before, .login-divider::after{ content:''; flex:1; height:1px; background-color:var(--line) }

/* --------------------------------- ورودی‌ها -------------------------------- */
.login-field{ margin-bottom:.8rem }
.login-field-label{ display:block; font-size:12.5px; font-weight:600; color:var(--txt); margin-bottom:.4rem }
.login-field-box{ position:relative; display:flex; align-items:center }

.login-field-ico{
  position:absolute; left:.8rem; display:grid; place-items:center;
  color:var(--txt-mute); pointer-events:none;
}
.login-field-ico svg{ width:16px; height:16px }

.login-field-input{
  width:100%; border-radius:11px; padding:.65rem .85rem .65rem 2.5rem;
  background-color:var(--surface-3); border:1px solid var(--line); color:var(--txt);
  font-size:13.5px; font-family:inherit; outline:none;
  transition:border-color .22s var(--ease-soft), box-shadow .22s var(--ease-soft), background .22s;
}
.login-field-input::placeholder{ color:var(--txt-mute) }
.login-field-input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-ring) }
.login-field-input.pw{ padding-left:2.5rem; padding-right:2.5rem }

.login-field-eye{
  position:absolute; right:.5rem; width:26px; height:26px;
  display:grid; place-items:center; border-radius:8px; cursor:pointer;
  color:var(--txt-mute); background:transparent; border:0;
  transition:color .22s var(--ease-soft), background .22s var(--ease-soft);
}
.login-field-eye svg{ width:15px; height:15px }
.login-field-eye:hover{ color:var(--gold-ink); background-color:var(--gold-soft) }
.login-field-eye:focus-visible{ outline:2px solid var(--gold-ring); outline-offset:2px }

/* دکمهٔ نهایی — طبق طرح کاغذی، پایین باکس و سمت چپ می‌نشیند.
   flex-end زیر dir=rtl همان سمت چپ است، نه راست. */
.login-submit-row{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.15rem }
.login-submit{ padding:.68rem 2rem; border-radius:11px; font-size:13.5px }

/* ------------------------------ فراموشی رمز ------------------------------- */
/* لینک متنی کوچک (زیر رمزِ فرم ورود، «ویرایش شماره»، «ارسال دوباره») */
.login-link{
  background:transparent; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:12px; font-weight:700; color:var(--gold-ink);
  transition:color .2s var(--ease-soft), opacity .2s var(--ease-soft);
}
.login-link:hover{ opacity:.78 }
.login-link:focus-visible{ outline:2px solid var(--gold-ring); outline-offset:3px; border-radius:6px }
.login-link:disabled{ opacity:.45; cursor:default }
.login-link.hidden{ display:none }
/* flex-start زیر dir=rtl یعنی سمت راست، همان لبهٔ برچسب‌ها */
.login-forgot-row{ display:flex; justify-content:flex-start; margin-top:-.15rem }

/* سه گام: شماره → کد → رمز تازه */
.fp-steps{
  display:flex; justify-content:center; gap:.35rem;
  margin:-.35rem 0 1rem; padding:0; list-style:none;
}
.fp-steps li{
  display:flex; align-items:center; gap:.35rem;
  padding:.28rem .7rem; border-radius:999px;
  font-size:11.5px; font-weight:700; color:var(--txt-mute);
  background-color:var(--surface-3); border:1px solid var(--line);
  transition:color .25s var(--ease-soft), background .25s var(--ease-soft), border-color .25s var(--ease-soft);
}
.fp-steps li.on{ color:var(--on-gold); background-image:linear-gradient(180deg,#FFD65A,#F5B60F); border-color:transparent }
.fp-steps li.done{ color:var(--up); border-color:var(--up-line); background-color:var(--up-soft) }
.fp-steps li.done::before{
  content:''; width:10px; height:10px; flex:none; background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.fp-step.hidden{ display:none }
.fp-step.in-left{ animation:authInFromLeft .42s var(--ease-out) both }
.fp-hint{ font-size:12.5px; line-height:1.95; color:var(--txt-dim); margin-bottom:.95rem }
.fp-hint-sm{ font-size:11.5px; margin:.1rem 0 0; color:var(--txt-mute) }
.fp-hint .login-link{ margin-inline-start:.3rem }
.fp-phone{ font-weight:800; color:var(--txt); unicode-bidi:isolate }

/* کادر کد: ارقام درشت و باز، وسط‌چین */
.login-field-input.fp-code{
  text-align:center; font-size:19px; font-weight:800; letter-spacing:.55em;
  padding-top:.5rem; padding-bottom:.5rem; font-variant-numeric:tabular-nums;
}
.login-field-input.fp-code::placeholder{ letter-spacing:.35em }

.fp-resend{
  display:flex; align-items:center; justify-content:flex-start; min-height:1.4rem;
  margin-top:-.25rem; font-size:12px; color:var(--txt-mute);
}
.fp-timer.hidden{ display:none }
.fp-timer span{ font-weight:800; color:var(--txt-dim) }

@media (prefers-reduced-motion: reduce){
  .fp-step.in-left{ animation:none }
}

/* فرم تکمیل ثبت‌نام با گوگل: ایمیل/نامی که از گوگل آمده، بالای دو خانه */
.login-google-who{
  margin:-.2rem 0 1rem; padding:.55rem .8rem; border-radius:11px;
  font-size:12.5px; line-height:1.9; color:var(--txt-dim);
  background-color:var(--surface-3); border:1px solid var(--line);
  direction:ltr; text-align:start; overflow-wrap:anywhere;
}
.login-google-who:empty{ display:none }

/* ==========================================================================
   حالت‌های خطا و انتظار — برای اتصال فرم‌ها به سرور احراز هویت

   توکن‌های قرمز/سبزِ کم‌رنگ اینجا برای هر تم مقدار ثابت دارند، دقیقاً به سبک
   --gold-ring و --gold-soft در theme.css. می‌شد با color-mix() هم نوشت، ولی
   مقدار ثابت دو مزیت دارد: هم‌سبک بقیهٔ فایل می‌ماند، و برای تم روشن می‌شود
   آلفا را جدا تنظیم کرد (قرمز روشن روی سفید زودتر تند می‌شود تا روی مشکی).
   ========================================================================== */
:root,
:root[data-theme="dark"]{
  --down-soft:rgba(239,68,68,.12);
  --down-line:rgba(239,68,68,.38);
  --down-ring:rgba(239,68,68,.22);
  --up-soft:rgba(34,197,94,.12);
  --up-line:rgba(34,197,94,.38);
}
:root[data-theme="light"]{
  --down-soft:rgba(210,44,44,.10);
  --down-line:rgba(210,44,44,.38);
  --down-ring:rgba(210,44,44,.20);
  --up-soft:rgba(18,147,74,.10);
  --up-line:rgba(18,147,74,.38);
}

/* --------------------------- پیام سراسری فرم ------------------------------ */
.login-alert{
  display:flex; align-items:flex-start; gap:.5rem;
  margin-bottom:1rem; padding:.62rem .8rem; border-radius:11px;
  font-size:12.5px; font-weight:600; line-height:1.75;
  border:1px solid var(--down-line);
  background-color:var(--down-soft);
  color:var(--down);
}
.login-alert.ok{
  border-color:var(--up-line);
  background-color:var(--up-soft);
  color:var(--up);
}
.login-alert.hidden{ display:none }

/* پیام تازه باید دیده شود، حتی اگر کاربر همان‌جا نشسته باشد */
@keyframes alertIn{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
.login-alert:not(.hidden){ animation:alertIn .26s var(--ease-out) both }

/* --------------------------- خطای زیر هر کادر ----------------------------- */
.login-field-err{
  margin-top:.34rem; font-size:11.5px; font-weight:600; line-height:1.7;
  color:var(--down);
}
.login-field-err:empty{ display:none }

/* کادر ورودیِ خطادار — حلقهٔ فوکوس هم قرمز می‌شود تا با تب‌زدن هم پیدا باشد */
.login-field-input.invalid{ border-color:var(--down) }
.login-field-input.invalid:focus{
  border-color:var(--down);
  box-shadow:0 0 0 3px var(--down-ring);
}

/* ------------------------------ دکمهٔ در حال ارسال ------------------------- */
.login-submit[data-busy="1"]{
  pointer-events:none; opacity:.72;
}
.login-submit[data-busy="1"]::after{
  content:''; display:inline-block; vertical-align:-2px;
  width:13px; height:13px; margin-inline-start:.5rem;
  border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  animation:submitSpin .7s linear infinite;
}
@keyframes submitSpin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){
  .login-submit[data-busy="1"]::after{ animation-duration:2.4s }
  .login-alert:not(.hidden){ animation:none }
}