/* ============================================================================
   GUIDO - registratie (Login.aspx)
   Vereist theme.css. Deze pagina staat los van Site.Master, dus alles wat ze
   nodig heeft staat hier; de kleuren en vormen komen uit de tokens zodat de
   jaarlijkse restyle ook de registratie meeneemt.
   ============================================================================ */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--surface-page);
    font-family: var(--font-body);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

form { margin: 0; }

/* ------------------------------------------------------------------ wizard */
.wz {
    max-width: 460px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 26px 20px 34px;
    display: flex;
    flex-direction: column;
}

.wz-logo {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--color-brand);
    text-align: center;
    margin: 0 0 22px;
}

.wz-body { flex: 1 1 auto; }

/* ------------------------------------------------------------- voortgang */
.wz-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}

.wz-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-perforation);
}

.wz-dot.done { background: var(--color-structure); }

.wz-dot.active {
    background: var(--color-brand);
    width: 22px;
    border-radius: var(--radius-pill);
}

.wz-count {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-structure);
    opacity: .7;
    margin: 0 0 18px;
}

/* ----------------------------------------------------------------- koppen */
.wz-h1 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--color-structure);
    margin: 0 0 8px;
    text-align: center;
}

.wz-intro {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 22px;
    text-align: center;
}

/* ----------------------------------------------------------------- velden */
.wz-field { margin-bottom: 12px; }

.wz-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.wz-input {
    width: 100%;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card-sm);
    padding: 14px 15px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-primary);
    -webkit-appearance: none;
}

.wz-input:focus {
    outline: 0;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-veil);
}

.wz-hint { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; }

.wz-err, .wz-ok {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    font-size: 12.5px;
    line-height: 1.45;
    margin: 8px 0 0;
}

.wz-err { color: var(--color-error); }
.wz-ok { color: var(--color-ok); }
.wz-err i, .wz-ok i { margin-top: 2px; }

/* --------------------------------------------------------- vinkje in kader
   De voorwaarden en de meldingen zijn hetzelfde soort keuze, dus dezelfde
   vorm. Het hele kader is aanklikbaar, want een vinkje van 20px is een klein
   doel op een telefoon. */
.wz-check {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card-sm);
    padding: 13px 14px;
    margin-top: 6px;
    cursor: pointer;
}

/* asp:CheckBox rendert een <span> om de input, dus die moet mee uitgelijnd */
.wz-check > span:first-child { flex: 0 0 auto; line-height: 1; }

.wz-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--color-brand);
}

.wz-check span,
.wz-check-text {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-primary);
    cursor: pointer;
}

/* De links staan buiten het label, zodat lezen en toestemmen twee
   verschillende handelingen blijven. */
.wz-links {
    margin: 10px 0 0;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.6;
}

.wz-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--color-brand);
    font-weight: 600;
    text-decoration: underline;
}

.wz-links a i { font-size: 11px; text-decoration: none; }

/* ---------------------------------------------------------------- knoppen */
.wz-btn {
    display: block;
    width: 100%;
    background: var(--color-brand);
    color: var(--text-on-brand);
    border: 0;
    border-radius: var(--radius-pill);
    padding: 16px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    margin-top: 18px;
    -webkit-appearance: none;
}

.wz-btn:active { background: var(--color-brand-strong); }

/* asp:Button met Enabled="false" krijgt het attribuut disabled */
.wz-btn[disabled] {
    background: var(--surface-muted);
    color: var(--text-muted);
    cursor: not-allowed;
}

.wz-skip {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-structure);
    text-decoration: underline;
    text-align: center;
    padding: 14px 0 0;
    cursor: pointer;
}

.wz-skip--plain { text-decoration: none; }
.wz-skip:hover { color: var(--color-structure); }

/* ------------------------------------------------------- stap 2: de keuze */
.wz-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
}

.wz-col {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card-sm);
    padding: 12px;
}

.wz-col--good {
    border-color: var(--color-structure);
    background: var(--color-structure-tint);
}

.wz-col b {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-structure);
    margin-bottom: 7px;
}

.wz-col ul {
    margin: 0;
    padding-left: 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-primary);
}

.wz-col li { margin-bottom: 3px; }

.wz-sell {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    background: var(--surface-card);
    border: 1px dashed var(--border-perforation);
    border-radius: var(--radius-card-sm);
    padding: 12px 13px;
    margin-top: 12px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-muted);
}

.wz-sell i { color: var(--color-brand); margin-top: 2px; }
.wz-sell a { color: var(--color-brand); font-weight: 600; }

/* ------------------------------------------------- stap 4: de zes cijfers
   Zes vakjes in plaats van één veld: je ziet meteen hoeveel cijfers er
   verwacht worden, en plakken uit de e-mail vult ze alle zes. */
.wz-sent {
    text-align: center;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 20px;
}

.wz-sent b { color: var(--text-primary); }

.wz-code {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 4px 0 0;
}

.wz-digit {
    width: 46px;
    height: 58px;
    text-align: center;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    font-family: var(--font-code);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    -webkit-appearance: none;
}

.wz-digit:focus {
    outline: 0;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-veil);
}

.wz-digit.filled { border-color: var(--color-structure); }

.wz-expiry {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin: 14px 0 0;
}

@media (max-width: 380px) {
    .wz { padding: 20px 16px 28px; }
    .wz-digit { width: 42px; height: 54px; font-size: 21px; }
    .wz-code { gap: 6px; }
}