/* ⚠️ GESYNCHRONISEERDE KOPIE — bron: ts-x/shared/css/otp-login.css */
/* Niet rechtstreeks bewerken. Zie .kiro/steering/shared-frontend-assets.md (root-repo). */
/* shared/css/otp-login.css — canonieke stijl voor het OTP-login-blok.
   Zie .kiro/specs/otp-auth-standaard/ (Requirement 5.6/5.7).

   Structuur, maten en gedrag zijn gedeeld; alleen de KLEUREN variëren per dienst via
   CSS-custom-properties. Een consument overschrijft die variabelen op een omhullende
   selector (geen fork, geen JS). Default = tS-X-huisstijl (blauw). */

.tsx-otp-login {
  --otp-accent: #0066cc;                 /* primary / knop / focus */
  --otp-accent-text: #ffffff;            /* tekst op de knop */
  --otp-focus-ring: rgba(0, 102, 204, .15);
  --otp-text: #1f2933;
  --otp-bg: #ffffff;                     /* card-achtergrond */
  --otp-muted: #6b7280;
  --otp-border: #d6dbe1;
  --otp-error: #b42318;

  box-sizing: border-box;
  max-width: 24rem;
  margin: 3rem auto;
  padding: 2rem;
  background: var(--otp-bg);
  color: var(--otp-text);
  border: 1px solid var(--otp-border);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  animation: tsx-otp-in .25s ease-out;
}

@keyframes tsx-otp-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.tsx-otp-login *,
.tsx-otp-login *::before,
.tsx-otp-login *::after { box-sizing: border-box; }

.tsx-otp-login .otp-logo {
  display: block;
  max-height: 2.5rem;
  margin: 0 auto 1rem;
}

.tsx-otp-login .otp-title {
  margin: 0 0 1.25rem;
  font-size: 1.35rem;
  font-weight: 600;
  text-align: center;
  color: var(--otp-text);
}

.tsx-otp-login label {
  display: block;
  margin-bottom: .4rem;
  font-size: .9rem;
  color: var(--otp-muted);
}

.tsx-otp-login input[type="email"],
.tsx-otp-login input[type="text"]:not(.otp-box) {
  width: 100%;
  padding: .65rem .75rem;
  font-size: 1rem;
  color: var(--otp-text);
  background: #fff;
  border: 1px solid var(--otp-border);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.tsx-otp-login input:focus-visible {
  outline: none;
  border-color: var(--otp-accent);
  box-shadow: 0 0 0 4px var(--otp-focus-ring);
}

.tsx-otp-login .otp-btn {
  width: 100%;
  padding: .7rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--otp-accent-text);
  background: var(--otp-accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity .15s ease, filter .15s ease;
}

.tsx-otp-login .otp-btn:hover:not(:disabled) { filter: brightness(1.05); }
.tsx-otp-login .otp-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Zes cijfervakjes (tS-X-Admin-patroon). */
.tsx-otp-login .otp-boxes {
  display: flex;
  gap: .5rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.tsx-otp-login .otp-box {
  width: 100%;
  aspect-ratio: 3 / 4;
  min-width: 0;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  color: var(--otp-text);
  background: #fff;
  border: 1px solid var(--otp-border);
  border-radius: 8px;
}

.tsx-otp-login .otp-box:focus-visible {
  outline: none;
  border-color: var(--otp-accent);
  box-shadow: 0 0 0 4px var(--otp-focus-ring);
}

.tsx-otp-login .otp-turnstile { margin-bottom: 1rem; }

.tsx-otp-login .otp-status {
  margin: 1rem 0 0;
  font-size: .9rem;
  color: var(--otp-muted);
  text-align: center;
}

.tsx-otp-login .otp-status[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tsx-otp-login { animation: none; }
}