/* =====================================================================
   فری‌جیب — صفحات احراز هویت (ورود / ثبت‌نام / فراموشی رمز عبور)
   نسخه‌ی لایت‌مود، کارت واحد در مرکز صفحه، با تمرکز بر انیمیشن کارت
   این فایل فقط در همین سه صفحه لود می‌شود.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

html, body.auth-page { height: 100%; }
body.auth-page { overflow-x: hidden; }

/* صفحه‌ی احراز هویت همیشه لایت‌مود است، صرف‌نظر از تنظیم تم بقیه‌ی سایت */
body.auth-page { background: #f5f3ff; }
body.auth-page::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 70% 50% at 12% 8%, rgba(196,181,253,.45) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 92% 92%, rgba(232,121,249,.28) 0%, transparent 50%),
    linear-gradient(135deg,#f8f7ff 0%,#eee9ff 50%,#f8f7ff 100%);
}

.auth-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 1.4rem 1.2rem;
  position: relative; overflow: hidden;
}

/* ── دو دایره‌ی بزرگ بلار در پس‌زمینه، در حال حرکت آرام روی کل صفحه ── */
.bg-blob { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .68; pointer-events: none; z-index: 0; }
.bg-blob-1 {
  width: 620px; height: 620px; background: #c4b5fd;
  top: -18%; right: -14%;
  animation: blobDrift1 34s ease-in-out infinite alternate;
}
.bg-blob-2 {
  width: 560px; height: 560px; background: #f0abfc;
  bottom: -20%; left: -14%;
  animation: blobDrift2 38s ease-in-out infinite alternate;
  animation-delay: -12s;
}
@keyframes blobDrift1 {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-14vw,10vh) scale(1.12); }
  100% { transform: translate(6vw,-8vh) scale(.95); }
}
@keyframes blobDrift2 {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(12vw,-9vh) scale(1.1); }
  100% { transform: translate(-6vw,7vh) scale(.96); }
}

/* ── آیکون‌های شناور تزئینی (موضوع: حسابداری فریلنسری) ───── */
.bg-float { position: absolute; z-index: 0; opacity: .22; color: #7c3aed; pointer-events: none; animation: floatDrift ease-in-out infinite; }
.bg-float svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; }
.bg-float-1 { width: 34px; height: 34px; top: 12%; left: 9%; animation-duration: 9s; }
.bg-float-2 { width: 26px; height: 26px; top: 22%; right: 13%; animation-duration: 11s; animation-delay: -3s; }
.bg-float-3 { width: 30px; height: 30px; bottom: 16%; left: 14%; animation-duration: 10s; animation-delay: -6s; }
.bg-float-4 { width: 24px; height: 24px; bottom: 24%; right: 10%; animation-duration: 8.5s; animation-delay: -1.5s; }
@keyframes floatDrift {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-16px) rotate(6deg); }
}

/* ── کارت اصلی ─────────────────────────────────────────────── */
.auth-card-wrap { position: relative; z-index: 2; width: 100%; max-width: 408px; }

.auth-card {
  width: 100%; position: relative;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--radius-lg);
  padding: 1.7rem 2rem;
  box-shadow: 0 25px 70px rgba(109,40,217,.18), inset 0 1px 0 #fff;
  opacity: 0;
  animation: cardIn .75s cubic-bezier(.19,1.2,.32,1) .08s forwards;
  transition: transform .25s ease;
  will-change: transform;
}
.auth-card[data-step="2"] { animation-name: cardInStep; }
@keyframes cardIn {
  0%   { opacity: 0; transform: translateY(26px) scale(.9) rotateX(6deg); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
}
@keyframes cardInStep {
  from { opacity: 0; transform: translateX(26px) scale(.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.auth-card-head { text-align: center; margin-bottom: 1.1rem; }
.auth-mark-wrap {
  width: 46px; height: 46px; margin: 0 auto .55rem; position: relative;
  animation: markFloat 3.6s ease-in-out infinite;
}
@keyframes markFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
.auth-mark-glow {
  position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,.45), transparent 70%);
  animation: markGlow 3.6s ease-in-out infinite;
}
@keyframes markGlow { 0%,100%{ opacity: .5; transform: scale(.9); } 50%{ opacity: 1; transform: scale(1.15); } }
.auth-mark {
  position: relative; width: 46px; height: 46px; object-fit: contain; display: block;
  opacity: 0; animation: markPop .55s cubic-bezier(.34,1.56,.64,1) .12s forwards;
}
@keyframes markPop { from{ opacity:0; transform: scale(.5) rotate(-10deg); } to{ opacity:1; transform: scale(1) rotate(0); } }

.auth-card-head h1 {
  font-size: 1.42rem; font-weight: 800; margin-bottom: .3rem; color: #1e1333;
  opacity: 0; animation: avFade .5s ease .22s forwards;
}
.auth-card-head p { color: #7c6fa0; font-size: .85rem; opacity: 0; animation: avFade .5s ease .3s forwards; }
@keyframes avFade { from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform: translateY(0); } }

/* ── نقاط مرحله ───────────────────────────────────────────── */
.step-dots { display: flex; justify-content: center; align-items: center; gap: .45rem; margin-bottom: .9rem; }
.step-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(139,92,246,.18); transition: all .35s cubic-bezier(.34,1.56,.64,1); }
.step-dots span.done { background: #a78bfa; }
.step-dots span.active { width: 24px; border-radius: 5px; background: linear-gradient(135deg,#7c3aed,#e879f9); box-shadow: 0 0 10px rgba(167,139,250,.5); }

.auth-form { display: flex; flex-direction: column; }

/* ── فیلد با آیکون ────────────────────────────────────────── */
.a-field { margin-bottom: .7rem; opacity: 0; animation: fieldIn .5s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(.34s + var(--i,0) * .08s); }
@keyframes fieldIn { from{ opacity:0; transform: translateY(9px); } to{ opacity:1; transform: translateY(0); } }
.a-field label { display: block; font-size: .76rem; font-weight: 700; color: #4b3d6e; margin-bottom: .4rem; }
.a-field label .req { color: var(--red); }
.a-input-wrap { position: relative; display: flex; align-items: center; }
.a-input-wrap .a-ico {
  position: absolute; right: .85rem; color: #ac9fd6; pointer-events: none;
  display: flex; transition: color .2s, transform .2s;
}
.a-input-wrap .a-ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.a-input-wrap:focus-within .a-ico { color: #7c3aed; transform: scale(1.12); }
.a-field input {
  width: 100%; padding: .72rem .85rem .72rem 2.6rem; padding-right: 2.65rem;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.a-field input:focus { transform: translateY(-1px); }
.a-field input.has-toggle { padding-left: 2.6rem; }
.a-toggle-pass {
  position: absolute; left: .55rem; background: none; border: none; color: #ac9fd6;
  cursor: pointer; padding: .35rem; display: flex; border-radius: 6px; transition: color .2s, transform .2s;
}
.a-toggle-pass:hover { color: #7c3aed; transform: scale(1.1); }
.a-toggle-pass svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.a-toggle-pass .eye-off { display: none; }
.a-toggle-pass.is-visible .eye { display: none; }
.a-toggle-pass.is-visible .eye-off { display: block; }

/* ── چک‌لیست و متر قدرت رمز عبور ──────────────────────────── */
.pw-meter { height: 5px; border-radius: 4px; background: rgba(139,92,246,.14); margin-top: .55rem; overflow: hidden; }
.pw-meter-fill { height: 100%; width: 0%; border-radius: 4px; background: var(--red); transition: width .35s cubic-bezier(.16,1,.3,1), background .35s ease; }
.pw-meter-fill.mid { background: var(--gold); }
.pw-meter-fill.strong { background: var(--green); }
.pw-rules { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin-top: .4rem; }
.pw-rule { display: flex; align-items: center; gap: .3rem; font-size: .7rem; color: #9585b8; font-weight: 600; transition: color .25s; }
.pw-rule .dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(139,92,246,.25); flex-shrink: 0; position: relative; transition: all .25s cubic-bezier(.34,1.56,.64,1); }
.pw-rule .dot svg { position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; stroke: #fff; fill: none; stroke-width: 3.4; opacity: 0; transform: scale(.4); transition: all .25s cubic-bezier(.34,1.56,.64,1); }
.pw-rule.met { color: var(--green); }
.pw-rule.met .dot { background: var(--green); border-color: var(--green); }
.pw-rule.met .dot svg { opacity: 1; transform: scale(1); }

/* ── تایید انسان بودن (بدون کد کپچا) ─────────────────────── */
.human-verify {
  display: flex; align-items: center; gap: .7rem;
  padding: .68rem .95rem; border-radius: var(--radius-sm);
  border: 1.5px solid rgba(139,92,246,.2); background: rgba(255,255,255,.55);
  cursor: pointer; user-select: none; transition: border-color .2s, box-shadow .2s;
}
.human-verify:hover { border-color: rgba(139,92,246,.4); }
.human-verify.shake { animation: shakeX .45s ease; }
.hv-box {
  width: 25px; height: 25px; border-radius: 7px; flex-shrink: 0;
  border: 2px solid rgba(139,92,246,.35); background: #fff;
  display: flex; align-items: center; justify-content: center; position: relative;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
}
.human-verify.checking .hv-box { border-color: #a78bfa; }
.human-verify.checked .hv-box {
  border-color: #7c3aed; background: linear-gradient(135deg,#7c3aed,#e879f9);
  box-shadow: 0 0 0 5px rgba(124,58,237,.14);
  animation: hvPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes hvPop { 0%{ transform: scale(.85); } 55%{ transform: scale(1.12); } 100%{ transform: scale(1); } }
.hv-check { opacity: 0; transform: scale(.3) rotate(-15deg); transition: all .3s cubic-bezier(.34,1.56,.64,1); }
.human-verify.checked .hv-check { opacity: 1; transform: scale(1) rotate(0); }
.hv-check svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 3; }
.hv-spinner {
  display: none; width: 14px; height: 14px; border-radius: 50%; position: absolute;
  border: 2px solid rgba(124,58,237,.2); border-top-color: #7c3aed; animation: spin .6s linear infinite;
}
.human-verify.checking .hv-spinner { display: block; }
.human-verify.checking .hv-check { display: none; }
.hv-label { font-size: .83rem; font-weight: 700; color: #4b3d6e; transition: color .2s; }
.human-verify.checked .hv-label { color: #059669; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── دکمه‌ی ارسال ─────────────────────────────────────────── */
.btn.auth-submit {
  width: 100%; justify-content: center; padding: .84rem; font-size: .93rem;
  position: relative; overflow: hidden; margin-top: .3rem;
  opacity: 0; animation: fieldIn .5s cubic-bezier(.16,1,.3,1) forwards, submitPulse 4.2s ease-in-out 1.4s infinite;
  animation-delay: calc(.34s + var(--i,0) * .08s), 1.6s;
}
@keyframes submitPulse {
  0%,100% { box-shadow: 0 3px 16px rgba(124,58,237,.4); transform: scale(1); }
  50%     { box-shadow: 0 5px 26px rgba(124,58,237,.58); transform: scale(1.012); }
}
.btn.auth-submit::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 55px;
  background: linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform: skewX(-20deg) translateX(-160px); transition: transform .65s ease;
}
.btn.auth-submit:hover::after { transform: skewX(-20deg) translateX(340px); }
.btn.auth-submit:active { transform: scale(.98); }
.btn.auth-submit.is-loading { pointer-events: none; opacity: .88; animation: none; }
.btn.auth-submit .btn-spinner { display: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn.auth-submit.is-loading .btn-spinner { display: inline-block; }
.btn.auth-submit.is-loading .btn-label { display: none; }

/* ── لینک‌های پایین کارت ──────────────────────────────────── */
.auth-links { text-align: center; margin-top: .75rem; display: flex; flex-direction: column; gap: .4rem; opacity: 0; animation: avFade .5s ease .55s forwards; }
.auth-links a { color: #7c3aed; text-decoration: none; font-weight: 700; font-size: .83rem; transition: color .2s; }
.auth-links a:hover { color: #9333ea; }
.auth-links p { font-size: .83rem; color: #9585b8; }
.auth-back-link { display: inline-flex; align-items: center; gap: .3rem; }
.auth-back-link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── جعبه‌های کد تایید پیامکی ─────────────────────────────── */
.otp-hint { text-align: center; font-size: .85rem; color: #4b3d6e; margin-bottom: .8rem; line-height: 1.7; }
.otp-hint b { color: #7c3aed; direction: ltr; display: inline-block; }
.otp-boxes { display: flex; justify-content: center; gap: .55rem; direction: ltr; margin-bottom: .3rem; }
.otp-boxes input {
  width: 46px; height: 54px; text-align: center; font-size: 1.3rem; font-weight: 800;
  padding: 0; border-radius: var(--radius-sm);
}
.otp-boxes input.filled { border-color: #a78bfa; background: rgba(167,139,250,.12); animation: otpPop .25s cubic-bezier(.34,1.56,.64,1); }
@keyframes otpPop { 0%{ transform: scale(.85); } 60%{ transform: scale(1.08); } 100%{ transform: scale(1); } }
.otp-boxes.shake { animation: shakeX .45s ease; }
@keyframes shakeX {
  10%,90%{ transform: translateX(-1px); } 20%,80%{ transform: translateX(2px); }
  30%,50%,70%{ transform: translateX(-4px); } 40%,60%{ transform: translateX(4px); }
}

.otp-timer { text-align: center; font-size: .8rem; color: #9585b8; margin: .6rem 0 .8rem; }
.otp-timer b { color: #7c3aed; font-weight: 800; direction: ltr; display: inline-block; }
.otp-resend-btn { width: 100%; justify-content: center; padding: .6rem; background: transparent; border: 1px solid rgba(139,92,246,.2); color: #9585b8; }
.otp-resend-btn:disabled { opacity: .45; cursor: not-allowed; }
.otp-resend-btn:not(:disabled):hover { color: #7c3aed; border-color: rgba(167,139,250,.45); }

/* ── هشدارها ──────────────────────────────────────────────── */
.auth-card .alert { margin-bottom: 1.1rem; }
.auth-card .alert.shake-in { animation: fbFadeIn .2s ease, shakeX .5s ease .12s; }

/* ── واکنش‌گرا ─────────────────────────────────────────────── */
@media (max-width: 420px) {
  .auth-card { padding: 1.4rem 1.3rem; }
  .otp-boxes input { width: 40px; height: 48px; font-size: 1.15rem; }
}