/* ═══════════════════════════════════════════════════════════════════════════
   De schermen rond de voordeur: inloggen, registreren, wachtwoord vergeten,
   wachtwoord instellen en de tweede factor.

   Dezelfde taal als de landingspagina: zand als ondergrond, Bricolage voor
   de koppen, Archivo voor de tekst, IBM Plex Mono voor alles wat een stand
   van zaken meldt. Rechts staat één foto onder dezelfde bruine sluier als
   de afsluiter van de landingspagina, met een hap uit twee hoeken.

   Deze pagina's staan los van het design van het ingelogde deel. Dat is
   met opzet: wie hier is heeft nog geen werkruimte, en de pagina hoort bij
   de site, niet bij de applicatie. auth.css is de oude versie en blijft
   staan voor de verwerkersovereenkomst, die nog niet is omgezet.
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

.wrl-auth {
  margin: 0;
  min-height: 100vh;
  padding: 26px;
  display: flex;
  background: #F7F5F0;
  color: #17130E;
  font-family: Archivo, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrl-auth a { color: #17130E; }
.wrl-auth a:hover { color: #6C5CE7; }

.wrl-auth :focus-visible {
  outline: 2px solid #6C5CE7;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── De kaart ────────────────────────────────────────────────────────────── */

.wrl-auth-kaart {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  background: #FFFFFF;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 90px -60px rgba(23, 19, 14, .5);
}

.wrl-auth-vorm {
  flex: 1 1 460px;
  min-width: 0;
  padding: 40px 48px 32px;
  display: flex;
  flex-direction: column;
}

/* Breder voor registreren, waar velden naast elkaar staan. */
.wrl-auth-vorm-breed { flex: 1 1 520px; }

.wrl-auth-merk {
  display: inline-flex;
  width: fit-content;
  text-decoration: none;
}
.wrl-auth-merk img { display: block; height: 27px; width: auto; }

/* auto-marges in plaats van justify-content: center. Bij te weinig hoogte
   schuift de inhoud dan naar boven en blijft hij bereikbaar, waar centreren
   de bovenkant zou afknippen. */
.wrl-auth-midden {
  margin: auto 0;
  padding: 36px 0;
  width: 100%;
  max-width: 380px;
  align-self: center;
}
.wrl-auth-midden-breed { max-width: 420px; }

.wrl-auth-voet {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: #8A7F70;
}
.wrl-auth-voet a { color: #8A7F70; text-decoration: none; }
.wrl-auth-voet a:hover { color: #17130E; text-decoration: underline; }

/* ── Koppen en lopende tekst ─────────────────────────────────────────────── */

.wrl-auth-kop {
  margin: 0 0 8px;
  font-family: 'Bricolage Grotesque', Archivo, sans-serif;
  font-weight: 800;
  font-size: 33px;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #17130E;
}

.wrl-auth-onderkop {
  margin: 0 0 26px;
  font-size: 15.5px;
  color: #5C5247;
}

.wrl-auth-slot {
  margin: 24px 0 0;
  font-size: 14.5px;
  color: #5C5247;
}
.wrl-auth-slot a { font-weight: 600; }

/* ── Velden ──────────────────────────────────────────────────────────────── */

.wrl-auth-formulier {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.wrl-auth-paar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.wrl-auth-paar > * { flex: 1 1 150px; min-width: 0; }

/* Op een telefoon onder elkaar. Met alleen een flex-basis lukt dit niet: de
   registratiekolom is 380px breed, dus een basis die de contactvelden op een
   telefoon van 430px laat afbreken, stapelt daar de naamvelden op een groot
   scherm ook. Dit is een telefoonregel, geen kolombreedte — vandaar dezelfde
   grens van 560px waarop ook de inloglink uit de navigatie verdwijnt. */
@media (max-width: 560px) {
  .wrl-auth-paar { flex-direction: column; }
  /* De basis van 150px hierboven is een breedte zolang de rij ligt; zodra hij
     staat leest de browser hem als hoogte en wordt elk veld 150px hoog bij
     77px inhoud. */
  .wrl-auth-paar > * { flex: 0 0 auto; }
}

.wrl-auth-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: #3F382F;
}

.wrl-auth-invoer {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #D8D1C2;
  border-radius: 12px;
  background: #FDFCFA;
  font-family: inherit;
  font-size: 15.5px;
  color: #17130E;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.wrl-auth-invoer::placeholder { color: #A89C8A; }
.wrl-auth-invoer:focus {
  outline: none;
  border-color: #A79BF2;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, .16);
}
.wrl-auth-invoer.is-fout { border-color: #B91C1C; }

/* Ruimte rechts voor de oogknop. */
.wrl-auth-invoer-oog { padding-right: 48px; }

.wrl-auth-omhulsel { position: relative; display: block; }

.wrl-auth-oog {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #8A7F70;
  cursor: pointer;
}
.wrl-auth-oog:hover { color: #17130E; }

.wrl-auth-hulp {
  display: block;
  margin-top: 6px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: #8A7F70;
}

.wrl-auth-fout {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #B91C1C;
}

.wrl-auth-labelrij {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}
.wrl-auth-labelrij .wrl-auth-label { margin-bottom: 0; }
.wrl-auth-labelrij a { font-size: 13px; color: #5C5247; }

.wrl-auth-akkoord {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.55;
  color: #5C5247;
}
/* Dezelfde klassenaam als in het ingelogde deel, want de huisregel is dat elk
   keuzevakje er een draagt. components.css laadt hier niet, dus de maat en de
   accentkleur staan er nog een keer — in de kleur van deze schermen. */
.wrl-auth-akkoord .form-check-input {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  accent-color: #6C5CE7;
  cursor: pointer;
}

/* ── Knoppen ─────────────────────────────────────────────────────────────── */

.wrl-auth-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #17130E;
  color: #F7F5F0;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.wrl-auth-knop:hover { background: #2B231A; color: #F7F5F0; }
.wrl-auth-knop[disabled] { background: #EDE8DD; color: #A89C8A; cursor: default; }


/* Een knop die als tekstlink moet lezen: terug naar de vorige stap. */
.wrl-auth-tekstknop {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  color: #5C5247;
  text-decoration: underline;
  cursor: pointer;
}
.wrl-auth-tekstknop:hover { color: #6C5CE7; }

.wrl-auth-paars {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #4F46A8;
  text-decoration: underline;
  cursor: pointer;
}
.wrl-auth-paars:hover { color: #6C5CE7; }

/* ── Meldingen ───────────────────────────────────────────────────────────── */

.wrl-auth-melding {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 0 0 22px;
  padding: 13px 15px;
  border-radius: 13px;
  font-size: 13.5px;
  line-height: 1.55;
}
.wrl-auth-melding-fout { background: #FEF2F2; border: 1px solid #FBD5D5; color: #991B1B; }
.wrl-auth-melding-goed { background: #ECFDF5; border: 1px solid #C7EDDD; color: #065F46; }
.wrl-auth-melding-rustig { background: #F7F5F0; border: 1px solid #E6E1D6; color: #5C5247; }
.wrl-auth-melding ul { margin: 0; padding-left: 18px; }

/* ── Het bedrijfschipje en het opgehaalde adres ──────────────────────────── */

.wrl-auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 8px 11px;
  border-radius: 999px;
  background: #F3F1FE;
  border: 1px solid #DAD4FA;
  font-size: 13.5px;
  font-weight: 600;
  color: #17130E;
}

.wrl-auth-vondst {
  padding: 16px 17px;
  border-radius: 13px;
  background: #F3F1FE;
  border: 1px solid #DAD4FA;
  animation: wrlAuthOp .42s cubic-bezier(.2, .8, .2, 1) both;
}

/* ── Stappen ─────────────────────────────────────────────────────────────── */

.wrl-auth-stappen {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A7F70;
}
.wrl-auth-stapbalken { flex: 1 1 auto; display: flex; gap: 4px; }
.wrl-auth-stapbalk {
  flex: 1 1 0;
  height: 3px;
  border-radius: 2px;
  background: #E6E1D6;
  transition: background .3s ease;
}
.wrl-auth-stapbalk.is-aan { background: #17130E; }

/* ── De sterktemeter ─────────────────────────────────────────────────────── */

.wrl-auth-meter { display: flex; align-items: center; gap: 3px; margin-top: 10px; }
.wrl-auth-meterblok {
  flex: 1 1 0;
  min-width: 0;
  height: 7px;
  border-radius: 3px;
  background: #EBE6DB;
  transition: background .2s ease;
}
.wrl-auth-meterrij {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
.wrl-auth-meterlabel {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: .06em;
  transition: color .2s ease;
}

/* ── Het beeld rechts ────────────────────────────────────────────────────── */

.wrl-auth-paneel {
  flex: 1 1 480px;
  min-width: 0;
  padding: 14px 14px 14px 0;
  display: flex;
}

.wrl-auth-beeld {
  flex: 1 1 auto;
  position: relative;
  min-height: 520px;
  display: flex;
}

.wrl-auth-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Met de bovenkant vast, anders zakken de gezichten uit beeld zodra het
     paneel korter wordt dan de foto hoog is. */
  object-position: 50% 0%;
  border-radius: 28px;
}

/* Dezelfde sluier als de afsluiter van de landingspagina. */
.wrl-auth-sluier {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: rgba(23, 19, 14, .72);
}

/* De hap uit linksboven en rechtsonder. Het blok dekt het vierkant af met
   een ronde binnenhoek; de twee vierkantjes ernaast hebben een uitgespaarde
   cirkel, en dat maakt de twee buitenhoeken rond. Alles in de kleur van de
   kaart eromheen, dus het is een uitsparing en geen vorm. */
.wrl-auth-hap {
  position: absolute;
  width: 26%;
  height: 13%;
  background: #FFFFFF;
}
.wrl-auth-hap-lb { left: 0; top: 0; border-bottom-right-radius: 28px; }
.wrl-auth-hap-ro { right: 0; bottom: 0; border-top-left-radius: 28px; }

.wrl-auth-vulling {
  position: absolute;
  width: 28px;
  height: 28px;
}
.wrl-auth-vulling-lb1 {
  left: 0;
  top: 13%;
  background: radial-gradient(circle 28px at 100% 100%, rgba(255, 255, 255, 0) 98.5%, #FFFFFF 100%);
}
.wrl-auth-vulling-lb2 {
  left: 26%;
  top: 0;
  background: radial-gradient(circle 28px at 100% 100%, rgba(255, 255, 255, 0) 98.5%, #FFFFFF 100%);
}
.wrl-auth-vulling-ro1 {
  right: 0;
  bottom: 13%;
  background: radial-gradient(circle 28px at 0 0, rgba(255, 255, 255, 0) 98.5%, #FFFFFF 100%);
}
.wrl-auth-vulling-ro2 {
  right: 26%;
  bottom: 0;
  background: radial-gradient(circle 28px at 0 0, rgba(255, 255, 255, 0) 98.5%, #FFFFFF 100%);
}

.wrl-auth-paneeltekst {
  position: relative;
  flex: 1 1 auto;
  padding: 58px 54px 54px;
  display: flex;
  flex-direction: column;
}

/* Begrensd zodat de kop vrij blijft van de hap linksboven. */
.wrl-auth-paneelkop {
  margin-left: auto;
  max-width: min(66%, 370px);
  text-align: right;
}
.wrl-auth-getal {
  margin: 0 0 4px;
  font-family: 'Bricolage Grotesque', Archivo, sans-serif;
  font-weight: 800;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -.045em;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.wrl-auth-paneelzin {
  margin: 0;
  font-family: 'Bricolage Grotesque', Archivo, sans-serif;
  font-weight: 800;
  font-size: 25px;
  line-height: 1.18;
  letter-spacing: -.025em;
  color: #FFFFFF;
}
.wrl-auth-paneelvoet {
  margin: auto 0 0;
  max-width: min(100%, 344px);
  font-size: 15px;
  line-height: 1.65;
  color: #E6E1D6;
}
.wrl-auth-paneelstempel {
  margin: auto 0 0;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(100%, 330px);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #E6E1D6;
}
.wrl-auth-stip {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34D399;
  animation: wrlAuthPols 2.2s ease-in-out infinite;
}

/* ── Beweging ────────────────────────────────────────────────────────────── */

@keyframes wrlAuthOp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes wrlAuthPols {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

.wrl-auth-op { animation: wrlAuthOp .4s cubic-bezier(.2, .8, .2, 1) both; }
.wrl-auth-pols { animation: wrlAuthPols 1s ease-in-out infinite; }

[x-cloak] { display: none !important; }

/* ── Smallere schermen ───────────────────────────────────────────────────── */

@media (max-width: 980px) {
  /* Het beeld is sfeer, geen inhoud: onder deze breedte zou het de helft van
     een telefoonscherm opeten voordat het formulier in beeld komt. */
  .wrl-auth-paneel { display: none; }
  .wrl-auth-vorm, .wrl-auth-vorm-breed { flex: 1 1 100%; }
}

@media (max-width: 620px) {
  .wrl-auth { padding: 12px; }
  .wrl-auth-kaart { border-radius: 20px; }
  .wrl-auth-vorm, .wrl-auth-vorm-breed { padding: 28px 22px 22px; }
  .wrl-auth-midden { padding: 28px 0; }
  .wrl-auth-kop { font-size: 28px; }
}

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

/* ── Wat verplicht is, en wat een wachtwoord moet zijn ────────────────────
   Bijna alles in dit formulier is verplicht; alleen het KvK-nummer is een
   snelweg naar de bedrijfsnaam. Daarom markeren we niet wat moet, maar het
   ene veld dat niet hoeft — dat is één merkteken in plaats van zes. */
.wrl-auth-optioneel {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8A7F70;
}

/* De regels waar een wachtwoord aan moet voldoen, met een vinkje zodra het
   klopt. Ze staan er vóórdat iemand begint te typen: een eis die je pas te
   horen krijgt nadat je hem hebt overtreden, is geen eis maar een val. */
.wrl-auth-regels {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.wrl-auth-regels li {
  position: relative;
  padding-left: 19px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #8A7F70;
  transition: color .2s ease;
}
/* Een rondje dat een vinkje wordt. Kleur alleen zou te weinig zijn: het
   verschil moet ook zichtbaar zijn voor wie kleuren niet uit elkaar houdt. */
.wrl-auth-regels li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 11px;
  height: 11px;
  border: 1.5px solid #D8D1C2;
  border-radius: 50%;
  transition: border-color .2s ease, background .2s ease;
}
.wrl-auth-regels li.is-goed { color: #047857; }
.wrl-auth-regels li.is-goed::before {
  border-color: #047857;
  background: #047857 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / 8px 8px no-repeat;
}

/* ── Het paneel zonder foto ──────────────────────────────────────────────────
   Voor het platformbeheer: een andere deur, dus geen foto van een gesprek bij
   een bureau. Hetzelfde donkere vlak als de secties van de landingspagina,
   met dezelfde stippentextuur, zodat het bij het huis blijft horen zonder te
   doen alsof het dezelfde ingang is. */
/* Het beeld van het platformbeheer hangt als achtergrond in een span; de
   url staat in de template, zodat hij door de hashing van de statische
   bestanden mee blijft lopen. De rest komt van .wrl-auth-foto hierboven. */
.wrl-auth-beeldvlak {
  background-position: 50% 0%;
  background-size: cover;
}

/* Het paneel van het platformbeheer. Dezelfde foto-opbouw als bij een
   bureau, maar met een marineblauwe sluier in plaats van de warme bruine:
   zo houdt deze deur de kleur van het platformthema. Hij is dichter dan de
   bruine omdat de code eronder lichte regels heeft: op .82 haalt zelfs het
   lichtste punt van de afbeelding nog 7,9:1 onder de voettekst, dus de
   tekst blijft leesbaar hoe het paneel ook uitsnijdt. */
.wrl-auth-sluier-beheer {
  background: rgba(15, 23, 42, .82);
}

/* Het merkteken dat zegt dat dit het beheer is en niet een bureau. */
.wrl-auth-beheermerk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  padding: 6px 13px;
  border-radius: 999px;
  background: #FEF3E2;
  border: 1px solid #F5D9AE;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9A5B06;
}