/* DCM Lead Machine — shared UI for presets:
   - Default
   - HKV Delta look

   (Minimal uses assets/dcm-lm-minimal.css)
*/

/* Preset tokens */
.dcm-lm--preset-default{
  /* Try to inherit a site's primary/accent (block themes + many builders) */
  --dcm-lm-accent: var(--wp--preset--color--primary, var(--e-global-color-primary, #2563eb));
  --dcm-lm-accent-contrast: #fff;
  --dcm-lm-surface: #fff;
  --dcm-lm-surface-2: #f8fafc;
  --dcm-lm-border: rgba(0,0,0,.10);
  --dcm-lm-text-muted: rgba(0,0,0,.65);

  /* Tiles should look consistent even if a theme styles <button> aggressively */
  --dcm-lm-tile-bg: #f3f4f6;
  --dcm-lm-tile-fg: #0f172a;
  --dcm-lm-tile-bg-selected: #e5e7eb;
  --dcm-lm-tile-fg-selected: #0f172a;
}
.dcm-lm--preset-hkv_delta{
  /* HKV/Delta teal look (consistent across themes) */
  --dcm-lm-accent: #14b8a6;
  --dcm-lm-accent-contrast: #fff;
  --dcm-lm-surface: #fff;
  --dcm-lm-surface-2: #f3faf9;
  --dcm-lm-border: rgba(0,0,0,.14);
  --dcm-lm-text-muted: rgba(0,0,0,.65);

  /* HKV tiles = light grey pills with outline (matches handelskredietverzekering.nl look) */
  --dcm-lm-tile-bg: #f3f4f6;
  --dcm-lm-tile-fg: #0f172a;
  --dcm-lm-tile-bg-selected: #f3f4f6;
  --dcm-lm-tile-fg-selected: #0f172a;
}

/* HKV preset: keep question title size as on HKV site */
.dcm-lm--preset-hkv_delta .dcm-lm-question{
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.2;
}

/* Some themes (notably Elementor themes) apply aggressive global <button> styles.
   Enforce HKV preset tile styling so selected tiles don't become grey with white text
   and unselected tiles don't inherit theme fills. */
.dcm-lm--preset-hkv_delta .dcm-lm-tile{
  background: var(--dcm-lm-tile-bg) !important;
  color: var(--dcm-lm-tile-fg) !important;
  border-color: var(--dcm-lm-border) !important;
}
.dcm-lm--preset-hkv_delta .dcm-lm-tile.is-selected,
.dcm-lm--preset-hkv_delta .dcm-lm-tile[aria-pressed="true"]{
  background: var(--dcm-lm-tile-bg-selected) !important;
  color: var(--dcm-lm-tile-fg-selected) !important;
  border-color: currentColor !important;
}
.dcm-lm {
  margin: 18px 0;
  width: 100%;
  max-width: 820px; /* prettig bij ~1200px content layouts */
  margin-left: auto;
  margin-right: auto;
}
.dcm-lm-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 28px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}
.dcm-lm-header{
  display:block;
  border-bottom:1px solid rgba(0,0,0,.06);
  padding-bottom: 14px; margin-bottom: 14px;
}
/* Hide 'Lead-machine' kicker across tools (requested) */
.dcm-lm-kicker{ display:none; }
.dcm-lm-title{ margin: 4px 0 4px 0; font-size: clamp(20px, 2.2vw, 28px) !important; line-height: 1.2 !important; }
.dcm-lm-subtitle{ margin:0; opacity:.85; max-width: 52ch; }

.dcm-lm-progress{ width: 100%; }

/* Progress row placed above the question (moved by JS) */
.dcm-lm-progress-inline{
  margin: 18px 0 18px 0;
}
.dcm-lm-progressbar{
  width: 100%;
  height: 10px;
  border-radius:999px;
  background: rgba(0,0,0,.10);
  overflow:hidden;
}
.dcm-lm-progressfill{ display:block; height:100%; background: currentColor; opacity:.85; width:0%; }
.dcm-lm-progressmeta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:16px;
  font-weight:700;
  opacity:.85;
  margin: 0 0 10px 0;
}

.dcm-lm-body{ min-height: 220px; }
.dcm-lm-step{ padding: 4px 0 0 0; }
.dcm-lm-question{ font-size: clamp(18px, 2vw, 22px); margin: 0 0 10px 0; line-height: 1.25; }

/* Elementor (en sommige thema’s) zetten H3 groottes via een hogere selector (bijv. .elementor-kit-XX h3).
   Voor Default/Minimal forceren we daarom de vraag-titel binnen de plugin.
   (Delta HKV Look heeft z’n eigen preset-regel en blijft leidend.) */
.dcm-lm--preset-default .dcm-lm-step h3.dcm-lm-question,
.dcm-lm--preset-minimal .dcm-lm-step h3.dcm-lm-question{
  font-size: clamp(18px, 2vw, 22px) !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.25 !important;
}
.dcm-lm-help{ margin: 10px 0 0 0; font-size: 13px; opacity:.75; }

/* Text/radio inputs (used when question type is set to Input/Radio in admin) */
.dcm-lm-textwrap{ max-width: 520px; }
.dcm-lm-text{ width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--dcm-lm-border); background: #fff; font-size: 1.05rem; }
.dcm-lm-radiolist{ display:flex; flex-direction:column; gap:10px; }
.dcm-lm-radioitem{ display:flex; gap:12px; align-items:center; padding: 14px 16px; border:1px solid var(--dcm-lm-border); border-radius: 12px; background: var(--dcm-lm-surface-2); cursor:pointer; }
.dcm-lm-radioitem input{ margin:0; }

.dcm-lm-tiles{ display:flex; flex-direction:column; gap:10px; }
.dcm-lm-tile{
  text-align:left;
  border:1px solid var(--dcm-lm-border) !important;
  background: var(--dcm-lm-tile-bg, rgba(0,0,0,.02)) !important;
  color: var(--dcm-lm-tile-fg, inherit) !important;
  min-height: 64px;
  padding: 18px 20px;
  border-radius: 999px;
  font-size: 1.08rem;
  font-weight: 650;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.dcm-lm-tile:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.06); }
.dcm-lm-tile.is-active{
  border-color: currentColor !important;
  background: var(--dcm-lm-tile-bg-selected, rgba(0,0,0,.03)) !important;
  color: var(--dcm-lm-tile-fg-selected, inherit) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.dcm-lm-tile-label{ font-weight: 650; }

.dcm-lm-footer{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  border-top:1px solid rgba(0,0,0,.06);
  padding-top: 14px; margin-top: 14px;
}
.dcm-lm-footer-right{ display:flex; gap:16px; align-items:center; }
.dcm-lm-validation{ font-size: 13px; opacity:.85; }
.dcm-lm-btn{
  border-radius: 999px;
  padding: 16px 28px;
  border: 0;
  background: rgba(0,0,0,.02);
  cursor:pointer;
  font-size: 1.05rem;
  font-weight: 800;
}
.dcm-lm-btn:disabled{ opacity:.45; cursor:not-allowed; }
.dcm-lm-btn--ghost{ background: transparent; }

/* Buttons */
.dcm-lm .dcm-lm-btn.dcm-lm-prev,
.dcm-lm .dcm-lm-btn.dcm-lm-btn--ghost{
  background: var(--dcm-lm-muted, #e5e7eb);
  color: var(--dcm-lm-text, #0f172a);
}

.dcm-lm .dcm-lm-btn.dcm-lm-next{
  background: var(--dcm-lm-accent, #14b8a6);
  color: var(--dcm-lm-accent-contrast, #ffffff);
  font-weight: 800;
}

@media (hover:hover){
  .dcm-lm .dcm-lm-btn.dcm-lm-next:hover{ filter: brightness(1.05); }
  .dcm-lm .dcm-lm-btn.dcm-lm-btn--ghost:hover,
  .dcm-lm .dcm-lm-btn.dcm-lm-prev:hover{ filter: brightness(0.98); }
}

.dcm-lm .dcm-lm-btn:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--dcm-lm-accent, #14b8a6) 40%, transparent);
  outline-offset: 3px;
}

/* Preset differences */
.dcm-lm--preset-default .dcm-lm-btn.dcm-lm-next{
  background: transparent;
  color: var(--dcm-lm-accent, #2563eb);
  border: 2px solid var(--dcm-lm-accent, #2563eb);
}
.dcm-lm--preset-default .dcm-lm-btn.dcm-lm-next:hover{
  background: color-mix(in srgb, var(--dcm-lm-accent, #2563eb) 10%, transparent);
}

.dcm-lm--preset-hkv_delta .dcm-lm-btn.dcm-lm-next{
  border: 0;
}

.dcm-lm-formgrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 640px){
  .dcm-lm-header{ display:block; }
  .dcm-lm-formgrid{ grid-template-columns: 1fr; }
}

.dcm-lm-field{ display:flex; flex-direction:column; gap:6px; }
/* Extra spacing only for the Contact message field */
.dcm-lm[data-tool="contact"] .dcm-lm-field--message{ margin-top:10px; }
.dcm-lm-field-label{ font-size: 13px; opacity:.8; }
.dcm-lm-req{ color: #c00; }
.dcm-lm-input{
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid rgba(0,0,0,.14);
  background: #fff;
  font: inherit;
}

.dcm-lm-result{ margin-top: 14px; }
.dcm-lm-result--hidden{ display:none; }
.dcm-lm-resultcard{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  border-radius: 14px;
  padding: 14px 14px;
}
.dcm-lm-badge{ display:inline-block; font-size:12px; opacity:.8; padding:4px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.12); }
.dcm-lm-resulth{ margin: 10px 0 8px 0; font-size: 18px; }
.dcm-lm-resultlist{ margin: 0 0 10px 18px; }
.dcm-lm-note{ margin: 8px 0 0 0; opacity:.85; }
.dcm-lm-formnote{ margin: 10px 0 0 0; font-size:13px; opacity:.85; }
.dcm-lm-cta{ margin-top: 12px; padding-top: 10px; border-top:1px solid rgba(0,0,0,.10); }
.dcm-lm-cta h4{ margin: 0 0 8px 0; font-size: 14px; }
.dcm-lm-disclaimer{ margin: 10px 0 0 0; font-size: 12px; opacity:.7; }

/* =========================================================
   Resultaat-template headings (bescherm tegen theme overrides)
   ========================================================= */

/* Sommige thema's (o.a. Elementor) geven extreem grote H1/H2's.
   Omdat de resultaat-template HTML is (admin-beheerbaar), zetten
   we hier veilige, consistente heading-sizes binnen het resultaatblok. */

.dcm-lm .dcm-lm-result h1,
.dcm-lm .dcm-lm-result h2{
  font-size: clamp(22px, 2.0vw, 32px);
  line-height: 1.15;
  margin: 10px 0 12px;
}

.dcm-lm .dcm-lm-result h3{
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.25;
  margin: 14px 0 10px;
}

.dcm-lm .dcm-lm-result h4{
  font-size: 16px;
  line-height: 1.3;
  margin: 12px 0 8px;
}

@media (max-width: 782px){
  .dcm-lm .dcm-lm-result h1,
  .dcm-lm .dcm-lm-result h2{ font-size: 24px; }
}


/* ===== Number input step (Risicoscan v2) ===== */
.dcm-lm-numberwrap{
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-top: 12px;
}
.dcm-lm-number{
  width: 100%;
  padding: 16px 56px 16px 18px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  font-size: 1.08rem;
  font-weight: 650;
  outline: none;
  background: #fff;
}
.dcm-lm-number:focus{
  border-color: var(--wp--preset--color--teal, #00A6A6);
  box-shadow: 0 0 0 4px rgba(0,166,166,.12);
}
.dcm-lm-inputsuffix{
  position:absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  opacity: .7;
}
.dcm-lm-help{
  margin: 10px 0 0 0;
  font-size: 0.95rem;
  opacity: .75;
}

/* Mobile: full width & comfy sizing */
@media (max-width:782px){
  .dcm-lm{ max-width: 100%; }
  .dcm-lm .dcm-lm-card{ padding: 18px 16px; }
  .dcm-lm .dcm-lm-tile{
    min-height: 58px;
    padding: 16px 16px;
    font-size: 1.02rem;
  }
  .dcm-lm .dcm-lm-btn{ width: 100%; padding: 16px 18px; }
}


/* Select + Range controls */
.dcm-lm .dcm-lm-select{
  width: 100%;
  max-width: 520px;
  padding: 14px 14px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  font-size: 1rem;
  background: #fff;
}

.dcm-lm .dcm-lm-range__top{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.dcm-lm .dcm-lm-range__input{
  width:100%;
  margin: 6px 0 6px;
}

.dcm-lm .dcm-lm-range__minmax{
  display:flex;
  justify-content: space-between;
  font-size: .9rem;
  opacity: .75;
}


/* v0.3.85: ensure range input is full width (browser default is narrow) */
.dcm-lm .dcm-lm-range,
.dcm-lm .dcm-lm-range input[type="range"]{
  width: 100%;
  max-width: none;
  display: block;
}


/* Range slider tick marks/labels (based on snap points) */
.dcm-lm-range__ticks{
  position: relative;
  width: 100%;
  height: 22px;
  margin-top: 8px;
}
.dcm-lm-range__ticks .dcm-lm-tick{
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
.dcm-lm-range__ticks .dcm-lm-tickmark{
  display: block;
  width: 1px;
  height: 8px;
  background: rgba(100,116,139,0.6);
  margin: 0 auto;
}
.dcm-lm-range__ticks .dcm-lm-ticklabel{
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
}


/* v0.3.93: vertical (single-page) layout */
.dcm-lm--vertical .dcm-lm-progress { display:none !important; }
.dcm-lm--vertical .dcm-lm-prev { display:none !important; }
.dcm-lm--vertical .dcm-lm-steptext, 
.dcm-lm--vertical .dcm-lm-steptotal { display:none !important; }
.dcm-lm--vertical .dcm-lm-body { padding-top: 0; }
.dcm-lm--vertical .dcm-lm-step--vertical { margin-bottom: 18px; }
.dcm-lm--vertical .dcm-lm-leadgrid /* deprecated */ { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px){
  .dcm-lm--vertical .dcm-lm-leadgrid /* deprecated */ { grid-template-columns: 1fr; }
}
.dcm-lm--vertical .dcm-lm-ticks { position: relative; height: 22px; margin-top: 8px; }


/* v0.3.95: vertical form should visually match wizard */
.dcm-lm--vertical .dcm-lm-footer{
  justify-content: flex-end;
}
.dcm-lm--vertical .dcm-lm-next{
  margin-left: auto;
}
.dcm-lm--vertical .dcm-lm-step--vertical .dcm-lm-question{
  margin: 0 0 10px 0;
}
.dcm-lm--vertical .dcm-lm-vertical-answer{
  margin-bottom: 6px;
}


/* Range slider labels (min/max) aligned left/right */
.dcm-lm .dcm-lm-range-labels{
  display:flex;
  justify-content:space-between;
  width:100%;
  gap:12px;
  margin-top:6px;
  font-size:13px;
  color:#64748b;
}
.dcm-lm .dcm-lm-range-labels .dcm-lm-range-max{
  margin-left:auto;
  text-align:right;
}


/* Privacy consent checkbox */
.dcm-lm-privacy{margin:12px 0 6px;}
.dcm-lm-privacy-label{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.35;color:inherit;}
.dcm-lm-privacy-checkbox{margin-top:2px; width:14px; height:14px; transform: translateY(1px); }
.dcm-lm-privacy a{text-decoration:underline;}




@media (max-width: 768px){
  /* Mobile: make privacy consent easier to tap */
  .dcm-lm-privacy-label{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding:8px 6px;
    border-radius:10px;
    line-height:1.35;
  }
  .dcm-lm-privacy-checkbox{
    width:20px;
    height:20px;
    flex:0 0 20px;
    transform: translateY(1px);
  }
}
/* Contact tool message textarea + full-width fields */
.dcm-lm-field--full { grid-column: 1 / -1; }
.dcm-lm-textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.4;
  padding-top: 10px;
}