/**
 * Inloggen, registreren en wachtwoord herstellen.
 *
 * @author Ferhat Remory
 * @link   https://steirk.be
 */

.auth-shell{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}

/* Links: het merk */
.auth-side{position:relative;overflow:hidden;background:radial-gradient(800px 600px at 100% 0%,rgba(255,106,61,.2),transparent 60%),radial-gradient(900px 700px at 0% 100%,rgba(122,31,162,.45),transparent 60%),var(--plum);color:var(--on-dark);padding:40px 48px;display:flex;flex-direction:column;justify-content:space-between;border-radius:0 44px 44px 0}
.auth-side::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:var(--orb);right:-260px;top:-220px;opacity:.5}
.auth-side > *{position:relative}
.auth-side .logo{color:var(--on-dark)}
.auth-quote p{font-size:clamp(56px,6.4vw,104px);font-weight:600;letter-spacing:-.065em;line-height:.9}
.auth-quote em{display:block;font-family:var(--serif);font-size:clamp(24px,2.3vw,32px);color:var(--on-dark-2);margin-top:20px}
.auth-dots{display:grid;grid-template-columns:repeat(16,1fr);gap:10px;max-width:420px}
.auth-dots .dot{--d:100%;aspect-ratio:1;height:auto;opacity:.9}
.auth-dots .dot:nth-child(n+17){opacity:.45}

/* Rechts: het formulier */
.auth-main{display:flex;flex-direction:column;padding:32px 24px;background-image:radial-gradient(circle,rgba(13,13,18,.07) 1px,transparent 1.5px);background-size:24px 24px}
.auth-top{display:none}
.auth-card{width:100%;max-width:440px;margin:auto;padding:40px 0}
.auth-card h1{font-size:clamp(42px,4.4vw,58px);letter-spacing:-.065em;font-weight:600;line-height:.95}
.auth-lead{font-family:var(--serif);font-size:22px;line-height:1.3;color:var(--ink-2);margin:12px 0 32px}
.auth-lead b{font-family:var(--sans);font-size:.8em;font-weight:600;color:var(--ink)}
.auth-card .btn-block{height:52px;font-size:16px;margin-top:6px}
.auth-switch{margin-top:26px;font-size:15px;color:var(--ink-2)}
.auth-switch a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--ink)}
.auth-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 20px;font-size:13px;color:var(--muted)}
.auth-foot > a:hover{color:var(--ink)}

@media(max-width:900px){
  .auth-shell{grid-template-columns:minmax(0,1fr)}
  .auth-side{display:none}
  .auth-top{display:block;text-align:center;padding-top:8px}
  .auth-card{padding:32px 0}
}
@media(max-width:480px){
  .auth-main{padding:24px 16px}
  .auth-lead{font-size:20px;margin-bottom:26px}
}
.code-input{font-size:22px;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}