/*
 * Aanmeldformulier (v10.1) — paneel in de stijl van Typeform, in de huisstijl.
 */
.mdc-tf[hidden], .mdc-tf [hidden]{ display:none !important; }
.mdc-tf{ position:fixed; inset:0; z-index:100000; }
html.mdc-tf-open, html.mdc-tf-open body{ overflow:hidden; }

.mdc-tf__achter{
  position:absolute; inset:0;
  background:rgba(60,45,40,.38);
  opacity:0; transition:opacity .4s var(--ease, ease);
}
.mdc-tf.is-open .mdc-tf__achter{ opacity:1; }

.mdc-tf__paneel{
  position:absolute; top:0; left:0; bottom:0;
  width:min(720px, 100vw);
  background:var(--bg, #F8F3EF);
  box-shadow:12px 0 50px -20px rgba(60,40,30,.45);
  transform:translateX(-102%);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.mdc-tf.is-open .mdc-tf__paneel{ transform:none; }

.mdc-tf__voortgang{ position:absolute; top:0; left:0; right:0; height:4px; background:var(--rose-tint, #F1E5E0); z-index:2; }
.mdc-tf__voortgang span{ display:block; height:100%; width:0; background:var(--rose, #9E7F70); transition:width .5s var(--ease, ease); }

.mdc-tf__sluit{
  position:absolute; top:14px; right:14px; z-index:3;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--rose-border, #CBB0AA); background:var(--surface, #fff);
  color:var(--rose, #9E7F70); font-size:1.6rem; line-height:1; cursor:pointer;
}
.mdc-tf__sluit:hover{ background:var(--rose-tint, #F1E5E0); }

.mdc-tf__scherm{
  position:relative; flex:1 1 auto; overflow-y:auto; overflow-x:hidden;
  padding:clamp(4.5rem, 12vh, 7rem) clamp(1.5rem, 6vw, 4.5rem) 6rem;
  -webkit-overflow-scrolling:touch;
}
.mdc-tf__stap{
  max-width:34rem;
  transition:opacity .32s var(--ease, ease), transform .32s var(--ease, ease);
}
.mdc-tf__stap.is-midden{ margin-top:4vh; }
.mdc-tf__stap.is-in-onder{ opacity:0; transform:translateY(40px); }
.mdc-tf__stap.is-in-boven{ opacity:0; transform:translateY(-40px); }
.mdc-tf__stap.is-weg-op,
.mdc-tf__stap.is-weg-neer{ position:absolute; left:clamp(1.5rem, 6vw, 4.5rem); right:clamp(1.5rem, 6vw, 4.5rem); opacity:0; pointer-events:none; }
.mdc-tf__stap.is-weg-op{ transform:translateY(-50px); }
.mdc-tf__stap.is-weg-neer{ transform:translateY(50px); }

.mdc-tf__nummer{ font-family:var(--font-head, Roboto, Arial, sans-serif); font-size:.95rem; color:var(--rose-light, #B08B82); margin-bottom:.4rem; }
.mdc-tf__nummer span{ font-size:.85em; }
.mdc-tf__titel{
  font-family:var(--font-head, Roboto, Arial, sans-serif);
  font-weight:400; font-size:clamp(1.35rem, 2.6vw, 1.75rem); line-height:1.3;
  color:var(--rose, #9E7F70); margin:0 0 .6rem;
}
.mdc-tf__titel--groot{ font-size:clamp(1.7rem, 3.4vw, 2.3rem); margin-bottom:1rem; }
.mdc-tf__ster{ color:var(--rose-light, #B08B82); }
.mdc-tf__uitleg{ color:var(--text-soft, #8A8582); font-size:1rem; line-height:1.65; margin:0 0 .8rem; }

.mdc-tf__veld{
  display:block; width:100%; box-sizing:border-box;
  margin:1.4rem 0 .4rem; padding:.45rem 0;
  font:inherit; font-size:1.3rem; color:var(--text, #666563);
  background:transparent; border:0; border-bottom:1.5px solid var(--rose-border, #CBB0AA);
  border-radius:0; outline:none; resize:none;
  transition:border-color .25s;
}
.mdc-tf__veld::placeholder{ color:#c7b7b1; }
.mdc-tf__veld:focus{ border-bottom-color:var(--rose, #9E7F70); }
.mdc-tf__veld--lang{ line-height:1.5; min-height:2.4em; }
.mdc-tf__anders{ margin-top:.8rem; font-size:1.1rem; }

.mdc-tf__fout{ color:#A45248; font-size:.9rem; margin:.6rem 0 0; }

.mdc-tf__okrij{ display:flex; align-items:center; gap:1rem; margin-top:1.6rem; flex-wrap:wrap; }
.mdc-tf__ok{
  font-family:var(--font-body, "Open Sans", Arial, sans-serif);
  font-size:.92rem; font-weight:600; letter-spacing:.06em;
  padding:.85em 1.8em; border-radius:999px; cursor:pointer;
  background:var(--rose, #9E7F70); color:#fff; border:1px solid var(--rose, #9E7F70);
  transition:background .3s, transform .3s;
}
.mdc-tf__ok:hover{ background:var(--rose-light, #B08B82); transform:translateY(-1px); }
.mdc-tf__ok:disabled{ opacity:.6; cursor:wait; transform:none; }
.mdc-tf__ok--omlijnd{ background:transparent; color:var(--rose, #9E7F70); margin-top:1.4rem; }
.mdc-tf__ok--omlijnd:hover{ color:#fff; }
.mdc-tf__hint{ font-size:.8rem; color:var(--text-soft, #8A8582); }

.mdc-tf__keuzes{ display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; margin-top:1.4rem; }
.mdc-tf__keuze{
  display:flex; align-items:center; gap:.8rem;
  min-width:min(22rem, 100%); max-width:100%;
  padding:.6rem 1rem .6rem .6rem; text-align:left;
  font:inherit; font-size:1rem; color:var(--text, #666563);
  background:rgba(241,229,224,.55); border:1px solid var(--rose-border, #CBB0AA); border-radius:10px;
  cursor:pointer; transition:background .2s, border-color .2s;
}
.mdc-tf__keuze:hover{ background:var(--rose-tint, #F1E5E0); }
.mdc-tf__letter{
  flex:0 0 auto; display:grid; place-items:center;
  width:1.6rem; height:1.6rem; border-radius:5px;
  border:1px solid var(--rose-border, #CBB0AA); background:var(--surface, #fff);
  font-size:.75rem; font-weight:600; color:var(--rose, #9E7F70);
}
.mdc-tf__keuze.is-gekozen{ background:var(--rose-tint, #F1E5E0); border-color:var(--rose, #9E7F70); box-shadow:inset 0 0 0 1px var(--rose, #9E7F70); }
.mdc-tf__keuze.is-gekozen .mdc-tf__letter{ background:var(--rose, #9E7F70); color:#fff; border-color:var(--rose, #9E7F70); }
.mdc-tf__keuze.is-gekozen::after{ content:"✓"; margin-left:auto; padding-left:.6rem; color:var(--rose, #9E7F70); }
@keyframes mdc-tf-knipper{ 0%,100%{ opacity:1; } 30%{ opacity:.45; } 60%{ opacity:1; } }
.mdc-tf__keuze.is-knipper{ animation:mdc-tf-knipper .45s ease; }

.mdc-tf__schaal{ display:grid; grid-template-columns:repeat(10, minmax(0,1fr)); gap:.4rem; margin-top:1.4rem; }
.mdc-tf__getal{
  padding:.75rem 0; font:inherit; font-size:1rem; color:var(--rose, #9E7F70);
  background:rgba(241,229,224,.55); border:1px solid var(--rose-border, #CBB0AA); border-radius:8px; cursor:pointer;
  transition:background .2s;
}
.mdc-tf__getal:hover{ background:var(--rose-tint, #F1E5E0); }
.mdc-tf__getal.is-gekozen{ background:var(--rose, #9E7F70); color:#fff; border-color:var(--rose, #9E7F70); }
.mdc-tf__schaallabels{ display:flex; justify-content:space-between; gap:1rem; margin-top:.5rem; font-size:.8rem; color:var(--text-soft, #8A8582); }

.mdc-tf__hart{ width:3.6rem; height:3.6rem; border-radius:50%; background:var(--rose-tint, #F1E5E0); display:grid; place-items:center; margin-bottom:1.2rem; }
.mdc-tf__hart svg{ width:1.7rem; height:1.7rem; fill:none; stroke:var(--rose, #9E7F70); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; animation:mdc-zweef 3.6s ease-in-out infinite; }

.mdc-tf__nav{ position:absolute; right:18px; bottom:18px; display:flex; gap:2px; z-index:3; }
.mdc-tf__pijl{
  width:40px; height:36px; border:0; cursor:pointer;
  background:var(--rose, #9E7F70); color:#fff;
}
.mdc-tf__pijl:first-child{ border-radius:8px 0 0 8px; }
.mdc-tf__pijl:last-child{ border-radius:0 8px 8px 0; }
.mdc-tf__pijl svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mdc-tf__pijl:disabled{ opacity:.35; cursor:default; }

.mdc-tf__pot{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }

@media (max-width:600px){
  .mdc-tf__scherm{ padding:4.2rem 1.4rem 5.5rem; }
  .mdc-tf__schaal{ grid-template-columns:repeat(5, minmax(0,1fr)); }
  .mdc-tf__keuze{ min-width:100%; }
  .mdc-tf__veld{ font-size:1.15rem; }
}
@media (prefers-reduced-motion: reduce){
  .mdc-tf__paneel, .mdc-tf__achter, .mdc-tf__stap, .mdc-tf__voortgang span{ transition:none !important; }
  .mdc-tf__hart svg, .mdc-tf__keuze.is-knipper{ animation:none !important; }
}