/* Loginpagina - bouwt voort op datarecup-modern.css en datarecup-home.css.
   Alles gescoopt onder body.dr-login. */

/* Oude kopstrook (368px met hero.jpg) weg, zoals op de andere nieuwe pagina's */
.dr-login #elheader{height:auto}

.dr-login .dr-login__grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:40px;align-items:start;max-width:980px;margin:0 auto}

/* Formulierkaart */
.dr-login .dr-login__kaart{
  background:#fff;border:1px solid var(--line,rgba(23,40,155,.13));
  border-top:4px solid var(--blue,#17289B);border-radius:0 0 16px 16px;
  padding:34px 36px 36px}
.dr-login .dr-login__kop{
  font-family:'Archivo','Syne',sans-serif;font-weight:700;font-size:26px;
  letter-spacing:-.02em;word-spacing:.2em;line-height:1.15;
  color:var(--ink,#1A1D2E);margin:0 0 24px}

.dr-login .dr-login__form{display:grid;gap:20px}

.dr-login .dr-veld{display:grid;gap:7px}
.dr-login .dr-veld label{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;color:var(--ink,#1A1D2E)}
.dr-login .dr-veld__rij{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dr-login .dr-veld__link{font-size:14px;color:var(--blue,#17289B);text-decoration:underline;
  text-underline-offset:3px}
.dr-login .dr-veld__link:hover{text-decoration-thickness:2px}

.dr-login .dr-veld input[type=email],
.dr-login .dr-veld input[type=password],
.dr-login .dr-veld input[type=text]{
  width:100%;box-sizing:border-box;height:50px;padding:0 14px;
  font:inherit;font-size:16px;color:var(--ink,#1A1D2E);background:#fff;
  border:1px solid rgba(23,40,155,.25);border-radius:10px;
  transition:border-color .15s,box-shadow .15s}
.dr-login .dr-veld input:focus{
  outline:none;border-color:var(--blue,#17289B);box-shadow:0 0 0 3px rgba(23,40,155,.18)}
.dr-login .dr-veld input[aria-invalid=true]{border-color:#B3261E}

.dr-login .dr-veld__wachtwoord{position:relative}
.dr-login .dr-veld__wachtwoord input{padding-right:90px}
.dr-login .dr-veld__toon{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  height:38px;padding:0 12px;border:0;border-radius:8px;background:transparent;
  font:inherit;font-size:14px;font-weight:600;color:var(--blue,#17289B);cursor:pointer}
.dr-login .dr-veld__toon:hover{background:rgba(23,40,155,.07)}
.dr-login .dr-veld__toon:focus-visible{outline:2px solid var(--blue,#17289B);outline-offset:2px}

.dr-login .dr-vinkje{display:flex;align-items:center;gap:10px;font-size:15px;
  color:var(--ink,#1A1D2E);cursor:pointer;width:max-content}
.dr-login .dr-vinkje input{width:20px;height:20px;margin:0;accent-color:var(--blue,#17289B)}

.dr-login .dr-login__knop{width:100%;justify-content:center;text-align:center;
  border:0;cursor:pointer;font-size:16px;padding:15px 22px;margin-top:4px}

/* Meldingen */
.dr-login .dr-login__melding{border-radius:10px;padding:14px 16px;font-size:15px;
  margin:0 0 20px;line-height:1.5}
.dr-login .dr-login__melding--ok{background:#EAF5EE;color:#1E5A33;border-left:4px solid #2E7D4F}
.dr-login .dr-login__melding--fout{background:#FCEDEC;color:#8C1D18;border-left:4px solid #B3261E}
.dr-login .dr-login__melding ul{margin:6px 0 0;padding-left:18px}

/* Zijkolom: drie korte blokken, geen kaarten */
.dr-login .dr-login__zij{display:grid;gap:0;padding-top:6px}
.dr-login .dr-login__blok{padding:22px 0;border-bottom:1px solid var(--line,rgba(23,40,155,.13))}
.dr-login .dr-login__blok:first-child{padding-top:0}
.dr-login .dr-login__blok:last-child{border-bottom:0}
.dr-login .dr-login__blok h3{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:19px;
  letter-spacing:-.01em;word-spacing:.15em;color:var(--ink,#1A1D2E);margin:0 0 6px}
.dr-login .dr-login__blok p{font-size:15px;line-height:1.6;color:var(--muted,#5B6078);margin:0 0 10px}
.dr-login .dr-login__tweede{font-weight:600;font-size:15px;color:var(--blue,#17289B);
  text-decoration:underline;text-underline-offset:3px}
.dr-login .dr-login__tel{font-family:'Archivo',sans-serif;font-weight:800;font-size:24px;
  letter-spacing:-.01em;color:var(--blue,#17289B);text-decoration:none}

@media (max-width:820px){
  .dr-login .dr-login__grid{grid-template-columns:1fr;gap:32px}
  .dr-login .dr-login__kaart{padding:26px 22px 28px}
}

/* ── Registratie ─────────────────────────────────────────── */
.dr-login .dr-groep{border:0;margin:0;padding:0 0 26px;display:grid;gap:18px;
  border-bottom:1px solid var(--line,rgba(23,40,155,.13))}
.dr-login .dr-groep + .dr-groep{padding-top:4px}
.dr-login .dr-groep legend.dr-login__kop{font-size:21px;margin:0 0 16px;padding:0}
.dr-login .dr-veld__duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.dr-login .dr-veld select,
.dr-login .dr-veld textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink,#1A1D2E);
  background:#fff;border:1px solid rgba(23,40,155,.25);border-radius:10px;
  transition:border-color .15s,box-shadow .15s}
.dr-login .dr-veld select{height:50px;padding:0 40px 0 14px;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#17289B 50%),linear-gradient(135deg,#17289B 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px;background-repeat:no-repeat;cursor:pointer}
.dr-login .dr-veld textarea{padding:12px 14px;min-height:110px;resize:vertical;line-height:1.5}
.dr-login .dr-veld select:focus,
.dr-login .dr-veld textarea:focus{outline:none;border-color:var(--blue,#17289B);
  box-shadow:0 0 0 3px rgba(23,40,155,.18)}
.dr-login .dr-veld select[aria-invalid=true],
.dr-login .dr-veld textarea[aria-invalid=true]{border-color:#B3261E}
.dr-login .dr-veld__hint{font-size:14px;line-height:1.5;color:var(--muted,#5B6078);margin:2px 0 0}
.dr-login [hidden]{display:none !important}

.dr-login .dr-vinkje--breed{width:auto;align-items:flex-start;line-height:1.5}
.dr-login .dr-vinkje--breed input{margin-top:2px;flex:none}
.dr-login .dr-vinkje a{color:var(--blue,#17289B);text-decoration:underline}

.dr-login .dr-login__knop:disabled{opacity:.7;cursor:wait}

@media (max-width:560px){
  .dr-login .dr-veld__duo{grid-template-columns:1fr}
}

.dr-login .dr-login__melding--info{background:#EEF1FB;color:var(--ink,#1A1D2E);border-left:4px solid var(--blue,#17289B)}
.dr-login .dr-login__melding--info b{display:block;margin-bottom:2px}