/* Klantmachine-formulier — huisstijl goedkopeloodgieters.nl (Flatsome, Lato, #446084) */
.km-blok {
  --km-accent: #446084;
  --km-accent-donker: #34506f;
  --km-inkt: #1f2f45;
  --km-inkt-zacht: #5b6b80;
  --km-lijn: #d9e1ec;
  --km-vlak: #f4f7fb;
  max-width: 600px;
  margin: 0 auto;
  font-family: inherit;
  color: var(--km-inkt);
  text-align: left;
  -webkit-text-size-adjust: 100%;
}
.km-blok *, .km-blok *::before, .km-blok *::after { box-sizing: border-box; }
.km-blok [hidden] { display: none !important; }

.km-form, .km-gelukt {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--km-lijn);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(31,47,69,.05), 0 12px 32px -16px rgba(31,47,69,.25);
}
.km-kop { display: flex; flex-direction: column; gap: 4px; }
.km-titel { margin: 0; font-size: 1.5em; line-height: 1.25; font-weight: 700; color: var(--km-inkt); }
.km-onder { margin: 0; font-size: .95em; line-height: 1.5; color: var(--km-inkt-zacht); }
.km-onder a, .km-klein a { color: var(--km-accent); font-weight: 600; }

.km-veld { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.km-label { font-size: .85em; font-weight: 700; color: var(--km-inkt); }
.km-label em { font-style: normal; font-weight: 400; color: var(--km-inkt-zacht); }

.km-blok input, .km-blok select, .km-blok textarea {
  width: 100%; margin: 0;
  padding: 11px 13px;
  font: inherit; font-size: 16px; line-height: 1.3;
  color: var(--km-inkt);
  background: var(--km-vlak);
  border: 1px solid var(--km-lijn);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
  appearance: none; -webkit-appearance: none;
  height: auto;
}
.km-blok textarea { resize: vertical; min-height: 84px; }
.km-blok select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b80' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  padding-right: 38px;
}
.km-blok input:hover, .km-blok select:hover, .km-blok textarea:hover { background: #fff; }
.km-blok input:focus, .km-blok select:focus, .km-blok textarea:focus {
  outline: none; background: #fff;
  border-color: var(--km-accent);
  box-shadow: 0 0 0 4px rgba(68,96,132,.16);
}
.km-blok input::placeholder, .km-blok textarea::placeholder { color: #8c9ab0; }
.km-blok [aria-invalid="true"] { border-color: #c05530; }

.km-rij { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 420px) { .km-rij { grid-template-columns: 1fr 1fr; } .km-rij-adres { grid-template-columns: 1.4fr 1fr; } }

.km-adres {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: -4px; padding: 9px 13px;
  font-size: .9em; color: var(--km-inkt);
  background: #eef6ef; border: 1px solid #cfe6d3; border-radius: 8px;
}
.km-adres-tekst::before { content: "✓ "; color: #2e7d4f; font-weight: 700; }
.km-adres-wijzig { border: 0; background: none; padding: 0; margin: 0; font: inherit; font-size: .85em; color: var(--km-accent); text-decoration: underline; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0; }

.km-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.km-knop {
  display: block; width: 100%; margin: 4px 0 0;
  padding: 15px 20px;
  font: inherit; font-size: 1.05em; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: #fff; background: var(--km-accent);
  border: 0; border-radius: 10px;
  cursor: pointer; box-shadow: none;
  transition: background-color .15s, transform .1s;
}
.km-knop:hover { background: var(--km-accent-donker); color: #fff; }
.km-knop:active { transform: translateY(1px); }
.km-knop[disabled] { opacity: .6; cursor: progress; }

.km-fout { margin: 0; padding: 10px 13px; font-size: .9em; color: #8f2f16; background: #fbeee9; border: 1px solid rgba(192,85,48,.35); border-radius: 8px; }
.km-klein { margin: 0; font-size: .8em; line-height: 1.5; color: var(--km-inkt-zacht); }

.km-gelukt { align-items: center; text-align: center; gap: 10px; padding: 40px 28px; }
.km-vink { display: grid; place-items: center; width: 52px; height: 52px; color: #2e7d4f; background: #e3f3e7; border-radius: 999px; }
.km-vink svg { width: 26px; height: 26px; }

@media (prefers-reduced-motion: reduce) { .km-blok * { transition: none !important; } }