/* ورود با موبایل — کارت شیشه‌ای هماهنگ با هویت بصری سایت */

.smi-ml-card {
  --ml-blue: #2395FF;
  --ml-blue-i: #1A6DC4;
  --ml-border: rgba(255,255,255,0.65);
  max-width: 420px;
  margin: 3rem auto;
  padding: 2rem 1.75rem 1.75rem;
  background: rgba(11, 37, 64, 0.55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--ml-border);
  border-radius: 18px;
  color: #fff;
  font-family: "Vazirmatn", system-ui, Tahoma, sans-serif;
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
}

.smi-ml-head { text-align: center; margin-bottom: 1.5rem; }
.smi-ml-title { margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 700; color: #fff; }
.smi-ml-sub { margin: 0; font-size: .95rem; line-height: 1.9; color: rgba(255,255,255,0.78); }

.smi-ml-label { display: block; margin-bottom: .5rem; font-size: .92rem; font-weight: 500; }

.smi-ml-input {
  width: 100%;
  padding: .85rem 1rem;
  font-size: 1.15rem;
  letter-spacing: .06em;
  text-align: center;
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--ml-border);
  border-radius: 12px;
  color: #fff;
  transition: border-color .2s, background .2s;
}
.smi-ml-input::placeholder { color: rgba(255,255,255,0.45); letter-spacing: normal; }
.smi-ml-input:focus {
  outline: none;
  border-color: var(--ml-blue);
  background: rgba(255,255,255,0.16);
  box-shadow: 0 0 0 3px rgba(35,149,255,0.25);
}

.smi-ml-btn {
  display: block;
  width: 100%;
  margin-top: 1.1rem;
  padding: .9rem 1rem;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  background: var(--ml-blue-i);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background .2s, transform .06s;
}
.smi-ml-btn:hover { background: #0c447c; }
.smi-ml-btn:active { transform: translateY(1px); }
.smi-ml-btn[disabled] { opacity: .55; cursor: not-allowed; }
.smi-ml-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --- جعبه‌های کد یک‌بارمصرف --- */
.smi-ml-otp {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin: 1.25rem 0 .25rem;
}

.smi-ml-digit {
  width: 3.1rem;
  height: 3.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: rgba(255,255,255,0.10);
  border: 1.5px solid var(--ml-border);
  border-radius: 14px;
  transition: border-color .15s, background .15s, transform .08s;
  caret-color: var(--ml-blue);
}
.smi-ml-digit:focus {
  outline: none;
  border-color: var(--ml-blue);
  background: rgba(255,255,255,0.18);
  box-shadow: 0 0 0 3px rgba(35,149,255,0.28);
  transform: translateY(-2px);
}
.smi-ml-digit.is-filled { border-color: var(--ml-blue); background: rgba(35,149,255,0.18); }
.smi-ml-otp.is-error .smi-ml-digit { border-color: #ff8a8a; animation: smi-shake .35s; }

@keyframes smi-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.smi-ml-sent { margin: 0 0 .25rem; font-size: .9rem; color: rgba(255,255,255,0.75); text-align: center; }
.smi-ml-sent span { font-weight: 600; color: #fff; }

.smi-ml-msg { margin: .85rem 0 0; font-size: .9rem; text-align: center; line-height: 1.8; min-height: 1.2em; }
.smi-ml-msg.is-error { color: #ffc9c9; }
.smi-ml-msg.is-ok { color: #b8f0c6; }

.smi-ml-note { margin: 1rem 0 0; font-size: .82rem; text-align: center; color: rgba(255,255,255,0.6); }
.smi-ml-note a, .smi-ml-link { color: #CDE7FF; text-decoration: underline; }

.smi-ml-resend { margin: 1rem 0 0; text-align: center; font-size: .88rem; color: rgba(255,255,255,0.7); }
.smi-ml-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: #CDE7FF; text-decoration: underline;
}
.smi-ml-back {
  background: none; border: none; padding: 0; margin-bottom: .75rem;
  font: inherit; font-size: .88rem; color: rgba(255,255,255,0.75); cursor: pointer;
}
.smi-ml-back:hover { color: #fff; }

.smi-ml-done { text-align: center; }
.smi-ml-done .smi-ml-btn { display: inline-block; width: auto; padding: .7rem 1.6rem; margin: .75rem .35rem; }

@media (max-width: 480px) {
  .smi-ml-card { margin: 1.5rem 1rem; padding: 1.5rem 1.1rem; }
  .smi-ml-digit { width: 2.7rem; height: 3.2rem; font-size: 1.4rem; }
  .smi-ml-otp { gap: .45rem; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .smi-ml-card { background: rgba(11,37,64,0.94); }
}
@media (prefers-reduced-motion: reduce) {
  .smi-ml-digit, .smi-ml-btn { transition: none; }
  .smi-ml-otp.is-error .smi-ml-digit { animation: none; }
}

/* --- ورودی‌های متنی مرحله‌ی تکمیل نام --- */
.smi-ml-text {
  text-align: right;
  letter-spacing: normal;
  font-size: 1rem;
  margin-bottom: .35rem;
}
#smi-ml-step-profile .smi-ml-label { margin-top: .75rem; }
#smi-ml-step-profile .smi-ml-head { margin-bottom: 1.1rem; }
#smi-ml-step-profile .smi-ml-title { font-size: 1.3rem; }