/* =========================================================
   Offerteformulier (homepage + offerte.html)
   Eén kaart: soort werk kiezen, per onderdeel aanvinken + m²,
   optionele afwerking, daarna contactgegevens.
   ========================================================= */
.card.qf{
  display:block !important;
  width:min(100%,540px) !important;
  min-height:0;
  padding:34px 34px 30px;
  border-radius:22px;
  background:#fff;
  box-shadow:0 28px 70px rgba(10,30,38,.22);
}
.qf form{margin:0}
.qf-title{
  font-family:'Playfair Display',serif;
  font-size:34px;line-height:1.1;font-weight:700;
  color:#0c2934;margin:0 0 6px;
}
.qf-sub{margin:0 0 20px;color:#6f716d;font-size:16px}

/* Soort werk: tabbladen stucwerk / schilderwerk. Eén blok tegelijk zichtbaar;
   de teller laat zien hoeveel onderdelen per tabblad gekozen zijn. */
.qf-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0;
  padding:4px;border-radius:13px;background:#efebe5;
}
.qf-tab{
  height:44px;border-radius:10px;border:0;background:transparent;
  font:inherit;font-size:15px;font-weight:600;color:#5d625f;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s,color .15s,box-shadow .15s;
}
.qf-tab:hover{color:#0c2934}
.qf-tab[aria-selected="true"]{background:#0c2934;color:#fff;box-shadow:0 4px 12px rgba(12,41,52,.18)}
.qf-tab:focus-visible{outline:2px solid #d7a26f;outline-offset:2px}
.qf-count{
  min-width:22px;height:22px;padding:0 6px;border-radius:11px;box-sizing:border-box;
  display:inline-grid;place-items:center;font-size:12px;font-weight:700;line-height:1;
  background:#d7a26f;color:#0c2934;animation:qfPop .2s ease;
}
.qf-count[hidden]{display:none}
@keyframes qfPop{from{transform:scale(.6)}to{transform:scale(1)}}
.qf-tabs-hint{margin:8px 2px 12px;font-size:13px;color:#7b7d79}

/* Grijs blok per soort werk */
.qf-box{
  border:1px solid #e7e2db;border-radius:16px;background:#f6f3ef;
  padding:20px 22px 22px;margin:0 0 12px;min-width:0;
}
.qf-box[hidden]{display:none}
/* Het tabblad toont al de naam; de legend blijft alleen voor schermlezers. */
.qf-box-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0;margin:0}
.qf-head{clear:both;display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 8px;font-size:14px;color:#10212a}
.qf-head b{font-weight:700}
.qf-head em,.qf-head small{font-style:normal;color:#7b7d79}
.qf-head small{font-size:13px}

.qf-row{display:grid;grid-template-columns:1fr 150px;gap:12px;margin-bottom:10px}
.qf .qf-check{
  display:flex;align-items:center;gap:14px;margin:0;
  min-height:52px;padding:0 16px;border-radius:12px;
  border:1.5px solid #ddd8d1;background:#fff;
  font-size:16px;font-weight:600;color:#10212a;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.qf .qf-check em{font-style:normal;font-weight:400;color:#7b7d79}
.qf .qf-check input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.qf-label{min-width:0;line-height:1.2;padding:6px 0}
.qf-tick{
  width:26px;height:26px;border-radius:7px;border:1.5px solid #cdc8c1;background:#fff;flex:none;
  display:grid;place-items:center;transition:.15s;
}
.qf-tick:after{
  content:"";width:12px;height:7px;border:solid #fff;border-width:0 0 2.4px 2.4px;
  transform:translateY(-2px) rotate(-45deg);opacity:0;
}
.qf .qf-check:has(input:checked){background:#e9f0f1;border-color:#154d59}
.qf .qf-check input:checked + .qf-tick{background:#154d59;border-color:#154d59}
.qf .qf-check input:checked + .qf-tick:after{opacity:1}
.qf .qf-check input:focus-visible + .qf-tick{outline:2px solid #d7a26f;outline-offset:2px}

.qf .qf-m2{position:relative;display:block;margin:0}
.qf .qf-m2 input{
  height:52px;width:100%;margin:0;padding:0 46px 0 16px;border-radius:12px;
  border:1.5px solid #ddd8d1;background:#fff;font:inherit;font-size:16px;color:#10212a;
  -moz-appearance:textfield;
}
.qf .qf-m2 input::-webkit-outer-spin-button,.qf .qf-m2 input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qf .qf-m2 input:disabled{background:#fbfaf8;border-color:#ebe7e1;cursor:not-allowed}
.qf .qf-m2 input:disabled::placeholder{color:#c3c0bb}
.qf .qf-m2 span{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:15px;font-weight:600;color:#154d59;pointer-events:none;
}
.qf .qf-m2 input:disabled + span{color:#b9c6c8}

.qf-afw{margin-top:4px}
.qf-afw select{
  margin:10px 0 0;height:50px;width:100%;border-radius:12px;border:1.5px solid #ddd8d1;
  background:#fff;padding:0 14px;font:inherit;font-size:15px;color:#10212a;
}
.qf-afw select[hidden]{display:none}

/* Contactgegevens */
.qf-fields{display:grid;gap:12px;margin:16px 0 0}
.qf .qf-fields input{
  height:56px;width:100%;margin:0;padding:0 18px;border-radius:12px;
  border:1.5px solid #ddd8d1;background:#fff;font:inherit;font-size:16px;color:#10212a;
}
.qf .qf-fields input::placeholder{color:#8b8d89}
.qf input:focus,.qf select:focus{outline:none;border-color:#154d59;box-shadow:0 0 0 3px rgba(21,77,89,.14)}

.qf-error{display:none;color:#b23b3b;font-size:13px;margin:12px 0 0}
.qf-submit{
  width:100%;height:62px;margin-top:20px;border:0;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,#e2b07e,#d39a63);color:#0c2934;
  font:inherit;font-size:17px;font-weight:700;
  box-shadow:0 12px 26px rgba(211,154,99,.38);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.qf-submit:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 16px 30px rgba(211,154,99,.45)}
.qf-submit:disabled{cursor:default;transform:none;filter:none;opacity:.85}
.qf-note{margin:12px 0 0;text-align:center;font-size:13px;color:#7b7d79}

/* Twee stappen: voortgang, overzicht van de keuze, terugknop */
.qf-step[hidden]{display:none}
.qf-step{animation:qfIn .25s ease}
@keyframes qfIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.qf-step{animation:none}}

.qf-progress{height:4px;border-radius:4px;background:#eee9e2;overflow:hidden;margin:0 0 16px}
.qf-progress-bar{display:block;height:100%;width:50%;border-radius:4px;background:linear-gradient(90deg,#154d59,#d7a26f);transition:width .35s ease}
.qf-on-step2 .qf-progress-bar{width:100%}
.qf-step-tag{display:flex;gap:10px;align-items:center;margin:0 0 8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.qf-step-num{color:#b07a4a;font-weight:700}
.qf-step-name{color:#9a9894}
.qf-step-name:before{content:"·";margin-right:10px}

.qf .qf-next{margin-top:8px}
.qf-recap{border:1px solid #e7e2db;background:#f6f3ef;border-radius:14px;padding:14px 16px;margin:0 0 4px}
.qf-recap-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#0c2934;margin-bottom:6px}
.qf-recap-list{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.qf-recap-list li{background:#fff;border:1px solid #e1dcd5;border-radius:999px;padding:5px 11px;font-size:13px;color:#10212a}
.qf-back{background:none;border:0;padding:0;font:inherit;cursor:pointer;color:#154d59;font-weight:600;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.qf-back-link{display:block;margin:14px auto 0;text-decoration:none;color:#6f716d;font-weight:500}
.qf-back:hover{color:#0c2934}

@media (max-width:1200px){
  .card.qf{padding:28px 26px 24px}
  .qf-title{font-size:30px}
}
@media (max-width:520px){
  .card.qf{padding:24px 18px 20px;border-radius:18px}
  .qf-title{font-size:27px}
  .qf-sub{font-size:15px;margin-bottom:16px}
  .qf-box{padding:16px 14px 16px}
  .qf-row{grid-template-columns:1fr 112px;gap:8px}
  .qf .qf-check{padding:0 12px;gap:10px;font-size:15px}
  .qf .qf-m2 input{padding:0 38px 0 12px}
  .qf .qf-m2 span{right:12px}
  .qf-head small{display:none}
}
/* Kleine telefoons (320–380px): compacter, zodat het formulier niet breder
   wordt dan het scherm. */
@media (max-width:380px){
  .qf-row{grid-template-columns:minmax(0,1fr) 84px}
  .qf .qf-check{padding:0 10px;gap:8px;font-size:14px}
  .qf .qf-m2 input{padding:0 30px 0 10px}
  .qf .qf-m2 span{right:10px;font-size:13px}
  .qf-tab{font-size:14px}
}

/* Ontvangstbevestiging na geslaagde verzending */
.qf-success{padding:6px 0;color:#12313c;outline:none}.qf-success-icon{width:58px;height:58px;display:grid;place-items:center;background:#e8f1ea;color:#2c6852;border-radius:50%;font-size:29px;margin-bottom:24px}.qf-success-kicker{font:700 11px Arial,sans-serif;text-transform:uppercase;letter-spacing:2px;color:#a77444}.qf-success h2{font:400 32px/1.15 Georgia,serif;margin:12px 0 18px}.qf-success>p{font-size:15px;line-height:1.75}.qf-success-contact{background:#f4f1eb;border:1px solid #e6e0d5;border-radius:14px;padding:23px;margin:26px 0}.qf-success-contact h3{font:600 17px Arial,sans-serif;margin:0 0 10px}.qf-success-contact p{font-size:13px;line-height:1.6}.qf-success-contact a{display:block;color:#12313c;font-size:17px;font-weight:600;margin:12px 0;overflow-wrap:anywhere}.qf-success-contact a:hover{text-decoration:underline}.qf-success-contact address{font-style:normal;font-size:13px;line-height:1.7;margin:19px 0 10px}.qf-success-contact small{font-size:12px;color:#66787b}.qf-success .qf-success-sign{font:italic 23px Georgia,serif;color:#ac7849}@media(max-width:480px){.qf-success h2{font-size:28px}.qf-success-contact{padding:18px}}