/* VOLL® Keuzehulp — alle stijlen gescoped onder .voll-keuzehulp zodat er
 * niets van of naar het WordPress-thema lekt. Mobile-first. */

.voll-keuzehulp {
  --vk-oranje: #ec6622;
  --vk-oranje-donker: #d5581b;
  --vk-oranje-zacht: #e99b71;
  --vk-oranje-tint: #fdeee4;
  --vk-donker: #1a1a1a;
  --vk-grijs: #767676;
  --vk-vlak: #f2f2f2;
  --vk-rand: #e4e4e4;
  --vk-groen: #2f9e5b;
  --vk-schaduw: 0 2px 8px rgba(0, 0, 0, .08);
  --vk-radius: 12px;

  font-family: "Sora", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--vk-donker);
  padding: 24px 16px 64px;
  box-sizing: border-box;
  min-height: 100%;
}

.voll-keuzehulp *,
.voll-keuzehulp *::before,
.voll-keuzehulp *::after { box-sizing: border-box; }

/* hidden-attribuut wint altijd, ook van display-regels hieronder */
.voll-keuzehulp [hidden] { display: none !important; }

.voll-keuzehulp h1,
.voll-keuzehulp h2,
.voll-keuzehulp h3 {
  font-family: "Sora", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--vk-donker);
}

.voll-keuzehulp p { margin: 0 0 12px; }
.voll-keuzehulp sup { font-size: .55em; }

.voll-keuzehulp button {
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.voll-keuzehulp input {
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.voll-keuzehulp :focus-visible {
  outline: 2px solid var(--vk-oranje);
  outline-offset: 2px;
}

/* ---------------- kop ---------------- */

.voll-keuzehulp .vk-kop {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
}

.voll-keuzehulp .vk-kicker {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--vk-oranje);
  margin-bottom: 4px;
}

.voll-keuzehulp .vk-kop h1 { font-size: 40px; }

.voll-keuzehulp .vk-intro {
  color: var(--vk-grijs);
  margin: 0;
}

/* ---------------- schermen & overgangen ---------------- */

.voll-keuzehulp .vk-scherm { display: none; }
.voll-keuzehulp .vk-scherm.vk-actief {
  display: block;
  animation: vk-fade .25s ease;
}

/* Exacte contentbreedte van de actieve wizard/resultaatschermen.
   De shortcode blijft responsive, maar de inhoud wordt bewust compact gehouden. */
.voll-keuzehulp .vk-scherm.vk-actief {
  width: 700px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.voll-keuzehulp .vk-stap { display: none; }
.voll-keuzehulp .vk-stap.vk-actief {
  display: block;
  animation: vk-in-rechts .25s ease;
}
.voll-keuzehulp .vk-stap.vk-actief.vk-in-links { animation: vk-in-links .25s ease; }

@keyframes vk-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes vk-in-rechts {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes vk-in-links {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .voll-keuzehulp .vk-scherm.vk-actief,
  .voll-keuzehulp .vk-stap.vk-actief { animation: none; }
}

/* ---------------- wizard ---------------- */

.voll-keuzehulp .vk-wizard {
  width: 700px;
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--vk-rand);
  border-radius: var(--vk-radius);
  box-shadow: var(--vk-schaduw);
  padding: 24px 20px 28px;
}

.voll-keuzehulp .vk-voortgang p {
  font-size: 13px;
  font-weight: 600;
  color: var(--vk-grijs);
  margin-bottom: 6px;
}

.voll-keuzehulp .vk-balk {
  height: 6px;
  border-radius: 3px;
  background: var(--vk-vlak);
  overflow: hidden;
  margin-bottom: 26px;
}

.voll-keuzehulp .vk-balk-vulling {
  height: 100%;
  width: 25%;
  border-radius: 3px;
  background: var(--vk-oranje);
  transition: width .25s ease;
}

.voll-keuzehulp .vk-stap { width: 100%; max-width: 100%; min-width: 0; }
.voll-keuzehulp .vk-stap h2 { font-size: 24px; margin-bottom: 6px; overflow-wrap:anywhere; word-break:normal; }

.voll-keuzehulp .vk-hulp {
  color: var(--vk-grijs);
  font-size: 15px;
  margin-bottom: 20px;
}

.voll-keuzehulp .vk-invoerrij {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.voll-keuzehulp .vk-invoerrij input {
  font-family: "Sora", Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--vk-donker);
  width: 180px;
  padding: 12px 14px;
  border: 2px solid var(--vk-rand);
  border-radius: 10px;
  background: #fff;
  transition: border-color .15s ease;
}

.voll-keuzehulp .vk-invoerrij input:focus {
  border-color: var(--vk-oranje);
  outline: none;
}

.voll-keuzehulp .vk-eenheid {
  font-family: "Sora", Arial, sans-serif;
  font-weight: 600;
  font-size: 18px;
}

.voll-keuzehulp .vk-tegels {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.voll-keuzehulp .vk-tegel {
  border: 2px solid var(--vk-rand);
  background: #fff;
  color: var(--vk-donker);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.voll-keuzehulp .vk-tegel:hover { border-color: var(--vk-oranje-zacht); }

.voll-keuzehulp .vk-tegel.vk-actief {
  border-color: var(--vk-oranje);
  background: var(--vk-oranje);
  color: #fff;
}

.voll-keuzehulp .vk-tegel-breed { flex: 1 1 100%; }

.voll-keuzehulp .vk-keuzes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.voll-keuzehulp .vk-keuzeknop {
  border: 2px solid var(--vk-rand);
  border-radius: var(--vk-radius);
  background: #fff;
  padding: 18px 20px;
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}

.voll-keuzehulp .vk-keuzeknop strong {
  display: block;
  font-family: "Sora", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.voll-keuzehulp .vk-keuzeknop span {
  color: var(--vk-grijs);
  font-size: 14px;
}

.voll-keuzehulp .vk-keuzeknop:hover { border-color: var(--vk-oranje-zacht); }

.voll-keuzehulp .vk-keuzeknop.vk-actief {
  border-color: var(--vk-oranje);
  background: var(--vk-oranje-tint);
}

.voll-keuzehulp .vk-keuzeknop.vk-actief strong { color: var(--vk-oranje); }

.voll-keuzehulp .vk-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

/* ---------------- knoppen ---------------- */

.voll-keuzehulp .vk-knop {
  display: inline-block;
  background: var(--vk-oranje);
  color: #fff;
  border: 2px solid var(--vk-oranje);
  border-radius: 10px;
  padding: 12px 28px;
  font-family: "Sora", Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  text-align: center;
  transition: background .15s ease, border-color .15s ease;
}

.voll-keuzehulp .vk-knop:hover:not(:disabled) {
  background: var(--vk-oranje-donker);
  border-color: var(--vk-oranje-donker);
}

.voll-keuzehulp .vk-knop:disabled {
  background: var(--vk-rand);
  border-color: var(--vk-rand);
  color: var(--vk-grijs);
  cursor: not-allowed;
}

.voll-keuzehulp .vk-knop-secundair {
  display: inline-block;
  background: #fff;
  color: var(--vk-oranje);
  border: 2px solid var(--vk-oranje);
  border-radius: 10px;
  padding: 12px 24px;
  font-family: "Sora", Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  text-align: center;
  transition: background .15s ease;
}

.voll-keuzehulp .vk-knop-secundair:hover { background: var(--vk-oranje-tint); }

/* ---------------- reken-animatie ---------------- */

.voll-keuzehulp .vk-rekenen {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--vk-rand);
  border-radius: var(--vk-radius);
  box-shadow: var(--vk-schaduw);
  padding: 48px 24px;
  text-align: center;
}

.voll-keuzehulp .vk-rekenen ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 320px;
  text-align: left;
}

.voll-keuzehulp .vk-rekenen li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 17px;
  color: var(--vk-grijs);
  opacity: .35;
  transition: opacity .3s ease, color .3s ease;
}

.voll-keuzehulp .vk-rekenen li::before {
  content: "";
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  border: 2px solid var(--vk-rand);
  background: #fff;
  transition: background .3s ease, border-color .3s ease;
}

.voll-keuzehulp .vk-rekenen li.vk-af {
  opacity: 1;
  color: var(--vk-donker);
}

.voll-keuzehulp .vk-rekenen li.vk-af::before {
  content: "✓";
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  text-align: center;
  background: var(--vk-oranje);
  border-color: var(--vk-oranje);
}

/* ---------------- melding ---------------- */

.voll-keuzehulp .vk-melding {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--vk-rand);
  border-radius: var(--vk-radius);
  box-shadow: var(--vk-schaduw);
  padding: 40px 24px;
  text-align: center;
}

.voll-keuzehulp .vk-melding h2 { font-size: 26px; }

.voll-keuzehulp .vk-melding p {
  max-width: 520px;
  margin: 0 auto 24px;
  color: var(--vk-grijs);
}

.voll-keuzehulp .vk-melding .vk-cta-rij { justify-content: center; }

/* ---------------- leadkeuze ---------------- */

.voll-keuzehulp .vk-lead {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--vk-rand);
  border-radius: var(--vk-radius);
  box-shadow: var(--vk-schaduw);
  padding: 40px 24px;
}

.voll-keuzehulp .vk-lead h2 {
  font-size: 28px;
  text-align: center;
}

.voll-keuzehulp .vk-lead > .vk-kicker,
.voll-keuzehulp .vk-lead-intro {
  text-align: center;
}

.voll-keuzehulp .vk-lead-intro {
  max-width: 560px;
  margin: 0 auto 24px;
  color: var(--vk-grijs);
}

.voll-keuzehulp .vk-lead-form {
  max-width: 560px;
  margin: 0 auto;
}

.voll-keuzehulp .vk-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.voll-keuzehulp .vk-form-grid label,
.voll-keuzehulp .vk-checkbox {
  display: block;
}

.voll-keuzehulp .vk-form-grid span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--vk-grijs);
  margin-bottom: 5px;
}

.voll-keuzehulp .vk-form-grid input {
  display: block;
  width: 100%;
  min-height: 48px;
  border: 2px solid var(--vk-rand);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 16px;
  color: var(--vk-donker);
  background: #fff;
}

.voll-keuzehulp .vk-form-grid input:focus {
  border-color: var(--vk-oranje);
  outline: none;
}

.voll-keuzehulp .vk-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--vk-grijs);
  font-size: 14px;
  margin: 4px 0 16px;
}

.voll-keuzehulp .vk-checkbox input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
  accent-color: var(--vk-oranje);
}

.voll-keuzehulp .vk-form-fout {
  color: #a33a16;
  background: var(--vk-oranje-tint);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 16px;
}

.voll-keuzehulp .vk-lead-acties {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.voll-keuzehulp .vk-lead-acties .vk-knop {
  width: 100%;
}

.voll-keuzehulp .vk-lead-skip {
  max-width: 460px;
  color: var(--vk-grijs);
  text-align: center;
}

/* ---------------- resultaat ---------------- */

.voll-keuzehulp .vk-resultaat { max-width: 1040px; margin: 0 auto; }

.voll-keuzehulp .vk-resultaat-kop {
  text-align: center;
  margin-bottom: 24px;
}

.voll-keuzehulp .vk-resultaat-kop h2 { font-size: 30px; }

.voll-keuzehulp .vk-resultaat-kop [data-vk-set-naam] { color: var(--vk-oranje); }

.voll-keuzehulp .vk-resultaat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  background: #fff;
  border: 1px solid var(--vk-rand);
  border-radius: var(--vk-radius);
  box-shadow: var(--vk-schaduw);
  padding: 24px 20px;
  margin-bottom: 28px;
}

.voll-keuzehulp .vk-render {
  margin: 0;
  text-align: center;
  background: var(--vk-vlak);
  border-radius: var(--vk-radius);
  padding: 16px;
}

.voll-keuzehulp .vk-render img {
  max-width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
}

/* Jaarlijkse besparing hoort bij het productblok en wordt rechtstreeks uit
   de geïmporteerde JSON-set gevuld. */
.voll-keuzehulp .vk-jaar-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 12px;
  padding: 13px 16px 14px;
  background: var(--vk-oranje);
  color: #fff;
  border-radius: 9px;
  text-align: center;
  line-height: 1.05;
}
.voll-keuzehulp .vk-jaar-hero .vk-jaar-besparing-label {
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.voll-keuzehulp .vk-jaar-hero strong {
  display: block;
  margin: 3px 0 1px;
  color: #fff;
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
}

.voll-keuzehulp .vk-prijs {
  font-family: "Sora", Arial, sans-serif;
  font-weight: 700;
  font-size: 34px;
  margin-bottom: 2px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.voll-keuzehulp .vk-prijs-sub {
  font-family: "Sora", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--vk-grijs);
}

.voll-keuzehulp .vk-besparing {
  font-size: 17px;
  margin-bottom: 10px;
}

.voll-keuzehulp .vk-besparing strong { color: var(--vk-oranje); }

.voll-keuzehulp .vk-beschrijving {
  color: var(--vk-grijs);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
}

.voll-keuzehulp .vk-usps {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.voll-keuzehulp .vk-usps li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
  font-size: 15px;
}

.voll-keuzehulp .vk-usps li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--vk-oranje);
  font-weight: 700;
}

.voll-keuzehulp .vk-noot {
  background: var(--vk-oranje-tint);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  margin-bottom: 16px;
}

.voll-keuzehulp .vk-cta-rij {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.voll-keuzehulp .vk-kleine-noot {
  font-size: 13px;
  color: var(--vk-grijs);
  margin: 0;
}

/* ---------------- dagverhaal ---------------- */

.voll-keuzehulp .vk-dagverhaal {
  background: #fff;
  border: 1px solid var(--vk-rand);
  border-radius: var(--vk-radius);
  box-shadow: var(--vk-schaduw);
  padding: 24px 20px 28px;
}

.voll-keuzehulp .vk-dagverhaal h3 { font-size: 24px; }

.voll-keuzehulp .vk-dag-intro {
  color: var(--vk-grijs);
  font-size: 15px;
  margin-bottom: 18px;
}

.voll-keuzehulp .vk-dag-regelaars {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* pill-vorm zoals de segmented controls in de VOLL APP */
.voll-keuzehulp .vk-tabs,
.voll-keuzehulp .vk-schakel {
  display: inline-flex;
  background: var(--vk-vlak);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}

.voll-keuzehulp .vk-tabs button,
.voll-keuzehulp .vk-schakel button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vk-grijs);
  transition: background .15s ease, color .15s ease;
}

.voll-keuzehulp .vk-tabs button.vk-actief,
.voll-keuzehulp .vk-schakel button.vk-actief {
  background: var(--vk-oranje);
  color: #fff;
}

.voll-keuzehulp .vk-dag-datum {
  font-size: 14px;
  color: var(--vk-grijs);
  margin: 0 0 14px;
}

.voll-keuzehulp .vk-grafiek {
  position: relative;
  width: 100%;
  overflow: visible;
}

.voll-keuzehulp .vk-grafiek svg {
  display: block;
  max-width: 100%;
}

.voll-keuzehulp .vk-grafiek text {
  font-family: "Sora", Arial, Helvetica, sans-serif;
}

.voll-keuzehulp .vk-stip {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--vk-oranje);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  box-shadow: var(--vk-schaduw);
  padding: 0;
  z-index: 2;
}

.voll-keuzehulp .vk-stip:hover { background: var(--vk-oranje-donker); }

.voll-keuzehulp .vk-moment-kaart {
  display: none; /* alleen op bredere schermen, zie media query onderaan */
  position: absolute;
  width: 264px;
  background: #fff;
  border: 1px solid var(--vk-rand);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  z-index: 3;
  pointer-events: none;
}

.voll-keuzehulp .vk-moment-kaart strong { color: var(--vk-oranje); }

.voll-keuzehulp .vk-moment-kaart p { margin: 4px 0 0; }

.voll-keuzehulp .vk-momenten-lijst {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.voll-keuzehulp .vk-momenten-lijst li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--vk-vlak);
}

.voll-keuzehulp .vk-momenten-lijst li:last-child { border-bottom: 0; }

.voll-keuzehulp .vk-moment-nr {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--vk-oranje);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.voll-keuzehulp .vk-momenten-lijst strong { color: var(--vk-oranje); }

/* ---------------- dagkaarten in VOLL APP-stijl ---------------- */

.voll-keuzehulp .vk-dagverhaal h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 28px 0 10px;
}

.voll-keuzehulp .vk-grafiekkop {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 28px 0 10px;
}

.voll-keuzehulp .vk-grafiekkop h4 { margin: 0; }

.voll-keuzehulp .vk-dag-kaarten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.voll-keuzehulp .vk-hero-besparing {
  background: var(--vk-oranje);
  color: #fff;
  border-radius: var(--vk-radius);
  text-align: center;
  padding: 26px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.voll-keuzehulp .vk-hero-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  font-size: 13px;
  margin: 0 0 8px;
}

.voll-keuzehulp .vk-hero-bedrag {
  font-family: "Sora", Arial, sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1.1;
  margin: 0 0 8px;
}

.voll-keuzehulp .vk-hero-powered {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  font-weight: 600;
  opacity: .85;
  margin: 0;
}

.voll-keuzehulp .vk-vergelijk {
  background: #272726;
  color: #EDECE7;
  border-radius: var(--vk-radius);
  padding: 14px 18px;
}

.voll-keuzehulp .vk-vergelijk-rij {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  font-size: 14.5px;
}

.voll-keuzehulp .vk-vergelijk-rij span:last-child {
  white-space: nowrap;
  font-weight: 600;
}

.voll-keuzehulp .vk-vergelijk-totaal {
  border-top: 1px solid #4a4a48;
  margin-top: 8px;
  padding-top: 13px;
  color: var(--vk-oranje);
}

.voll-keuzehulp .vk-vergelijk-totaal span:last-child {
  font-family: "Sora", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.voll-keuzehulp .vk-vergelijk .vk-verdien { color: #4BDE53; }

.voll-keuzehulp .vk-prijskaart {
  background: var(--vk-vlak);
  border-radius: var(--vk-radius);
  padding: 4px 18px;
  margin-bottom: 6px;
}

.voll-keuzehulp .vk-prijskaart-rij {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #e3e3e0;
  font-size: 13px;
}

.voll-keuzehulp .vk-prijskaart-rij:last-child { border-bottom: 0; }

.voll-keuzehulp .vk-prijskaart-rij > span:first-child {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .04em;
}

.voll-keuzehulp .vk-prijstijd { color: var(--vk-grijs); flex: 1; }

.voll-keuzehulp .vk-prijskaart-rij strong {
  font-family: "Sora", Arial, sans-serif;
  font-size: 17px;
  color: var(--vk-oranje);
}

.voll-keuzehulp .vk-perkwh { color: var(--vk-grijs); font-size: 12px; }

.voll-keuzehulp .vk-cursorinfo {
  font-size: 14px;
  font-weight: 600;
  min-height: 22px;
  margin: 0 0 4px;
}

.voll-keuzehulp .vk-cursortijd { color: var(--vk-grijs); font-weight: 400; }

.voll-keuzehulp .vk-cursorlabel {
  color: var(--vk-grijs);
  font-weight: 400;
  font-size: 12px;
  margin: 0 8px 0 4px;
}

.voll-keuzehulp .vk-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
  margin-top: 8px;
}

.voll-keuzehulp .vk-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.voll-keuzehulp .vk-bol {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.voll-keuzehulp .vk-bol-staaf {
  width: 8px;
  height: 13px;
  border-radius: 2px;
}

/* ---------------- jaaroverzicht & bijzondere dagen ---------------- */

.voll-keuzehulp .vk-jaar {
  background: #fff;
  border: 1px solid var(--vk-rand);
  border-radius: var(--vk-radius);
  box-shadow: var(--vk-schaduw);
  padding: 24px 20px 28px;
  margin-top: 28px;
}

.voll-keuzehulp .vk-jaar h3 { font-size: 24px; }

.voll-keuzehulp .vk-jaar-vergelijk { margin-bottom: 12px; }

.voll-keuzehulp .vk-jaar-besparing-balk {
  background: var(--vk-oranje);
  color: #fff;
  border-radius: var(--vk-radius);
  padding: 18px 16px;
  text-align: center;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.voll-keuzehulp .vk-jaar-besparing-balk strong {
  font-family: "Sora", Arial, sans-serif;
  font-size: 36px;
  font-weight: 700;
}

.voll-keuzehulp .vk-jaar-besparing-label {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  font-size: 13px;
}

.voll-keuzehulp .vk-usp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.voll-keuzehulp .vk-usp-grid > div {
  background: var(--vk-vlak);
  border-radius: var(--vk-radius);
  padding: 18px 14px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.4;
}

.voll-keuzehulp .vk-usp-grid svg {
  width: 34px;
  height: 34px;
  display: block;
  margin: 0 auto 10px;
}

.voll-keuzehulp .vk-uitgelicht {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.voll-keuzehulp .vk-uitgelicht-kaart {
  background: var(--vk-vlak);
  border: 2px solid var(--vk-vlak);
  border-radius: var(--vk-radius);
  padding: 16px 18px;
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  color: var(--vk-donker);
  transition: border-color .15s ease, background .15s ease;
}

.voll-keuzehulp .vk-uitgelicht-kaart:hover { border-color: var(--vk-oranje-zacht); }

.voll-keuzehulp .vk-uitgelicht-kaart.vk-actief {
  border-color: var(--vk-oranje);
  background: var(--vk-oranje-tint);
}

.voll-keuzehulp .vk-uitgelicht-datum {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 12px;
  font-weight: 600;
  color: var(--vk-oranje);
  margin: 0 0 4px;
}

.voll-keuzehulp .vk-uitgelicht-kaart strong {
  display: block;
  font-family: "Sora", Arial, sans-serif;
  font-size: 16px;
  margin-bottom: 4px;
}

.voll-keuzehulp .vk-uitgelicht-kaart p:last-child { margin: 0; }

.voll-keuzehulp .vk-dag-kaarten-smal { margin-top: 6px; }

.voll-keuzehulp .vk-jaar-cta {
  margin-top: 24px;
  text-align: center;
}

.voll-keuzehulp .vk-jaar-cta > p:first-child {
  max-width: 480px;
  margin: 0 auto 14px;
}

.voll-keuzehulp .vk-jaar-cta .vk-cta-rij {
  justify-content: center;
  margin-bottom: 8px;
}

.voll-keuzehulp .vk-ai-noot {
  font-size: 14px;
  color: var(--vk-grijs);
  margin: -6px 0 16px;
}

.voll-keuzehulp .vk-koop-noten {
  list-style: none;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--vk-vlak);
}

.voll-keuzehulp .vk-koop-noten li {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--vk-grijs);
  margin-bottom: 4px;
}

.voll-keuzehulp .vk-koop-noten a {
  color: var(--vk-oranje);
  text-decoration: underline;
}

.voll-keuzehulp .vk-disclaimer {
  max-width: 560px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--vk-grijs);
}

.voll-keuzehulp .vk-opnieuw {
  display: block;
  margin: 24px auto 0;
  background: none;
  border: 0;
  color: var(--vk-grijs);
  font-size: 14px;
  text-decoration: underline;
}

.voll-keuzehulp .vk-opnieuw:hover { color: var(--vk-oranje); }

/* ---------------- desktop ---------------- */

@media (min-width: 700px) {
  .voll-keuzehulp { padding: 48px 24px 80px; }
  .voll-keuzehulp .vk-kop h1 { font-size: 52px; }
  .voll-keuzehulp .vk-wizard { padding: 32px 40px 36px; }
  .voll-keuzehulp .vk-stap h2 { font-size: 28px; }
  .voll-keuzehulp .vk-keuzes { grid-template-columns: 1fr 1fr; }
  .voll-keuzehulp .vk-form-grid { grid-template-columns: 1fr 1fr; }
  .voll-keuzehulp .vk-momenten-lijst { display: none; }
  .voll-keuzehulp .vk-resultaat-kop h2 { font-size: 38px; }
  .voll-keuzehulp .vk-dagverhaal { padding: 32px 36px 36px; }
  .voll-keuzehulp .vk-moment-kaart { display: block; }
  .voll-keuzehulp .vk-dag-kaarten { grid-template-columns: minmax(240px, 340px) 1fr; }
  .voll-keuzehulp .vk-dag-kaarten-smal { grid-template-columns: 1fr 1fr; align-items: start; }
  .voll-keuzehulp .vk-hero-bedrag { font-size: 52px; }
  .voll-keuzehulp .vk-jaar { padding: 32px 36px 36px; }
  .voll-keuzehulp .vk-usp-grid { grid-template-columns: repeat(4, 1fr); }
  .voll-keuzehulp .vk-uitgelicht { grid-template-columns: 1fr 1fr; }
}

/* ---------------- verfijningen (mobiel + tablet) ---------------- */

/* SET-naam nooit over twee regels breken */
.voll-keuzehulp [data-vk-set-naam] { white-space: nowrap; }

/* bespaar-balk: kicker, bedrag en "per jaar" onder elkaar */
.voll-keuzehulp .vk-jaar-besparing-balk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.voll-keuzehulp .vk-jaar-besparing-balk strong { line-height: 1.1; }

/* USP-blokken: altijd vier even grote vlakken */
.voll-keuzehulp .vk-usp-grid { grid-auto-rows: 1fr; }
.voll-keuzehulp .vk-usp-grid > div { height: 100%; box-sizing: border-box; }

/* render gecentreerd zolang hij boven de info staat (mobiel + tablet) */
.voll-keuzehulp .vk-render { max-width: 420px; margin: 0 auto; }

/* tip voor telefoons; verborgen op grotere schermen */
.voll-keuzehulp .vk-mobiel-tip {
  display: none;
  background: var(--vk-vlak);
  border-radius: var(--vk-radius);
  padding: 10px 14px;
  font-size: 12.5px;
  color: #6f6f6c;
  margin: 0 0 14px;
}

/* aangeklikt moment in de lijst even laten oplichten */
.voll-keuzehulp .vk-momenten-lijst li.vk-flits {
  background: #fdeadd;
  border-radius: 10px;
  transition: background .4s ease;
}

@media (min-width: 1000px) {
  .voll-keuzehulp .vk-resultaat-grid {
    grid-template-columns: minmax(280px, 380px) 1fr;
    align-items: center;
    padding: 32px;
    gap: 36px;
  }
  .voll-keuzehulp .vk-resultaat-grid.vk-zonder-render { grid-template-columns: 1fr; }
  .voll-keuzehulp .vk-render { max-width: none; margin: 0; }
}

@media (max-width: 999px) {
  .voll-keuzehulp .vk-usp-grid > div { font-size: 13px; padding: 16px 12px; }
}

@media (max-width: 699px) {
  .voll-keuzehulp .vk-mobiel-tip { display: block; }

  /* knoppen: gecentreerd, compacter en altijd binnen het scherm */
  .voll-keuzehulp .vk-cta-rij {
    flex-direction: column;
    align-items: center;
  }
  .voll-keuzehulp .vk-knop,
  .voll-keuzehulp .vk-knop-secundair {
    font-size: 15px;
    padding: 12px 20px;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    white-space: normal;
  }

  /* donkere kostenvergelijking: label boven, bedrag rechts eronder */
  .voll-keuzehulp .vk-vergelijk-rij { display: block; padding: 9px 0; }
  .voll-keuzehulp .vk-vergelijk-rij span:first-child {
    display: block;
    font-size: 13px;
    opacity: .9;
  }
  .voll-keuzehulp .vk-vergelijk-rij span:last-child {
    display: block;
    text-align: right;
    font-size: 17px;
    margin-top: 2px;
  }
  .voll-keuzehulp .vk-vergelijk-totaal span:last-child { font-size: 20px; }

  /* prijzenkaart: compacter zodat alles op een regel past */
  .voll-keuzehulp .vk-prijskaart-rij { font-size: 11.5px; gap: 8px; }
  .voll-keuzehulp .vk-prijskaart-rij strong { font-size: 14px; }
}

/* ---------------- verfijningen ronde 2 ---------------- */

/* vinkjes netjes gecentreerd in de cirkels van het rekenscherm */
.voll-keuzehulp .vk-rekenen li::before {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}

/* cursorregel: een getal breekt nooit los van zijn eenheid */
.voll-keuzehulp .vk-cursorinfo span,
.voll-keuzehulp .vk-cursorinfo strong { white-space: nowrap; }

/* prijzenkaart: tijden nooit over twee regels */
.voll-keuzehulp .vk-prijstijd { white-space: nowrap; }

/* tablet: koopinfo gecentreerd onder de afbeelding */
@media (min-width: 700px) and (max-width: 999px) {
  .voll-keuzehulp .vk-koopblok {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
  }
  .voll-keuzehulp .vk-koopblok .vk-usps {
    display: inline-block;
    text-align: left;
  }
  .voll-keuzehulp .vk-koopblok .vk-cta-rij { justify-content: center; }
}

@media (max-width: 699px) {
  /* dag-tabs compacter zodat alle drie op een rij passen */
  .voll-keuzehulp .vk-tabs button {
    font-size: 12.5px;
    padding: 8px 11px;
  }

  /* prijzenkaart nog een maat kleiner: alles op een regel */
  .voll-keuzehulp .vk-prijskaart-rij { font-size: 10.5px; gap: 6px; }
  .voll-keuzehulp .vk-prijskaart-rij strong { font-size: 13px; }

  /* momentstippen iets kleiner op de smalle grafiek */
  .voll-keuzehulp .vk-stip {
    width: 21px;
    height: 21px;
    font-size: 11px;
    border-width: 1.5px;
  }
}

/* ---------------- verfijningen ronde 3 (mobiel) ---------------- */

/* tip duidelijk als eigen kader */
.voll-keuzehulp .vk-mobiel-tip {
  background: var(--vk-oranje-tint);
  border: 1.5px solid var(--vk-oranje-zacht);
  color: #4a4a48;
}

@media (max-width: 699px) {
  /* SET-naam altijd als geheel op een eigen regel */
  .voll-keuzehulp .vk-resultaat-kop [data-vk-set-naam] { display: block; }

  /* dag-tabs: drie gelijke vakken over de volle breedte, tekst mag
     binnen een vak over twee regels */
  .voll-keuzehulp .vk-tabs {
    display: flex;
    width: 100%;
    border-radius: 18px;
  }
  .voll-keuzehulp .vk-tabs button {
    flex: 1 1 0;
    min-width: 0;
    font-size: 11px;
    line-height: 1.2;
    padding: 8px 4px;
    white-space: normal;
    text-align: center;
    border-radius: 14px;
  }

  /* prijzenkaart: alles klein en onbreekbaar zodat elke rij past */
  .voll-keuzehulp .vk-prijskaart-rij { font-size: 9.5px; gap: 5px; }
  .voll-keuzehulp .vk-prijskaart-rij > span:first-child { white-space: nowrap; }
  .voll-keuzehulp .vk-prijstijd { white-space: nowrap; font-size: 9.5px; }
  .voll-keuzehulp .vk-prijskaart-rij strong {
    font-size: 12.5px;
    white-space: nowrap;
  }
  .voll-keuzehulp .vk-perkwh { white-space: nowrap; font-size: 9px; }
}

/* rekenscherm: vinkjeslijst netjes gecentreerd onder de titel */
.voll-keuzehulp .vk-rekenen ul {
  max-width: none;
  width: fit-content;
  margin: 0 auto;
}

/* ---------------- methodiek-blok ---------------- */
.voll-keuzehulp .vk-methodiek {
  max-width: 720px;
  margin: 28px auto 0;
  background: var(--vk-vlak);
  border-radius: var(--vk-radius);
  padding: 18px 22px;
  font-size: 13px;
  color: #4a4a48;
}
.voll-keuzehulp .vk-methodiek-kop {
  font-family: "Sora", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--vk-donker);
  margin: 0 0 8px;
}
.voll-keuzehulp .vk-methodiek ul {
  margin: 0;
  padding-left: 18px;
}
.voll-keuzehulp .vk-methodiek li { margin-bottom: 5px; }
.voll-keuzehulp .vk-methodiek a { color: var(--vk-oranje); }

/* tekstlink-knop in een noot (bijv. noodstroom aanpassen) */
.voll-keuzehulp .vk-linkknop {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--vk-oranje);
  text-decoration: underline;
  cursor: pointer;
}
.voll-keuzehulp .vk-linkknop:hover { color: var(--vk-oranje-donker); }

/* koppel-USP: klein kader bij dagen met negatieve prijzen */
.voll-keuzehulp .vk-koppel-noot {
  background: var(--vk-oranje-tint);
  border: 1.5px solid var(--vk-oranje-zacht);
  border-radius: var(--vk-radius);
  padding: 12px 16px;
  font-size: 13.5px;
  color: #4a4a48;
  margin: 14px 0 0;
}
.voll-keuzehulp .vk-koppel-noot strong { color: var(--vk-oranje); }

/* links in de jaar-intro (CBS) in huisstijl-oranje */
.voll-keuzehulp .vk-dag-intro a { color: var(--vk-oranje); }

/* WordPress hardening: everything remains inside the shortcode. */
.voll-keuzehulp{max-width:100%;min-width:0;overflow:hidden;overflow-wrap:anywhere;word-break:normal}
.voll-keuzehulp h1,.voll-keuzehulp h2,.voll-keuzehulp h3,.voll-keuzehulp h4,.voll-keuzehulp p,.voll-keuzehulp li,.voll-keuzehulp span,.voll-keuzehulp button,.voll-keuzehulp label{overflow-wrap:anywhere;word-break:normal}
.voll-keuzehulp .vk-stap,.voll-keuzehulp .vk-resultaat-grid,.voll-keuzehulp .vk-koopblok,.voll-keuzehulp .vk-dagverhaal,.voll-keuzehulp .vk-jaar,.voll-keuzehulp .vk-bijzonder{min-width:0;max-width:100%}
.voll-keuzehulp img,.voll-keuzehulp svg{max-width:100%}
.voll-keuzehulp input,.voll-keuzehulp select,.voll-keuzehulp textarea{max-width:100%;min-width:0}

/* ================= VOLL layout hardening =================
   Keep every generated card/grid item inside its own grid track.
   Also neutralise Elementor/theme button hover styles inside the shortcode only. */
.voll-keuzehulp,
.voll-keuzehulp * { box-sizing: border-box; }
.voll-keuzehulp { width: 100%; max-width: 100%; min-width: 0; overflow-x: clip; }
.voll-keuzehulp .vk-jaar,
.voll-keuzehulp .vk-bijzonder,
.voll-keuzehulp .vk-dagverhaal,
.voll-keuzehulp .vk-resultaat,
.voll-keuzehulp .vk-wizard { width: 100%; max-width: 100%; min-width: 0; }
.voll-keuzehulp .vk-uitgelicht {
  width: 100%; max-width: 100%; min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.voll-keuzehulp .vk-uitgelicht-kaart {
  width: 100%; max-width: 100%; min-width: 0;
  overflow: hidden;
}
.voll-keuzehulp .vk-uitgelicht-kaart strong,
.voll-keuzehulp .vk-uitgelicht-kaart p,
.voll-keuzehulp .vk-uitgelicht-datum {
  min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
}
.voll-keuzehulp .vk-dag-kaarten {
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  min-width: 0;
}
.voll-keuzehulp .vk-dag-kaarten > *,
.voll-keuzehulp .vk-dag-kaarten-smal > *,
.voll-keuzehulp .vk-usp-grid > *,
.voll-keuzehulp .vk-resultaat-grid > *,
.voll-keuzehulp .vk-form-grid > *,
.voll-keuzehulp .vk-keuzes > * { min-width: 0; max-width: 100%; }
.voll-keuzehulp .vk-vergelijk,
.voll-keuzehulp .vk-prijskaart,
.voll-keuzehulp .vk-koopblok,
.voll-keuzehulp .vk-hero-besparing { min-width: 0; max-width: 100%; overflow: hidden; }
.voll-keuzehulp .vk-vergelijk-rij,
.voll-keuzehulp .vk-prijskaart-rij { min-width: 0; }
.voll-keuzehulp .vk-vergelijk-rij > *,
.voll-keuzehulp .vk-prijskaart-rij > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.voll-keuzehulp .vk-prijskaart-rij strong,
.voll-keuzehulp .vk-prijstijd,
.voll-keuzehulp .vk-perkwh { white-space: nowrap; flex-shrink: 0; }
.voll-keuzehulp .vk-invoerrij { min-width: 0; max-width: 100%; }
.voll-keuzehulp .vk-invoerrij input { width: 100%; min-width: 0; }
.voll-keuzehulp .vk-nav,
.voll-keuzehulp .vk-cta-rij { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.voll-keuzehulp .vk-nav > *,
.voll-keuzehulp .vk-cta-rij > * { min-width: 0; max-width: 100%; }
.voll-keuzehulp .vk-tabs,
.voll-keuzehulp .vk-schakel { max-width: 100%; min-width: 0; flex-wrap: wrap; }
.voll-keuzehulp .vk-tabs button,
.voll-keuzehulp .vk-schakel button { min-width: 0; max-width: 100%; }

/* Elementor/global theme hover reset — only inside this shortcode. */
.voll-keuzehulp button:hover,
.voll-keuzehulp button:focus,
.voll-keuzehulp button:active {
  background-image: none !important;
}
.voll-keuzehulp .vk-tegel:hover,
.voll-keuzehulp .vk-tegel:focus { background: #fff !important; color: var(--vk-donker) !important; border-color: var(--vk-oranje-zacht) !important; }
.voll-keuzehulp .vk-tegel.vk-actief:hover,
.voll-keuzehulp .vk-tegel.vk-actief:focus { background: var(--vk-oranje) !important; color: #fff !important; border-color: var(--vk-oranje) !important; }
.voll-keuzehulp .vk-keuzeknop:hover,
.voll-keuzehulp .vk-keuzeknop:focus { background: #fff !important; color: inherit !important; border-color: var(--vk-oranje-zacht) !important; }
.voll-keuzehulp .vk-keuzeknop.vk-actief:hover,
.voll-keuzehulp .vk-keuzeknop.vk-actief:focus { background: var(--vk-oranje-tint) !important; border-color: var(--vk-oranje) !important; }
.voll-keuzehulp .vk-knop:hover,
.voll-keuzehulp .vk-knop:focus { background: var(--vk-oranje-donker) !important; color: #fff !important; border-color: var(--vk-oranje-donker) !important; }
.voll-keuzehulp .vk-knop-secundair:hover,
.voll-keuzehulp .vk-knop-secundair:focus { background: var(--vk-oranje-tint) !important; color: var(--vk-oranje) !important; border-color: var(--vk-oranje) !important; }
.voll-keuzehulp .vk-tabs button:hover,
.voll-keuzehulp .vk-schakel button:hover { background: transparent !important; color: var(--vk-grijs) !important; }
.voll-keuzehulp .vk-tabs button.vk-actief:hover,
.voll-keuzehulp .vk-schakel button.vk-actief:hover { background: var(--vk-oranje) !important; color: #fff !important; }
.voll-keuzehulp .vk-uitgelicht-kaart:hover,
.voll-keuzehulp .vk-uitgelicht-kaart:focus { background: var(--vk-vlak) !important; color: var(--vk-donker) !important; border-color: var(--vk-oranje-zacht) !important; }
.voll-keuzehulp .vk-uitgelicht-kaart.vk-actief:hover,
.voll-keuzehulp .vk-uitgelicht-kaart.vk-actief:focus { background: var(--vk-oranje-tint) !important; border-color: var(--vk-oranje) !important; }
.voll-keuzehulp .vk-opnieuw:hover,
.voll-keuzehulp .vk-linkknop:hover { background: transparent !important; color: var(--vk-oranje) !important; }

@media (max-width: 699px) {
  .voll-keuzehulp .vk-uitgelicht { grid-template-columns: minmax(0, 1fr); }
  .voll-keuzehulp .vk-dag-kaarten { grid-template-columns: minmax(0,1fr); }
}


/* Layout guard: nothing inside the shortcode may widen its grid/container. */
.voll-keuzehulp, .voll-keuzehulp * { min-width: 0; max-width: 100%; }
.voll-keuzehulp .vk-stappen, .voll-keuzehulp .vk-stap, .voll-keuzehulp .vk-nav, .voll-keuzehulp .vk-form-grid, .voll-keuzehulp .vk-resultaat-grid, .voll-keuzehulp .vk-bijzonder-grid { min-width:0; }
.voll-keuzehulp input, .voll-keuzehulp textarea, .voll-keuzehulp select, .voll-keuzehulp button { max-width:100%; }
.voll-keuzehulp .vk-tegels, .voll-keuzehulp .vk-keuzes { min-width:0; max-width:100%; }

/* Elementor/theme reset: headings, labels and button children keep VOLL colours. */
.voll-keuzehulp .vk-tegel:hover strong,
.voll-keuzehulp .vk-tegel:focus strong,
.voll-keuzehulp .vk-tegel:active strong,
.voll-keuzehulp .vk-keuzeknop:hover strong,
.voll-keuzehulp .vk-keuzeknop:focus strong,
.voll-keuzehulp .vk-keuzeknop:active strong { color: inherit !important; }
.voll-keuzehulp .vk-keuzeknop:hover span,
.voll-keuzehulp .vk-keuzeknop:focus span,
.voll-keuzehulp .vk-keuzeknop:active span { color: var(--vk-grijs) !important; }
.voll-keuzehulp h1:hover, .voll-keuzehulp h2:hover, .voll-keuzehulp h3:hover,
.voll-keuzehulp h4:hover, .voll-keuzehulp p:hover, .voll-keuzehulp label:hover { color: inherit !important; }
.voll-keuzehulp .vk-keuzeknop.vk-actief:hover strong, .voll-keuzehulp .vk-keuzeknop.vk-actief:focus strong { color: var(--vk-oranje) !important; }
@media (max-width: 760px) {
  .voll-keuzehulp { padding-left: 12px; padding-right: 12px; }
  .voll-keuzehulp .vk-wizard, .voll-keuzehulp .vk-lead, .voll-keuzehulp .vk-rekenen, .voll-keuzehulp .vk-melding { padding-left: 18px; padding-right: 18px; }
  .voll-keuzehulp .vk-stap { max-width: 100%; }
}


/* v3.3: exact wizard content width + hard Elementor hover isolation. */
.voll-keuzehulp .vk-stappen,
.voll-keuzehulp .vk-nav {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.voll-keuzehulp .vk-stap { width: 100%; max-width: 1000px; }

/* Elementor/theme can style button descendants on :hover. Keep every
   choice title/description inside the VOLL palette. */
.voll-keuzehulp .vk-tegel:hover,
.voll-keuzehulp .vk-tegel:focus,
.voll-keuzehulp .vk-tegel:active,
.voll-keuzeknop:hover,
.voll-keuzeknop:focus,
.voll-keuzeknop:active {
  text-decoration: none !important;
}
.voll-keuzehulp .vk-tegel:hover,
.voll-keuzehulp .vk-tegel:focus,
.voll-keuzehulp .vk-tegel:active {
  background: #fff !important;
  color: var(--vk-donker) !important;
  border-color: var(--vk-oranje-zacht) !important;
}
.voll-keuzehulp .vk-tegel:hover *,
.voll-keuzehulp .vk-tegel:focus *,
.voll-keuzehulp .vk-tegel:active * {
  color: inherit !important;
}
.voll-keuzehulp .vk-tegel.vk-actief:hover,
.voll-keuzehulp .vk-tegel.vk-actief:focus,
.voll-keuzehulp .vk-tegel.vk-actief:active {
  background: var(--vk-oranje) !important;
  color: #fff !important;
  border-color: var(--vk-oranje) !important;
}
.voll-keuzehulp .vk-keuzeknop:hover,
.voll-keuzehulp .vk-keuzeknop:focus,
.voll-keuzehulp .vk-keuzeknop:active {
  background: #fff !important;
  color: var(--vk-donker) !important;
  border-color: var(--vk-oranje-zacht) !important;
}
.voll-keuzehulp .vk-keuzeknop:hover strong,
.voll-keuzehulp .vk-keuzeknop:focus strong,
.voll-keuzehulp .vk-keuzeknop:active strong {
  color: var(--vk-donker) !important;
}
.voll-keuzehulp .vk-keuzeknop:hover span,
.voll-keuzehulp .vk-keuzeknop:focus span,
.voll-keuzehulp .vk-keuzeknop:active span {
  color: var(--vk-grijs) !important;
}
.voll-keuzehulp .vk-keuzeknop.vk-actief:hover,
.voll-keuzehulp .vk-keuzeknop.vk-actief:focus,
.voll-keuzehulp .vk-keuzeknop.vk-actief:active {
  background: var(--vk-oranje-tint) !important;
  border-color: var(--vk-oranje) !important;
}
.voll-keuzehulp .vk-keuzeknop.vk-actief:hover strong,
.voll-keuzehulp .vk-keuzeknop.vk-actief:focus strong,
.voll-keuzehulp .vk-keuzeknop.vk-actief:active strong {
  color: var(--vk-oranje) !important;
}

/* ================================================================
   VOLL FINAL WIDTH LOCK
   The active screen is intentionally compact (700px), while remaining
   responsive on small screens. This rule is last so Elementor/theme
   and earlier layout hardening cannot widen the wizard again.
   ================================================================ */
.voll-keuzehulp .vk-scherm.vk-actief {
  width: 700px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
.voll-keuzehulp .vk-scherm.vk-actief .vk-stap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.voll-keuzehulp .vk-scherm.vk-actief .vk-stappen,
.voll-keuzehulp .vk-scherm.vk-actief .vk-nav,
.voll-keuzehulp .vk-scherm.vk-actief .vk-voortgang {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
@media (max-width: 720px) {
  .voll-keuzehulp .vk-scherm.vk-actief {
    width: 100% !important;
  }
}


/* v3.7: consent checkbox — explicit, visible, Elementor-safe */
.voll-keuzehulp .vk-checkbox {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  cursor: pointer !important;
}
.voll-keuzehulp .vk-checkbox input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: grid !important;
  place-content: center !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #cfcfca !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  flex: none !important;
}
.voll-keuzehulp .vk-checkbox input[type="checkbox"]::before {
  content: "" !important;
  width: 11px !important;
  height: 6px !important;
  border-left: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  transform: rotate(-45deg) scale(0) !important;
  transition: transform .12s ease !important;
}
.voll-keuzehulp .vk-checkbox input[type="checkbox"]:checked {
  background: var(--vk-oranje) !important;
  border-color: var(--vk-oranje) !important;
}
.voll-keuzehulp .vk-checkbox input[type="checkbox"]:checked::before {
  transform: rotate(-45deg) scale(1) !important;
}
.voll-keuzehulp .vk-checkbox input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(239,123,62,.22) !important;
  outline-offset: 2px !important;
}
.voll-keuzehulp .vk-checkbox > span {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  line-height: 1.5 !important;
}

/* v3.7: answer cards may never overlap or escape their grid track */
.voll-keuzehulp .vk-keuzes {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.voll-keuzehulp .vk-keuzeknop {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 92px !important;
  overflow: hidden !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto !important;
}
.voll-keuzehulp .vk-keuzeknop strong,
.voll-keuzehulp .vk-keuzeknop span {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto !important;
}
.voll-keuzehulp .vk-keuzeknop strong { line-height: 1.25 !important; margin-bottom: 4px !important; }
.voll-keuzehulp .vk-keuzeknop span { line-height: 1.45 !important; }

/* v3.7: question area stays compact; result/product area may be wider */
.voll-keuzehulp .vk-scherm.vk-wizard,
.voll-keuzehulp .vk-scherm.vk-lead,
.voll-keuzehulp .vk-scherm.vk-rekenen,
.voll-keuzehulp .vk-scherm.vk-melding {
  width: min(700px, 100%) !important;
  max-width: 700px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.voll-keuzehulp .vk-scherm.vk-resultaat {
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.voll-keuzehulp .vk-resultaat-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(300px, 430px) minmax(0, 1fr) !important;
}
.voll-keuzehulp .vk-render,
.voll-keuzehulp .vk-koopblok,
.voll-keuzehulp .vk-resultaat-grid > * {
  min-width: 0 !important;
  max-width: 100% !important;
}
.voll-keuzehulp .vk-koopblok * { min-width: 0; }
.voll-keuzehulp .vk-usps li,
.voll-keuzehulp .vk-koop-noten li,
.voll-keuzehulp .vk-beschrijving,
.voll-keuzehulp .vk-noot { overflow-wrap: anywhere; word-break: break-word; }

@media (max-width: 699px) {
  .voll-keuzehulp .vk-keuzes { grid-template-columns: minmax(0, 1fr) !important; }
  .voll-keuzehulp .vk-scherm.vk-wizard,
  .voll-keuzehulp .vk-scherm.vk-lead,
  .voll-keuzehulp .vk-scherm.vk-rekenen,
  .voll-keuzehulp .vk-scherm.vk-melding,
  .voll-keuzehulp .vk-scherm.vk-resultaat { width: 100% !important; max-width: 100% !important; }
  .voll-keuzehulp .vk-resultaat-grid { grid-template-columns: minmax(0, 1fr) !important; }
}


/* v3.8: definitieve Elementor-isolatie + grid/typografie fixes */
.voll-keuzehulp .vk-keuzeknop,
.voll-keuzehulp .vk-keuzeknop:hover,
.voll-keuzehulp .vk-keuzeknop:focus,
.voll-keuzehulp .vk-keuzeknop:active {
  color: var(--vk-donker) !important;
  background: #fff !important;
  text-decoration: none !important;
  transform: none !important;
}
.voll-keuzehulp .vk-keuzeknop.vk-actief,
.voll-keuzehulp .vk-keuzeknop.vk-actief:hover,
.voll-keuzehulp .vk-keuzeknop.vk-actief:focus,
.voll-keuzehulp .vk-keuzeknop.vk-actief:active {
  color: var(--vk-oranje) !important;
  background: var(--vk-oranje-tint) !important;
}
.voll-keuzehulp .vk-keuzeknop strong,
.voll-keuzehulp .vk-keuzeknop:hover strong,
.voll-keuzehulp .vk-keuzeknop:focus strong,
.voll-keuzehulp .vk-keuzeknop:active strong {
  color: var(--vk-donker) !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.voll-keuzehulp .vk-keuzeknop.vk-actief strong { color: var(--vk-oranje) !important; }
.voll-keuzehulp .vk-keuzeknop span,
.voll-keuzehulp .vk-keuzeknop:hover span,
.voll-keuzehulp .vk-keuzeknop:focus span,
.voll-keuzehulp .vk-keuzeknop:active span { color: var(--vk-grijs) !important; }

.voll-keuzehulp .vk-tegels {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.voll-keuzehulp .vk-tegel {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.voll-keuzehulp .vk-tegel-breed { grid-column: 1 / -1 !important; width: 100% !important; }

.voll-keuzehulp .vk-linkknop,
.voll-keuzehulp .vk-linkknop:hover,
.voll-keuzehulp .vk-linkknop:focus,
.voll-keuzehulp .vk-linkknop:active {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--vk-oranje) !important;
  text-align: center !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  transform: none !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}

.voll-keuzehulp .vk-uitgelicht,
.voll-keuzehulp .vk-uitgelicht-kaart,
.voll-keuzehulp .vk-uitgelicht-kaart strong,
.voll-keuzehulp .vk-uitgelicht-kaart p,
.voll-keuzehulp .vk-uitgelicht-datum {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.voll-keuzehulp .vk-uitgelicht-kaart { overflow: hidden !important; }
.voll-keuzehulp .vk-uitgelicht-kaart strong { display:block !important; }

/* Registered mark: always visually superscript when written inline. */
.voll-keuzehulp sup { vertical-align: super !important; line-height: 0 !important; font-size: .55em !important; }

@media (max-width: 699px) {
  .voll-keuzehulp .vk-tegels { grid-template-columns: minmax(0, 1fr) !important; }
  .voll-keuzehulp .vk-tegel-breed { grid-column: auto !important; }
}


/* VOLL v5.1 — prevent duplicate lead submits and show clear sending state */
.vk-lead-form .vk-knop.is-versturen{opacity:.78;cursor:wait;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;}
.vk-lead-form .vk-knop:disabled{cursor:wait;}
.vk-submit-spinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:vollVkSpin .7s linear infinite;flex:0 0 16px;}
@keyframes vollVkSpin{to{transform:rotate(360deg)}}

/* v5.2 submit state */
.voll-keuzehulp .vk-lead-form .vk-knop.is-versturen{opacity:.82!important;cursor:wait!important;pointer-events:none!important;display:inline-flex!important;align-items:center;justify-content:center;gap:10px;}
.voll-keuzehulp .vk-submit-spinner{display:inline-block;width:17px;height:17px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:vollVkSpin .7s linear infinite;flex:0 0 17px;}
@keyframes vollVkSpin{to{transform:rotate(360deg)}}


/* ================================================================
   VOLL v5.5 — mobile polish + stable responsive controls
   ================================================================ */

/* Primary CTA gets visual priority over the secondary experience link. */
@media (max-width: 699px) {
  .voll-keuzehulp .vk-jaar-cta .vk-cta-rij,
  .voll-keuzehulp .vk-jaar .vk-cta-rij,
  .voll-keuzehulp .vk-bijzonder .vk-cta-rij {
    width: 100%;
    align-items: stretch;
    gap: 10px;
  }
  .voll-keuzehulp .vk-jaar-cta .vk-cta-rij .vk-knop,
  .voll-keuzehulp .vk-jaar .vk-cta-rij .vk-knop,
  .voll-keuzehulp .vk-bijzonder .vk-cta-rij .vk-knop {
    width: 100% !important;
    min-height: 56px;
    padding: 15px 22px;
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .voll-keuzehulp .vk-jaar-cta .vk-cta-rij .vk-knop-secundair,
  .voll-keuzehulp .vk-jaar .vk-cta-rij .vk-knop-secundair,
  .voll-keuzehulp .vk-bijzonder .vk-cta-rij .vk-knop-secundair {
    width: 100% !important;
    min-height: 48px;
    padding: 12px 18px;
    font-size: 14px;
  }

  /* Step 1/2 input remains compact enough to keep kWh/Wp on one line. */
  .voll-keuzehulp .vk-invoerrij {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 10px;
  }
  .voll-keuzehulp .vk-invoerrij input {
    flex: 0 1 160px;
    width: 160px !important;
    max-width: 160px !important;
    min-width: 0 !important;
  }
  .voll-keuzehulp .vk-eenheid {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* The battery toggle is a normal, readable two-button control. */
  .voll-keuzehulp .vk-schakel {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--vk-rand);
    border-radius: 12px;
    background: #fff;
  }
  .voll-keuzehulp .vk-schakel button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    white-space: normal;
    line-height: 1.25;
  }
}

/* On desktop the same control stays compact and clearly segmented. */
.voll-keuzehulp .vk-schakel {
  border: 1px solid var(--vk-rand);
  background: #fff;
}
.voll-keuzehulp .vk-schakel button.vk-actief {
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* BTW explanation: keep the parent phrase intact and move the bracketed
   value to line 2 on narrow screens, as requested. */
.voll-keuzehulp .vk-btw-detail { display: inline; }
@media (max-width: 699px) {
  .voll-keuzehulp .vk-btw-detail { display: block; }
}

/* Result screen transitions should always have a clean top anchor. */
.voll-keuzehulp { scroll-margin-top: 12px; }