/* ==========================================================================
   Facturalia – vernieuwde loginpagina (login-v2)
   Wordt enkel geladen door index.php als SITE == 'facturalia_be'.
   Kleuren, lettertype en knopstijl volgen welkom.facturalia.be (Avada-thema).
   ========================================================================== */

/* ---------- Lettertypes (zelf gehost, SIL Open Font License) ---------- */
@font-face {
  font-family: "Kumbh Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/KumbhSans-400-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/IBMPlexMono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/IBMPlexMono-500.woff2") format("woff2");
}

/* ---------- Basis ---------- */
body.login-v2 {
  /* Huisstijl welkom.facturalia.be */
  --oranje: #FF8B1E;          /* awb-color4 */
  --blauw: #008EE6;           /* awb-color5 */
  --inkt: #0F0F0F;            /* awb-color8 */
  --tekst: #262626;           /* awb-color7 */
  --inkt-2: #4C4C4C;          /* awb-color6 */
  --inkt-3: #8A8A8A;
  --lijn: #E0E0E0;            /* awb-color3 */
  --veld-rand: #CFCFCF;
  --papier: #FFFFFF;
  --fout: #B42318;
  --fout-bg: #FDEEEC;
  --fout-rand: #F1C5BF;
  --betaald: #2E7D4F;
  --betaald-dot: #65BC7B;
  --radius: 5px;
  --ring: rgba(255, 139, 30, .3);
  --font: "Kumbh Sans", Arial, Helvetica, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Blauw merkvlak: verloop uit de hero van de website */
  --merk-van: #1E004D;
  --merk-naar: #005F9A;
  --merk-tekst: #FFFFFF;
  --merk-tekst-2: rgba(255, 255, 255, .86);
  --schaduw: rgba(0, 0, 25, .55);
  --vel-achter: #E3ECF6;

  margin: 0;
  background: var(--papier);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}
.login-v2 *,
.login-v2 *::before,
.login-v2 *::after { box-sizing: border-box; }
.login-v2 [hidden] { display: none !important; }

/* ---------- Indeling ---------- */
.login {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-areas: "brand auth";
  min-height: 100vh;
}

/* ---------- Inlogkolom ---------- */
.login-auth {
  grid-area: auth;
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 28px clamp(24px, 4.5vw, 64px) 40px;
}
.login-auth__head,
.login-auth__body {
  width: 100%;
  max-width: 384px;
  margin: 0 auto;
}
.login-auth__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.login-auth__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 48px 0;
}

.login-logo { display: block; line-height: 0; border-radius: var(--radius); }
.login-logo img { display: block; width: 152px; height: auto; }
.login-logo:focus-visible { outline: 3px solid var(--blauw); outline-offset: 4px; }

/* Alleen op smalle schermen zichtbaar (zie media query onderaan) */
.login-mobile-discover { display: none; }

.login-intro { display: flex; flex-direction: column; gap: 8px; }
.login-title {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--inkt);
  text-wrap: balance;
}
.login-lede { margin: 0; color: var(--inkt-2); text-wrap: pretty; }

/* ---------- Formulier ---------- */
.login-form { display: flex; flex-direction: column; gap: 18px; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field label { font-size: 14px; font-weight: 600; color: var(--inkt); }
.login-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.login-input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px; /* minstens 16px: anders zoomt iOS in bij het tikken */
  color: var(--inkt);
  background: var(--papier);
  border: 1.5px solid var(--veld-rand);
  border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.login-input:hover { border-color: #A8A8A8; }
.login-input:focus { outline: none; border-color: var(--oranje); box-shadow: 0 0 0 4px var(--ring); }
.login-input[aria-invalid="true"] { border-color: var(--fout); }
.login-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, .16); }

.login-pw { position: relative; }
.login-pw .login-input { padding-right: 54px; }
/* Kumbh Sans heeft piepkleine paswoordbolletjes; Verdana toont ze duidelijker */
.login-pw .login-input[type="password"] { font-family: Verdana, Arial, sans-serif; letter-spacing: .14em; }
.login-pw__toggle {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--inkt-2);
  cursor: pointer;
}
.login-pw__toggle:hover { background: #F2F2F2; color: var(--inkt); }
.login-pw__toggle:focus-visible { outline: 2px solid var(--blauw); outline-offset: -2px; }
.login-pw__hide { display: none; }
.login-pw__toggle.is-shown .login-pw__show { display: none; }
.login-pw__toggle.is-shown .login-pw__hide { display: block; }

.login-msg { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; line-height: 1.35; }
.login-msg svg { flex: none; }
.login-msg--error { color: var(--fout); }
.login-msg--hint { color: #8A4A00; font-weight: 500; }

.login-link {
  color: #F07A0C;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-radius: 3px;
  transition: color .15s;
}
.login-link:hover { color: var(--blauw); }
.login-link:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; }
.login-link--small { font-size: 14px; }

/* Knop: zoals op de website (oranje, blauw bij hover) */
.login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  margin-top: 6px;
  padding: 11px 23px;
  border: 0;
  border-radius: var(--radius);
  background: var(--oranje);
  color: #FFFFFF;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .015em;
  cursor: pointer;
  transition: background-color .2s, transform .06s;
}
.login-btn:hover { background: var(--blauw); }
a.login-btn { color: #FFFFFF; text-decoration: none; }
.login-btn:active { transform: translateY(1px); }
.login-btn:focus-visible { outline: 3px solid var(--blauw); outline-offset: 3px; }
.login-btn[aria-busy="true"] { cursor: progress; }

.login-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #FFFFFF;
  animation: login-spin .8s linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }

.login-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--fout-bg);
  border: 1px solid var(--fout-rand);
  border-radius: var(--radius);
  color: #7A1D14;
  font-size: 14.5px;
  line-height: 1.45;
}
.login-alert svg { flex: none; margin-top: 1px; color: var(--fout); }
.login-alert strong { display: block; color: #5E150E; font-weight: 600; }
.login-alert a { color: inherit; font-weight: 600; text-underline-offset: 2px; }

.login-register {
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--lijn);
  color: var(--inkt-2);
  font-size: 15px;
}
.login-register__sub { display: block; margin-top: 2px; font-size: 13.5px; color: var(--inkt-3); }

/* ---------- Blauw merkvlak ---------- */
.login-brand {
  grid-area: brand;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
  padding: clamp(36px, 5vw, 72px);
  background:
    radial-gradient(circle, rgba(255, 255, 255, .12) 1.6px, transparent 2.4px) 0 0 / 56px 56px,
    linear-gradient(190deg, var(--merk-van) 0%, var(--merk-naar) 100%);
  color: var(--merk-tekst);
  /* omgevouwen hoek, zoals het documentje in het logo */
  clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 64px, 100% 100%, 0 100%);
}
.login-brand::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 64px;
  height: 64px;
  background: linear-gradient(to bottom left, transparent 50%, rgba(255, 255, 255, .22) 50%);
}
.login-brand__copy,
.login-sheets { position: relative; z-index: 1; }

.login-brand__copy { max-width: 34rem; display: flex; flex-direction: column; align-items: flex-start; }
.login-brand__title {
  margin: 0;
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.login-brand__text {
  margin: 14px 0 0;
  max-width: 30rem;
  font-size: 17px;
  line-height: 1.6;
  color: var(--merk-tekst-2);
  text-wrap: pretty;
}

/* "Ontdek alles over Facturalia": zelfde knop als "Probeer nu" in de hero van de website */
.login-discover { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.login-discover__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 26px;
  border-radius: var(--radius);
  background: var(--oranje);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .015em;
  text-decoration: none;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .6);
  transition: background-color .2s;
}
.login-discover__btn:hover { background: var(--blauw); color: #FFFFFF; }
.login-discover__btn svg { transition: transform .2s; }
.login-discover__btn:hover svg { transform: translateX(3px); }
.login-discover__btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.login-discover__note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--merk-tekst-2); }
.login-discover__note strong { display: block; color: var(--merk-tekst); font-weight: 700; }

.login-proof {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  font-size: 15.5px;
  font-weight: 500;
}
.login-proof li { display: flex; align-items: center; gap: 8px; }
.login-proof svg { flex: none; color: var(--oranje); }
.login-nowrap { white-space: nowrap; }

/* ---------- Voorbeeldfactuur ---------- */
.login-sheets { width: min(100%, 400px); margin-left: clamp(0px, 2.5vw, 36px); color: var(--tekst); }
.login-sheet-behind {
  position: absolute;
  inset: 0;
  background: var(--vel-achter);
  border-radius: 3px;
  transform: rotate(3deg) translate(12px, 4px);
  box-shadow: 0 18px 36px -24px var(--schaduw);
}
.login-sheet {
  position: relative;
  padding: 20px 22px 18px;
  background: var(--papier);
  border-radius: 3px;
  transform: rotate(-1.5deg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 30px 50px -24px var(--schaduw);
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: 0;
}
.login-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.login-dim { color: var(--inkt-2); }

.login-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--inkt);
}
.login-sheet__kind { font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--inkt); }
.login-sheet__no { margin-top: 6px; font-size: 11.5px; }
.login-sheet__meta { margin: 0; display: grid; gap: 3px; text-align: right; }
.login-sheet__meta div { display: flex; justify-content: flex-end; gap: 10px; }
.login-sheet__meta dt { color: var(--inkt-2); }
.login-sheet__meta dd { margin: 0; font-weight: 600; color: var(--inkt); }

.login-lines { width: 100%; margin-top: 6px; border-collapse: collapse; }
.login-lines th {
  padding: 6px 0;
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--inkt-2);
}
.login-lines td { padding: 5px 0; border-top: 1px solid #EEEEEE; }
.login-lines .login-num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.login-lines tfoot td { padding: 2px 0; border-top: 0; color: var(--inkt-2); }
.login-lines tfoot tr:first-child td { padding-top: 9px; border-top: 1px solid var(--lijn); }
.login-lines tfoot .login-total td { padding-top: 6px; font-size: 14px; font-weight: 700; color: var(--inkt); transition: color .4s; }
.login-lines tfoot .login-total .login-num { font-weight: 500; }
.login-lines tfoot .login-total.is-paid td { color: var(--betaald); }

.login-ogm {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 7px 10px;
  background: #F5F5F5;
  border-radius: 3px;
  font-size: 11.5px;
}
.login-ogm span:first-child { color: var(--inkt-2); }

.login-track {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 6px;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed var(--lijn);
}
.login-track li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-top: 18px; }
.login-track li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #CFCFCF;
  background: var(--papier);
  transition: background-color .35s, border-color .35s, box-shadow .35s;
}
.login-track li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 14px;
  right: 2px;
  height: 2px;
  background: var(--lijn);
  transition: background-color .35s;
}
.login-track--4 { grid-template-columns: 0.95fr 1fr 1.15fr 0.9fr; }
.login-track__step { font-size: 12px; font-weight: 600; color: var(--inkt-3); transition: color .35s; }
/* Twee regels hoog houden, zodat de datums onder alle stappen op dezelfde lijn staan */
.login-track--4 .login-track__step { font-size: 11.5px; min-height: 2.8em; }
.login-track__when { font-size: 10.5px; color: #A8A8A8; transition: color .35s; }
.login-track li.is-done::before { background: var(--inkt); border-color: var(--inkt); }
.login-track li.is-done::after { background: var(--inkt); }
.login-track li.is-done .login-track__step,
.login-track li.is-current .login-track__step { color: var(--inkt); }
.login-track li.is-done .login-track__when,
.login-track li.is-current .login-track__when { color: var(--inkt-2); }
.login-track li.is-current::before { background: var(--oranje); border-color: var(--oranje); box-shadow: 0 0 0 4px rgba(255, 139, 30, .25); }
.login-track li.is-current:last-child::before { background: var(--betaald-dot); border-color: var(--betaald-dot); box-shadow: 0 0 0 4px rgba(101, 188, 123, .25); }
.login-track li.is-current:last-child .login-track__step { color: var(--betaald); }

/* ---------- Smal scherm / telefoon ---------- */
@media (max-width: 860px) {
  .login { grid-template-columns: minmax(0, 1fr); grid-template-areas: "auth" "brand"; min-height: 0; }
  .login-auth { position: static; min-height: 0; padding: 18px 22px 40px; }
  .login-logo img { width: 132px; }
  .login-auth__body { padding: 36px 0 0; justify-content: flex-start; }
  .login-title { font-size: 30px; }

  .login-mobile-discover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 384px;
    margin: 16px auto 0;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: linear-gradient(190deg, var(--merk-van), var(--merk-naar));
    color: #FFFFFF;
    font-size: 14.5px;
    text-decoration: none;
  }
  .login-mobile-discover strong { font-weight: 700; }
  .login-mobile-discover svg { flex: none; color: var(--oranje); }
  .login-mobile-discover:focus-visible { outline: 3px solid var(--blauw); outline-offset: 3px; }

  .login-brand {
    gap: 28px;
    padding: 40px 22px 48px;
    clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%);
  }
  .login-brand::after { width: 44px; height: 44px; }
  .login-brand__title { font-size: 27px; }
  .login-brand__text { font-size: 16px; }
  .login-sheets { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .login-v2 *,
  .login-v2 *::before,
  .login-v2 *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Registratie (registratie-v2.php en registratie_done-v2.php)
   Bouwt verder op de login-stijlen hierboven.
   ========================================================================== */
.login-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.reg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas: "brand form";
  min-height: 100vh;
}

/* ---------- Formulierkolom ---------- */
.reg-form-col { grid-area: form; align-self: start; min-height: 100vh; display: flex; flex-direction: column; padding: 28px clamp(24px, 4.5vw, 64px) 48px; }
.reg-head,
.reg-body { width: 100%; max-width: 480px; margin: 0 auto; }
.reg-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.reg-head__login { margin: 0; font-size: 14px; color: var(--inkt-2); }
.reg-body { container: reg-formulier / inline-size; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 32px 0; } /* verticaal in het midden, zoals de login */
.reg-summary { display: none; }

.reg .login-intro { gap: 4px; }
.reg .login-title { font-size: 30px; }

.reg-form { display: flex; flex-direction: column; gap: 14px; }
.reg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
/* Bedrijf/BTW en e-mail/paswoord onder elkaar als de formulierkolom smal is */
@container reg-formulier (max-width: 430px) {
  .reg-grid--stack { grid-template-columns: minmax(0, 1fr); }
}
.reg .login-field { gap: 5px; min-width: 0; }
.reg .login-field label { font-size: 13.5px; }
.reg .login-input { height: 46px; padding: 0 13px; }
.reg .login-input::placeholder { color: #A3A3A3; }
.reg .login-pw .login-input { padding-right: 48px; }
.reg .login-pw__toggle { top: 4px; right: 4px; width: 38px; height: 38px; }
.reg .login-msg { align-items: flex-start; font-size: 13px; }
.reg .login-msg svg { margin-top: 1px; }
.reg-opt { font-weight: 400; color: var(--inkt-3); }

/* BTW-nummer: groen vinkje in het veld als het nummer klopt */
.reg-status { position: relative; }
.reg-status .login-input { padding-right: 40px; font-variant-numeric: tabular-nums; }
.reg-status__ok { position: absolute; top: 50%; right: 12px; display: none; color: var(--betaald); transform: translateY(-50%); }
.login-field.is-valid .reg-status__ok { display: block; }
.login-field.is-valid .login-input:not(:focus) { border-color: #8CCB9D; }

/* Paswoord: "min. 8 tekens" rechts naast het label */
.reg-req { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--inkt-3); white-space: nowrap; }
.reg-req__met { display: none; }
.reg-req.is-met { color: var(--betaald); font-weight: 600; }
.reg-req.is-met .reg-req__todo { display: none; }
.reg-req.is-met .reg-req__met { display: block; }
.reg-req.is-error { color: var(--fout); font-weight: 600; }

.reg-select { position: relative; }
.reg-select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.reg-select svg { position: absolute; top: 50%; right: 12px; color: var(--inkt-2); pointer-events: none; transform: translateY(-50%); }

/* Optionele velden achter een tekstlink */
.reg-extra summary { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border-radius: 3px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--inkt-2); }
.reg-extra summary::-webkit-details-marker { display: none; }
.reg-extra summary svg { flex: none; transition: transform .2s; }
.reg-extra[open] summary svg { transform: rotate(180deg); }
.reg-extra summary:hover { color: var(--blauw); }
.reg-extra summary:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; }
.reg-extra__body { margin-top: 10px; }

.reg .login-field label.reg-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--tekst); cursor: pointer; }
.reg-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--oranje); cursor: pointer; }
.reg-check input:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; }
.reg-check input[aria-invalid="true"] { outline: 2px solid var(--fout); outline-offset: 1px; }

.reg-captcha { display: flex; flex-direction: column; gap: 6px; min-height: 78px; }
.reg-captcha:focus { outline: none; }
.reg .login-btn { margin-top: 4px; }

/* Bevestigings- en foutscherm */
.reg-done-icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: -6px; border-radius: 50%; background: #E7F4EA; color: var(--betaald); }
.reg-note { margin: 0; font-size: 14.5px; color: var(--inkt-2); }
.reg-note strong { color: var(--inkt); font-weight: 600; word-break: break-all; }
.reg-errors { margin: 4px 0 0; padding-left: 18px; }
.reg-errors li + li { margin-top: 2px; }

/* ---------- Blauw merkvlak ---------- */
.login-brand.reg-brand { padding: clamp(40px, 5.5vw, 80px) clamp(32px, 5vw, 72px); }
.reg-brand__inner { position: relative; z-index: 1; max-width: 31rem; }
@media (min-width: 861px) and (min-height: 860px) {
  .reg-brand__inner { position: sticky; top: 64px; }
}

.reg-trial { margin-top: 28px; padding: 20px 22px 22px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; background: rgba(255, 255, 255, .07); }
.reg-trial__title { margin: 0 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--merk-tekst-2); }
.reg-trial__steps { list-style: none; display: grid; gap: 18px; margin: 0; padding: 0; counter-reset: stap; }
.reg-trial__steps li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; counter-increment: stap; }
.reg-trial__steps li::before {
  content: counter(stap);
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
}
.reg-trial__steps li:first-child::before { background: var(--oranje); color: var(--inkt); }
.reg-trial__steps li:not(:last-child)::after { content: ""; position: absolute; top: 32px; bottom: -14px; left: 13px; width: 2px; background: rgba(255, 255, 255, .16); }
.reg-trial__when { grid-column: 2; padding-top: 3px; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: #FFFFFF; }
.reg-trial__what { grid-column: 2; font-size: 14.5px; line-height: 1.5; color: var(--merk-tekst-2); }
.reg-trial__what strong { color: #FFFFFF; font-weight: 600; }

.reg-promo { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; padding: 10px 12px; border: 1px solid rgba(255, 139, 30, .5); border-radius: var(--radius); background: rgba(255, 139, 30, .14); font-size: 14px; line-height: 1.45; color: var(--merk-tekst-2); }
.reg-promo strong { color: #FFFFFF; }
.reg-promo__badge { flex: none; padding: 4px 8px; border-radius: 4px; background: var(--oranje); color: var(--inkt); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.reg-brand .login-proof { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; font-size: 14.5px; }

.reg-kantoor { margin: 22px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--merk-tekst-2); }
.reg-kantoor__link { color: #FFFFFF; font-weight: 600; text-underline-offset: 4px; border-radius: 3px; }
.reg-kantoor__link svg { display: inline-block; margin-left: 6px; vertical-align: -3px; transition: transform .2s; }
.reg-kantoor__link:hover svg { transform: translateX(3px); }
.reg-kantoor__link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; }

@media (max-width: 860px) {
  .reg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "form" "brand"; min-height: 0; }
  .reg-form-col { min-height: 0; padding: 18px 22px 40px; }
  .reg-head__login { font-size: 13.5px; }
  .reg-body { justify-content: flex-start; padding: 24px 0 0; }
  .reg .login-title { font-size: 28px; }
  .reg-summary { display: block; width: 100%; max-width: 480px; margin: 16px auto 0; padding: 12px 14px; border-radius: var(--radius); background: linear-gradient(190deg, var(--merk-van), var(--merk-naar)); color: var(--merk-tekst-2); font-size: 14px; line-height: 1.45; }
  .reg-summary strong { color: #FFFFFF; }
  .login-brand.reg-brand { padding: 40px 22px 48px; }
}

/* ==========================================================================
   Paswoord vergeten / nieuw paswoord kiezen (paswoordvergeten-v2.php, paswoordkiezen-v2.php)
   Hergebruikt de indeling van de registratie.
   ========================================================================== */
.reg-done-icon--mail { background: #FFF0E0; color: #C25A0A; }

/* Stappen: de huidige stap in het oranje, gedane stappen iets lichter */
.reg-trial--stappen .reg-trial__steps li::before { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
.reg-trial--stappen .reg-trial__steps li.is-done::before { background: rgba(255, 255, 255, .32); }
.reg-trial--stappen .reg-trial__steps li.is-current::before { background: var(--oranje); color: var(--inkt); }
.reg-trial--stappen .reg-trial__steps li:not(.is-current) .reg-trial__when { color: var(--merk-tekst-2); }

/* ==========================================================================
   Inlogcode / tweestapsverificatie (verify_2fa-v2.php)
   Hergebruikt de indeling van de registratie.
   ========================================================================== */
.login-alert--ok { background: #E7F4EA; border-color: #B9DEC3; color: #1E5634; }
.login-alert--ok svg { color: var(--betaald); }
.login-alert--ok strong { color: #17432A; }

/* Codeveld: groot, in monospace, cijfers mooi uit elkaar */
.reg .login-input.tf-code {
  height: 60px;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .45em;
  text-indent: .45em; /* compenseert de spatiëring na het laatste cijfer */
  text-align: center;
}
.reg .login-input.tf-code::placeholder { color: #C9C9C9; letter-spacing: .45em; }

.tf-check__sub { display: block; margin-top: 1px; font-size: 13px; color: var(--inkt-3); }

/* E-mailadres niet afbreken aan een koppelteken; enkel als het echt niet op één regel past */
.tf-email { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }