/* KSP formulieren: huisstijl, mobile-first */
.ksp-form{
  --kf-ink:#221A12;--kf-mut:#6A5C4C;--kf-field:#F7F1E6;--kf-line:#D9CBAE;
  --kf-gold:#C9A24B;--kf-gold-300:#E3C780;--kf-label:#221A12;--kf-err:#B3402B;
  font-family:var(--body,'Inter',system-ui,-apple-system,'Segoe UI',sans-serif);
  text-align:left;color:var(--kf-ink);
}
.ksp-form--donker{--kf-label:#F0E8DA;--kf-mut:#C3B49C;--kf-err:#F2A38F}
.ksp-form *{box-sizing:border-box}

.ksp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.ksp-field{position:relative}
.ksp-field.full{grid-column:1/-1}
.ksp-field label{display:block;margin-bottom:6px;font-size:13.5px;font-weight:600;color:var(--kf-label)}
.ksp-opt{font-weight:400;color:var(--kf-mut)}

.ksp-form input[type=text],
.ksp-form input[type=tel],
.ksp-form input[type=email],
.ksp-form select,
.ksp-form textarea{
  display:block;width:100%;min-height:50px;padding:12px 14px;margin:0;
  font:inherit;font-size:16px;line-height:1.4;color:var(--kf-ink);
  background:var(--kf-field);border:1.5px solid var(--kf-line);border-radius:12px;
  box-shadow:none;transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;
}
.ksp-form textarea{min-height:112px;resize:vertical}
.ksp-form select{
  padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5l6 6 6-6' stroke='%23A8842F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.ksp-form input:focus,
.ksp-form select:focus,
.ksp-form textarea:focus{outline:none;border-color:var(--kf-gold);box-shadow:0 0 0 4px rgba(201,162,75,.28)}
.ksp-form ::placeholder{color:#9A8B76;opacity:1}

.ksp-err{display:none;margin-top:5px;font-size:13px;line-height:1.4;color:var(--kf-err)}
.has-err .ksp-err{display:block}
.has-err input,.has-err select,.has-err textarea{border-color:var(--kf-err)}

.ksp-consent{display:flex;gap:10px;align-items:flex-start;margin-top:4px}
.ksp-consent input[type=checkbox]{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--kf-gold);cursor:pointer}
.ksp-consent label{margin:0;font-size:13.5px;font-weight:400;line-height:1.5;color:var(--kf-mut);cursor:pointer}
.ksp-consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ksp-field.consent .ksp-err{margin-left:32px}

.ksp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:54px;margin-top:8px;padding:0 28px;border:0;border-radius:999px;cursor:pointer;
  font:700 16px/1 var(--body,'Inter',system-ui,sans-serif);color:#241A08;
  background:linear-gradient(135deg,var(--kf-gold-300),var(--kf-gold));
  box-shadow:0 10px 26px rgba(201,162,75,.32);
  transition:transform .2s,box-shadow .2s,opacity .2s;
}
.ksp-btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(201,162,75,.42)}
.ksp-btn:focus-visible{outline:3px solid var(--kf-gold-300);outline-offset:3px}
.ksp-btn[disabled]{opacity:.65;cursor:progress;transform:none}

.ksp-status{margin-top:12px;font-size:14px;line-height:1.5;color:var(--kf-mut)}
.ksp-status.is-error{color:var(--kf-err);font-weight:600}
.ksp-trust{margin:12px 0 0;text-align:center;font-size:13px;color:var(--kf-mut)}

.ksp-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.ksp-success{padding:26px 8px;text-align:center;color:var(--kf-label)}
.ksp-success .ksp-ok{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--kf-gold-300),var(--kf-gold))}
.ksp-success .ksp-ok svg{width:30px;height:30px;stroke:#241A08;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.ksp-success h3{margin:0 0 8px;font-family:var(--display,Georgia,serif);font-size:24px;font-weight:600;color:var(--kf-label)}
.ksp-success p{margin:0;font-size:15.5px;line-height:1.6;color:var(--kf-mut)}

@media(min-width:560px){.ksp-btn{width:auto;min-width:240px}.ksp-form--donker .ksp-btn{width:100%}}
@media(prefers-reduced-motion:reduce){.ksp-btn,.ksp-form input,.ksp-form select,.ksp-form textarea{transition:none}.ksp-btn:hover{transform:none}}

/* compactere variant voor in de hero */
.ksp-form--donker .ksp-grid{gap:12px}
.ksp-form--donker input[type=text],
.ksp-form--donker input[type=tel],
.ksp-form--donker input[type=email],
.ksp-form--donker select{min-height:46px;padding-top:10px;padding-bottom:10px}
.ksp-form--donker textarea{min-height:84px}
.ksp-form--donker .ksp-field label{margin-bottom:5px}

/* WhatsApp-knop: desktop met label, mobiel alleen icoon */
.ksp-wa{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:9999;
  display:inline-flex;align-items:center;gap:12px;padding:7px 22px 7px 7px;border-radius:999px;
  background:#1B120B;border:1px solid rgba(201,162,75,.45);color:#F0E8DA;text-decoration:none;
  font:600 15px/1 var(--body,'Inter',system-ui,-apple-system,'Segoe UI',sans-serif);
  box-shadow:0 12px 30px rgba(0,0,0,.32);transition:transform .2s,box-shadow .2s;
  animation:ksp-wa-in .5s ease 1.2s both;
}
.ksp-wa:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.38);color:#F0E8DA}
.ksp-wa:focus-visible{outline:3px solid #E3C780;outline-offset:3px}
.ksp-wa-ic{position:relative;flex:none;width:46px;height:46px;border-radius:50%;background:#25D366;display:grid;place-items:center}
.ksp-wa-ic svg{width:26px;height:26px;fill:#fff}
.ksp-wa-ic::after{content:"";position:absolute;inset:0;border-radius:50%;animation:ksp-wa-pulse 2.6s infinite;pointer-events:none}
.ksp-wa-label{white-space:nowrap}
@keyframes ksp-wa-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes ksp-wa-in{from{opacity:0}to{opacity:1}}
@media(max-width:700px){
  .ksp-wa{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));padding:0;gap:0;background:none;border:0;box-shadow:none}
  .ksp-wa-ic{width:58px;height:58px;box-shadow:0 10px 26px rgba(0,0,0,.32)}
  .ksp-wa-ic svg{width:32px;height:32px}
  .ksp-wa-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.ksp-wa{animation:none}.ksp-wa-ic::after{animation:none}.ksp-wa:hover{transform:none}}

/* service en aanhuis */
.ksp-form .ksp-extra{padding:12px 14px;border:1.5px solid var(--kf-line);border-radius:12px}
.ksp-form.ksp-form--donker .ksp-extra{border-color:rgba(201,162,75,.4);background:rgba(255,255,255,.04)}
.ksp-form .ksp-extra label{font-size:14.5px;line-height:1.4;color:var(--kf-label)}
.ksp-price{font-weight:700;color:#A8842F}
.ksp-form--donker .ksp-price{color:var(--kf-gold-300)}
.ksp-sub{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--kf-mut)}

/* bedrag onder het keuzemenu */
.ksp-form .ksp-hint{margin-top:6px;font-size:13.5px;font-weight:600;line-height:1.4;color:#7A5F1F}
.ksp-form.ksp-form--donker .ksp-hint{color:var(--kf-gold-300)}
.ksp-form .ksp-hint:empty{display:none}

/* brede indeling voor in een hero (data-layout="breed") */
.ksp-form--breed .ksp-btn{display:flex;width:100%;max-width:380px;margin:16px auto 0;min-height:58px;font-size:17px}
.ksp-form--breed .ksp-status{text-align:center}
@media(min-width:900px){
  .ksp-form--breed .ksp-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:14px 16px}
  .ksp-form.ksp-form--breed .ksp-field{grid-column:span 4}
  .ksp-form.ksp-form--breed .ksp-field[data-field="merk"],
  .ksp-form.ksp-form--breed .ksp-field[data-field="model"],
  .ksp-form.ksp-form--breed .ksp-field[data-field="type"],
  .ksp-form.ksp-form--breed .ksp-field[data-field="service"]{grid-column:span 3}
  .ksp-form.ksp-form--breed .ksp-field[data-field="bericht"]{grid-column:span 8}
  .ksp-form.ksp-form--breed .ksp-field[data-field="aanhuis"]{grid-column:span 4;align-self:end}
  .ksp-form.ksp-form--breed .ksp-field[data-field="consent"]{grid-column:1/-1}
}