/* Cleanzz Boekingsformulier */

.clz-wrap{
  --clz-groen:#8CE22B;
  --clz-zwart:#0B0C0B;
  --clz-paneel:#141714;
  --clz-lijn:#262B25;
  --clz-wit:#EDF2E8;
  --clz-grijs:#98A292;
  color:var(--clz-wit);
  font-size:17px;
  line-height:1.6;
  max-width:820px;
}

.clz-wrap *{box-sizing:border-box}

.clz-titel{
  font-size:clamp(28px,5vw,44px);
  line-height:1.05;
  margin:0 0 12px;
  color:var(--clz-wit);
  text-transform:uppercase;
  letter-spacing:.01em;
}
.clz-intro{color:var(--clz-grijs);margin:0 0 26px;max-width:60ch}

.clz-form{
  background:var(--clz-paneel);
  border:1px solid var(--clz-lijn);
  border-radius:18px;
  padding:30px;
}

.clz-veld{margin-bottom:18px}
.clz-label{
  display:block;
  font-size:14px;
  font-weight:600;
  margin-bottom:8px;
  color:var(--clz-wit);
}

.clz-form input[type="text"],
.clz-form input[type="tel"],
.clz-form input[type="date"],
.clz-form textarea{
  width:100%;
  background:var(--clz-zwart);
  border:1px solid var(--clz-lijn);
  border-radius:10px;
  color:var(--clz-wit);
  padding:13px 15px;
  font-family:inherit;
  font-size:16px;
}
.clz-form textarea{resize:vertical;min-height:96px}
.clz-form input:focus,
.clz-form textarea:focus{border-color:var(--clz-groen);outline:none}
.clz-form ::placeholder{color:#5F6A5B}

.clz-rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.clz-keuzes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.clz-keuze{position:relative;display:block;margin:0}
.clz-keuze input{position:absolute;opacity:0;width:0;height:0}
.clz-keuze span{
  display:block;
  border:1.5px solid var(--clz-lijn);
  border-radius:11px;
  padding:14px 16px;
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  background:var(--clz-zwart);
}
.clz-keuze span small{
  display:block;
  font-weight:500;
  color:var(--clz-grijs);
  font-size:13.5px;
  margin-top:3px;
}
.clz-keuze input:checked + span{
  border-color:var(--clz-groen);
  background:rgba(140,226,43,.1);
}
.clz-keuze input:focus-visible + span{outline:3px solid var(--clz-groen);outline-offset:2px}

.clz-upload{
  border:1.5px dashed var(--clz-lijn);
  border-radius:11px;
  padding:20px;
  text-align:center;
  color:var(--clz-grijs);
  font-size:14.5px;
}
.clz-upload p{margin:10px 0 0}
.clz-previews{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;justify-content:center}
.clz-previews img{
  width:74px;height:74px;object-fit:cover;
  border-radius:8px;border:1px solid var(--clz-lijn);
}

.clz-totaal{
  background:#1B1F1A;
  border-radius:11px;
  padding:16px 18px;
  margin:6px 0 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.clz-totaal b{font-size:26px;color:var(--clz-groen)}

.clz-knop{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--clz-groen);
  color:#07110A;
  font-weight:700;
  font-size:15px;
  font-family:inherit;
  padding:15px 26px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  transition:transform .12s ease,background .12s ease;
}
.clz-knop:hover{background:#9BF23A;transform:translateY(-2px)}
.clz-knop:disabled{opacity:.6;cursor:wait;transform:none}

.clz-klein{margin:14px 0 0;color:var(--clz-grijs);font-size:14px}
.clz-melding{margin:10px 0 0;font-size:14.5px;color:var(--clz-groen);min-height:1.2em}
.clz-melding.clz-fout{color:#FF8B6B}

.clz-form input.clz-mist,
.clz-form textarea.clz-mist{border-color:#FF8B6B}

@media(max-width:700px){
  .clz-rij,.clz-keuzes{grid-template-columns:1fr}
  .clz-form{padding:22px}
}

@media(prefers-reduced-motion:reduce){
  .clz-knop{transition:none}
}

/* Spamval, onzichtbaar voor bezoekers */
.clz-honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}