/* VDZ OS, de gedeelde opmaak van inloggen, aanmelden en het goedkeuringspaneel. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800;900&display=swap');

:root{
  --groen:#009664;
  --donkergroen:#006B47;
  --inkt:#0D131F;
  --logogroen:#46B27B;
  --zacht:#F3FBF7;
  --lijn:#E3EDE8;
  --grijs:#6B7A74;
  --rood:#B4231C;
  --rood-zacht:#FDF0EF;
  --groen-zacht:#EAF8F1;
  --r:14px;
}

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

body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--zacht);
  color:var(--inkt);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
  position:relative;
  overflow-x:hidden;
}

/* Het beeldmerk zacht op de achtergrond, twee hoeken. */
body::before,body::after{
  content:'';
  position:fixed;
  width:min(46vw,460px);
  height:min(46vw,460px);
  background:url('/assets/vdz-beeldmerk.jpg') no-repeat center/contain;
  opacity:.07;
  pointer-events:none;
  z-index:0;
}
body::before{top:-9%;right:-9%}
body::after{bottom:-9%;left:-9%;transform:rotate(180deg)}

.kaart{
  position:relative;
  z-index:1;
  width:100%;
  max-width:400px;
  background:#fff;
  border:1px solid var(--lijn);
  border-radius:var(--r);
  box-shadow:0 1px 2px rgba(13,19,31,.04),0 12px 40px rgba(13,19,31,.07);
  padding:38px 34px 30px;
}
.kaart.breed{max-width:720px}

.logo{display:block;width:172px;height:auto;margin:0 auto 22px}

h1{
  font-size:1.06rem;
  font-weight:800;
  letter-spacing:-.01em;
  text-align:center;
  margin-bottom:5px;
}
.onder{
  text-align:center;
  font-size:.83rem;
  color:var(--grijs);
  line-height:1.5;
  margin-bottom:26px;
}

label{
  display:block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--grijs);
  margin-bottom:6px;
}
.veld{margin-bottom:15px}

input{
  width:100%;
  font:inherit;
  font-size:.92rem;
  padding:11px 13px;
  border:1.5px solid var(--lijn);
  border-radius:10px;
  background:#fff;
  color:var(--inkt);
  transition:border-color .15s,box-shadow .15s;
}
input::placeholder{color:#A9B5B0}
input:focus{
  outline:none;
  border-color:var(--groen);
  box-shadow:0 0 0 3px rgba(0,150,100,.12);
}
input:disabled{background:var(--zacht);color:var(--grijs)}

button{
  font:inherit;
  font-weight:600;
  cursor:pointer;
  border:none;
  border-radius:10px;
  transition:background .15s,opacity .15s;
}
.knop{
  width:100%;
  background:var(--donkergroen);
  color:#fff;
  font-size:.92rem;
  padding:12px;
  margin-top:8px;
}
.knop:hover:not(:disabled){background:#00583A}
.knop:disabled{opacity:.55;cursor:not-allowed}

.tekstknop{
  background:none;
  color:var(--groen);
  font-size:.83rem;
  padding:0;
}
.tekstknop:hover{text-decoration:underline}

.melding{
  font-size:.84rem;
  line-height:1.55;
  padding:11px 13px;
  border-radius:10px;
  margin-bottom:18px;
  display:none;
}
.melding.fout{background:var(--rood-zacht);color:var(--rood);border:1px solid #F3D6D4;display:block}
.melding.goed{background:var(--groen-zacht);color:var(--donkergroen);border:1px solid #C9E9DA;display:block}
.melding.let{background:#FFF8E8;color:#7A5A08;border:1px solid #F0E2BC;display:block}

.wissel{
  text-align:center;
  font-size:.83rem;
  color:var(--grijs);
  margin-top:18px;
}
.wissel a{color:var(--groen);font-weight:600;text-decoration:none}
.wissel a:hover{text-decoration:underline}

.voet{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid var(--lijn);
  text-align:center;
  font-size:.72rem;
  line-height:1.6;
  color:#9AA8A2;
}
.voet a{color:var(--groen);text-decoration:none}

/* Het slotje, voor het vertrouwen. */
.slot{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:.7rem;
  color:#9AA8A2;
  margin-top:14px;
}
.slot svg{width:11px;height:11px;flex:none}

@media(max-width:480px){
  .kaart{padding:30px 22px 24px}
  body::before,body::after{opacity:.05}
}