/*
 * Sign-in with a code (plugin aperina-sms-login): the code field, «ارسال دوباره‌ی کد» / «تغییر شماره», the name step, and
 * «شماره موبایل» in the account details. It sits inside the theme's sign-in card (auth.css) and account sections
 * (account.css) and uses the Aperina tokens, with fallbacks so the forms stay usable under another theme.
 */

/* =========================================================
   Fields
   ========================================================= */
.sms-login .form-row,
.sms-mobile__form .form-row { display: grid; gap: var(--space-2, 8px); width: auto; margin: 0; padding: 0; float: none; }

/* The code: one wide field with large, spaced digits (digits never join, so spacing them is safe) */
.woocommerce :is(.auth__form, .sms-mobile__form) .input-text.sms-login__code,
.sms-login__code {
  height: 64px; padding-inline: var(--space-4, 16px);
  font-size: 1.75rem; font-weight: 500; line-height: 1; text-align: center;
  letter-spacing: 0.32em; text-indent: 0.32em;
}

.sms-login__hint { display: block; font-size: var(--text-caption, 0.8125rem); line-height: var(--lh-caption, 1.7); color: var(--text-muted, #6B6159); }

.sms-login__error {
  display: flex; align-items: flex-start; gap: var(--space-2, 8px);
  font-size: var(--text-caption, 0.8125rem); line-height: var(--lh-caption, 1.7); color: var(--error, #A1302A);
}
.sms-login__error svg { width: 16px; height: 16px; flex: none; margin-block-start: 3px; }
.sms-login__error a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 0.35em; }
.sms-mobile__form .input-text[aria-invalid="true"] { border-color: var(--error, #A1302A); }

.sms-login__mobile::placeholder { color: var(--text-muted, #6B6159); opacity: 0.7; }

/* =========================================================
   Resend / change number: two 44px text buttons under the code form
   ========================================================= */
.sms-login__links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-4, 16px);
  margin-block-start: calc(var(--space-2, 8px) * -1);
}
.sms-login__links form { margin: 0; }
.sms-login__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--link, #72383D); font: inherit; font-size: var(--text-label, 0.875rem); font-weight: 500; line-height: 1.5;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.45em; cursor: pointer;
}
.sms-login__link:hover:not(:disabled) { text-decoration-thickness: 2px; }
.sms-login__link:focus-visible { outline: 2px solid var(--focus-ring, #72383D); outline-offset: 2px; border-radius: var(--radius-sm, 4px); }
.sms-login__link:disabled { color: var(--text-muted, #6B6159); text-decoration: none; cursor: default; }
.sms-login__link bdi { unicode-bidi: isolate; }

/* =========================================================
   New account: the verified number, then name and surname (side by side from 480px)
   ========================================================= */
.sms-login__verified {
  display: flex; align-items: center; gap: var(--space-2, 8px); margin: 0; padding: var(--space-2, 8px) var(--space-3, 12px);
  border-radius: var(--radius-panel, 12px); background: var(--success-tint, #E4EADF); color: var(--success, #4F6B45);
  font-size: var(--text-small, 0.9375rem); font-weight: 500; line-height: var(--lh-small, 1.85);
}
.sms-login__verified svg { width: 18px; height: 18px; flex: none; }
.sms-login__names { display: grid; gap: var(--space-4, 16px); }
@media (min-width: 480px) { .sms-login__names { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sms-login__submit[aria-busy="true"] { opacity: 0.75; cursor: progress; }

/* =========================================================
   Account details: «شماره موبایل»
   ========================================================= */
.sms-mobile__panel { padding: var(--space-4, 16px); border: 1px solid var(--border, #D1C7BD); background: var(--bg-raised, #F7F3EE); }
.sms-mobile__panel--empty { border-style: dashed; border-color: var(--border-strong, #8A7E73); background: none; }
.sms-mobile p { margin: 0; }

.sms-mobile__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-4, 16px); }
.sms-mobile__icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--radius-panel, 12px); background: var(--bg-sunken, #E6DED5); color: var(--text-muted, #6B6159);
}
.sms-mobile__icon svg { width: 20px; height: 20px; }
.sms-mobile__body { display: grid; gap: 2px; min-width: 0; }
.sms-mobile__number { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1, 4px) var(--space-3, 12px); font-size: var(--text-title, 1.25rem); font-weight: 600; line-height: 1.6; }
.sms-mobile__panel--empty .sms-mobile__number { font-size: var(--text-body, 1.0625rem); }
.sms-mobile__badge {
  display: inline-flex; align-items: center; gap: var(--space-1, 4px); padding-inline: var(--space-2, 8px);
  border-radius: var(--radius-pill, 999px); background: var(--success-tint, #E4EADF); color: var(--success, #4F6B45);
  font-size: var(--text-micro, 0.75rem); font-weight: 500; line-height: 1.9;
}
.sms-mobile__badge svg { width: 12px; height: 12px; }
.sms-mobile__meta { font-size: var(--text-caption, 0.8125rem); line-height: var(--lh-caption, 1.7); color: var(--text-muted, #6B6159); }
.sms-mobile .sms-mobile__action { grid-column: 1 / -1; min-height: 44px; }

.sms-mobile__form { display: grid; gap: var(--space-4, 16px); max-width: 440px; margin: 0; }
.sms-mobile__sent { font-size: var(--text-small, 0.9375rem); line-height: var(--lh-small, 1.85); }
.sms-mobile__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px) var(--space-3, 12px); }
.sms-mobile__buttons .btn { flex: 1 1 100%; min-height: 48px; }
.sms-mobile .sms-login__links { max-width: 440px; margin-block-start: var(--space-2, 8px); }

@media (min-width: 640px) {
  .sms-mobile__panel { padding: var(--space-5, 20px) var(--space-6, 24px); }
  .sms-mobile__row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-5, 20px); }
  .sms-mobile .sms-mobile__action { grid-column: auto; min-width: 128px; }
  .sms-mobile__buttons .btn { flex: 0 0 auto; min-width: 136px; }
  .sms-mobile__form .input-text.sms-login__code { max-width: 280px; }
}

@media (prefers-reduced-motion: no-preference) {
  .sms-mobile__form { animation: sms-mobile-open 320ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both; }
}
@keyframes sms-mobile-open {
  from { opacity: 0; transform: translateY(-4px); }
}