/*
 * MyOstad — auth-final.css
 * آخرین فایل CSS — همه تغییرات ظاهری نهایی auth modal اینجاست
 * لود ترتیب: بعد از همه فایل‌های دیگر
 * specificity: با .mo-auth-modal__sheet prefix همه چیز override می‌شه
 */

/* ════════════════════════════════════════════
   1. INPUT WRAPPER + FLAG (پرچم وسط‌چین)
   ════════════════════════════════════════════ */

.mo-auth-input-wrap {
  display: flex !important;
  align-items: center !important;
  direction: ltr !important;
  height: 56px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
  border: 1.5px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.06) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  position: relative !important;
}

[data-theme="light"] .mo-auth-input-wrap {
  background: #ffffff !important;
  border-color: rgba(37,99,235,0.22) !important;
}

.mo-auth-input-wrap:focus-within {
  border-color: rgba(59,130,246,0.70) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18) !important;
}

[data-theme="light"] .mo-auth-input-wrap:focus-within {
  border-color: rgba(37,99,235,0.60) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.13) !important;
}

/* پرچم — وسط‌چین کامل */
.mo-auth-input-flag {
  position: static !important;
  top: unset !important;
  right: unset !important;
  bottom: unset !important;
  left: unset !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  min-width: 56px !important;
  width: 56px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  font-size: 0 !important;   /* emoji رو مخفی کن */
}

[data-theme="dark"]  .mo-auth-input-flag,
:not([data-theme])   .mo-auth-input-flag {
  border-right: 1.5px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.04) !important;
}

[data-theme="light"] .mo-auth-input-flag {
  border-right: 1.5px solid rgba(37,99,235,0.15) !important;
  background: rgba(37,99,235,0.04) !important;
}

.mo-auth-input-flag svg {
  display: block !important;
  width: 28px !important;
  height: 19px !important;
  border-radius: 3px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.30) !important;
  flex-shrink: 0 !important;
}

/* input text */
.mo-auth-input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 16px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  direction: ltr !important;
  text-align: left !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.05em !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

[data-theme="dark"]  .mo-auth-input,
:not([data-theme])   .mo-auth-input { color: rgba(255,255,255,0.92) !important; }
[data-theme="light"] .mo-auth-input { color: rgba(10,22,50,0.90) !important; }

[data-theme="dark"]  .mo-auth-input::placeholder,
:not([data-theme])   .mo-auth-input::placeholder { color: rgba(255,255,255,0.28) !important; text-align: left !important; }
[data-theme="light"] .mo-auth-input::placeholder  { color: rgba(10,22,50,0.30) !important; text-align: left !important; }


/* ════════════════════════════════════════════
   2. MODAL SHEET
   ════════════════════════════════════════════ */

.mo-auth-modal__sheet {
  border-radius: 28px 28px 0 0 !important;
}

[data-theme="dark"]  .mo-auth-modal__sheet,
:not([data-theme])   .mo-auth-modal__sheet {
  background: linear-gradient(175deg, #0d1f3c 0%, #070f1e 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.09) !important;
  color: rgba(255,255,255,0.88) !important;
}

[data-theme="light"] .mo-auth-modal__sheet {
  background: #f5f8ff !important;
  border-top: 1px solid rgba(37,99,235,0.14) !important;
  color: rgba(10,22,50,0.90) !important;
  box-shadow: 0 -8px 48px rgba(15,32,68,0.14) !important;
}

/* ════════════════════════════════════════════
   3. CONTENT + TYPOGRAPHY
   ════════════════════════════════════════════ */

.mo-auth-content {
  padding: 12px 24px 28px !important;
}

.mo-auth-headline {
  font-size: clamp(1.2rem, 4.5vw, 1.45rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
  margin: 0 0 6px !important;
}

[data-theme="dark"]  .mo-auth-headline,
:not([data-theme])   .mo-auth-headline { color: #ffffff !important; }
[data-theme="light"] .mo-auth-headline { color: rgba(10,22,50,0.93) !important; }

.mo-auth-subline {
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  margin: 0 0 20px !important;
}

[data-theme="dark"]  .mo-auth-subline,
:not([data-theme])   .mo-auth-subline { color: rgba(255,255,255,0.48) !important; }
[data-theme="light"] .mo-auth-subline { color: rgba(10,22,50,0.52) !important; }

/* ════════════════════════════════════════════
   4. PRIMARY BUTTON
   ════════════════════════════════════════════ */

.mo-auth-modal__sheet .mo-btn--primary {
  background: linear-gradient(135deg,
    var(--primary, #2563eb) 0%,
    rgba(var(--primary-rgb, 37,99,235), 0.75) 100%
  ) !important;
  box-shadow: 0 4px 18px rgba(var(--primary-rgb, 37,99,235), 0.40) !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.mo-auth-modal__sheet .mo-btn--primary:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 26px rgba(var(--primary-rgb, 37,99,235), 0.52) !important;
}

.mo-auth-modal__sheet .mo-btn--primary:active:not(:disabled) {
  transform: translateY(0) !important;
}

/* ════════════════════════════════════════════
   5. OTP DIGITS
   ════════════════════════════════════════════ */

.mo-auth-otp-digit {
  border-radius: 12px !important;
  font-weight: 800 !important;
  transition: all 0.18s !important;
}

[data-theme="dark"]  .mo-auth-otp-digit,
:not([data-theme])   .mo-auth-otp-digit {
  background: rgba(255,255,255,0.06) !important;
  border: 2px solid rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
}

[data-theme="light"] .mo-auth-otp-digit {
  background: #ffffff !important;
  border: 2px solid rgba(37,99,235,0.20) !important;
  color: rgba(10,22,50,0.90) !important;
  box-shadow: 0 2px 6px rgba(37,99,235,0.06) !important;
}

.mo-auth-otp-digit:focus {
  border-color: var(--primary, #3b82f6) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59,130,246), 0.22) !important;
  transform: scale(1.06) !important;
}

.mo-auth-otp-digit.filled {
  border-color: rgba(var(--primary-rgb, 59,130,246), 0.60) !important;
  background: rgba(var(--primary-rgb, 59,130,246), 0.10) !important;
}

/* ════════════════════════════════════════════
   6. ROLE CARDS LIGHT MODE
   ════════════════════════════════════════════ */

[data-theme="light"] .mo-auth-role {
  background: rgba(15,32,68,0.04) !important;
  border-color: rgba(15,32,68,0.12) !important;
}
[data-theme="light"] .mo-auth-role__name { color: rgba(10,22,50,0.90) !important; }
[data-theme="light"] .mo-auth-role__desc { color: rgba(10,22,50,0.52) !important; }
[data-theme="light"] .mo-auth-role.selected {
  border-color: var(--primary, #2563eb) !important;
  background: rgba(37,99,235,0.08) !important;
}

/* ════════════════════════════════════════════
   7. FORM FIELDS (Register step) LIGHT MODE
   ════════════════════════════════════════════ */

[data-theme="light"] .mo-auth-form-field input,
[data-theme="light"] .mo-auth-field {
  background: #ffffff !important;
  border-color: rgba(37,99,235,0.20) !important;
  color: rgba(10,22,50,0.90) !important;
}
[data-theme="light"] .mo-auth-form-label { color: rgba(10,22,50,0.70) !important; }

/* ════════════════════════════════════════════
   8. TERMS + PROOF (LIGHT MODE)
   ════════════════════════════════════════════ */

[data-theme="light"] .mo-auth-terms { color: rgba(10,22,50,0.42) !important; }
[data-theme="light"] .mo-auth-terms a { color: var(--primary, #2563eb) !important; }
[data-theme="light"] .mo-auth-proof__text { color: rgba(10,22,50,0.52) !important; }
[data-theme="light"] .mo-auth-proof__text strong { color: rgba(10,22,50,0.88) !important; }

/* ════════════════════════════════════════════
   9. SPLASH FIX — مخفی کردن splash
   ui-fixes-v2.css با !important splash را همیشه flex نگه می‌دارد
   این rule آن را beat می‌کند وقتی JS aria-hidden=true می‌گذارد
   ════════════════════════════════════════════ */

/* وقتی JS مخفی کرد — aria-hidden=true */
#myostad-splash[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* وقتی JS مستقیم style.display=none گذاشت — این rule کمکی نیست
   چون inline style از stylesheet قوی‌تره، مگر اینکه stylesheet !important داشته باشه
   پس از aria-hidden استفاده می‌کنیم که JS می‌گذارد */