/**
 * IAB Aanbieders: plugin-CSS.
 * Alle kleuren via var(--iab-*) uit het theme :root-blok. Geen hardcoded hex
 * hier, ook niet in scorepaneel, sub-scores, tabel-highlight of CTA-kaarten.
 * Breakpoints: 480 / 600 / 860px.
 */

.iab-app { --iab-app-radius: var(--iab-radius, 12px); }

/* =========================================================================
 * 0. Basis / knoppen
 * ========================================================================= */
.iab-app a { color: var(--iab-primary); }
/* Knoppen binnen de app houden hun eigen tekstkleur: .iab-app a is
   specifieker dan .iab-btn en maakte knoptekst anders blauw op blauw. */
.iab-app a.iab-btn, .iab-app a.iab-btn:hover, .iab-app a.iab-btn-cta { color: var(--iab-on-primary); }
.iab-app a.iab-btn--ghost, .iab-app a.iab-btn--outline { color: var(--iab-ink); }
/* De affiliate-CTA in een resultaatkaart is de enige knop die om een actie
   vraagt: die krijgt het oranje accent, de rest blijft marineblauw. */
.iab-btn-cta, .iab-app a.iab-btn-cta { background: var(--iab-cta); color: var(--iab-on-primary); }
.iab-btn-cta:hover, .iab-app a.iab-btn-cta:hover { background: var(--iab-cta-dark); color: var(--iab-on-primary); }
.iab-btn, .iab-btn-cta, .iab-btn-submit {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	font-weight: 700; font-size: 1rem; line-height: 1;
	padding: 13px 22px; border-radius: var(--iab-radius-sm); border: 1px solid transparent;
	cursor: pointer; transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
	text-decoration: none; white-space: nowrap; background: var(--iab-primary); color: var(--iab-on-primary);
}
.iab-btn:hover, .iab-btn-cta:hover, .iab-btn-submit:hover { background: var(--iab-primary-dark); color: var(--iab-on-primary); text-decoration: none; }
.iab-btn--primary { background: var(--iab-primary); color: var(--iab-on-primary); }
.iab-btn--lg { font-size: 1.1rem; padding: 18px 30px; }
.iab-btn--sm { font-size: .85rem; padding: 9px 16px; }
.iab-btn--block { width: 100%; }

.iab-container { width: 100%; max-width: var(--iab-container); margin-inline: auto; padding-inline: 20px; }
.iab-section { padding-block: clamp(40px, 5vw, 72px); }
.iab-lead { font-size: 1.1rem; color: var(--iab-muted); max-width: 60ch; }

/* =========================================================================
 * 1. Filters / resultatenpagina [iab_resultaten]
 * ========================================================================= */
.iab-results { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; }
/* Grid-items krijgen standaard min-width:auto (op basis van hun min-content),
   waardoor een niet-wrappende rij de kolom breder kan duwen dan de viewport.
   Zonder deze reset ontstaat er op mobiel horizontale overflow zodra de
   filterkolom open staat. */
.iab-sidebar-col, .iab-results__main { min-width: 0; }
/* De gegevenskaart, de filterkaart en de belofte-kaart staan in dezelfde
   grid-kolom. De meelopende positionering zit op deze kolomwrapper (niet op
   .iab-filters zelf), zodat de drie kaarten samen 1 scrollgebied vormen onder
   de meelopende sitekop. Zonder eigen maximum loopt de kolom bij veel
   filtergroepen het scherm uit. */
.iab-sidebar-col {
	display: flex; flex-direction: column; gap: 16px;
	position: sticky; top: 90px; max-height: calc(100vh - 108px);
	overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
/* Zonder deze regel geeft de flexbox-standaard flex-shrink:1 de kaarten de
   ruimte die toevallig overblijft binnen max-height, in plaats van hun eigen
   inhoudshoogte: de onderste kaart wordt dan platgeknepen terwijl de kolom
   zelf hoort te scrollen. */
.iab-sidebar-col > * { flex-shrink: 0; }
.iab-sidebar-col::-webkit-scrollbar { width: 8px; }
.iab-sidebar-col::-webkit-scrollbar-thumb { background: var(--iab-border); border-radius: 999px; }

.iab-filters { background: var(--iab-card, var(--iab-surface)); border: 1px solid var(--iab-border); border-radius: var(--iab-app-radius); padding: 22px; }
.iab-filters__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.iab-filters__title { margin: 0; font-size: 1.15rem; }
.iab-filters__reset { background: none; border: 0; color: var(--iab-primary); font-weight: 700; cursor: pointer; font-size: .85rem; white-space: nowrap; }
.iab-filters__mobtoggle { display: none; background: var(--iab-card, var(--iab-surface)); border: 1px solid var(--iab-border); border-radius: var(--iab-radius-btn); padding: 10px 16px; font-weight: 700; cursor: pointer; }

/* Tussenkopjes per filtergroep, met een dunne scheidingslijn: 24px lucht
   tussen groepen, 12px binnen een groep (in plaats van de generieke 22px
   .iab-fgroup-marge hieronder). */
.iab-filters__group + .iab-filters__group { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--iab-border); }
.iab-filters__grouphead { margin: 0 0 12px; font-size: .95rem; font-weight: 700; color: var(--iab-ink); }
.iab-filters__group .iab-fgroup { margin-bottom: 14px; }
.iab-filters__group .iab-fgroup:last-child { margin-bottom: 0; }

.iab-fgroup { margin-bottom: 22px; }
.iab-fgroup__label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 8px; }
.iab-range-val { font-weight: 700; color: var(--iab-primary); margin-bottom: 4px; }
.iab-range-val--inline { margin-bottom: 0; font-size: .85rem; }
.iab-range__minmax { display: flex; justify-content: space-between; font-size: .78rem; color: var(--iab-muted); }

/* Slider met een gevulde baan in marineblauw. De vulling komt uit de
   --iab-range-fill custom property die iab-resultaten.js na elke render
   bijwerkt; Firefox tekent 'm zelf via ::-moz-range-progress, waar die
   property dus overbodig maar onschadelijk is. */
.iab-range {
	width: 100%; height: 6px; margin: 8px 0;
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	background: linear-gradient(to right, var(--iab-primary) var(--iab-range-fill, 0%), var(--iab-border) var(--iab-range-fill, 0%));
	border-radius: 999px; cursor: pointer; accent-color: var(--iab-primary);
}
.iab-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: transparent; }
.iab-range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--iab-border); }
.iab-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--iab-primary); }
.iab-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
	background: var(--iab-primary); border: 3px solid var(--iab-card, var(--iab-surface));
	box-shadow: var(--iab-shadow-1); cursor: pointer;
}
.iab-range::-moz-range-thumb {
	width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--iab-card, var(--iab-surface));
	background: var(--iab-primary); box-shadow: var(--iab-shadow-1); cursor: pointer;
}

/* Klein rond i-icoontje als tooltip-trigger, naast een groepslabel dat geen
   ruimte heeft voor een hele tekstlink. */
.iab-tip-icon {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 16px; height: 16px; border-radius: 50%; padding: 0;
	border: 1.5px solid var(--iab-primary); background: none; color: var(--iab-primary);
	font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer;
}
.iab-tip-icon:hover { background: var(--iab-primary); color: var(--iab-on-primary); }

.iab-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.iab-tile { background: var(--iab-bg); border: 1px solid var(--iab-border); border-radius: 999px; padding: 8px 14px; font-size: .85rem; font-weight: 700; color: var(--iab-ink); cursor: pointer; }
.iab-tile[aria-pressed="true"] { background: var(--iab-primary); border-color: var(--iab-primary); color: var(--iab-on-primary); }

.iab-checks-list, .iab-radio-list { display: flex; flex-direction: column; gap: 8px; }
.iab-check { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; }
.iab-check.is-unavailable { opacity: .5; }
.iab-check__loc { font-style: normal; color: var(--iab-muted); font-size: .82em; }

.iab-fgroup--verbinding .iab-check { align-items: flex-start; }

/* flex-wrap: een lang groepslabel ("Snelheid die bij je huishouden past") werd
   naast de tooltip-link tot vier regels samengeknepen. Nu krijgt het label de
   volle kolombreedte en zakt de link naar een eigen regel. */
.iab-fgroup__labelrow { display: flex; align-items: center; justify-content: space-between; gap: 4px 8px; margin-bottom: 6px; flex-wrap: wrap; }
.iab-fgroup__labelrow .iab-fgroup__label { margin-bottom: 0; flex: 1 1 auto; }
.iab-fgroup__wijzig { background: none; border: 0; color: var(--iab-primary); font-weight: 700; font-size: .82rem; cursor: pointer; padding: 0; white-space: nowrap; }
.iab-fgroup__summary { margin: 0 0 8px; font-size: .85rem; color: var(--iab-muted); }

.iab-tip-toggle { background: none; border: 0; color: var(--iab-primary); font-weight: 600; font-size: .78rem; cursor: pointer; padding: 0; text-decoration: underline; white-space: nowrap; }
.iab-tip { margin: 8px 0 0; padding: 10px 12px; background: var(--iab-tint-1, var(--iab-surface)); border-radius: var(--iab-radius-sm); font-size: .82rem; color: var(--iab-text); line-height: 1.5; }
.iab-tip[hidden] { display: none; }

/* Gegevenskaart boven de filterkaart, met dezelfde kaartvorm (alleen zichtbaar
   als de niche-config 'adrescheck' => true heeft staan). */
.iab-gegevens {
	background: var(--iab-card, var(--iab-surface)); border: 1px solid var(--iab-border);
	border-radius: var(--iab-app-radius); padding: 22px;
	display: flex; flex-direction: column; gap: 12px;
}
.iab-gegevens__title { margin: 0; font-size: 1.05rem; }
.iab-gegevens__ingevuld { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.iab-gegevens__ingevuld[hidden] { display: none; }
.iab-gegevens__adres { font-size: .95rem; font-weight: 600; color: var(--iab-text); }
/* Rond marineblauw knopje met potlood-icoon, linksonder in de kaart; opent via
   de bestaande wijzig-navigatie de invulvelden weer. */
.iab-gegevens__potlood {
	width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; border: 0;
	background: var(--iab-primary); color: var(--iab-on-primary);
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.iab-gegevens__potlood:hover { background: var(--iab-primary-dark); }
.iab-gegevens__form[hidden] { display: none; }
.iab-gegevens__hulp { margin: 0 0 10px; font-size: .9rem; color: var(--iab-muted); line-height: 1.5; }
/* Postcode heeft ruimte nodig voor "1234 AB", huisnummer voor twee tot vier
   tekens. De knop kreeg eerder alle overgebleven breedte, waardoor de postcode
   in de smalle kolom tot "123" werd afgekapt: knop nu op een eigen regel. */
.iab-gegevens__row { display: flex; flex-wrap: wrap; gap: 8px; }
.iab-gegevens__row input { min-width: 0; padding: 10px 12px; border: 1px solid var(--iab-border); border-radius: var(--iab-radius-sm); font-size: .88rem; background: var(--iab-card, var(--iab-surface)); color: var(--iab-ink); }
.iab-gegevens__row input[name="postcode"] { flex: 2 1 7.5em; }
.iab-gegevens__row input[name="huisnr"] { flex: 1 1 4.5em; }
.iab-gegevens__row .iab-btn { flex: 1 0 100%; padding: 10px 14px; }
.iab-gegevens__status { margin: 0; font-size: .85rem; color: var(--iab-muted); line-height: 1.5; }
.iab-gegevens__status[hidden] { display: none; }
.iab-gegevens__status.is-error { color: var(--iab-danger); }

/* Abonnementsvorm als pil-rij: internet vast gevuld, tv en bellen als
   toggle-pillen met een zichtbaar vinkvak erin. */
.iab-pakket-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.iab-pakket-plus { color: var(--iab-muted); font-weight: 700; font-size: .9rem; }
.iab-pill {
	display: inline-flex; align-items: center; gap: 7px;
	font-weight: 700; font-size: .82rem; line-height: 1;
	padding: 10px 12px; border-radius: var(--iab-radius-btn); cursor: pointer; user-select: none;
	border: 1px solid var(--iab-border); background: var(--iab-card, var(--iab-surface)); color: var(--iab-ink);
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.iab-pill--vast { background: var(--iab-primary); border-color: var(--iab-primary); color: var(--iab-on-primary); cursor: default; }
.iab-pill--toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.iab-pill__box {
	width: 15px; height: 15px; flex: 0 0 15px; border-radius: 5px; position: relative;
	border: 1.5px solid var(--iab-border); background: var(--iab-card, var(--iab-surface));
}
.iab-pill--toggle:hover { border-color: var(--iab-primary); }
.iab-pill--toggle:has(input:checked) { background: var(--iab-primary); border-color: var(--iab-primary); color: var(--iab-on-primary); }
.iab-pill--toggle:has(input:checked) .iab-pill__box { background: var(--iab-on-primary); border-color: var(--iab-on-primary); }
.iab-pill--toggle:has(input:checked) .iab-pill__box::after {
	content: ""; position: absolute; left: 3.5px; top: 4.5px; width: 7px; height: 3.5px;
	border-left: 2px solid var(--iab-primary); border-bottom: 2px solid var(--iab-primary); transform: rotate(-45deg);
}
.iab-pill--toggle:has(input:focus-visible) { outline: 2px solid var(--iab-primary); outline-offset: 2px; }

/* Levering en installatie: drie losse booleaanse filters, elk met precies 1
   checkbox, dicht op elkaar onder 1 gedeelde tussenkop. */
.iab-fgroup--levering { display: flex; flex-direction: column; gap: 10px; }
.iab-fgroup__labelrow--tip { margin-bottom: 0; }
.iab-fgroup__labelrow--spaced { margin-top: 16px; }

/* Statusregel van de server-side bel-filters. */
.iab-fgroup__status { margin: 8px 0 0; font-size: .85rem; color: var(--iab-muted); }
.iab-fgroup__status[hidden] { display: none; }
.iab-fgroup__status.is-error { color: var(--iab-danger); }

/* Ondergrens-filter als uitklaplijst: een knop met de huidige keuze plus een
   paneel met echte radio's. */
.iab-selectmin { position: relative; }
.iab-selectmin__trigger {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 11px 14px; border: 1px solid var(--iab-border); border-radius: var(--iab-radius-sm);
	background: var(--iab-card, var(--iab-surface)); color: var(--iab-ink); font-weight: 700; font-size: .9rem;
	font-family: inherit; cursor: pointer;
}
.iab-selectmin__trigger:hover { border-color: var(--iab-primary); }
.iab-selectmin__chevron { flex: 0 0 auto; color: var(--iab-muted); transition: transform .15s ease; }
.iab-selectmin__trigger[aria-expanded="true"] .iab-selectmin__chevron { transform: rotate(180deg); }
.iab-selectmin__panel {
	position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5;
	background: var(--iab-card, var(--iab-surface)); border: 1px solid var(--iab-border); border-radius: var(--iab-radius-sm);
	box-shadow: var(--iab-shadow-soft, var(--iab-shadow-2)); padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.iab-selectmin__panel[hidden] { display: none; }
.iab-selectmin__option { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; cursor: pointer; font-size: .88rem; color: var(--iab-ink); }
.iab-selectmin__option:hover { background: var(--iab-tint-1, var(--iab-surface)); }
.iab-selectmin__option span { display: flex; align-items: baseline; gap: 6px; }
.iab-selectmin__option em { font-style: normal; font-size: .78rem; color: var(--iab-muted); }
/* Radiorondjes in dezelfde ontwerptaal als de vierkante checkboxen (18px),
   maar rond en met een gevulde stip in plaats van een vinkje. */
.iab-selectmin__option input[type="radio"] {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	width: 18px; height: 18px; flex: 0 0 18px; margin: 0;
	border: 1.5px solid var(--iab-border); border-radius: 50%;
	background: var(--iab-card, var(--iab-surface));
	display: inline-grid; place-content: center; cursor: pointer;
}
.iab-selectmin__option input[type="radio"]:checked { border-color: var(--iab-primary); }
.iab-selectmin__option input[type="radio"]:checked::after {
	content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--iab-primary);
}

.iab-filters__actions { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--iab-border); display: flex; flex-direction: column; gap: 10px; position: relative; }
.iab-filters__save, .iab-filters__share { background: var(--iab-card, var(--iab-surface)); border: 1px solid var(--iab-border); border-radius: var(--iab-radius-sm); padding: 10px 14px; font-weight: 700; font-size: .85rem; color: var(--iab-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.iab-filters__save:hover, .iab-filters__share:hover { border-color: var(--iab-primary); color: var(--iab-primary); }
.iab-filters__save-icon { font-size: 1rem; color: var(--iab-primary); }
.iab-filters__save.is-saved .iab-filters__save-icon { color: var(--iab-primary); }
.iab-filters__save.is-saved { border-color: var(--iab-primary); }
.iab-filters__sharebox { display: flex; gap: 6px; }
.iab-filters__sharebox[hidden] { display: none; }
.iab-filters__sharebox input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--iab-border); border-radius: var(--iab-radius-sm); font-size: .78rem; color: var(--iab-muted); }
.iab-filters__sharebox button { flex: 0 0 auto; background: var(--iab-primary); color: var(--iab-on-primary); border: 0; border-radius: var(--iab-radius-sm); padding: 0 12px; font-weight: 700; font-size: .8rem; cursor: pointer; }

/* Adviesbalk boven de resultatenlijst, alleen aanwezig met ?pakket= en
   ?f_snelheid= in de URL (iab-resultaten.js, initAdviesbalk()). Zelfde
   vouw-truc als .iab-vouw in de theme-CSS (style.css sectie 100), hier met
   plugin-tokens: geen hex/rgba, alles via var(--iab-*). */
.iab-adviesbalk {
	position: relative; overflow: hidden;
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
	background: var(--iab-card, var(--iab-surface)); border: 1px solid var(--iab-border);
	border-radius: var(--iab-app-radius); box-shadow: var(--iab-shadow-soft);
	padding: 16px 40px 16px 20px; margin-bottom: 18px;
	font-size: .92rem; color: var(--iab-text);
}
.iab-adviesbalk::before { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 28px 28px 0; border-color: transparent var(--iab-bg) transparent transparent; z-index: 1; }
.iab-adviesbalk::after { content: ""; position: absolute; top: 0; right: 0; width: 28px; height: 28px; background: linear-gradient(225deg, transparent 50%, var(--iab-accent) 50%); }
.iab-adviesbalk__tekst { margin: 0; }
.iab-adviesbalk__tekst strong { color: var(--iab-ink); }
.iab-adviesbalk__wijzig { font-weight: 700; color: var(--iab-primary); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.iab-adviesbalk__wijzig:hover { color: var(--iab-primary-dark); }

.iab-results__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
/* Compacte, gedempte resultaatregel links in de toolbar, met de actieve
   filters (indien aanwezig) als chips eronder. */
.iab-results__left { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.iab-results__count { margin: 0; color: var(--iab-muted); font-size: .92rem; }
.iab-results__toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.iab-results__sort { display: flex; align-items: center; gap: 8px; font-size: .9rem; margin-left: auto; }
.iab-results__sort select { padding: 9px 12px; border: 1px solid var(--iab-border); border-radius: var(--iab-radius-sm); background: var(--iab-card, var(--iab-surface)); color: var(--iab-ink); font-weight: 600; }
.iab-results__disclaimer { font-size: .82rem; color: var(--iab-muted); margin-top: 18px; }
.iab-no-results { padding: 32px; text-align: center; color: var(--iab-muted); }

/* Tekstschakel die de contractvorm wisselt: een marineblauwe tekstlink, geen
   knopvlak, zodat hij de sorteerselect ernaast niet beconcurreert. */
.iab-contractduur-switch {
	background: none; border: 0; padding: 0; color: var(--iab-primary); font-weight: 700; font-size: .85rem;
	cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.iab-contractduur-switch:hover { text-decoration: underline; }
.iab-contractduur-switch[hidden] { display: none; }

/* Actieve filters als wegklikbare chips. Bewust dubbel geklasseerd
   (.iab-chips .iab-chip): de losse .iab-chip verderop in dit bestand is het
   statische labelchipje in de detailuitklap, en dat mag deze knopvorm niet
   overschrijven, ongeacht de volgorde in het bestand. */
.iab-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }
.iab-chips .iab-chip {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--iab-tint-1, var(--iab-surface)); border: 1px solid var(--iab-border); border-radius: 999px;
	padding: 6px 10px 6px 14px; font-size: .82rem; font-weight: 700; color: var(--iab-ink); cursor: pointer;
}
.iab-chips .iab-chip:hover { border-color: var(--iab-primary); color: var(--iab-primary); }
.iab-chips .iab-chip span { font-size: 1rem; line-height: 1; color: var(--iab-muted); }
.iab-chips .iab-chip:hover span { color: var(--iab-primary); }

.iab-cards { display: flex; flex-direction: column; gap: 18px; position: relative; transition: opacity .15s ease; }

/* Laadstaat tijdens een server-side filterslag (fetch naar iab/v1/filter).
   Subtiel: verlaagde dekking plus een klein draaiend rondje rechtsboven, geen
   overlay die de kaarten verbergt. */
.iab-cards.is-loading { opacity: .5; pointer-events: none; }
.iab-cards.is-loading::after {
	content: "";
	position: absolute; top: 10px; right: 10px;
	width: 22px; height: 22px;
	border: 3px solid var(--iab-border);
	border-top-color: var(--iab-primary);
	border-radius: 50%;
	animation: iab-spin .7s linear infinite;
}
@keyframes iab-spin { to { transform: rotate(360deg); } }

/* Belofte-kaart onder de filterkaart: marineblauw vlak met witte tekst,
   dezelfde radius als de kaarten erboven. */
.iab-belofte-card {
	background: var(--iab-primary-dark); color: var(--iab-on-primary);
	border-radius: var(--iab-app-radius); padding: 22px 24px;
}
.iab-belofte-card__title { margin: 0 0 14px; font-size: 1.05rem; color: var(--iab-on-primary); }
.iab-belofte-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.iab-belofte-card__list li { display: flex; align-items: flex-start; gap: 9px; font-size: .92rem; line-height: 1.45; color: var(--iab-on-primary-soft); }
.iab-belofte-card__list svg { flex: 0 0 15px; margin-top: 3px; color: var(--iab-accent); }

@media (max-width: 860px) {
	.iab-results { grid-template-columns: minmax(0, 1fr); }
	.iab-sidebar-col { position: static; max-height: none; overflow-y: visible; }
	.iab-filters { position: static; display: none; }
	/* De belofte-kaart hoort visueel onder de filters en deelt daarom dezelfde
	   Filters-knop. .iab-filters.is-open wordt al gezet door de mobiele toggle
	   in iab-resultaten.js; via de sibling-combinator (de kaart staat direct na
	   .iab-filters in de DOM) is daar geen extra JS voor nodig. */
	.iab-belofte-card { display: none; }
	.iab-filters.is-open ~ .iab-belofte-card { display: block; }
	/* Mobiel: de filters zijn een volledig scherm-sheet met sticky voet, in
	   plaats van een eindeloze inline accordion. z-index boven de sticky
	   header, zodat de sheet niet half onder de site-kop verdwijnt. */
	.iab-filters.is-open {
		display: block;
		position: fixed; inset: 0; z-index: 300;
		border-radius: 0; border: 0; box-shadow: none;
		overflow-y: auto; -webkit-overflow-scrolling: touch;
		padding: 20px 20px 96px;
	}
	.iab-filters.is-open .iab-mfilters-foot { display: flex; }
	.iab-filters.is-open .iab-mfilters-sluit { display: block; }
	.iab-filters.is-open .iab-mfilters-chips:not([hidden]) { display: flex; }
	.iab-filters__mobtoggle { display: inline-flex; }
}

/* Mobiele filter-sheet: sticky voet met resultaatknop, sluitkruis in de kop en
   een rij chips met de actieve filters (per chip wisbaar). Alleen zichtbaar
   zolang de sheet open is, zie de media query hierboven. */
.iab-mfilters-foot { display: none; align-items: center; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 301; background: var(--iab-surface); border-top: 1px solid var(--iab-border); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: var(--iab-shadow-2); }
.iab-mfilters-foot .iab-btn { flex: 1; text-align: center; }
.iab-mfilters-wis { background: none; border: 0; color: var(--iab-muted); font-weight: 700; font-size: .88rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
.iab-mfilters-sluit { display: none; background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--iab-muted); cursor: pointer; padding: 2px 6px; }
.iab-mfilters-chips { display: none; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.iab-mfilters-chips[hidden] { display: none; }
.iab-mfilters-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--iab-tint-1, var(--iab-surface)); border: 1px solid var(--iab-border); border-radius: 999px; padding: 6px 12px; font-size: .84rem; font-weight: 600; color: var(--iab-ink); cursor: pointer; }
.iab-mfilters-chip:hover { border-color: var(--iab-primary); }

/* =========================================================================
 * 2. Resultatenkaart (.iab-rcard)
 * ========================================================================= */
.iab-rcard {
	position: relative; background: var(--iab-card, var(--iab-surface)); border: 1px solid var(--iab-border); border-radius: var(--iab-app-radius);
	/* Logo en tekst verticaal gecentreerd t.o.v. de kaarthoogte; het prijsblok
	   houdt zijn eigen rechteruitlijning. */
	padding: 26px 30px 34px; display: grid; grid-template-columns: 140px 1fr 240px; gap: 26px; align-items: center;
}
.iab-rcard--top { border-color: var(--iab-primary); box-shadow: 0 0 0 2px var(--iab-primary) inset; }

/* Rangnummer: klein rond chipje half over de linkerbovenhoek van de kaart. */
.iab-rcard__rank {
	position: absolute; top: -12px; left: -12px; width: 28px; height: 28px; z-index: 1;
	background: var(--iab-card, var(--iab-surface)); border: 1px solid var(--iab-border); border-radius: 50%;
	display: grid; place-items: center; font-family: var(--iab-font-head); font-weight: 700; font-size: .8rem;
	color: var(--iab-muted); box-shadow: var(--iab-shadow-1);
}
/* Onze aanbeveling: los pilletje naast het rangchipje, in plaats van een
   badge binnen de kaart. */
.iab-rcard__aanraderpill {
	position: absolute; top: -13px; left: 34px; z-index: 1;
	background: var(--iab-primary); color: var(--iab-on-primary); font-family: var(--iab-font-head);
	font-size: .75rem; font-weight: 700; padding: 5px 14px; border-radius: 999px;
}

/* Logo vrijstaand op vaste maat, geen tegel met rand eromheen. */
.iab-rcard__logo { display: grid; place-items: center start; }
.iab-app .iab-rcard__logo { border: 0; background: none; padding: 0; width: auto; height: auto; }
.iab-rcard__logo img { width: 120px; height: 60px; object-fit: contain; object-position: left center; }
.iab-rcard__initials { width: 120px; height: 60px; display: grid; place-items: center; background: var(--iab-surface); border-radius: var(--iab-radius-sm); font-weight: 700; color: var(--iab-muted); font-size: 1.3rem; }
.iab-aanrader__initials { font-weight: 700; color: var(--iab-muted); }
.iab-icon-check, .iab-icon-starbadge { flex: 0 0 auto; }
.iab-icon-check circle { fill: var(--iab-success); }
.iab-icon-check path { stroke: var(--iab-on-primary); }
.iab-icon-starbadge path { fill: var(--iab-accent); }

.iab-rcard__body { min-width: 0; }
.iab-rcard__name { margin: 0 0 8px; font-family: var(--iab-font-head); font-size: 1.15rem; font-weight: 700; color: var(--iab-ink); line-height: 1.3; }
.iab-rcard__name a { color: inherit; }
.iab-rcard__name a:hover { color: var(--iab-primary); }

/* Meta-regel als icoonregel (contractduur, snelheid, zenders indien van
   toepassing, cijfer), met een dunne onderlijn. Iconen gedempt marineblauw,
   het cijfer nadrukkelijker. */
.iab-rcard__meta {
	display: flex; align-items: center; gap: 22px; color: var(--iab-muted); font-size: .88rem;
	padding-bottom: 14px; border-bottom: 1px solid var(--iab-border); margin-bottom: 14px; max-width: 520px; flex-wrap: wrap; row-gap: 8px;
}
.iab-rcard__meta span { display: inline-flex; align-items: center; gap: 7px; }
.iab-rcard__meta svg { color: var(--iab-primary); opacity: .7; flex: 0 0 auto; }
.iab-rcard__meta-score { color: var(--iab-ink); font-weight: 700; }
.iab-rcard__meta-score svg { color: var(--iab-accent); opacity: 1; }

/* Voordelen: maximaal twee, met een klein vinkje ervoor. */
.iab-rcard__benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.iab-rcard__benefits li { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--iab-text); }
.iab-rcard__benefits svg { flex: 0 0 15px; color: var(--iab-success); }
.iab-rcard__cashback {
	display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
	background: var(--iab-tint-1, var(--iab-surface)); color: var(--iab-primary); font-weight: 700; font-size: .8rem;
	padding: 6px 12px; border-radius: var(--iab-radius-sm);
}
.iab-rcard__cashback svg { flex: 0 0 14px; }

/* Prijspaneel: kortingsbadge, actieprijs groot met de oude prijs ernaast,
   daaronder het eerstejaarsbedrag en de prijs na de actie. */
.iab-rcard__price { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.iab-rcard__badge {
	display: inline-flex; align-items: center; gap: 6px; background: var(--iab-tint-oranje, var(--iab-surface)); color: var(--iab-cta);
	font-size: .78rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; max-width: 100%;
}
.iab-rcard__priceline { display: flex; align-items: baseline; gap: 9px; }
.iab-rcard__price-old { color: var(--iab-muted); font-size: .9rem; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.iab-rcard__bedrag { font-family: var(--iab-font-head); font-weight: 700; font-size: 2rem; color: var(--iab-ink); letter-spacing: -.01em; }
.iab-rcard__per { color: var(--iab-muted); font-size: .82rem; }
.iab-rcard__dash { width: 100%; max-width: 200px; border-top: 1px dashed var(--iab-border); margin: 10px 0 8px; }
.iab-rcard__jaar { font-size: .95rem; font-weight: 700; color: var(--iab-ink); text-align: right; }
.iab-rcard__jaar span { color: var(--iab-muted); font-weight: 400; font-size: .8rem; }
.iab-rcard__daarna { font-size: .78rem; color: var(--iab-muted); margin-top: 5px; }
.iab-rcard__cta-btn { margin-top: 14px; width: 100%; max-width: 220px; text-align: center; padding: 13px 20px; border-radius: var(--iab-radius-btn); }
.iab-rcard__levertijd { font-size: .76rem; color: var(--iab-muted); margin-top: 9px; }

/* Onderrand: "Lees meer" gecentreerd half over de rand, het vergelijkvinkje
   rustig linksonder. */
.iab-rcard__more {
	position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); z-index: 1;
	background: var(--iab-card, var(--iab-surface)); border: 1px solid var(--iab-border); border-radius: 999px;
	font-family: var(--iab-font-body); font-size: .8rem; font-weight: 600; color: var(--iab-text);
	padding: 6px 16px; cursor: pointer; box-shadow: var(--iab-shadow-1); display: inline-flex; align-items: center; gap: 4px;
}
.iab-rcard__more:hover { color: var(--iab-primary); border-color: var(--iab-primary); }
.iab-rcard__more-i { display: inline-block; transition: transform .15s; }
.iab-rcard__more.is-open .iab-rcard__more-i { transform: rotate(180deg); }

.iab-rcard__details { grid-column: 1 / -1; border-top: 1px solid var(--iab-border); padding-top: 14px; margin-top: 4px; }
.iab-detail-sam { color: var(--iab-muted); margin: 0 0 14px; }
.iab-dtabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--iab-border); }
.iab-dtab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 4px 10px; margin-right: 14px; font-weight: 700; font-size: .88rem; color: var(--iab-muted); cursor: pointer; }
.iab-dtab.is-active { color: var(--iab-primary); border-bottom-color: var(--iab-primary); }
.iab-dtab-panel[hidden] { display: none; }
.iab-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px; }
.iab-detail-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--iab-border); font-size: .9rem; }
.iab-detail-row span { color: var(--iab-muted); }
.iab-detail-lines { margin: 0; padding-left: 16px; text-align: left; }
.iab-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.iab-chip { display: inline-block; background: var(--iab-tint-1, var(--iab-surface)); color: var(--iab-ink); font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.iab-chip--korting { background: var(--iab-tint-3, var(--iab-surface)); color: var(--iab-success); font-weight: 700; }
.iab-detail-minpunten { margin-top: 12px; padding: 10px 14px; background: var(--iab-tint-2, var(--iab-surface)); border-radius: var(--iab-radius-sm); }
.iab-detail-minpunten span { display: block; font-weight: 700; font-size: .82rem; color: var(--iab-warning); margin-bottom: 4px; }
.iab-detail-minpunten ul { margin: 0; padding-left: 18px; font-size: .88rem; color: var(--iab-text); }
.iab-detail-review { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--iab-primary); }

.iab-loadmore-wrap { text-align: center; margin-top: 20px; }
.iab-loadmore { background: var(--iab-card, var(--iab-surface)); border: 1px solid var(--iab-primary); color: var(--iab-primary); border-radius: 999px; padding: 12px 28px; font-weight: 700; cursor: pointer; }
.iab-loadmore:hover { background: var(--iab-primary); color: var(--iab-on-primary); }

@media (max-width: 600px) {
	/* Logo, tekst en prijspaneel krijgen elk een eigen rij over de volle
	   breedte: de 140/1fr/240px-kolommen van desktop passen niet op 375px. De
	   rangchip, de aanbevelingspil, het vergelijkvinkje en "Lees meer" blijven
	   absoluut gepositioneerd t.o.v. de kaart en veranderen dus niet. Extra
	   onderruimte, zodat die twee niet over de laatste regel heen vallen. */
	.iab-rcard { grid-template-columns: minmax(0, 1fr); padding: 30px 20px 44px; gap: 14px; justify-items: start; }
	.iab-rcard__logo { justify-self: start; }
	.iab-rcard__meta { max-width: none; gap: 16px; }
	.iab-rcard__price { align-items: flex-start; width: 100%; }
	.iab-rcard__jaar { text-align: left; }
	.iab-rcard__priceline, .iab-rcard__dash, .iab-rcard__cta-btn { width: 100%; max-width: none; }
	.iab-rcard__cta-btn { max-width: 260px; }
}

/* =========================================================================
 * 2b. Detailuitklap: prijsopbouw, beoordelingsonderdelen, bijboekbare opties
 * en het zenderoverzicht. Kleuren via var(--iab-*), geen hex.
 * ========================================================================= */
/* Voordelen die niet meer op de kaart zelf pasten. */
.iab-detail-benefits { margin: 0 0 16px; }

.iab-price-strike { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.iab-price-strike__old { text-decoration: line-through; color: var(--iab-muted); font-size: .9rem; }
.iab-price-strike__new { font-weight: 700; color: var(--iab-ink); font-size: 1.1rem; }
.iab-chip--combi { background: var(--iab-tint-oranje, var(--iab-surface)); color: var(--iab-cta); font-weight: 700; }
.iab-tv-inbegrepen { color: var(--iab-success); }

.iab-score-tab { display: flex; flex-direction: column; gap: 14px; }
.iab-score-row__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.iab-score-row__name { font-weight: 700; color: var(--iab-ink); font-size: .88rem; }
.iab-score-row__stars {
	position: relative; display: inline-block; width: 90px; height: 12px;
	background: var(--iab-border); border-radius: 999px; overflow: hidden;
}
.iab-score-row__stars-fill { position: absolute; inset: 0; background: var(--iab-accent); border-radius: 999px; }
.iab-score-row__weight { width: 100%; height: 4px; background: var(--iab-border); border-radius: 999px; overflow: hidden; }
.iab-score-row__weight span { display: block; height: 100%; background: var(--iab-primary); border-radius: 999px; }
.iab-score-tab__total { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--iab-border); font-size: .85rem; color: var(--iab-text); line-height: 1.5; }
.iab-score-tab__total strong { color: var(--iab-ink); font-size: 1.1rem; }

.iab-bijboeken { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--iab-border); }
.iab-bijboeken__title { font-weight: 700; color: var(--iab-ink); margin: 0 0 10px; font-size: .95rem; }
.iab-bijboeken__cat { font-weight: 700; color: var(--iab-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; margin: 10px 0 4px; }
.iab-bijboeken__cat:first-child { margin-top: 0; }

.iab-tvz-allbtn { margin-top: 12px; }
.iab-tvz-allwrap { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--iab-border); display: flex; flex-direction: column; gap: 16px; }
.iab-tvz-allwrap[hidden] { display: none; }
.iab-tvz-allwrap__status { color: var(--iab-muted); font-size: .88rem; margin: 0; }
.iab-tvz-allwrap__status.is-error { color: var(--iab-danger); }
.iab-tvz-allcat__head { font-weight: 700; color: var(--iab-ink); font-size: .9rem; margin: 0 0 10px; }
.iab-tvz-allcat__price { font-weight: 600; color: var(--iab-muted); }
.iab-tvz-allcat__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.iab-tvz-chan { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--iab-text); }
.iab-tvz-chan img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: var(--iab-surface); flex: 0 0 auto; }
.iab-tvz-chan__noimg { width: 28px; height: 28px; border-radius: 6px; background: var(--iab-surface); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--iab-muted); flex: 0 0 auto; }
.iab-tvz-chan__hd { font-style: normal; color: var(--iab-primary); font-weight: 700; font-size: .74rem; }

@media (max-width: 480px) {
	.iab-score-row__stars { width: 70px; }
}

/* =========================================================================
 * 3. Herocheck [iab_herocheck]
 * ========================================================================= */
.iab-herocheck { max-width: 420px; margin-inline: auto; }
.iab-herocheck__badge { text-align: center; background: var(--iab-cta); color: var(--iab-on-primary); font-weight: 700; padding: 8px 16px; border-radius: 999px; margin-bottom: -18px; position: relative; z-index: 2; width: fit-content; margin-inline: auto; }
.iab-herocheck__card { background: var(--iab-card); color: var(--iab-ink); border: 1px solid var(--iab-border); border-radius: var(--iab-app-radius); box-shadow: var(--iab-shadow-2); padding: 28px 24px 24px; }
.iab-herocheck__title { margin: 0 0 6px; font-size: 1.3rem; }
.iab-herocheck__sub { color: var(--iab-muted); margin: 0 0 18px; font-size: .92rem; }
.iab-herocheck__row { display: flex; gap: 10px; margin-bottom: 14px; }
.iab-herocheck__field { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.iab-herocheck__field--sm { flex: 0 0 110px; }
.iab-herocheck__field label { font-size: .78rem; font-weight: 700; color: var(--iab-muted); }
.iab-herocheck__field input { padding: 12px 14px; border: 1px solid var(--iab-border); border-radius: var(--iab-radius-sm); font-size: 1rem; }
.iab-herocheck__usps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.iab-herocheck__usps li { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--iab-muted); }
.iab-herocheck__usps svg circle { fill: var(--iab-success); }
.iab-herocheck__usps svg path { stroke: var(--iab-on-primary); }

@media (max-width: 480px) {
	.iab-herocheck__row { flex-direction: column; }
	.iab-herocheck__field--sm { flex: 1 1 auto; }
}

/* =========================================================================
 * 4. Aanrader-kaart [iab_aanrader]
 * ========================================================================= */
.iab-aanrader { background: var(--iab-card, var(--iab-surface)); border: 1px solid var(--iab-primary); border-radius: var(--iab-app-radius); padding: 24px; max-width: 640px; margin-inline: auto; }
.iab-aanrader__label { display: inline-block; background: var(--iab-primary); color: var(--iab-on-primary); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: 5px 14px; border-radius: 999px; margin-bottom: 14px; }
.iab-aanrader__body { display: flex; align-items: center; gap: 18px; }
.iab-aanrader__logo { flex: 0 0 84px; width: 84px; height: 64px; border-radius: 12px; background: var(--iab-bg); border: 1px solid var(--iab-border); display: grid; place-items: center; overflow: hidden; padding: 8px; }
.iab-aanrader__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.iab-aanrader__info { flex: 1; min-width: 0; }
.iab-aanrader__name { margin: 0 0 6px; }
.iab-aanrader__usps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .88rem; color: var(--iab-muted); }
.iab-aanrader__score { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; color: var(--iab-on-primary); background: var(--iab-primary); }
.iab-aanrader__score--great { background: var(--iab-success); }
.iab-aanrader__score--good { background: var(--iab-primary); }
.iab-aanrader__score--ok { background: var(--iab-warning); }
.iab-aanrader__score--poor { background: var(--iab-danger); }
.iab-aanrader .iab-btn { margin-top: 18px; }

@media (max-width: 600px) {
	.iab-aanrader__body { flex-wrap: wrap; }
}

/* =========================================================================
 * 5. Prijstabel [iab_prijstabel]
 * ========================================================================= */
.iab-prijstabel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.iab-prijstabel-updated { font-size: .85rem; color: var(--iab-muted); font-weight: 600; }
.iab-prijstabel-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.iab-ptab { background: var(--iab-bg); border: 1px solid var(--iab-border); border-radius: 999px; padding: 7px 16px; font-size: .85rem; font-weight: 700; cursor: pointer; color: var(--iab-ink); }
.iab-ptab.is-active { background: var(--iab-primary); border-color: var(--iab-primary); color: var(--iab-on-primary); }

.iab-table-scroll { overflow-x: auto; }
.iab-table-scroll > table { overflow: visible; }
.iab-prijstabel { width: 100%; border-collapse: collapse; min-width: 640px; }
.iab-prijstabel th, .iab-prijstabel td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--iab-border); }
.iab-prijstabel thead th { color: var(--iab-muted); font-size: .8rem; }
/* De providercel is een gewone td met verticaal gecentreerde inhoud: een
   display:flex op de td zelf breekt de rijhoogtes van de tabel. De flex-lay-out
   zit daarom in een inner-span. */
.iab-prijstabel td { vertical-align: middle; }
.iab-ptable-provider { position: relative; }
.iab-ptable-provider-flex { display: flex; align-items: center; gap: 12px; }
/* De tabel-linkstijl moet de generieke prose-linkstijl overtroeven, anders
   krijgt de providernaam de blauwe onderstreepte tekstlinkopmaak. */
.iab-prijstabel .iab-ptable-provider-naam,
.iab-prose .iab-prijstabel .iab-ptable-provider-naam { color: var(--iab-ink); font-weight: 700; text-decoration: none; }
.iab-prijstabel .iab-ptable-provider-naam:hover { color: var(--iab-primary); text-decoration: none; }
.iab-ptable-logo { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; background: var(--iab-bg); border: 1px solid var(--iab-border); display: grid; place-items: center; overflow: hidden; font-weight: 700; color: var(--iab-muted); }
.iab-ptable-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.iab-ptable-row--best { background: var(--iab-tint-1, var(--iab-surface)); }
.iab-ptable-row--best td:first-child { position: relative; }
/* Beste-deal-badge gecentreerd boven de kolom, half over de rijrand heen. */
.iab-ptable-best-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--iab-success); color: var(--iab-on-primary); font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }

@media (max-width: 600px) {
	.iab-prijstabel-head { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
 * 6. Reviewblok [iab_reviews]
 * ========================================================================= */
.iab-reviews__summary { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.iab-reviews__avg { font-size: 2.6rem; font-weight: 700; color: var(--iab-ink); line-height: 1; }
.iab-reviews__count { display: block; color: var(--iab-muted); font-size: .88rem; margin-top: 4px; }
.iab-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.iab-review-card { background: var(--iab-card, var(--iab-surface)); border: 1px solid var(--iab-border); border-radius: var(--iab-radius-sm); padding: 18px; }
.iab-review-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.iab-review-card__text { margin: 0 0 10px; color: var(--iab-text); font-size: .92rem; }
.iab-review-card__date { color: var(--iab-muted); font-size: .78rem; }

.iab-stars { display: inline-flex; gap: 2px; --iab-star-size: 18px; }
.iab-star { width: var(--iab-star-size); height: var(--iab-star-size); fill: var(--iab-border); }
.iab-star.is-full, .iab-star.is-half { fill: var(--iab-accent); }

@media (max-width: 860px) { .iab-reviews__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .iab-reviews__grid { grid-template-columns: minmax(0, 1fr); } .iab-reviews__summary { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* =========================================================================
 * 7. Stappen [iab_stappen]
 * ========================================================================= */
.iab-stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.iab-stap { position: relative; padding-left: 60px; }
.iab-stap__num { position: absolute; left: 0; top: 0; width: 40px; height: 40px; background: var(--iab-primary); color: var(--iab-on-primary); border: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.iab-stap h3 { margin: 2px 0 6px; font-size: 1.05rem; }
.iab-stap p { margin: 0; color: var(--iab-muted); font-size: .9rem; }

@media (max-width: 860px) { .iab-stappen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .iab-stappen { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
 * 8. Expertblok [iab_expert]
 * ========================================================================= */
.iab-expert { max-width: 720px; margin-inline: auto; text-align: center; padding: 32px 24px; background: var(--iab-tint-2, var(--iab-surface)); border-radius: var(--iab-app-radius); }
.iab-expert__eyebrow { display: block; font-size: .78rem; font-weight: 700; color: var(--iab-primary); margin-bottom: 10px; }
.iab-expert__quote { margin: 0 0 12px; font-size: 1.2rem; font-style: italic; color: var(--iab-ink); }
.iab-expert__naam { font-weight: 700; color: var(--iab-muted); font-size: .88rem; }

/* =========================================================================
 * 9. Logostrip [iab_logostrip]
 * ========================================================================= */
.iab-logostrip__kop { text-align: center; color: var(--iab-muted); font-weight: 700; margin-bottom: 16px; font-size: .9rem; }
.iab-logos-carousel { overflow: hidden; position: relative; }
.iab-logos-track { display: flex; align-items: center; gap: 48px; animation: iab-scroll 45s linear infinite; width: max-content; }
.iab-logos-track:hover { animation-play-state: paused; }
.iab-logos__item { flex: 0 0 auto; width: 140px; height: 44px; display: grid; place-items: center; }
.iab-logos__item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; opacity: .7; transition: opacity .2s; }
.iab-logos__item:hover img { opacity: 1; }
.iab-logos__initials { font-weight: 700; color: var(--iab-muted); font-size: 1rem; opacity: .8; }
.iab-logos__item:hover .iab-logos__initials { opacity: 1; }
@keyframes iab-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* =========================================================================
 * 10. Widget [iab_widget]
 * ========================================================================= */
.iab-widget { background: var(--iab-card, var(--iab-surface)); border: 1px solid var(--iab-border); border-radius: var(--iab-app-radius); padding: 20px; max-width: 420px; }
.iab-widget__head { margin-bottom: 12px; }
.iab-widget__title { font-size: 1.1rem; }
.iab-field { margin-bottom: 16px; }
.iab-field__label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: 8px; }
.iab-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.iab-pill-btn { background: var(--iab-bg); border: 1px solid var(--iab-border); border-radius: 999px; padding: 8px 14px; font-size: .84rem; font-weight: 700; cursor: pointer; color: var(--iab-ink); }
.iab-pill-btn[aria-pressed="true"] { background: var(--iab-primary); border-color: var(--iab-primary); color: var(--iab-on-primary); }
.iab-widget__note { margin: 12px 0 0; font-size: .78rem; color: var(--iab-muted); }

/* =========================================================================
 * 11. CTA-banner / top5 / vs
 * ========================================================================= */
.iab-cta-banner { background: var(--iab-primary); color: var(--iab-on-primary); border-radius: var(--iab-app-radius); padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.iab-cta-banner h3 { color: var(--iab-on-primary); margin: 0 0 4px; }
.iab-cta-banner p { margin: 0; color: var(--iab-on-primary-soft); }

.iab-top5 { border: 1px solid var(--iab-border); border-radius: var(--iab-app-radius); overflow: hidden; }
.iab-top5__head { background: var(--iab-primary); color: var(--iab-on-primary); font-weight: 700; padding: 14px 20px; }
.iab-top5__row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--iab-border); color: inherit; }
.iab-top5__row:first-of-type { border-top: 0; }
.iab-top5__rank { font-weight: 700; color: var(--iab-muted); width: 20px; }
.iab-top5__logo { flex: 0 0 48px; width: 48px; height: 40px; display: grid; place-items: center; overflow: hidden; }
.iab-top5__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.iab-top5__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.iab-top5__name { font-weight: 700; }
.iab-top5__meta { font-size: .8rem; color: var(--iab-muted); }
.iab-top5__score { flex: 0 0 auto; font-weight: 700; padding: 4px 10px; border-radius: 8px; color: var(--iab-on-primary); background: var(--iab-primary); }
.iab-top5__score--great { background: var(--iab-success); }
.iab-top5__score--good { background: var(--iab-primary); }
.iab-top5__score--ok { background: var(--iab-warning); }
.iab-top5__score--poor { background: var(--iab-danger); }
.iab-top5__cta { flex: 0 0 auto; font-weight: 700; color: var(--iab-primary); }

.iab-vs { overflow-x: auto; }
.iab-vs__table { width: 100%; border-collapse: collapse; min-width: 480px; overflow: visible; }
.iab-vs__table th, .iab-vs__table td { padding: 12px 16px; border-bottom: 1px solid var(--iab-border); text-align: left; }
.iab-vs__table thead th { background: var(--iab-tint-1, var(--iab-surface)); }
.iab-vs__cta { font-weight: 700; color: var(--iab-primary); }
.iab-vs__hint { display: none; margin: 0 0 10px; font-size: .8rem; color: var(--iab-muted); }

/* Vergelijktabel op mobiel: 2 kolommen naast elkaar in beeld, labelkolom
   blijft plakken bij horizontaal scrollen, plus een veeg-hint erboven. */
@media (max-width: 600px) {
	.iab-vs__table { min-width: 0; }
	.iab-vs__table th, .iab-vs__table td { padding: 9px 8px; font-size: .82rem; }
	.iab-vs__table th:first-child,
	.iab-vs__table td:first-child { position: sticky; left: 0; background: var(--iab-surface); z-index: 1; min-width: 96px; max-width: 108px; box-shadow: 2px 0 0 var(--iab-border); overflow-wrap: break-word; word-break: break-word; hyphens: auto; overflow: hidden; }
	.iab-vs__table thead th:first-child { background: var(--iab-surface); }
	.iab-vs__hint { display: block; }
}

/* =========================================================================
 * 12. Archief- en detailkaarten (score-badges algemeen)
 * ========================================================================= */
.iab-grid { display: grid; gap: 20px; }
.iab-grid--3 { grid-template-columns: repeat(3, 1fr); }
.iab-card { background: var(--iab-card, var(--iab-surface)); border: 1px solid var(--iab-border); border-radius: var(--iab-app-radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .15s ease; }
a.iab-card:hover { transform: translateY(-3px); box-shadow: var(--iab-shadow-1); text-decoration: none; }
.iab-card-result:hover { border-color: var(--iab-primary); }
.iab-card__toprow { display: flex; align-items: center; gap: 12px; }
.iab-card__logowrap { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 10px; background: var(--iab-bg); display: grid; place-items: center; overflow: hidden; }
.iab-card__logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.iab-card__icon { font-weight: 700; color: var(--iab-muted); }
.iab-card__titlewrap { flex: 1; min-width: 0; }
.iab-card__titlewrap h3 { margin: 0; font-size: 1.05rem; }
.iab-card__arrow { margin-top: auto; font-weight: 700; color: var(--iab-primary); }

.iab-score-badge { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--iab-on-primary); background: var(--iab-primary); }
.iab-score-badge--great { background: var(--iab-success); }
.iab-score-badge--good { background: var(--iab-primary); }
.iab-score-badge--ok { background: var(--iab-warning); }
.iab-score-badge--poor { background: var(--iab-danger); }

@media (max-width: 860px) { .iab-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .iab-grid--3 { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
 * 13. Single review-pagina
 * ========================================================================= */
.iab-review-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 32px; }
/* min-width:0 overschrijft de automatische content-based minimumbreedte van een
 * grid-item. Zonder dit duwt de prijstabel (min-width 640px) de hele kolom en
 * dus de pagina breder dan de viewport op mobiel, ook al heeft de tabelwikkel
 * zelf overflow-x: auto. */
.iab-review-main { min-width: 0; }
.iab-review-grid > * { min-width: 0; }
/* Alleen overflow-wrap: een te lang woord wijkt uit, maar een kop breekt nooit
   midden in een woord dat gewoon past (punt 72 van de pilotchecklist).
   word-break: break-word gedraagt zich in Chrome als overflow-wrap: anywhere
   en zou dat wel doen, dus die staat hier bewust niet. */
.iab-review-main h1, .iab-review-main h2, .iab-review-main h3 { overflow-wrap: break-word; }
.iab-rev-header { display: flex; gap: 20px; align-items: center; margin-bottom: 20px; }
.iab-rev-header__logo { flex: 0 0 96px; width: 96px; height: 96px; border: 1px solid var(--iab-border); border-radius: 16px; background: var(--iab-card, var(--iab-surface)); display: grid; place-items: center; padding: 12px; overflow: hidden; }
.iab-rev-header__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.iab-rev-header__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.iab-rev-score { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-weight: 700; color: var(--iab-on-primary); background: var(--iab-primary); }
.iab-rev-score--great { background: var(--iab-success); }
.iab-rev-score--good { background: var(--iab-primary); }
.iab-rev-score--ok { background: var(--iab-warning); }
.iab-rev-score--poor { background: var(--iab-danger); }
.iab-rev-score__label { color: var(--iab-muted); font-size: .85rem; }
.iab-rev-updated { color: var(--iab-muted); font-size: .85rem; margin: 0; }
.iab-rev-header__sub { margin: 10px 0 0; color: var(--iab-text); }
.iab-rev-pros { background: var(--iab-tint-1, var(--iab-surface)); border-radius: var(--iab-radius-sm); padding: 18px 22px; margin-bottom: 24px; }
.iab-rev-pros h2 { font-size: 1.1rem; margin: 0 0 10px; color: var(--iab-success); }
.iab-rev-pros ul { margin: 0; padding-left: 20px; }
.iab-rev-specs { margin-bottom: 24px; background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); padding: 20px 22px; }
.iab-rev-specs h2 { font-size: 1.1rem; }
.iab-rev-cta { text-align: center; background: var(--iab-tint-2, var(--iab-surface)); border-radius: var(--iab-app-radius); padding: 28px; }

@media (max-width: 600px) {
	.iab-rev-header { flex-direction: column; align-items: flex-start; }
	.iab-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
 * 14. Beste deals van vandaag [iab_topdeals]
 * ========================================================================= */
.iab-topdeals__pills { display: flex; justify-content: center; gap: 8px; margin-bottom: 28px; }
.iab-topdeals__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.iab-topdeals__grid[hidden] { display: none; }
.iab-topdeal { position: relative; background: var(--iab-card, var(--iab-surface)); border: 1px solid var(--iab-border); border-radius: var(--iab-app-radius); padding: 24px; box-shadow: var(--iab-shadow-1); display: flex; flex-direction: column; gap: 12px; }
.iab-topdeal__ribbon { position: absolute; top: -11px; left: 20px; background: var(--iab-primary); color: var(--iab-on-primary); font-weight: 700; font-size: .72rem; padding: 4px 12px; border-radius: 999px; }
.iab-topdeal__head { display: flex; align-items: center; justify-content: space-between; }
.iab-topdeal__logo { flex: 0 0 72px; width: 72px; height: 54px; border-radius: 10px; background: var(--iab-bg); border: 1px solid var(--iab-border); display: grid; place-items: center; overflow: hidden; padding: 8px; font-weight: 700; color: var(--iab-muted); }
.iab-topdeal__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.iab-topdeal__score { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--iab-tint-3, var(--iab-surface)); color: var(--iab-success); font-weight: 700; font-size: .92rem; }
.iab-topdeal__score--good { color: var(--iab-primary); }
.iab-topdeal__score--ok { color: var(--iab-warning); }
.iab-topdeal__score--poor { color: var(--iab-danger); }
.iab-topdeal__naam { margin: 0; font-size: 1.1rem; }
.iab-topdeal__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.iab-topdeal__prijs { margin-top: auto; }
.iab-topdeal__prijs strong { font-size: 1.8rem; font-family: var(--iab-font-head); color: var(--iab-ink); }
.iab-topdeal__prijs span { color: var(--iab-muted); font-size: .9rem; }

@media (max-width: 860px) { .iab-topdeals__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .iab-topdeals__grid { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
 * 15. Reviewbalk [iab_reviewbalk]
 * ========================================================================= */
.iab-reviewbalk { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 28px 20px; margin-top: 36px; border-top: 1px solid var(--iab-border); text-align: center; }
.iab-reviewbalk__tekst { font-weight: 600; color: var(--iab-text); }
.iab-reviewbalk__badge { display: inline-flex; align-items: baseline; gap: 2px; background: var(--iab-primary); color: var(--iab-on-primary); font-family: var(--iab-font-head); font-weight: 700; font-size: 1.3rem; padding: 6px 14px; border-radius: var(--iab-radius-sm); }
.iab-reviewbalk__badge small { font-size: .7rem; font-weight: 600; opacity: .8; }
.iab-reviewbalk__count { color: var(--iab-muted); font-size: .88rem; }

/* =========================================================================
 * 12. Datablok-schil, duel [iab_duel] en dealsectie
 * ========================================================================= */
.iab-datablok { background: var(--iab-card, var(--iab-surface)); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); box-shadow: var(--iab-shadow-1); padding: 28px; margin: 1.6em 0; }
.iab-datablok__foot { margin: 14px 0 0; font-size: .85rem; color: var(--iab-muted); font-weight: 600; text-align: center; }

.iab-duel__head { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 18px; }
.iab-duel__provider { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--iab-font-head); font-weight: 700; color: var(--iab-ink); text-align: center; }
.iab-duel__provider img { height: 34px; width: auto; max-width: 120px; object-fit: contain; }
.iab-duel__vs { font-family: var(--iab-font-head); font-weight: 700; font-size: 13px; color: var(--iab-on-primary); background: var(--iab-primary); border-radius: 999px; padding: 6px 12px; flex-shrink: 0; }
.iab-duel__table { width: 100%; border-collapse: collapse; }
.iab-duel__table th, .iab-duel__table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--iab-border); }
.iab-duel__table thead th:not(:first-child) { font-family: var(--iab-font-head); font-weight: 700; color: var(--iab-ink); }
.iab-duel__table tbody th { font-weight: 600; color: var(--iab-muted); font-size: .92rem; }
.iab-duel__table tbody td { font-family: var(--iab-font-head); font-weight: 700; color: var(--iab-ink); }
.iab-duel__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; justify-content: center; }
.iab-duel__ctas .iab-btn { flex: 1 1 200px; text-align: center; justify-content: center; }

.iab-deal .iab-deal-blok { margin: 0; background: var(--iab-tint-4); border-color: var(--iab-accent-2); }
.iab-deal-blok h2 { margin-top: 0; }
.iab-deal-blok__grid { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-bottom: 16px; }
.iab-deal-blok__actie { font-family: var(--iab-font-head); font-weight: 700; font-size: 2.1rem; color: var(--iab-ink); }
.iab-deal-blok__actie small { font-family: var(--iab-font-body); font-weight: 600; font-size: .95rem; color: var(--iab-muted); }
.iab-deal-blok__daarna { font-size: .92rem; color: var(--iab-muted); font-weight: 600; }
.iab-deal-blok__info { width: 100%; }
.iab-deal-blok__pakket { margin: 0 0 4px; font-weight: 700; color: var(--iab-ink); }
.iab-deal-blok__looptijd { margin: 0; font-size: .9rem; color: var(--iab-warning); font-weight: 600; }
.iab-deal-blok__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 20px; }
.iab-deal-blok__vergelijk { font-weight: 600; color: var(--iab-primary); }
.iab-deal-blok__vergelijk:hover { text-decoration: underline; }

@media (max-width: 600px) {
	.iab-datablok { padding: 20px 16px; }
	.iab-duel__head { gap: 10px; }
	.iab-duel__provider img { height: 26px; }
}

/* =========================================================================
 * 13. Aanbod-tabel [iab_provider_aanbod]: extra rij-onderdelen
 * ========================================================================= */
.iab-ptable-provider { position: relative; }
.iab-ptable-provider-info { display: flex; flex-direction: column; min-width: 0; }
.iab-ptable-provider-naam { font-weight: 700; color: var(--iab-ink); text-decoration: none; }
.iab-ptable-provider-naam:hover { color: var(--iab-primary); }
.iab-ptable-product { color: var(--iab-muted); font-weight: 500; font-size: 13px; text-decoration: none; }
.iab-ptable-product:hover { color: var(--iab-primary); text-decoration: underline; }
.iab-ptable-best-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--iab-success); color: var(--iab-on-primary); font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.iab-prijstabel-foot { margin: 14px 0 0; text-align: center; }
.iab-prijstabel-foot a { font-weight: 700; color: var(--iab-primary); }

/* =========================================================================
 * 14. Tool-kaart [iab_welke_aanbieder]
 * ========================================================================= */
.iab-tool { background: var(--iab-surface); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); padding: 24px; margin: 18px 0; }
.iab-tool__privacy { color: var(--iab-muted); font-size: .88rem; margin: 10px 0 0; }
.iab-tool__result { margin-top: 14px; }
.iab-tool__hit { font-size: 1.15rem; color: var(--iab-ink); }

/* =========================================================================
 * 15. Social proof [popups linksonder]
 * ========================================================================= */
.iab-sp { position: fixed; left: 18px; bottom: 18px; z-index: 9000; display: flex; align-items: center; gap: 12px; max-width: 360px; background: var(--iab-surface); border: 1px solid var(--iab-border); border-radius: 16px; box-shadow: var(--iab-shadow-2); padding: 12px 34px 12px 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.iab-sp.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.iab-sp__tile { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--iab-tint-1); }
.iab-sp__tile svg, .iab-sp__tile img { width: 100%; height: 100%; display: block; object-fit: contain; }
.iab-sp__tile img { padding: 8px; box-sizing: border-box; }
.iab-sp__cijfer { font-family: var(--iab-font-head); font-weight: 700; font-size: 1.25rem; color: var(--iab-primary); }
.iab-sp__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: .9rem; color: var(--iab-text); }
.iab-sp__kop strong { color: var(--iab-primary); }
.iab-sp__regel { color: var(--iab-ink); }
.iab-sp__voet { display: flex; align-items: center; gap: 4px; color: var(--iab-muted); font-size: .78rem; margin-top: 3px; }
.iab-sp__voet svg { color: var(--iab-success); }
.iab-sp__sluit { position: absolute; top: 4px; right: 8px; background: none; border: 0; color: var(--iab-muted); font-size: 1.1rem; cursor: pointer; padding: 2px; }
.iab-sp__sluit:hover { color: var(--iab-ink); }
/* Kaart-tegel: kleuren hier, zodat de JS geen hexwaarden hoeft te schrijven. */
.iab-sp__map-bg { fill: var(--iab-tint-1); }
.iab-sp__map-block { fill: var(--iab-tint-3); }
.iab-sp__map-road { stroke: var(--iab-surface); }
.iab-sp__map-pin { fill: var(--iab-accent); }
.iab-sp__map-pin-dot { fill: var(--iab-surface); }

@media (max-width: 600px) {
	.iab-sp { left: 10px; right: 10px; max-width: none; bottom: 10px; }
}

/* =========================================================================
   Reviewpagina: gebruikersreviews en het reviewformulier.
   ========================================================================= */
.iab-rev-users { margin: 40px 0; }
.iab-rev-users > h2 { margin-bottom: 14px; }
.iab-rev-aanbod { margin: 40px 0; }
.iab-rev-pros--min ul li::marker { color: var(--iab-danger); }
.iab-rev-pros--min { background: var(--iab-tint-2, var(--iab-surface)); }
.iab-rev-pros--min h2 { color: var(--iab-ink); }

.iab-revform {
  position: relative;
  margin-top: 30px;
  padding: 26px 24px 24px;
  background: var(--iab-card);
  border: 1px solid var(--iab-border);
  border-radius: var(--iab-radius);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.iab-revform::before { content: none; }
.iab-revform h3 { margin: 0; }
.iab-revform label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.iab-revform input[type="text"],
.iab-revform input[type="number"],
.iab-revform textarea {
  font: inherit;
  padding: 11px 13px;
  border: 1px solid var(--iab-border);
  border-radius: var(--iab-radius-sm);
  background: var(--iab-bg);
  color: var(--iab-text);
  width: 100%;
}
.iab-revform input:focus,
.iab-revform textarea:focus { outline: 2px solid var(--iab-accent-2); outline-offset: 1px; }
.iab-revform__row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.iab-revform button { align-self: flex-start; }
.iab-revform__note { margin: 0; font-size: .88rem; color: var(--iab-muted); }
/* Honeypot: onzichtbaar voor mensen, wel invulbaar voor bots. */
.iab-revform__hp { position: absolute; left: -9999px; top: -9999px; }

@media (max-width: 600px) {
  .iab-revform__row { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   Sitereviewblok [iab_sitereview_form]: cijfer + formulier links, kaarten
   rechts. Alle kleuren via de tokens uit het :root-blok van het thema.
   ========================================================================= */
.iab-siterev { margin: 34px 0; }
.iab-siterev__grid { display: grid; grid-template-columns: 320px 1fr; gap: 26px; align-items: start; }
.iab-siterev__score {
  position: relative;
  background: var(--iab-card);
  border: 1px solid var(--iab-border);
  border-radius: var(--iab-radius);
  padding: 24px 22px;
  text-align: center;
  box-shadow: var(--iab-shadow-1);
}
.iab-siterev__score::before { content: none; }
.iab-siterev__kop { margin: 0 0 6px; font-size: 1rem; color: var(--iab-muted); font-weight: 700; }
.iab-siterev__cijfer { display: block; font-family: var(--iab-font-head); font-size: 3rem; font-weight: 700; line-height: 1; color: var(--iab-ink); }
.iab-siterev__count { margin: 8px 0 16px; color: var(--iab-muted); font-size: .92rem; }
.iab-siterev__toggle summary { list-style: none; cursor: pointer; }
.iab-siterev__toggle summary::-webkit-details-marker { display: none; }
.iab-siterev__knop { width: 100%; }

.iab-rev-form { margin-top: 18px; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.iab-rev-form__context { margin: 0; color: var(--iab-muted); }
.iab-rev-form__row { display: flex; flex-direction: column; gap: 6px; }
.iab-rev-form__row label { font-weight: 600; }
.iab-rev-form input[type="text"],
.iab-rev-form textarea {
  font: inherit; width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--iab-border);
  border-radius: var(--iab-radius-sm);
  background: var(--iab-bg);
  color: var(--iab-text);
}
.iab-rev-form input:focus, .iab-rev-form textarea:focus { outline: 2px solid var(--iab-accent-2); outline-offset: 1px; }
.iab-rev-form__note { margin: 0; font-size: .85rem; color: var(--iab-muted); }
.iab-rev-form__hp { position: absolute; left: -9999px; top: -9999px; }

/* Scorekiezer: tien knoppen, de gekozen waarde in de accentkleur. */
.iab-rev-scorepicker { display: flex; flex-wrap: wrap; gap: 6px; }
.iab-rev-scorepicker input { position: absolute; opacity: 0; width: 0; height: 0; }
.iab-rev-scorepicker label {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--iab-border);
  border-radius: var(--iab-radius-sm);
  cursor: pointer;
  font-weight: 700;
  background: var(--iab-card);
}
.iab-rev-scorepicker input:checked + label { background: var(--iab-primary); color: var(--iab-on-primary); border-color: var(--iab-primary); }
.iab-rev-scorepicker input:focus-visible + label { outline: 2px solid var(--iab-accent-2); outline-offset: 2px; }

.iab-rev-melding { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--iab-radius-sm); font-size: .92rem; text-align: left; }
.iab-rev-melding--ok { background: var(--iab-tint-3); color: var(--iab-success); }
.iab-rev-melding--fout { background: var(--iab-tint-2); color: var(--iab-danger); }

.iab-siterev__lijst { display: grid; gap: 14px; }
.iab-siterev__card {
  background: var(--iab-card);
  border: 1px solid var(--iab-border);
  border-radius: var(--iab-radius);
  padding: 18px 20px;
}
.iab-siterev__cardkop { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.iab-siterev__cardkop time { margin-left: auto; color: var(--iab-muted); font-size: .85rem; }
.iab-siterev__wie { display: flex; flex-direction: column; gap: 2px; }
.iab-siterev__tekst { margin: 0; color: var(--iab-text); }
.iab-review-card__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%;
  background: var(--iab-tint-1);
  color: var(--iab-primary);
  font-family: var(--iab-font-head);
  font-weight: 700;
}

@media (max-width: 860px) {
  .iab-siterev__grid { grid-template-columns: minmax(0, 1fr); }
}


/* =========================================================================
 * Vergelijk naast elkaar (pilotpariteit de referentie-implementatie): vinkje op de
 * kaart, vaste balk onderin met chips, overlay met de vergelijktabel.
 * Kleuren via var(--iab-*), geen hex. Breakpoint 600px, zoals de rest.
 * ========================================================================= */

/* Vinkje op de resultaatkaart, rustig linksonder over de kaartrand. */
.iab-rcard__comparecb {
	position: absolute; left: 24px; bottom: 10px; z-index: 1;
	display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 48px); min-width: 0;
	font-size: .76rem; font-weight: 600; color: var(--iab-muted); cursor: pointer;
}
.iab-rcard__comparecb input { accent-color: var(--iab-primary); width: 13px; height: 13px; margin: 0; flex: 0 0 auto; }
.iab-rcard__comparecb:hover { color: var(--iab-primary); }

/* Balk onderin met de gekozen pakketten. Blijft onder de mobiele
   filter-sheet (z-index 300/301), zodat de sheet hem netjes afdekt. */
.iab-comparebar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	background: var(--iab-card, var(--iab-surface)); border-top: 1px solid var(--iab-border); box-shadow: var(--iab-shadow-2);
	padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.iab-comparebar[hidden] { display: none; }
.iab-comparebar__items { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.iab-comparebar__item {
	display: inline-flex; align-items: center; gap: 6px; background: var(--iab-tint-1, var(--iab-surface)); border: 1px solid var(--iab-border);
	border-radius: 999px; padding: 5px 8px 5px 12px; font-size: .82rem; font-weight: 600; color: var(--iab-ink); max-width: 220px;
}
.iab-comparebar__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iab-comparebar__item button { flex: 0 0 auto; background: none; border: 0; color: var(--iab-muted); font-size: 1rem; line-height: 1; cursor: pointer; padding: 2px; }
.iab-comparebar__item button:hover { color: var(--iab-danger, var(--iab-primary)); }
.iab-comparebar__status { flex: 0 0 100%; margin: 0; font-size: .78rem; color: var(--iab-muted); order: 3; }
.iab-comparebar__status[hidden] { display: none; }
.iab-comparebar__actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.iab-comparebar__clear { background: none; border: 0; color: var(--iab-muted); font-weight: 700; font-size: .82rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.iab-comparebar__clear:hover { color: var(--iab-primary); }

/* Overlay met de vergelijktabel; hergebruikt de .iab-vs__table-opmaak. */
.iab-compareoverlay { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.iab-compareoverlay[hidden] { display: none; }
.iab-compareoverlay__panel {
	background: var(--iab-card, var(--iab-surface)); border-radius: var(--iab-app-radius, var(--iab-radius)) var(--iab-app-radius, var(--iab-radius)) 0 0;
	width: 100%; max-width: var(--iab-container, 1120px); max-height: 88vh; overflow-y: auto; padding: 28px 24px; position: relative;
}
.iab-compareoverlay__close { position: absolute; top: 14px; right: 16px; background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--iab-muted); cursor: pointer; padding: 4px 8px; }
.iab-compareoverlay__close:hover { color: var(--iab-ink); }
.iab-compareoverlay__body h2 { margin: 0 28px 16px 0; font-size: 1.2rem; }
.iab-compareoverlay__hint { display: none; margin: 0 0 10px; font-size: .8rem; color: var(--iab-muted); }
@media (min-width: 601px) {
	.iab-compareoverlay { align-items: center; padding: 24px; }
	.iab-compareoverlay__panel { border-radius: var(--iab-app-radius, var(--iab-radius)); }
}
@media (max-width: 600px) {
	.iab-compareoverlay__panel { padding: 22px 16px; }
	.iab-compareoverlay__body h2 { font-size: 1.05rem; }
	.iab-compareoverlay__hint { display: block; }
	/* Chips in 1 scrollende rij, acties eronder over de volle breedte. */
	.iab-comparebar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 14px; }
	.iab-comparebar__items { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
	.iab-comparebar__item { flex: 0 0 auto; }
	.iab-comparebar__actions { justify-content: space-between; width: 100%; }
	.iab-comparebar__actions .iab-btn { flex: 1 1 auto; text-align: center; margin-left: 10px; }
	.iab-comparebar__status { order: 0; }
}

/* Plus- en minpunten naast elkaar, boven de basisgegevens: eerder stonden ze
   onder elkaar met de specs-tabel ertussen, waardoor de minpunten pas na een
   tabel in beeld kwamen. Kleuren binnen het eigen palet: groen komt in dit
   merk verder niet voor, en oranje is de actiekleur en dus niet geschikt voor
   negatieve punten. */
.iab-rev-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
.iab-rev-proscons .iab-rev-pros { background: var(--iab-tint-blauw); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); padding: 20px 22px; margin: 0; }
.iab-rev-proscons .iab-rev-pros--min { background: var(--iab-surface-2); }
.iab-rev-proscons h2 { font-size: 1.05rem; margin: 0 0 10px; color: var(--iab-ink); }
.iab-rev-proscons ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.iab-rev-proscons li { display: flex; align-items: flex-start; gap: 9px; color: var(--iab-text); }
.iab-rev-proscons .iab-rev-pros svg { flex: 0 0 15px; margin-top: 3px; color: var(--iab-primary); }
.iab-rev-proscons .iab-rev-pros--min svg { color: var(--iab-muted); }
@media (max-width: 860px) { .iab-rev-proscons { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
 * Speedtest [iab_speedtest]. Eigen SVG-boog, geen canvas-bibliotheek; de
 * waarde wordt live bijgewerkt vanuit assets/js/iab-speedtest.js. Volgt de
 * huisstijl van deze site: ruime radius, zachte schaduw in plaats van een
 * harde rand, marineblauwe boog met amber als tweede laag.
 * Breakpoints 480 / 600 / 860, gelijk aan de rest van deze stylesheet.
 * ========================================================================= */
.iab-speedtest { margin-top: 28px; }
.iab-speedtest__tool {
	max-width: 500px; margin: 0 auto; text-align: center;
	background: var(--iab-card); border-radius: var(--iab-radius);
	box-shadow: var(--iab-shadow-soft); padding: 40px 28px 32px;
}
.iab-speedtest__meter { position: relative; width: 224px; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto; }
.iab-speedtest__ring { width: 100%; height: 100%; display: block; }
.iab-speedtest__track { fill: none; stroke: var(--iab-border); stroke-width: 13; }
.iab-speedtest__arc {
	fill: none; stroke: var(--iab-primary); stroke-width: 13; stroke-linecap: round;
	transform: rotate(-90deg); transform-origin: 100px 100px;
	transition: stroke-dashoffset .25s linear;
}
.iab-speedtest__readout {
	position: absolute; inset: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 2px;
}
.iab-speedtest__value {
	font-family: var(--iab-font-head); font-weight: 700;
	font-size: clamp(2rem, 6vw, 2.6rem); color: var(--iab-ink); line-height: 1;
}
.iab-speedtest__unit { font-size: .82rem; font-weight: 600; color: var(--iab-muted); }
.iab-speedtest__btn { margin-top: 26px; min-width: 230px; }
.iab-speedtest__results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.iab-speedtest__resbox {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	background: var(--iab-tint-1); border-radius: var(--iab-radius-sm); padding: 14px 8px;
}
.iab-speedtest__reslabel { font-size: .74rem; font-weight: 700; color: var(--iab-muted); }
.iab-speedtest__resvalue { font-family: var(--iab-font-head); font-weight: 700; font-size: 1.3rem; color: var(--iab-ink); }
.iab-speedtest__resunit { font-size: .74rem; color: var(--iab-muted); }
.iab-speedtest__error {
	margin-top: 22px; background: var(--iab-tint-2);
	border-radius: var(--iab-radius-sm); padding: 16px 18px;
}
.iab-speedtest__error p { margin: 0 0 12px; color: var(--iab-text); font-size: .92rem; }
.iab-speedtest__privacy { margin-top: 22px; font-size: .82rem; line-height: 1.55; color: var(--iab-muted); }
.iab-speedtest__duiding, .iab-speedtest__cta {
	max-width: 500px; margin: 22px auto 0;
	background: var(--iab-card); border-radius: var(--iab-radius);
	box-shadow: var(--iab-shadow-soft); padding: 28px; text-align: center;
}
.iab-speedtest__duiding h2, .iab-speedtest__cta h2 { margin: 0 0 10px; font-size: 1.2rem; }
.iab-speedtest__duiding p { margin: 0; color: var(--iab-text); }
.iab-speedtest__cta p { margin: 0 0 18px; color: var(--iab-text); }
.iab-speedtest__cta .iab-herocheck__row { margin-bottom: 0; }
.iab-speedtest__seo { margin-top: 48px; }
@media (max-width: 600px) {
	.iab-speedtest__tool { padding: 32px 20px 26px; }
	.iab-speedtest__btn { width: 100%; min-width: 0; }
}
@media (max-width: 480px) {
	.iab-speedtest__results { gap: 8px; }
	.iab-speedtest__resbox { padding: 10px 6px; }
	.iab-speedtest__resvalue { font-size: 1.05rem; }
	.iab-speedtest__duiding, .iab-speedtest__cta { padding: 22px 16px; }
}

/* ------------------------------------------------------------------ *
 * Deelscores op de reviewpagina ("Onze score in detail"). Afgebakend
 * blok met een zachte rand en dezelfde ruime radius als de kaarten,
 * zodat het als eigen onderdeel leest en niet als losse rijen.
 * ------------------------------------------------------------------ */
.iab-rev-subscores {
	margin: 30px 0 0;
	padding: 24px 26px;
	background: var(--iab-surface);
	border: 1px solid var(--iab-border);
	border-radius: 16px;
}
.iab-rev-subscores h2 { margin: 0 0 6px; }
.iab-rev-subscores__lead {
	margin: 0 0 18px;
	color: var(--iab-muted);
	font-size: .95rem;
	line-height: 1.55;
}
.iab-score-tab { display: flex; flex-direction: column; gap: 12px; }
.iab-score-row {
	display: grid;
	grid-template-columns: minmax(120px, 200px) 1fr 44px;
	align-items: center;
	gap: 14px;
}
.iab-score-row__name { font-size: .93rem; color: var(--iab-ink); }
.iab-score-row__bar {
	height: 8px;
	background: var(--iab-border);
	border-radius: 999px;
	overflow: hidden;
}
.iab-score-row__fill {
	display: block;
	height: 100%;
	background: var(--iab-primary);
	border-radius: 999px;
}
.iab-score-row__cijfer {
	justify-self: end;
	font-weight: 700;
	font-size: .95rem;
	color: var(--iab-primary);
	font-variant-numeric: tabular-nums;
}
.iab-score-tab__total {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--iab-border);
	font-size: .9rem;
	line-height: 1.6;
	color: var(--iab-muted);
}
@media (max-width: 600px) {
	.iab-rev-subscores { padding: 18px 16px; border-radius: 12px; }
	.iab-score-row { grid-template-columns: 1fr 40px; grid-template-areas: "naam cijfer" "bar bar"; gap: 4px 10px; }
	.iab-score-row__name { grid-area: naam; }
	.iab-score-row__cijfer { grid-area: cijfer; }
	.iab-score-row__bar { grid-area: bar; margin-top: 4px; }
}

/* ------------------------------------------------------------------ *
 * Stap-illustraties. Het genummerde badge-stramien blijft de signatuur;
 * de tekening staat erboven als rustig, licht getint vlak in dezelfde
 * zachte radius als de kaarten. Marine lijnwerk, amber als accent.
 * ------------------------------------------------------------------ */
.iab-stap__ill {
	display: block;
	margin: 0 0 14px;
	padding: 10px 12px;
	background: var(--iab-tint-1);
	border: 1px solid var(--iab-border);
	border-radius: 14px;
}
.iab-stap__ill svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 92px;
	stroke: var(--iab-primary);
	stroke-width: 2.4;
}
.iab-stap__ill .iab-ill-vlak { fill: var(--iab-surface); stroke: var(--iab-border); stroke-width: 2; }
.iab-stap__ill .iab-ill-accent { stroke: var(--iab-accent); }
.iab-stap__ill .iab-ill-accent-vul { fill: var(--iab-accent); stroke: none; }
@media (max-width: 600px) {
	.iab-stap__ill { padding: 8px 10px; border-radius: 12px; }
	.iab-stap__ill svg { max-height: 74px; }
}

.iab-rev-cta__sub { margin: 6px auto 16px; max-width: 520px; color: var(--iab-muted); }
.iab-rev-cta__knoppen { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.iab-rev-cta .iab-btn--ghost { background: var(--iab-card); color: var(--iab-primary); border: 2px solid var(--iab-primary); box-shadow: none; }
/* Provider-check: "{naam} check" boven de reviewtekst. */
.iab-rev-check { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: center; margin: 28px 0 32px; padding: 28px; background: var(--iab-tint-1, var(--iab-surface)); border: 1px solid var(--iab-border); border-radius: var(--iab-app-radius); scroll-margin-top: 90px; }
.iab-rev-check__tekst h2 { margin: 6px 0 10px; }
.iab-rev-check__tekst p { margin: 0 0 14px; }
.iab-rev-check__usps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.iab-rev-check__usps li { display: flex; align-items: flex-start; gap: 8px; font-size: .92rem; }
.iab-rev-check__usps svg { flex: 0 0 18px; color: var(--iab-accent-2, var(--iab-primary)); margin-top: 2px; }
.iab-rev-check .iab-herocheck { max-width: none; }
.iab-rev-check .iab-herocheck__row > * { flex: 1 1 0; min-width: 0; }
.iab-rev-check .iab-herocheck__row input { width: 100%; }
@media (max-width: 860px) { .iab-rev-check { grid-template-columns: minmax(0, 1fr); padding: 20px; } }

/* Mobiele polish (sweep 22-09): prijstabel scrollt zijwaarts, dus cellen
   niet per woord laten breken (gaf rijen van 188px hoog op 390px). */
@media (max-width: 860px) {
  .iab-prijstabel td, .iab-prijstabel th { white-space: nowrap; }
  .iab-prijstabel td.iab-ptable-provider { white-space: normal; min-width: 180px; }
}


/* Adrescheck zichtbaar laten laden (23-09): spinner in de knop bij verzenden,
   laadpil in het adresblok en teller met spinner boven de gedimde kaarten,
   daarna kort een groene bevestiging op het gevonden adres. */
.iab-spin { display: inline-block; width: 16px; height: 16px; border: 3px solid var(--iab-on-primary-soft); border-top-color: var(--iab-on-primary); border-radius: 50%; animation: iab-spin .7s linear infinite; flex: 0 0 auto; }
.iab-btn.is-busy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none; opacity: .9; }
.iab-gegevens__status.is-laden, .iab-adresblok__status.is-laden { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: var(--iab-radius-sm); background: var(--iab-tint-1, var(--iab-surface)); color: var(--iab-ink); font-weight: 600; font-size: .88rem; }
.iab-gegevens__status.is-laden::before, .iab-adresblok__status.is-laden::before { content: ""; display: inline-block; width: 18px; height: 18px; border: 3px solid var(--iab-border); border-top-color: var(--iab-primary); border-radius: 50%; animation: iab-spin .7s linear infinite; flex: 0 0 auto; }
.iab-results__count.is-laden { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--iab-ink); }
.iab-results__count.is-laden::before { content: ""; display: inline-block; width: 16px; height: 16px; border: 3px solid var(--iab-border); border-top-color: var(--iab-primary); border-radius: 50%; animation: iab-spin .7s linear infinite; flex: 0 0 auto; }
.iab-results__count.is-laden::after { content: "..."; }
.iab-cards.is-loading { opacity: .4; }
.is-adres-gevonden .iab-gegevens__ingevuld, .is-adres-gevonden .iab-adresblok__ingevuld { animation: iab-adres-ok 2.4s ease-out; border-radius: var(--iab-radius-sm); }
@keyframes iab-adres-ok { 0% { box-shadow: 0 0 0 0 var(--iab-success); } 25% { box-shadow: 0 0 0 4px var(--iab-success); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* =========================================================================
 * Providerpagina: zijkolom (05-10).
 *
 * De reviewtekst stond als smalle kolom in een leeg vlak zonder zijkolom.
 * Zelfde stramien als het artikel: inhoud links, 300px zijkolom rechts met
 * bovenin het sticky-blok een providerkaart (score, adrescheck, knop naar
 * de provider). Onder 860px valt de zijkolom onder de inhoud.
 * ========================================================================= */
.iab-review-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; max-width: none; margin-inline: 0; }
.iab-review-main .iab-prose { max-width: 780px; margin-inline: 0; }
.iab-sidebar__provcta { background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.iab-sidebar__provcta-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.iab-sidebar__provcta-logo { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; padding: 6px; border: 1px solid var(--iab-border); border-radius: 10px; background: var(--iab-card); }
.iab-sidebar__provcta-logo img, .iab-sidebar__provcta-logo svg { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.iab-sidebar__provcta-naam { flex: 1; font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.iab-sidebar__provcta .iab-btn { width: 100%; justify-content: center; }
.iab-sidebar__provcta-sub { font-size: .8rem; color: var(--iab-muted); text-align: center; }
@media (max-width: 860px) {
	.iab-review-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.iab-review-main .iab-prose { max-width: none; }
}

/* =========================================================================
 * Aanbiedersoverzicht: rijke kaarten (05-10).
 *
 * De kaart toonde alleen logo, score en vanafprijs in een leeg vlak. Nu:
 * badge uit de data, samenvatting (3 regels), kerngegevens als chips,
 * prijs met actieduur, en twee acties (adrescheck met voorselectie, review).
 * ========================================================================= */
.iab-provgrid { align-items: stretch; }
.iab-provcard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.iab-provcard__badge { position: absolute; top: -11px; left: 18px; padding: 3px 11px; border-radius: 999px; background: var(--iab-success); color: var(--iab-card); font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.iab-provcard__kop { display: flex; align-items: center; gap: 12px; }
.iab-provcard__logo { flex: 0 0 56px; width: 56px; height: 56px; display: grid; place-items: center; padding: 8px; border: 1px solid var(--iab-border); border-radius: 12px; background: var(--iab-card); text-decoration: none; font-weight: 800; color: var(--iab-ink); }
.iab-provcard__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.iab-provcard__titel { flex: 1; min-width: 0; }
.iab-provcard__titel h2 { margin: 0; font-size: 1.15rem; line-height: 1.2; }
.iab-provcard__titel h2 a { color: var(--iab-ink); text-decoration: none; }
.iab-provcard__titel h2 a:hover { color: var(--iab-primary); }
.iab-provcard__scorelabel { display: block; margin-top: 2px; font-size: .78rem; color: var(--iab-muted); }
.iab-provcard__sam { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--iab-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.iab-provcard__feiten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.iab-provcard__feiten li { font-size: .78rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--iab-surface); border: 1px solid var(--iab-border); color: var(--iab-ink); }
.iab-provcard__prijs { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--iab-border); display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; }
.iab-provcard__vanaf { font-size: .82rem; color: var(--iab-muted); }
.iab-provcard__prijs strong { font-size: 1.35rem; color: var(--iab-ink); }
.iab-provcard__mnd { font-size: .85rem; color: var(--iab-muted); }
.iab-provcard__actie { flex-basis: 100%; font-size: .8rem; color: var(--iab-muted); }
.iab-provcard__acties { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.iab-provcard__acties .iab-btn { justify-content: center; padding-inline: 10px; font-size: .88rem; white-space: nowrap; }
.iab-provgrid__cta { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; border-radius: var(--iab-radius); background: var(--iab-tint-1); flex-wrap: wrap; }
.iab-provgrid__cta h2 { margin: 0 0 6px; font-size: 1.35rem; }
.iab-provgrid__cta p { margin: 0; color: var(--iab-muted); max-width: 60ch; }
.iab-archive-head__meta { margin: 10px auto 0; font-size: .85rem; color: var(--iab-muted); }
@media (max-width: 600px) {
	.iab-provcard { padding: 18px; }
	.iab-provcard__acties { grid-template-columns: minmax(0, 1fr); }
	.iab-provgrid__cta { padding: 22px; }
	.iab-provgrid__cta .iab-btn { width: 100%; justify-content: center; }
}

/* ===== Speedtest: resultaat duidelijk en een CTA die aansluit op de gemeten snelheid (2-11) ===== */
.iab-speedtest__results.is-klaar .iab-speedtest__resbox { border-color: var(--iab-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--iab-primary) 15%, transparent); transition: box-shadow .4s, border-color .4s; }
.iab-speedtest__results.is-klaar .iab-speedtest__resvalue { color: var(--iab-primary); }
.iab-speedtest__samenvatting { margin: 16px 0 0; text-align: center; font-weight: 700; font-size: 1.1rem; color: var(--iab-ink); }
.iab-speedtest__duiding, .iab-speedtest__cta { scroll-margin-top: 90px; }
.iab-speedtest__cta.is-klaar { padding: clamp(20px, 4vw, 32px); border-radius: var(--iab-radius, 16px); background: linear-gradient(135deg, var(--iab-primary), var(--iab-primary-dark, var(--iab-primary))); color: var(--iab-on-primary, #fff); }
.iab-speedtest__cta.is-klaar h2, .iab-speedtest__cta.is-klaar p { color: inherit; }
.iab-speedtest__cta.is-klaar label { color: inherit; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
	.iab-speedtest__cta.is-klaar { animation: iab-cta-in .5s ease both; }
	@keyframes iab-cta-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
.iab-speedtest__cta.is-klaar button[type="submit"] { background: #fff; color: var(--iab-primary); border-color: #fff; }
.iab-speedtest__cta.is-klaar button[type="submit"]:hover { background: color-mix(in srgb, #fff 88%, var(--iab-primary)); }