/* این قانون قبلاً روی خودِ body بود؛ چون همه‌ی CSSها الان در layout ریشه (همه‌ی صفحات) لود
   می‌شوند، اگر روی body بماند کل اپ (نه فقط لاگین) را به یک ستون باریکِ وسط‌چین تبدیل می‌کند —
   دقیقاً همان رگرسیون گزارش‌شده («کل UI حالت موبایل/استاتیک شد»). حالا فقط روی کانتینر خودِ
   صفحه‌ی لاگین اعمال می‌شود. */
.login-page {
  background: var(--color-bg);
  background-image: radial-gradient(circle at 15% 20%, var(--color-primary-soft) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, var(--color-primary-soft) 0%, transparent 40%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
/* مورد #10 task.md — دکمه‌ی «صفحه اصلی» بالا-سمت‌چپ صفحه‌ی لاگین. */
.login-home-link {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  z-index: 10;
}

.login-home-link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-5);
}

/* مورد #13 Polish.md — مودال ورود سراسری (به‌جای صفحه‌ی مستقل لاگین)؛ همان استایل .login-card
   قبلی، فقط داخل یک overlay ثابت. */
.login-modal-overlay {
  z-index: 1500;
}

.login-modal-card {
  position: relative;
  animation: modal-pop 180ms ease;
}

.login-modal-close-btn {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
}
.login-badge {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  overflow: hidden;
}
.login-badge img { width: 32px; height: 32px; object-fit: contain; }
.login-card h1 { text-align: center; font-size: 1.15rem; font-weight: 700; margin-bottom: var(--space-1); }
.login-card p { text-align: center; color: var(--color-text-muted); margin-bottom: var(--space-5); font-size: 0.85rem; }
.btn-block { width: 100%; justify-content: center; height: var(--input-height); }
#otp-step { display: none; }
#otp-step.otp-step-visible { display: block; }
#mobile-display { text-align: center; color: var(--color-primary); font-weight: 700; margin-bottom: var(--space-4); direction: ltr; }

/* md.md مورد ۱ — ردیف شمارش‌معکوس/ارسال مجدد کد. */
.login-resend-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-3);
}

.login-resend-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.login-resend-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 700;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.login-resend-btn:hover {
  background: var(--color-primary-soft);
}

.login-resend-btn:disabled {
  opacity: 0.6;
  cursor: default;
}