/* Email / SMS OTP entry — login & onboarding */
html.tpp-theme body.tpp-auth .auth-card .otp-row,
.auth-card .otp-row {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: nowrap;
}

html.tpp-theme body.tpp-auth .auth-card .otp-row input,
html.tpp-theme body.tpp-auth .auth-card .otp-input,
.auth-card .otp-row input,
.auth-card .otp-input {
  width: 2.75rem;
  min-width: 2.75rem;
  max-width: 2.75rem;
  height: 2.85rem;
  padding: 0;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  border: 1px solid var(--ft-border-strong, #cbd5e1);
  border-radius: 10px;
  background: var(--ft-surface, #fff);
  color: var(--ft-ink, #0b1220);
  transition: border-color 0.2s, box-shadow 0.2s;
}

html.tpp-theme body.tpp-auth .auth-card .otp-row input:focus,
html.tpp-theme body.tpp-auth .auth-card .otp-input:focus,
.auth-card .otp-row input:focus,
.auth-card .otp-input:focus {
  border-color: var(--ft-accent, #0d9488);
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
}

html.tpp-theme body.tpp-auth .auth-card .otp-row input.error-input,
html.tpp-theme body.tpp-auth .auth-card .otp-row input.error,
.auth-card .otp-row input.error-input,
.auth-card .otp-row input.error {
  border-color: #dc2626;
  background: #fef2f2;
}

html.tpp-theme body.tpp-auth .auth-card .otp-row input.success-input,
.auth-card .otp-row input.success-input {
  border-color: #059669;
  background: #ecfdf5;
}

.otp-message-container {
  margin-top: var(--space-3);
}

.otp-flash {
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  text-align: center;
  min-height: 1.25rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm, 8px);
  display: none;
}

.otp-flash.show {
  display: block;
}

.otp-flash--error {
  color: #b91c1c;
  background: #fef2f2;
}

.otp-flash--success {
  color: #047857;
  background: #ecfdf5;
}

.otp-flash--info {
  color: #0f766e;
  background: #f0fdfa;
  border: 1px solid rgba(13, 148, 136, 0.25);
}

.otp-flash--warning {
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.auth-card .otp-verify-btn {
  width: 100%;
  margin-top: var(--space-4);
}

.auth-card .otp-verify-btn.loading {
  position: relative;
  color: transparent;
}

.auth-card .otp-verify-btn.loading::after {
  content: '';
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  top: 50%;
  left: 50%;
  margin: -0.625rem 0 0 -0.625rem;
  border: 2px solid #fff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: otp-spin 0.8s linear infinite;
}

.otp-resend {
  text-align: center;
  margin-top: var(--space-4);
}

.otp-resend button {
  background: none;
  border: none;
  color: var(--ft-accent, #0d9488);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: underline;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm, 8px);
}

.otp-resend button:hover:not(:disabled) {
  background: rgba(13, 148, 136, 0.08);
}

.otp-resend button:disabled {
  color: #9ca3af;
  cursor: not-allowed;
  text-decoration: none;
}

.otp-resend button.resend-success {
  color: #047857;
  text-decoration: none;
}

.otp-status {
  text-align: center;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ft-muted, #64748b);
  min-height: 1.25rem;
}

@keyframes otp-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes otp-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-4px);
  }
  40%,
  80% {
    transform: translateX(4px);
  }
}

.otp-flash--error.show {
  animation: otp-shake 0.45s;
}