/*  Maatwerk klant 1175 — Rekenhulp verzuimkosten.
    Alleen actief op de pagina waar [custom:verzuim-rekentool] staat; raakt geen andere klant.

    KLEUREN — hier staat geen enkele kleurcode, op wit na en op zwart/wit met transparantie voor
    haarlijnen en gedempte tekst. Al het overige komt uit de --brand-*-variabelen die
    Views/Shared/_SiteLayout.cshtml per site zet op basis van de drie kleuren uit het dashboard.
    Bewust NIET --base-color: die bestaat alleen in de Crafto-templates en is in business1 de
    steunkleur, dus bij een sjabloonwissel zou de tool op een noodkleur terugvallen.

    --brand-primary is de kleur zoals de klant hem koos (voor vlakken), --brand-ink diezelfde kleur
    automatisch donker genoeg om als tekst op wit leesbaar te zijn. Gebruik --brand-ink zodra het
    tekst is, anders is een lichte huisstijl onleesbaar.

    RONDINGEN volgen de klantinstelling via --wf-radius-*. Die variabelen bestaan alleen als de klant
    er een waarde voor koos; de terugval erachter is Crafto's eigen maat.  */

/* ── losmaken van de template ─────────────────────────────────────────────
   De tool staat middenin de pagina-inhoud, en templates versieren koppen daar op hun eigen manier:
   business1 zet met .biz-page-body h2::before een streepje boven élke h2 en overschrijft kleur en
   marge. Binnen de rekenhulp voeren we onze eigen hiërarchie, dus die regels zetten we terug. De
   dubbele klasse in de selector is er alleen om boven die template-regel uit te komen. */
.wf-vz .wf-vz-titel::before,
.wf-vz .wf-vz-titel::after,
.wf-vz .wf-vz-vervolg-titel::before,
.wf-vz .wf-vz-vervolg-titel::after { content: none; display: none; }

.wf-vz .wf-vz-titel,
.wf-vz .wf-vz-vervolg-titel { color: var(--brand-ink); text-transform: none; letter-spacing: -.015em; }
.wf-vz .wf-vz-titel { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; margin: 0 0 12px; }
.wf-vz .wf-vz-intro { margin: 0; }
.wf-vz p { margin: 0; }

/* ── kader ────────────────────────────────────────────────────────────── */
.wf-vz {
  --wf-vz-lijn: rgba(0, 0, 0, .10);
  --wf-vz-gedempt: rgba(0, 0, 0, .58);
  background: #fff;
  border: 1px solid var(--wf-vz-lijn);
  border-radius: var(--wf-radius-card, 14px);
  padding: clamp(22px, 4vw, 40px);
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--wf-vz-gedempt);
}
.wf-vz-kop { margin-bottom: 26px; }
.wf-vz-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 14px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--brand-primary) 12%, #fff);
  color: var(--brand-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── invoervelden ─────────────────────────────────────────────────────── */
/*  auto-fit met een minimum van 200px: op een breed scherm staan de vier velden naast elkaar, op een
    tablet twee bij twee en op een telefoon onder elkaar — zonder losse breekpunten. */
.wf-vz-velden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px 20px;
}
.wf-vz-veld { display: flex; flex-direction: column; }
.wf-vz-veld-smal { max-width: 280px; }
.wf-vz-label {
  margin-bottom: 6px;
  color: var(--brand-ink);
  font-size: 14px;
  font-weight: 600;
}
.wf-vz-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--wf-vz-lijn);
  border-radius: var(--wf-radius-input, 10px);
  background: #fff;
  color: var(--brand-ink);
  font-family: inherit;
  font-size: 16px;   /* 16px voorkomt dat iOS bij focus inzoomt */
  font-weight: 600;
  line-height: 1.4;
  transition: border-color .35s ease, box-shadow .35s ease;
}
.wf-vz-input:hover { border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent); }
.wf-vz-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}
/*  Fout-staat wordt door de JavaScript gezet, niet door :invalid — anders kleurt een veld al rood
    terwijl iemand nog aan het typen is. */
.wf-vz-input.is-fout { border-color: #dc3545; }
.wf-vz-input.is-fout:focus { box-shadow: 0 0 0 3px rgba(220, 53, 69, .18); }

/*  Het euroteken en het procentteken staan IN het veld in plaats van in het label: zo blijft het
    label leesbaar als zin en ziet de bezoeker meteen in welke eenheid hij typt. */
.wf-vz-prefix-wrap, .wf-vz-suffix-wrap { position: relative; display: flex; align-items: center; }
.wf-vz-prefix, .wf-vz-suffix {
  position: absolute;
  color: var(--wf-vz-gedempt);
  font-size: 15px;
  font-weight: 600;
  pointer-events: none;
}
.wf-vz-prefix { left: 14px; }
.wf-vz-suffix { right: 14px; }
.wf-vz-input-prefix { padding-left: 30px; }
.wf-vz-input-suffix { padding-right: 32px; }

.wf-vz-hint { margin-top: 5px; font-size: 12.5px; line-height: 1.45; color: var(--wf-vz-gedempt); }

/* ── aannames ─────────────────────────────────────────────────────────── */
.wf-vz-aannames { margin-top: 20px; border-top: 1px solid var(--wf-vz-lijn); padding-top: 16px; }
.wf-vz-aannames-kop {
  cursor: pointer;
  color: var(--brand-ink);
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .35s ease;
}
.wf-vz-aannames-kop::-webkit-details-marker { display: none; }
.wf-vz-aannames-kop::before {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .35s ease;
}
.wf-vz-aannames[open] .wf-vz-aannames-kop::before { transform: rotate(-135deg); }
.wf-vz-aannames-kop:hover { color: var(--brand-primary); }
.wf-vz-aannames-body { padding-top: 16px; display: grid; gap: 14px; }
.wf-vz-aannames-tekst { font-size: 13.5px; line-height: 1.55; }
.wf-vz-aannames-tekst strong { color: var(--brand-ink); }

/* ── uitkomst ─────────────────────────────────────────────────────────── */
.wf-vz-uitkomst {
  margin-top: 26px;
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--wf-radius-card, 14px);
  background: color-mix(in srgb, var(--brand-primary) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, transparent);
}
.wf-vz-stappen { display: grid; gap: 10px; }
.wf-vz-stap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 14%, transparent);
}
.wf-vz-stap-label { font-size: 14px; }
.wf-vz-stap-waarde { color: var(--brand-ink); font-size: 16px; font-weight: 700; }
/*  De som zelf mag kleiner en rustiger: hij is er om na te rekenen, niet om te lezen als kop. */
.wf-vz-stap-som { border-bottom: 0; padding-bottom: 0; }
.wf-vz-som { font-size: 13.5px; font-weight: 600; opacity: .85; }

.wf-vz-bedrag-blok { margin-top: 22px; }
.wf-vz-bedrag-label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.wf-vz-bedrag {
  display: block;
  color: var(--brand-ink);
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.wf-vz-waarschuwing {
  margin-top: 14px !important;
  padding: 10px 14px;
  border-radius: var(--wf-radius-input, 10px);
  background: rgba(220, 53, 69, .08);
  color: #a4222b;
  font-size: 14px;
  font-weight: 600;
}
.wf-vz-kleine-letters { margin-top: 16px !important; font-size: 12.5px; line-height: 1.5; }

/* ── vervolgstap: offerte aanvragen ───────────────────────────────────── */
.wf-vz-vervolg {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--wf-vz-lijn);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}
.wf-vz-vervolg-titel { font-size: 18px; line-height: 1.3; margin: 0 0 4px; }
.wf-vz-vervolg-tekst { font-size: 14px; }
.wf-vz-knop {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  border: 0;
  border-radius: var(--wf-radius-button, 10px);
  background: var(--brand-primary);
  color: var(--brand-on-primary, #fff) !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .35s ease, transform .35s ease;
}
.wf-vz-knop:hover { background: color-mix(in srgb, var(--brand-primary) 84%, #000); transform: translateY(-2px); }
.wf-vz-knop-pijl { transition: transform .35s ease; }
.wf-vz-knop:hover .wf-vz-knop-pijl { transform: translateX(3px); }

/* ── donkere modus ────────────────────────────────────────────────────── */
/*  De templates van deze klant kennen een donkere variant. Zonder deze regels bleef de tool een wit
    vlak middenin een donkere pagina. Kleuren blijven uit de huisstijl komen; alleen de ondergrond en
    de leeskleur draaien om. */
[data-bs-theme="dark"] .wf-vz {
  --wf-vz-lijn: rgba(255, 255, 255, .14);
  --wf-vz-gedempt: rgba(255, 255, 255, .68);
  background: rgba(255, 255, 255, .04);
  color: var(--wf-vz-gedempt);
}
[data-bs-theme="dark"] .wf-vz .wf-vz-titel,
[data-bs-theme="dark"] .wf-vz .wf-vz-vervolg-titel,
[data-bs-theme="dark"] .wf-vz .wf-vz-label,
[data-bs-theme="dark"] .wf-vz .wf-vz-stap-waarde,
[data-bs-theme="dark"] .wf-vz .wf-vz-bedrag,
[data-bs-theme="dark"] .wf-vz .wf-vz-aannames-tekst strong { color: #fff; }
[data-bs-theme="dark"] .wf-vz .wf-vz-input {
  background: rgba(255, 255, 255, .06);
  border-color: var(--wf-vz-lijn);
  color: #fff;
}
[data-bs-theme="dark"] .wf-vz .wf-vz-eyebrow,
[data-bs-theme="dark"] .wf-vz .wf-vz-uitkomst {
  background: color-mix(in srgb, var(--brand-primary) 22%, transparent);
}
[data-bs-theme="dark"] .wf-vz .wf-vz-eyebrow,
[data-bs-theme="dark"] .wf-vz .wf-vz-aannames-kop { color: #fff; }

/*  De zone bij het ingevulde verzuimpercentage (28-08).

    Kleur draagt hier GEEN betekenis, net als in de Stress Scan: de zone staat altijd voluit in
    woorden, en het verschil tussen gezond/aandacht/risico zit in de sterkte van dezelfde merkkleur.
    Een rode balk bij "risico" zou een oordeel uitspreken dat deze klant in al haar teksten vermijdt,
    en rood is bij ons bovendien de kleur van verwijderen.  */
.wf-vz-zone {
  display: inline-block;
  /* De velden zijn flex-kolommen; zonder dit rekt de pil over de volle veldbreedte en ziet hij
     eruit als een melding in plaats van een label bij het getal. */
  align-self: flex-start;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--brand-ink);
  background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, transparent);
}
.wf-vz-zone-aandacht {
  background: color-mix(in srgb, var(--brand-primary) 20%, #fff);
  border-color: color-mix(in srgb, var(--brand-primary) 32%, transparent);
}
.wf-vz-zone-risico {
  background: color-mix(in srgb, var(--brand-primary) 34%, #fff);
  border-color: color-mix(in srgb, var(--brand-primary) 50%, transparent);
}

/*  De werkelijke schade onder het hoofdbedrag.

    Bewust lichter dan .wf-vz-bedrag: de exacte som blijft de uitkomst, dit is de duiding eromheen.
    Zou dit even zwaar staan, dan concurreren twee bedragen om dezelfde aandacht en weet de bezoeker
    niet meer welk getal nu "het antwoord" is.  */
.wf-vz-verborgen {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--wf-radius-input, 10px);
  background: color-mix(in srgb, var(--brand-primary) 5%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, transparent);
}
.wf-vz-verborgen-label {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wf-vz-gedempt);
}
.wf-vz-verborgen-bedrag {
  display: block;
  margin-top: 4px;
  color: var(--brand-ink);
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.wf-vz-verborgen-bron {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--wf-vz-gedempt);
}