/* Vormportaal Prijzen – [vormportaal_prijzen] en de tab Prijzen in het gebruikersmenu */
.vpp { --vpp-accent: #111; color: #111; font-size: 15px; line-height: 1.5; }
.vpp *, .vpp *::before, .vpp *::after { box-sizing: border-box; }

.vpp-portaal { margin: 0 0 16px; }
.vpp-portaal label { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: #333; }
.vpp-portaal select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 10px; background: #fff; font-size: 15px; }

.vpp-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; box-shadow: none; }
.vpp-info { margin: -8px 0 16px !important; font-size: 13px; line-height: 1.4; color: #777; text-align: center; }
.vpp-info-let { color: #6b3f00; }
.vpp-gebruik { margin-left: 5px; color: #888; }

/* Schakelaar Maandelijks / Jaarlijks, met een pijltje naar de korting */
.vpp-switch { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; width: max-content; max-width: 100%; margin: 0 auto 56px; }
/* Beide labels goed leesbaar (Jaarlijks moet opvallen); de gekozen stand vetter */
.vpp-sw-label { padding: 4px 2px; border: 0; background: none; color: #111; font: inherit; font-size: 16px; font-weight: 400; cursor: pointer; box-shadow: none; line-height: 1.2; }
.vpp-sw-label.is-aan { font-weight: 600; }
.vpp-toggle { position: relative; width: 52px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: #5f5f66; cursor: pointer; box-shadow: none; transition: background .2s; flex: none; }
.vpp-toggle span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.vpp-toggle[aria-checked="true"] { background: var(--vpp-accent); }
.vpp-toggle[aria-checked="true"] span { transform: translateX(22px); }
.vpp-korting { position: absolute; left: 100%; top: 2px; margin-left: 4px; display: block; width: 210px; height: 76px; color: var(--vpp-accent); pointer-events: none; }
.vpp-pijl { position: absolute; left: 0; top: 0; width: 120px; height: 59px; }
.vpp-korting-tekst { position: absolute; left: 118px; top: 44px; white-space: nowrap; font-size: 16px; font-weight: 600; }
/* Minder ruimte (bijv. in het gebruikersmenu): kleiner pijltje, dat meeloopt in de rij */
@container (max-width: 700px) {
  .vpp-korting { position: relative; left: auto; top: 16px; margin-left: -6px; width: 150px; height: 58px; }
  .vpp-pijl { width: 86px; height: 42px; }
  .vpp-korting-tekst { left: 82px; top: 32px; font-size: 14px; }
}
/* Smal (telefoon): de korting gewoon eronder, zonder pijltje */
@container (max-width: 440px) {
  .vpp-switch { flex-wrap: wrap; margin-bottom: 26px; }
  .vpp-korting { position: static; width: 100%; height: auto; margin: 0; text-align: center; }
  .vpp-pijl { display: none; }
  .vpp-korting-tekst { position: static; font-size: 14px; }
}

/* Blokken */
/* Volle breedte, ook in een Stapelen-blok (flex): anders rekent de browser de hoogte uit alsof de
   blokken onder elkaar staan, en blijft er veel lege ruimte onder de blokken over. */
.vpp { container-type: inline-size; width: 100%; max-width: 100%; align-self: stretch; flex: none; }
/* Vier naast elkaar als er ruimte is, anders twee of één (naar de breedte van de pagina-inhoud) */
.vpp-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
@container (min-width: 480px) { .vpp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 940px) { .vpp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vpp-kaart { position: relative; display: flex; flex-direction: column; justify-content: flex-start; padding: 22px 22px 24px; border: 1px solid #e4e4e4; border-radius: 20px; background: #fff; }
.vpp-meest { border: 2px solid var(--vpp-accent); padding: 21px 21px 23px; }
.vpp-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; background: var(--vpp-accent); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.vpp-huidig { background: #fafafa; }
/* Sinds 1.76.0: de naam 6px hoger, zodat de ruimte boven de letters gelijk oogt met de ruimte links ervan;
   en losse regeleinden of lege alinea's (van de tekstfilter van WordPress, bijv. in de lade) duwen de naam niet omlaag */
.vpp-kaart > br, .vpp-kaart > p:empty { display: none !important; }
.vpp .vpp-kaart h3.vpp-naam { margin: -6px 0 8px !important; padding: 0 !important; font-size: 28px !important; font-weight: 500 !important; line-height: 1.2 !important; }   /* sinds 1.64.5 groter en Medium */
.vpp .vpp-kaart p.vpp-oms { margin: 0 0 16px !important; padding: 0 !important; color: #777; font-size: 14px !important; line-height: 1.45 !important; min-height: 2.9em; }
.vpp-prijs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.vpp-bedrag, .vpp-per { white-space: nowrap; }
.vpp-bedrag { font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
.vpp-bedrag-tekst { font-size: 26px; }
.vpp-per { color: #777; font-size: 14px; }
.vpp-sub { min-height: 1.5em; margin: 4px 0 18px; color: #777; font-size: 13px; }
.vpp-knop { display: block; width: 100%; margin: 0 0 18px; padding: 12px 16px; border: 1px solid #111; border-radius: 999px; background: #fff; color: #111; font-size: 15px; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer; box-shadow: none; line-height: 1.2; }
.vpp-knop:hover { background: #111; color: #fff; }
.vpp-meest .vpp-knop { background: var(--vpp-accent); border-color: var(--vpp-accent); color: #fff; }
.vpp-meest .vpp-knop:hover { filter: brightness(1.1); }
.vpp-knop[disabled], .vpp-knop[disabled]:hover { background: #f0f0f0; border-color: #f0f0f0; color: #888; cursor: default; filter: none; }
.vpp-features { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.vpp-features li { position: relative; margin: 0; padding: 5px 0 5px 26px; }
.vpp-features li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 14px; height: 14px; background: no-repeat center/14px 14px; }
.vpp-features li.ja::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2350C879' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.vpp-noot { margin: 18px 0 0; color: #777; font-size: 14px; text-align: center; }

/* In het gebruikersmenu (smallere ruimte) */
/* Sinds 1.74.0: op mobiel in de instellingenlade een carrousel: de pakketten naast elkaar, swipen naar het
   volgende, met bolletjes eronder. Loopt tot de rand van het scherm; het volgende pakket kijkt net om de hoek. */
.vpp-bolletjes { display: none; }
.vpp-voordeel { display: none; }
@media screen and (max-width: 768px) {
  .vpp[data-context="menu"] .vpp-grid { position: relative; display: flex !important; grid-template-columns: none; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -20px; padding: 16px 20px 32px; scroll-padding: 0 20px; }
  .vpp[data-context="menu"] .vpp-grid::-webkit-scrollbar { display: none; }
  .vpp[data-context="menu"] .vpp-kaart { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; }
  .vpp[data-context="menu"] .vpp-bolletjes { display: flex; justify-content: center; gap: 10px; margin: 4px 0 0; }
  .vpp[data-context="menu"] .vpp-bolletjes button { width: 9px; height: 9px; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 50%; background: #d4d4d4; cursor: pointer; transition: background .2s, transform .2s; }
  .vpp[data-context="menu"] .vpp-bolletjes button.is-aan { background: #111; transform: scale(1.2); }
  /* Sinds 1.75.0: compacter. "Bespaar x%" niet bovenin maar in de blokken, onder de prijs: zwart bij Maandelijks
     ("Je laat x% voordeel liggen"), groen bij Jaarlijks ("Je bespaart x%") */
  .vpp[data-context="menu"] .vpp-korting { display: none !important; }
  .vpp[data-context="menu"] .vpp-switch { margin-bottom: 10px !important; }   /* sinds 1.76.0 10px ruimte onder de schuif */
  .vpp[data-context="menu"] .vpp-grid { align-items: flex-start; padding-top: 18px; }
  .vpp[data-context="menu"] .vpp-kaart.vpp-met-knop { padding-bottom: 36px; }
  .vpp[data-context="menu"] .vpp-kaart p.vpp-oms { margin-bottom: 6px !important; }   /* 10px minder boven de prijs */
  .vpp[data-context="menu"] .vpp-voordeel { display: block; margin: 6px 0 0; color: #111; font-size: 14px; font-weight: 600; line-height: 1.35; }
  .vpp[data-context="menu"] .vpp-voordeel.is-jaar { color: #50C879; }
  .vpp[data-context="menu"] .vpp-voordeel + .vpp-sub { margin-top: 2px; }
}


/* Bevestigen */
.vpp-modal { position: fixed; inset: 0; z-index: 2147483500; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.45); }
.vpp-venster { width: 480px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto; padding: 30px; border-radius: 24px; background: #fff; color: #111; box-shadow: 0 20px 60px rgba(0,0,0,.3); font-size: 15px; line-height: 1.55; }
.vpp-venster h3 { margin: 0 0 14px !important; padding: 0 !important; font-size: 21px; font-weight: 600; line-height: 1.25 !important; }   /* ruimte tot de regel eronder, ook tegen thema-stijlen in */
.vpp-venster h3 + p { margin-top: 0 !important; }
.vpp-venster p { margin: 0 0 12px; color: #444; }
.vpp-venster ul { margin: 0 0 12px; padding-left: 20px; color: #444; }
.vpp-let { padding: 12px 14px; border-radius: 12px; background: #fff4e5; color: #6b3f00 !important; }
.vpp-acties { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.vpp-acties button { padding: 10px 20px; border: 1px solid #ddd; border-radius: 999px; background: #fff; color: #111; font-size: 15px; cursor: pointer; box-shadow: none; }
.vpp-acties .vpp-ja { background: #111; border-color: #111; color: #fff; }
.vpp-acties .vpp-ja.vpp-rood { background: #dc2626; border-color: #dc2626; }
.vpp-acties button:disabled { opacity: .5; cursor: wait; }
.vpp-fout { color: #c62828 !important; }
.vpp-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 2147483600; padding: 12px 20px; border-radius: 12px; background: #1f9d55; color: #fff; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.2); max-width: calc(100vw - 32px); }
/* Bestelvenster: factuurgegevens en akkoord (sinds 1.27.0) */
.vpp-venster:has(.vpp-velden) { width: 640px; }
.vpp-venster h4 { margin: 18px 0 10px; font-size: 15px; font-weight: 600; color: #111; }
.vpp-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.vpp-veld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #666; }
.vpp-veld.vpp-breed { grid-column: 1 / -1; }
.vpp-veld input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #ddd; border-radius: 10px; background: #fff; color: #111; font: inherit; font-size: 15px; }
.vpp-veld input:focus { outline: none; border-color: #111; }
.vpp-akkoord { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; color: #333; cursor: pointer; }
.vpp-akkoord input { margin-top: 3px; flex: none; width: 16px; height: 16px; }
.vpp-akkoord a { color: #111; text-decoration: underline; }
@media (max-width: 560px) { .vpp-velden { grid-template-columns: 1fr; } }
/* Blok "Zo werkt bestellen en betalen" (sinds 1.27.1) */
.vpp-uitleg { margin: 56px 0 0; padding: 36px; border-radius: 24px; background: #f6f6f6; color: #111; }
.vpp-uitleg-kop { margin: 0 0 24px !important; font-size: 24px; font-weight: 600; }
.vpp-stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.vpp-stappen li { margin: 0; }
.vpp-stap-nr { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 12px; border-radius: 50%; background: var(--vpp-accent, #111); color: #fff; font-size: 15px; font-weight: 600; }
.vpp-stappen strong { display: block; margin-bottom: 6px; font-size: 16px; }
.vpp-stappen p { margin: 0; color: #555; font-size: 14px; line-height: 1.55; }
@media (max-width: 900px) { .vpp-stappen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vpp-uitleg { padding: 24px 20px; } .vpp-stappen { grid-template-columns: 1fr; } }
/* Portaal opzeggen (sinds 1.28.0) */
.vpp-opzeg { margin: 28px 0 0; text-align: center; font-size: 14px; color: #555; }
.vpp-opzeg-knop { color: #888 !important; }
.vpp-opzeg-actief { padding: 16px 20px; border-radius: 16px; background: #fff4e5; color: #6b3d00; text-align: left; line-height: 1.6; }
.vpp-opzeg-actief .vpp-link { margin-left: 6px; }
.vpp-veld select { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #ddd; border-radius: 10px; background: #fff; color: #111; font: inherit; font-size: 15px; }
/* [vormportaal_afspraken]: verlengen, overstappen, opzeggen (sinds 1.29.2) */
.vpp-afspraken { box-sizing: border-box; width: 100%; max-width: 100%; align-self: stretch; flex: none; margin: 0 !important; padding: 0; list-style: none; font-size: 12px; line-height: 1.5; }   /* klein corps (sinds 1.30.1); volle breedte, ook in een Stapelen-blok (1.30.2) */
.vpp-afspraken li:last-child { margin-bottom: 0; }
/* WordPress zet een shortcode vaak in een <p>; een lijst mag daar niet in, dus de browser maakt er lege
   alinea's omheen. Die nemen ruimte in (zeker in een Stapelen-blok): verbergen (1.30.2). */
p:empty:has(+ .vpp-afspraken), .vpp-afspraken + p:empty, p:empty:has(+ .vpp), .vpp + p:empty { display: none !important; }
.vpp-afspraken li { margin: 0 0 6px; padding: 0; }
.vpp-afspraken strong { font-weight: 600; }
/* Knop onderaan het blok, half over de onderrand (sinds 1.31.0) */
.vpp-grid { row-gap: 44px; margin-bottom: 34px; }
.vpp-kaart.vpp-met-knop { padding-bottom: 46px; }
.vpp-kaart .vpp-knop { position: absolute; left: 50%; bottom: 0; width: auto; min-width: 62%; max-width: calc(100% - 44px); margin: 0; transform: translate(-50%, 50%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpp-kaart .vpp-knop:not(:hover):not([disabled]) { background: #fff; }
.vpp-meest .vpp-knop:not(:hover):not([disabled]) { background: var(--vpp-accent); }
.vpp-kaart .vpp-knop[disabled] { border-color: #e4e4e4; }
/* Openbare prijzenpagina: de knop 'Aan de slag' zwart met witte tekst (sinds 1.32.0) */
.vpp-kaart a.vpp-knop, .vpp-kaart a.vpp-knop:not(:hover):not([disabled]) { background: #111; border-color: #111; color: #fff !important; }
.vpp-kaart a.vpp-knop:hover { background: #333; border-color: #333; color: #fff !important; }
/* Blok 'Zo werkt bestellen en betalen': wit en licht doorschijnend, net als Aanmelden */
.vpp-uitleg { background: rgba(255,255,255,.75); }
/* Sinds 1.37.3: stapnamen even groot en vet als de pakketnamen; op de prijzenpagina alleen een rand om Meest gekozen */
.vpp .vpp-stappen strong, .vpp-bestellen .vpp-stappen strong { font-size: 20px; font-weight: 600; line-height: 1.25; }
.vpp[data-context="pagina"] .vpp-kaart:not(.vpp-meest) { border-color: transparent; }

/* [vormportaal_bestellen] (sinds 1.38.0): los blok, zonder eigen marge erboven */
.vpp-bestellen { color: #111; font-size: 15px; line-height: 1.5; }
.vpp-bestellen *, .vpp-bestellen *::before, .vpp-bestellen *::after { box-sizing: border-box; }
.vpp-bestellen .vpp-uitleg { margin: 0; }
p:empty:has(+ .vpp-bestellen), .vpp-bestellen + p:empty, p:empty:has(+ .vpp-kleine-lettertjes), .vpp-kleine-lettertjes + p:empty { display: none !important; }
/* Lijn van bol naar bol, verticaal door het midden van de bollen; alleen als de vier stappen naast elkaar staan */
@media (min-width: 901px) {
  .vpp-stappen li { position: relative; }
  .vpp-stappen li:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 44px; right: -12px; height: 2px; border-radius: 1px; background: var(--vpp-accent, #111); opacity: .35; }
}
/* [vormportaal_afspraken]: kopje "De kleine lettertjes" met een pijl om in en uit te klappen (sinds 1.38.0) */
.vpp-kleine-lettertjes { margin: 0; }
.vpp-kleine-lettertjes > summary { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; line-height: 1.3; user-select: none; }
.vpp-kleine-lettertjes > summary::-webkit-details-marker { display: none; }
.vpp-kleine-lettertjes > summary::marker { content: ""; }
.vpp-kl-pijl { flex: none; transition: transform .2s; }
.vpp-kleine-lettertjes[open] .vpp-kl-pijl { transform: rotate(180deg); }
.vpp-kleine-lettertjes:not([open]) > summary { margin-bottom: 0; }