/* ==========================================================================
   Offerteformulier DC Elektro Service – Contact Form 7
   Plaats dit bestand in je child theme: /wp-content/themes/<child-theme>/css/offerteformulier.css
   ========================================================================== */

.ofs {
  --ofs-green: #0f7845;        /* huisstijl groen */
  --ofs-green-dark: #0a502e;
  --ofs-green-light: #eef8f2;
    --ofs-dark: #303030;
  --ofs-muted: #5c6660;
  --ofs-line: #dfe5e1;
  --ofs-bg: #ffffff;
  --ofs-error: #c62828;
  --ofs-radius: 8px;
  color: var(--ofs-dark);
  font-family: inherit;        /* neemt het lettertype van de website over */
}
.ofs *,
.ofs *::before,
.ofs *::after { box-sizing: border-box; }

/* ---------- Voortgang ---------- */
.ofs-progress {
  display: flex;
  justify-content: space-between;
  gap: .25rem;
  list-style: none;
  margin: 0 0 .75rem;
  padding: 0;
}
.ofs-progress li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin: 0;
  font-size: .85rem;
  color: var(--ofs-muted);
  text-align: center;
}
.ofs-progress li::before { content: none; } /* voorkomt bolletjes uit het thema */
.ofs-dot {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid var(--ofs-line);
  border-radius: 50%;
  background: var(--ofs-bg);
  font-weight: 700;
  transition: background .2s, border-color .2s, color .2s;
}
.ofs-progress li.is-active { color: var(--ofs-dark); font-weight: 700; }
.ofs-progress li.is-active .ofs-dot { border-color: var(--ofs-green); background: var(--ofs-green); color: #fff; }
.ofs-progress li.is-done .ofs-dot { border-color: var(--ofs-green); color: var(--ofs-green); }
.ofs-progress li.is-skipped { opacity: .35; }

.ofs-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ofs-line);
}
.ofs-bar-fill {
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--ofs-green), #1f9a5c);
  transition: width .35s ease;
}
.ofs-counter { margin: .5rem 0 1.5rem; font-size: .85rem; color: var(--ofs-muted); }

/* ---------- Stappen ---------- */
.ofs-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.ofs-step:not(.is-current) { display: none; }
.ofs-step legend {
  margin-bottom: 1rem;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ofs-green);
}
.ofs-hint { margin: -.5rem 0 1.25rem; color: var(--ofs-muted); }

/* ---------- Raster en velden ---------- */
.ofs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.ofs-full,
.ofs-sub,
.ofs-grid > [data-class="wpcf7cf_group"] { grid-column: 1 / -1; } /* geneste groep (bestaande panelen) over de volle breedte */
.ofs-field { display: flex; flex-direction: column; gap: .35rem; margin: 0; }
.ofs-label { font-size: .95rem; font-weight: 700; line-height: 1.3; }
.ofs-req { color: var(--ofs-error); }

.ofs input[type="text"],
.ofs input[type="email"],
.ofs input[type="tel"],
.ofs input[type="number"],
.ofs input[type="date"],
.ofs select,
.ofs textarea {
  width: 100%;
  margin: 0;
  padding: .8rem .9rem;
  border: 1px solid var(--ofs-line);
  border-radius: var(--ofs-radius);
  background: var(--ofs-bg);
  color: var(--ofs-dark);
  font: inherit;
  font-size: 16px; /* voorkomt inzoomen op iPhone */
  line-height: 1.4;
  min-height: 3.1rem;
  transition: border-color .15s, box-shadow .15s;
}
.ofs textarea { min-height: 7rem; resize: vertical; }
.ofs input:focus,
.ofs select:focus,
.ofs textarea:focus {
  outline: none;
  border-color: var(--ofs-green);
  box-shadow: 0 0 0 3px rgba(15, 120, 69, .18);
}
.ofs ::placeholder { color: #9aa49e; }

/* ---------- Keuzerondjes en vinkjes ---------- */
.ofs .wpcf7-list-item { display: block; margin: 0 0 .5rem; }
.ofs .wpcf7-list-item label { display: flex; align-items: center; gap: .6rem; cursor: pointer; line-height: 1.3; }
.ofs .wpcf7-list-item-label { line-height: 1.3; }
.ofs .wpcf7-radio .wpcf7-list-item { display: inline-block; margin: 0 1.25rem .25rem 0; }
.ofs input[type="checkbox"],
.ofs input[type="radio"] {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  accent-color: var(--ofs-green);
}

/* Diensten (stap 1) als aanklikbare tegels */
.ofs-checks .wpcf7-checkbox { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; }
.ofs-checks .wpcf7-list-item {
  margin: 0;
  padding: .8rem .9rem;
  border: 1px solid var(--ofs-line);
  border-radius: var(--ofs-radius);
  background: var(--ofs-bg);
  transition: border-color .15s, background .15s;
}
.ofs-checks .wpcf7-list-item:hover { border-color: var(--ofs-green); }
.ofs-checks .wpcf7-list-item:has(input:checked) {
  border-color: var(--ofs-green);
  background: var(--ofs-green-light);
  font-weight: 700;
}
.ofs-checks .wpcf7-free-text { width: 100%; margin-top: .6rem; }

/* ---------- Blokken met vervolgvragen ---------- */
.ofs-block {
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--ofs-line);
  border-left: 4px solid var(--ofs-green);
  border-radius: var(--ofs-radius);
  background: #fbfdfc;
}
.ofs-block h3 { margin: 0 0 1rem; font-size: 1.15rem; color: var(--ofs-green); }
.ofs-sub {
  padding: 1rem;
  border-radius: var(--ofs-radius);
  background: var(--ofs-green-light);
}

/* ---------- Upload (Drag and Drop Multiple File Upload) ---------- */
.ofs .codedropz-upload-wrapper { margin: 0; }
.ofs .codedropz-upload-handler {
  border: 2px dashed var(--ofs-line);
  border-radius: var(--ofs-radius);
  background: var(--ofs-bg);
  transition: border-color .15s, background .15s;
}
.ofs .codedropz-upload-handler:hover { border-color: var(--ofs-green); background: var(--ofs-green-light); }
.ofs .codedropz-btn-wrap a.cd-upload-btn { color: var(--ofs-green); font-weight: 700; }

/* ---------- Toestemming ---------- */
.ofs-consent { padding: .9rem 1rem; border-radius: var(--ofs-radius); background: var(--ofs-green-light); font-size: .9rem; }
.ofs-consent .wpcf7-list-item { margin: 0; }
.ofs-consent .wpcf7-list-item label { align-items: flex-start; }
.ofs-consent a { color: var(--ofs-green); text-decoration: underline; }

/* ---------- Knoppen ----------
   Kleur, vorm en grootte komen uit de thema-classes (btn l_btn color_2 / color_3).
   Hier alleen de plaatsing. */
.ofs-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.ofs-nav .ofs-next,
.ofs-nav .ofs-submit { margin-left: auto; cursor: pointer; }
.ofs-nav .ofs-prev { cursor: pointer; }
.ofs-nav .ofs-submit:disabled { opacity: .5; cursor: not-allowed; } /* tot toestemming is aangevinkt */
.ofs .wpcf7-spinner { align-self: center; }

/* ---------- Foutmeldingen en bevestiging ---------- */
.ofs-invalid input,
.ofs-invalid select,
.ofs-invalid textarea { border-color: var(--ofs-error); }
.ofs-error,
.ofs .wpcf7-not-valid-tip { color: var(--ofs-error); font-size: .85rem; }
.ofs.is-sent { display: none; }
.wpcf7 form.sent .wpcf7-response-output {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.5rem;
  border: 0;
  border-left: 4px solid var(--ofs-green);
  border-radius: var(--ofs-radius);
  background: var(--ofs-green-light);
  color: var(--ofs-dark);
  font-weight: 700;
}

/* ---------- Mobiel ---------- */
@media (max-width: 640px) {
  .ofs-grid,
  .ofs-checks .wpcf7-checkbox { grid-template-columns: 1fr; }
  .ofs-txt { display: none; }
  .ofs-progress li.is-active .ofs-txt { display: block; }
  .ofs-step legend { font-size: 1.2rem; }
  .ofs-block { padding: 1rem; }
  .ofs-nav { flex-direction: column-reverse; }
  .ofs-nav .btn { width: 100%; margin: 0; }
}