/* ==============================================================
   assets/css/single-aanmelden.css — /single-aanmelden (design v2)
   Bouwt verder op account.css (auth-card, auth-title, field, btn)
   ============================================================== */
.sa-wrap{position:relative;z-index:1}
.sa-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:clamp(20px,3vw,40px);align-items:start}
.sa-card{width:100%}
.sa-done{width:min(620px,100%);margin-inline:auto}

.sa-form{display:grid;gap:22px;margin-top:24px}
.sa-set{border:0;margin:0;padding:0;display:grid;gap:16px;min-width:0}
.sa-set legend{display:flex;align-items:center;gap:10px;font-weight:900;font-style:italic;text-transform:uppercase;font-size:1.05rem;margin-bottom:12px;padding:0}
.sa-set legend small{font-style:normal;text-transform:none;font-weight:700;color:var(--muted);font-size:.8rem}
.sa-step{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--lime);color:var(--on-lime,#000);font-style:normal;font-size:.95rem}
.sa-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sa-req{color:var(--magenta)}
.field label small{font-weight:700;color:var(--muted);font-size:.78rem;margin-left:4px}

.sa-input{width:100%;min-height:54px;padding:12px 16px;border-radius:16px;font:inherit;font-weight:700;font-size:1rem;
  background:var(--surface-2);color:var(--text);border:2px solid var(--line);transition:border-color .2s,box-shadow .2s}
textarea.sa-input{min-height:96px;resize:vertical;line-height:1.5}
select.sa-input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.sa-input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 4px rgba(215,250,2,.15)}
:root[data-theme="light"] .sa-input:focus{border-color:var(--magenta);box-shadow:0 0 0 4px rgba(255,31,200,.12)}
.sa-input[aria-invalid="true"],.sa-link input[aria-invalid="true"]{border-color:var(--magenta)}
.sa-link input{padding-right:16px}

.sa-err{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:.85rem;font-weight:800;color:var(--accent-text-2,var(--magenta))}

.sa-drop{position:relative;display:flex;align-items:center;gap:16px;padding:16px;border:2px dashed var(--line);border-radius:18px;background:var(--surface-2);cursor:pointer;transition:border-color .2s}
.sa-drop:hover,.sa-drop:focus-within{border-color:var(--lime)}
.sa-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.sa-drop-txt{display:grid;gap:2px}
.sa-drop-txt b{display:inline-flex;align-items:center;gap:8px}
.sa-drop-txt small{color:var(--muted);font-weight:600}
.sa-cover{width:96px;height:96px;border-radius:12px;object-fit:cover;flex-shrink:0;border:2px solid var(--line)}
.sa-cover[hidden]{display:none}

.sa-note{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:.85rem;font-weight:600;color:var(--text-2)}
.sa-check{display:flex;gap:12px;align-items:flex-start;font-weight:700;font-size:.92rem;cursor:pointer;line-height:1.45}
.sa-check input{width:22px;height:22px;margin-top:1px;accent-color:var(--lime);flex-shrink:0}
:root[data-theme="light"] .sa-check input{accent-color:var(--magenta)}

/* Honeypot (onzichtbaar voor mensen) */
.sa-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Zijkolom */
.sa-aside{display:grid;gap:18px;position:sticky;top:96px}
.sa-how{padding:22px}
.sa-how h2{font-size:1.1rem;font-style:italic;text-transform:uppercase;margin:0 0 14px}
.sa-how ol{list-style:none;counter-reset:sa;margin:0;padding:0;display:grid;gap:14px}
.sa-how ol li{counter-increment:sa;position:relative;padding-left:44px;display:grid;gap:2px}
.sa-how ol li::before{content:counter(sa);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--magenta);color:#fff;font-weight:900}
.sa-how ol li span{color:var(--text-2);font-size:.9rem;font-weight:600}
.sa-how ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sa-how ul li{display:flex;gap:8px;align-items:flex-start;font-weight:700;font-size:.92rem}
.sa-how ul .ico{color:var(--accent-text);margin-top:3px;flex-shrink:0}

@media (max-width:980px){.sa-grid{grid-template-columns:minmax(0,1fr)}.sa-aside{position:static}}
@media (max-width:620px){.sa-row{grid-template-columns:minmax(0,1fr)}}