/* ============================================================
   VLOERSCH — OFFERTE STAPPENFORMULIER
   Pas hieronder eenvoudig de merkkleuren aan.
   ============================================================ */
#vloersch-offerte-app{
  /* ---------- Huisstijl Vloersch ---------- */
  --ink:      #3b332b;   /* hoofdkleur — tekst & knoppen        */
  --ink-soft: #6f665b;   /* secundaire tekst                     */
  --hover:    #e0d8cb;   /* hoverkleur                           */
  --bone:     #f8f5f0;   /* lichte vlakken & invoervelden        */
  --concrete: #e0d8cb;   /* randen                               */
  --accent:   #3b332b;   /* actieve staten & focus               */
  --white:    #ffffff;
  --error:    #b3402e;
  --ok:       #3d6b4f;
  --radius: 14px;
  --shadow: 0 10px 30px -12px rgba(59,51,43,.14);
}
#vloersch-offerte-app, #vloersch-offerte-app *{ box-sizing:border-box; margin:0; padding:0; }
#vloersch-offerte-app{
  font-family:inherit;   /* neemt het bodyfont van het Avada-thema over */
  color:var(--ink);
  line-height:1.6;
}
#vloersch-offerte-app input, #vloersch-offerte-app textarea,
#vloersch-offerte-app select, #vloersch-offerte-app button{
  font-family:inherit;
}
#vloersch-offerte-app .vlo-form{ max-width:1000px; margin:0 auto; }

/* ---------- kop ---------- */
#vloersch-offerte-app .vlo-head{ text-align:left; margin-bottom:28px; }
#vloersch-offerte-app .vlo-eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px;
}
#vloersch-offerte-app .vlo-head h2{
  font-size:clamp(26px,4.5vw,38px); font-weight:800; letter-spacing:-.02em; line-height:1.12;
}
#vloersch-offerte-app .vlo-head p{ color:var(--ink-soft); margin-top:10px; max-width:70ch; }

/* ---------- voortgang: "gietvloer"-balk ---------- */
#vloersch-offerte-app .vlo-progress{ margin:26px 0 18px; }
#vloersch-offerte-app .vlo-progress-meta{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:8px;
}
#vloersch-offerte-app .vlo-progress-meta strong{ color:var(--ink); font-weight:700; }
#vloersch-offerte-app .vlo-progress-track{
  height:8px; border-radius:99px; background:var(--concrete);
  overflow:hidden; position:relative;
}
#vloersch-offerte-app .vlo-progress-fill{
  height:100%; width:0%;
  background:var(--ink);
  border-radius:99px;
  transition:width .6s cubic-bezier(.6,0,.2,1);
  position:relative;
}
#vloersch-offerte-app .vlo-progress-fill::after{ /* subtiele glans, als vers gegoten vloer */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.35), transparent 55%);
  border-radius:99px;
}

/* ---------- kaart ---------- */
#vloersch-offerte-app .vlo-card{
  background:var(--white); border:1px solid var(--concrete);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:clamp(22px,4vw,36px);
}

/* ---------- stappen ---------- */
#vloersch-offerte-app .vlo-step{ display:none; animation:vloIn .35s ease both; }
#vloersch-offerte-app .vlo-step.is-active{ display:block; }
@keyframes vloIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  #vloersch-offerte-app .vlo-step{ animation:none; }
  #vloersch-offerte-app .vlo-progress-fill{ transition:none; }
}
#vloersch-offerte-app .vlo-step h3{ font-size:clamp(19px,3vw,23px); margin:0; }
#vloersch-offerte-app .vlo-step .vlo-sub{ color:var(--ink-soft); font-size:15px; margin-top:6px; margin-bottom:22px; }

/* ---------- velden ---------- */
#vloersch-offerte-app .vlo-field{ margin-bottom:20px; }
#vloersch-offerte-app .vlo-label{ display:block; font-weight:600; font-size:15px; margin-bottom:8px; }
#vloersch-offerte-app .vlo-hint{ font-size:13px; color:var(--ink-soft); margin-top:6px; }
#vloersch-offerte-app .vlo-optional{ font-weight:500; color:var(--ink-soft); font-size:13px; }
#vloersch-offerte-app input[type=text], #vloersch-offerte-app input[type=email], #vloersch-offerte-app input[type=tel], #vloersch-offerte-app input[type=number], #vloersch-offerte-app input[type=date], #vloersch-offerte-app textarea, #vloersch-offerte-app select{
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:var(--bone); border:1.5px solid var(--concrete); border-radius:10px;
  padding:12px 14px; transition:border-color .15s, box-shadow .15s;
}
#vloersch-offerte-app textarea{ min-height:110px; resize:vertical; }
#vloersch-offerte-app input:focus, #vloersch-offerte-app textarea:focus, #vloersch-offerte-app select:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.vlo-field.has-error input,.vlo-field.has-error textarea,
#vloersch-offerte-app .vlo-field.has-error .vlo-choice-grid, #vloersch-offerte-app .vlo-field.has-error .vlo-check-grid{
  border-color:var(--error);
}
#vloersch-offerte-app .vlo-error{ display:none; color:var(--error); font-size:13px; font-weight:600; margin-top:6px; }
#vloersch-offerte-app .vlo-field.has-error .vlo-error{ display:block; }
#vloersch-offerte-app .vlo-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ #vloersch-offerte-app .vlo-grid-2{ grid-template-columns:1fr; } }

/* ---------- grote keuzekaarten (stap 1) ---------- */
#vloersch-offerte-app .vlo-choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; border-radius:12px; }
@media (max-width:560px){ #vloersch-offerte-app .vlo-choice-grid{ grid-template-columns:1fr; } }
#vloersch-offerte-app .vlo-choice{ position:relative; }
#vloersch-offerte-app .vlo-choice input{ position:absolute; opacity:0; pointer-events:none; }
#vloersch-offerte-app .vlo-choice label{
  display:block; cursor:pointer; padding:20px 18px;
  background:var(--bone); border:1.5px solid var(--concrete); border-radius:12px;
  transition:border-color .15s, background .15s, transform .1s;
}
#vloersch-offerte-app .vlo-choice label:hover{ border-color:var(--ink); background:color-mix(in srgb, var(--hover) 45%, var(--white)); }
#vloersch-offerte-app .vlo-choice input:focus-visible + label{ outline:3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset:2px; }
#vloersch-offerte-app .vlo-choice input:checked + label{
  border-color:var(--ink); background:color-mix(in srgb, var(--hover) 50%, var(--white));
}
#vloersch-offerte-app .vlo-choice .t{ font-weight:700; font-size:16px; display:block; }
#vloersch-offerte-app .vlo-choice .d{ font-size:13.5px; color:var(--ink-soft); margin-top:4px; display:block; }

/* ---------- chips (checkboxen / radio's) ---------- */
#vloersch-offerte-app .vlo-check-grid{ display:flex; flex-wrap:wrap; gap:10px; border-radius:12px; }
#vloersch-offerte-app .vlo-chip{ position:relative; }
#vloersch-offerte-app .vlo-chip input{ position:absolute; opacity:0; pointer-events:none; }
#vloersch-offerte-app .vlo-chip label{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:10px 16px; font-size:14.5px; font-weight:600;
  background:var(--bone); border:1.5px solid var(--concrete); border-radius:99px;
  transition:all .15s;
}
#vloersch-offerte-app .vlo-chip label:hover{ border-color:var(--ink); background:var(--hover); }
#vloersch-offerte-app .vlo-chip input:focus-visible + label{ outline:3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset:2px; }
#vloersch-offerte-app .vlo-chip input:checked + label{
  background:var(--ink); border-color:var(--ink); color:var(--white);
}

/* ---------- vloerkaarten met foto (2 kolommen) ---------- */
#vloersch-offerte-app .vlo-floor-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:16px 18px; }
@media (max-width:600px){ #vloersch-offerte-app .vlo-floor-grid{ grid-template-columns:1fr; } }
#vloersch-offerte-app .vlo-floor{ position:relative; }
#vloersch-offerte-app .vlo-floor input{ position:absolute; opacity:0; pointer-events:none; }
#vloersch-offerte-app .vlo-floor label{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:8px 12px 8px 8px; background:var(--white);
  border:1.5px solid var(--concrete); border-radius:12px;
  transition:border-color .15s, background .15s;
}
#vloersch-offerte-app .vlo-floor label:hover{ border-color:var(--ink); background:color-mix(in srgb, var(--hover) 45%, var(--white)); }
#vloersch-offerte-app .vlo-floor input:focus-visible + label{ outline:3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset:2px; }
#vloersch-offerte-app .vlo-floor input:checked + label{
  border-color:var(--ink); background:color-mix(in srgb, var(--hover) 50%, var(--white));
}
#vloersch-offerte-app .vlo-floor .thumb{
  flex:none; width:56px; height:56px; border-radius:9px; overflow:hidden;
  background:linear-gradient(135deg, #dcd8d0, #b6b0a4);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; color:var(--white); letter-spacing:.02em;
}
#vloersch-offerte-app .vlo-floor .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
#vloersch-offerte-app .vlo-floor .name{ font-weight:600; font-size:14.5px; line-height:1.3; flex:1; }
#vloersch-offerte-app .vlo-floor .check{
  flex:none; width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--concrete); display:flex; align-items:center; justify-content:center;
  color:transparent; transition:all .15s;
}
#vloersch-offerte-app .vlo-floor input:checked + label .check{
  background:var(--accent); border-color:var(--accent); color:var(--white);
}

/* ---------- collectie-groepen ---------- */
#vloersch-offerte-app .vlo-collection{ border:1.5px solid var(--concrete); border-radius:12px; margin-bottom:14px; overflow:hidden; }
#vloersch-offerte-app .vlo-collection summary{
  list-style:none; cursor:pointer; padding:16px 18px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-weight:700; background:var(--bone);
}
#vloersch-offerte-app .vlo-collection summary::-webkit-details-marker{ display:none; }
#vloersch-offerte-app .vlo-collection summary .d{ display:block; font-weight:500; font-size:13.5px; color:var(--ink-soft); margin-top:3px; }
#vloersch-offerte-app .vlo-collection summary .arrow{ flex:none; transition:transform .2s; color:var(--ink-soft); }
#vloersch-offerte-app .vlo-collection[open] summary .arrow{ transform:rotate(180deg); }
#vloersch-offerte-app .vlo-collection .vlo-check-grid{ padding:16px 18px; }

/* ---------- upload ---------- */
#vloersch-offerte-app .vlo-drop{
  border:2px dashed var(--concrete); border-radius:12px; background:var(--bone);
  padding:26px 18px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
}
#vloersch-offerte-app .vlo-drop:hover, #vloersch-offerte-app .vlo-drop.is-drag{ border-color:var(--ink); background:color-mix(in srgb, var(--hover) 55%, var(--white)); }
#vloersch-offerte-app .vlo-drop:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset:2px; }
#vloersch-offerte-app .vlo-drop svg{ color:var(--accent); margin-bottom:8px; }
#vloersch-offerte-app .vlo-drop .t{ font-weight:700; font-size:15px; }
#vloersch-offerte-app .vlo-drop .d{ font-size:13px; color:var(--ink-soft); margin-top:3px; }
#vloersch-offerte-app .vlo-drop input{ display:none; }
#vloersch-offerte-app .vlo-files{ list-style:none; margin-top:10px; display:flex; flex-direction:column; gap:8px; }
#vloersch-offerte-app .vlo-files li{
  display:flex; align-items:center; gap:10px; font-size:13.5px;
  background:var(--white); border:1px solid var(--concrete); border-radius:8px; padding:8px 12px;
}
#vloersch-offerte-app .vlo-files .name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
#vloersch-offerte-app .vlo-files .size{ color:var(--ink-soft); flex:none; }
#vloersch-offerte-app .vlo-files button{
  flex:none; border:0; background:none; color:var(--error); font-weight:700; cursor:pointer;
  font-size:16px; line-height:1; padding:4px;
}

/* ---------- samenvatting ---------- */
#vloersch-offerte-app .vlo-summary{
  background:var(--bone); border:1px solid var(--concrete); border-radius:12px;
  padding:18px; margin-bottom:22px; font-size:14.5px;
}
#vloersch-offerte-app .vlo-summary h3{ font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); margin-bottom:10px; }
#vloersch-offerte-app .vlo-summary dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; }
#vloersch-offerte-app .vlo-summary dt{ color:var(--ink-soft); font-weight:600; }
#vloersch-offerte-app .vlo-summary dd{ font-weight:600; }

/* ---------- consent ---------- */
#vloersch-offerte-app .vlo-consent{ display:flex; gap:10px; align-items:flex-start; font-size:14px; }
#vloersch-offerte-app .vlo-consent input{ width:18px; height:18px; margin-top:2px; accent-color:var(--accent); flex:none; }
#vloersch-offerte-app .vlo-consent a{ color:var(--ink); font-weight:600; text-decoration:underline; }

/* ---------- navigatie ---------- */
#vloersch-offerte-app .vlo-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:28px; }
#vloersch-offerte-app .vlo-btn{
  font:inherit; font-weight:700; font-size:15px; cursor:pointer;
  border-radius:99px; padding:13px 28px; border:1.5px solid transparent;
  transition:background .15s, color .15s, border-color .15s, transform .1s;
}
#vloersch-offerte-app .vlo-btn:active{ transform:scale(.98); }
#vloersch-offerte-app .vlo-btn-primary{ background:var(--ink); color:var(--white); }
#vloersch-offerte-app .vlo-btn-primary:hover{ background:var(--hover); color:var(--ink); }
#vloersch-offerte-app .vlo-btn-ghost{ background:transparent; color:var(--ink-soft); border-color:var(--concrete); }
#vloersch-offerte-app .vlo-btn-ghost:hover{ border-color:var(--ink); color:var(--ink); }
#vloersch-offerte-app .vlo-btn:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset:2px; }
#vloersch-offerte-app .vlo-btn[disabled]{ opacity:.55; cursor:wait; }

/* ---------- honeypot (onzichtbaar voor mensen) ---------- */
#vloersch-offerte-app .vlo-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* ---------- succes ---------- */
#vloersch-offerte-app .vlo-success{ display:none; text-align:center; padding:30px 10px; }
#vloersch-offerte-app .vlo-success.is-active{ display:block; animation:vloIn .4s ease both; }
#vloersch-offerte-app .vlo-success .ring{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  background:color-mix(in srgb, var(--ok) 12%, var(--white));
  display:flex; align-items:center; justify-content:center; color:var(--ok);
}
#vloersch-offerte-app .vlo-success h3{ font-size:24px; margin:0; }
#vloersch-offerte-app .vlo-success p{ color:var(--ink-soft); margin-top:10px; max-width:46ch; margin-inline:auto; }

#vloersch-offerte-app .vlo-formerror{
  display:none; margin-top:16px; padding:12px 16px; border-radius:10px;
  background:color-mix(in srgb, var(--error) 9%, var(--white));
  border:1px solid color-mix(in srgb, var(--error) 35%, transparent);
  color:var(--error); font-size:14px; font-weight:600;
}
#vloersch-offerte-app .vlo-formerror.is-active{ display:block; }