/* Auth pages (login, register, reset-password) — Handbook §4
   Poppins via fonts.css. Default weight 400. Do not inherit Light (300). */

.login-container,
.register-container {
  font-family: var(--font-family-base);
  font-weight: 400;
}

.login-container :where(p, h1, h2, h3, label, a, span, button, input, textarea, select, li),
.register-container :where(p, h1, h2, h3, label, a, span, button, input, textarea, select, li) {
  font-family: inherit;
}

/* Required suffix after field headers — keep sentence case next to uppercase micro-labels */
.field-required-label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  white-space: nowrap;
}

/* SMS OTP — Handbook §8 (.btn-cta, .btn-text) and §10 (.form-input, .micro-label).
   Shared by login and register. Layout only; chrome stays on the global classes. */
.login-card--verify .login-hero,
.register-card--verify .register-hero {
  margin-bottom: var(--space-4);
}

.verification-banner--step {
  display: block;
  padding: 0;
  margin: 0 0 var(--space-5);
  background: transparent;
  border: none;
  animation: authCardFadeIn 0.25s ease;
}

.verification-step {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}

.verification-step__icon {
  width: calc(var(--space-6) * 2);
  height: calc(var(--space-6) * 2);
  margin: 0 auto;
  border-radius: var(--radius-pill);
  background: var(--color-primary-muted);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--native-icon-size);
}

.verification-step__body {
  margin: 0;
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.verification-step__phone {
  color: var(--color-text);
  font-weight: 600;
  white-space: nowrap;
}

.verification-step__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.verification-step__label {
  display: block;
}

.verification-step__code.form-input {
  font-size: var(--font-size-lg);
  font-weight: 600;
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* letter-spacing sits after the last glyph; shift padding so the code stays centered */
  padding-inline-start: calc(var(--space-4) + 0.35em);
}

.verification-step__error {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-danger);
}

.verification-step__error[hidden] {
  display: none;
}

.verification-step__resend {
  align-self: center;
}

.verification-step__change-phone {
  align-self: center;
}

.verification-step__change-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.verification-step__change-panel[hidden] {
  display: none;
}

.verification-step__change-fields {
  margin: 0;
}

.verification-step__resume {
  font-weight: 500;
  color: var(--color-text);
}

@keyframes authCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}