/* Nextkozijnen — het inlogscherm van Mijn Next-portaal (mijn-klus.html).

   28 sep 2026: "en dan ook een mooi login scherm". Eén vak met twee
   kanten, zoals het portaal zelf: links het nachtblauw van de zijbalk met wat
   de klant binnen vindt, rechts het lichte werkvlak met het formulier. Op de
   telefoon eerst de titel, dan meteen het formulier, en de uitleg eronder:
   wie hier komt, wil inloggen.

   De koude en warme gloed in het blauwe vlak is de thermografie uit
   tokens.css (buiten koud, binnen warm). Alleen deze pagina laadt dit
   bestand; de ids in het formulier horen bij klanttoegang.js en de tests. */

.inlogsectie { padding: 48px 0 72px; }
.inlogvak {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-areas: "zij formulier";
  max-width: 1040px; margin: 0 auto;
  background: var(--kaart); border: 1px solid var(--lijn); border-radius: 18px;
  box-shadow: var(--schaduw-op); overflow: hidden;
}
.inlogvak .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── De blauwe kant ── */
.inlog-zij {
  grid-area: zij; display: flex; flex-direction: column; gap: 34px; padding: 44px 40px;
  color: #fff;
  background:
    radial-gradient(110% 70% at 100% 100%, rgba(255, 176, 32, .20), transparent 58%),
    radial-gradient(90% 60% at 0% 0%, rgba(62, 143, 196, .30), transparent 62%),
    linear-gradient(160deg, var(--nacht-diep) 0%, var(--nacht) 55%, var(--nacht-zacht) 100%);
}
.inlog-zij .kicker { color: var(--warm); margin: 0 0 10px; }
.inlog-zij h1 { font-size: var(--t-groot); color: #fff; margin: 0; }
.inlog-lead { font-size: var(--t-sub); line-height: 1.5; color: var(--koud-licht); margin: 14px 0 0; max-width: 34ch; }
.inlog-voordelen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.inlog-voordelen li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.inlog-voordelen .ico {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: var(--warm);
}
.inlog-voordelen b { display: block; font-family: var(--display); font-weight: 600; font-size: var(--t-basis); color: #fff; }
.inlog-voordelen span.tekst { display: block; font-size: var(--t-klein); line-height: 1.45; color: rgba(255, 255, 255, .78); margin-top: 2px; }
.inlog-veilig {
  display: flex; gap: 10px; align-items: flex-start; margin: 28px 0 0; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14); font-size: var(--t-fijn); line-height: 1.5; color: rgba(255, 255, 255, .78);
}
.inlog-veilig svg { flex: 0 0 auto; color: var(--koud-licht); margin-top: 1px; }
.inlog-veilig a { color: #fff; }
.inlog-zij a:focus-visible { outline: 3px solid var(--warm); outline-offset: 2px; border-radius: 2px; }

/* ── De lichte kant: het formulier ── */
/* Verticaal in het midden: stap 1 is kort naast de lange blauwe kant. */
.inlog-formulier { grid-area: formulier; padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.inlog-formulier h2 { font-size: var(--t-kop); margin: 0 0 8px; }
.inlog-formulier form + form { margin-top: 30px; }
.inlog-uitleg { color: var(--grijs); margin: 0 0 22px; }
.inlog-hoofdknop { width: 100%; margin-top: 4px; }
.inlog-status { margin: 12px 0 0; font-size: var(--t-klein); color: var(--inkt); }

/* De twee stappen bovenaan (alleen met JavaScript; zonder staan beide
   formulieren gewoon onder elkaar). */
.inlogstappen { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0 0 26px; padding: 0; font-size: var(--t-klein); color: var(--grijs); }
.inlogstappen li { display: inline-flex; align-items: center; gap: 8px; }
.inlogstappen li + li::before { content: ""; width: 28px; height: 2px; background: var(--lijn2); border-radius: 2px; margin-right: 2px; }
.inlogstappen .bol {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--lijn2); font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--grijs); background: #fff;
}
.inlogvak[data-stap="1"] .inlogstappen li[data-stap="1"],
.inlogvak[data-stap="2"] .inlogstappen li[data-stap="2"] { color: var(--inkt); font-weight: 600; }
.inlogvak[data-stap="1"] .inlogstappen li[data-stap="1"] .bol,
.inlogvak[data-stap="2"] .inlogstappen li[data-stap="2"] .bol { border-color: var(--merk); background: var(--merk); color: #fff; }
.inlogvak[data-stap="2"] .inlogstappen li[data-stap="1"] .bol { border-color: var(--goed); color: var(--goed); }
.inlogvak[data-stap="2"] .inlogstappen li + li::before { background: var(--goed); }

/* De mail is onderweg: een rustig blok met een envelop. */
.inlog-mailbericht {
  display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 22px; padding: 14px 16px;
  background: var(--merk-licht); border-radius: var(--r-kaart); color: var(--inkt);
}
.inlog-mailbericht svg { flex: 0 0 auto; color: var(--merk); margin-top: 2px; }
.inlog-mailbericht p { margin: 0; font-size: var(--t-klein); line-height: 1.5; }

/* De code: groot en rustig, zes cijfers met lucht ertussen. De extra
   linkermarge maakt de spatie na het laatste cijfer goed. */
.veld input.code-invoer {
  font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: .42em;
  text-align: center; padding-left: calc(14px + .42em); min-height: 64px; font-variant-numeric: tabular-nums;
}

.inlog-bijknoppen { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.inlog-bijknop {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; cursor: pointer;
  background: #fff; color: var(--merk); border: 1.5px solid var(--lijn2); border-radius: var(--r-knop);
  font-family: var(--display); font-weight: 600; font-size: var(--t-klein);
}
.inlog-bijknop:hover:not(:disabled) { background: var(--merk-licht); border-color: var(--merk); }
.inlog-bijknop:disabled { color: var(--grijs); cursor: default; }
.inlog-bijknop:focus-visible { outline: 3px solid var(--nacht); outline-offset: 2px; }

.inlog-melding { margin: 0 0 22px; padding: 14px 16px; border-radius: var(--r-kaart); font-size: var(--t-klein); line-height: 1.5; }
.inlog-melding.goed { background: #E8F4EF; border-left: 4px solid var(--goed); }
.inlog-hulp { margin: 0; padding-top: 28px; font-size: var(--t-klein); line-height: 1.5; color: var(--grijs); }
.inlog-hulp a[href^="tel:"] { white-space: nowrap; }

/* ── Smaller: onder elkaar, formulier direct onder de titel ── */
@media (max-width: 820px) {
  .inlogsectie { padding: 20px 0 48px; }
  .inlogvak { grid-template-columns: 1fr; grid-template-areas: "merk" "formulier" "voordelen"; border-radius: 14px; }
  .inlog-zij { display: contents; }
  .inlog-merk {
    grid-area: merk; padding: 26px 22px 24px; color: #fff;
    background:
      radial-gradient(90% 90% at 100% 100%, rgba(255, 176, 32, .18), transparent 60%),
      linear-gradient(160deg, var(--nacht-diep) 0%, var(--nacht) 70%, var(--nacht-zacht) 100%);
  }
  .inlog-lead { font-size: var(--t-basis); margin-top: 10px; }
  .inlog-formulier { padding: 26px 22px 24px; }
  .inlog-voordelen { grid-area: voordelen; padding: 24px 22px 26px; background: var(--ruit); border-top: 1px solid var(--lijn); }
  .inlog-voordelen .ico { background: var(--merk-licht); border-color: transparent; color: var(--merk); }
  .inlog-voordelen b { color: var(--inkt); }
  .inlog-voordelen span.tekst, .inlog-veilig { color: var(--grijs); }
  .inlog-veilig { border-top-color: var(--lijn); }
  .inlog-veilig svg { color: var(--merk); }
  .inlog-veilig a { color: var(--merk); }
}
@media (max-width: 360px) {
  .inlog-merk, .inlog-formulier, .inlog-voordelen { padding-left: 16px; padding-right: 16px; }
  .veld input.code-invoer { font-size: 26px; letter-spacing: .3em; padding-left: calc(14px + .3em); }
}