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

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

/* =========================================================================
 * 0. Basis / knoppen
 * ========================================================================= */
.gvz-app a { color: var(--gvz-primary); }
/* Knoppen zijn ook links: zonder deze regel wint de generieke '.gvz-app a'-kleur
   hierboven van '.gvz-btn' (hogere specificiteit) en valt de knoptekst weg tegen
   de knopachtergrond. */
.gvz-app a.gvz-btn, .gvz-app a.gvz-btn:hover,
.gvz-app a.gvz-btn-cta, .gvz-app a.gvz-btn-cta:hover,
.gvz-app a.gvz-btn-submit, .gvz-app a.gvz-btn-submit:hover { color: var(--gvz-on-primary); }
.gvz-app a.gvz-btn--ghost, .gvz-app a.gvz-btn--outline { color: var(--gvz-ink); }
.gvz-app a.gvz-btn--ghost:hover, .gvz-app a.gvz-btn--outline:hover { color: var(--gvz-primary); }
.gvz-btn, .gvz-btn-cta, .gvz-btn-submit {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	font-weight: 700; font-size: 1rem; line-height: 1;
	padding: 14px 24px; border-radius: var(--gvz-radius-sm); border: 2px solid transparent;
	cursor: pointer; transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
	text-decoration: none; white-space: nowrap; background: var(--gvz-primary); color: var(--gvz-on-primary);
}
.gvz-btn:hover, .gvz-btn-cta:hover, .gvz-btn-submit:hover { background: var(--gvz-primary-dark); color: var(--gvz-on-primary); text-decoration: none; transform: translateY(-1px); }
.gvz-btn--primary { background: var(--gvz-primary); color: var(--gvz-on-primary); }
.gvz-btn--lg { font-size: 1.1rem; padding: 18px 30px; }
.gvz-btn--sm { font-size: .85rem; padding: 9px 16px; }
.gvz-btn--block { width: 100%; }

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

/* =========================================================================
 * 1. Filters / resultatenpagina [gvz_resultaten]
 * ========================================================================= */
.gvz-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 op mobiel horizontale overflow zodra de
   filterkolom open staat. */
.gvz-sidebar-col, .gvz-results__main { min-width: 0; }
/* Het aansluitkaartje, de filterkaart en het vertrouwenskaartje delen een
   kolomwrapper: de sticky- en scrollbehandeling zit daarom hier en niet meer
   op .gvz-filters zelf, zodat de drie kaartjes samen één scrollgebied vormen
   onder de sticky header. Zonder eigen maximum loopt de kolom bij veel
   filtergroepen het scherm uit. */
.gvz-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 default flex-shrink:1 de kaartjes de ruimte die
   toevallig overblijft binnen max-height, in plaats van hun natuurlijke
   inhoudshoogte: het onderste kaartje wordt dan platgeknepen terwijl de kolom
   zelf had moeten gaan scrollen. */
.gvz-sidebar-col > * { flex-shrink: 0; }
.gvz-sidebar-col::-webkit-scrollbar { width: 8px; }
.gvz-sidebar-col::-webkit-scrollbar-thumb { background: var(--gvz-border); border-radius: var(--gvz-radius-pill); }

.gvz-filters { background: var(--gvz-card, var(--gvz-surface)); border: 1px solid var(--gvz-border); border-radius: var(--gvz-app-radius); padding: 20px; }
.gvz-filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.gvz-filters__title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--gvz-ink); }

/* Tussenkopjes per filtergroep, met een dunne scheidingslijn en meer ruimte
   tussen groepen dan binnen een groep. */
.gvz-filters__group + .gvz-filters__group { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--gvz-border); }
.gvz-filters__group[hidden] { display: none; }
.gvz-filters__grouphead { margin: 0 0 12px; font-size: .95rem; font-weight: 700; color: var(--gvz-ink); }
.gvz-filters__group .gvz-fgroup { margin-bottom: 14px; }
.gvz-filters__group .gvz-fgroup:last-child { margin-bottom: 0; }
.gvz-filters__reset { background: none; border: 0; color: var(--gvz-primary); font-weight: 700; cursor: pointer; font-size: .85rem; }
.gvz-filters__mobtoggle { display: none; background: var(--gvz-card, var(--gvz-surface)); border: 1px solid var(--gvz-border); border-radius: var(--gvz-radius-sm); padding: 10px 16px; font-weight: 700; cursor: pointer; }

.gvz-fgroup { margin-bottom: 22px; }
.gvz-fgroup__label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 8px; }
.gvz-range-val { font-weight: 700; color: var(--gvz-primary); margin-bottom: 4px; }
/* Bovengrensslider met de gekozen waarde naast het label in plaats van eronder. */
.gvz-range-val--inline { margin-bottom: 0; font-size: .82rem; }
/* De gevulde baan komt uit de --gvz-range-fill custom property die
   gvz-resultaten.js na elke render bijwerkt; Firefox tekent hem zelf via
   ::-moz-range-progress. */
.gvz-range {
	width: 100%; height: 6px; margin: 8px 0;
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	background: linear-gradient(to right, var(--gvz-primary) var(--gvz-range-fill, 0%), var(--gvz-border) var(--gvz-range-fill, 0%));
	border-radius: var(--gvz-radius-pill); cursor: pointer; accent-color: var(--gvz-primary);
}
.gvz-range::-webkit-slider-runnable-track { height: 6px; border-radius: var(--gvz-radius-pill); background: transparent; }
.gvz-range::-moz-range-track { height: 6px; border-radius: var(--gvz-radius-pill); background: var(--gvz-border); }
.gvz-range::-moz-range-progress { height: 6px; border-radius: var(--gvz-radius-pill); background: var(--gvz-primary); }
.gvz-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
	background: var(--gvz-primary); border: 3px solid var(--gvz-card, var(--gvz-surface)); cursor: pointer;
}
.gvz-range::-moz-range-thumb {
	width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--gvz-card, var(--gvz-surface));
	background: var(--gvz-primary); cursor: pointer;
}
.gvz-range__minmax { display: flex; justify-content: space-between; font-size: .78rem; color: var(--gvz-muted); }

/* Klein rond i-icoon als toelichtingstrigger, zelfde data-tip-toggle-patroon
   als de tekstlink verderop. */
.gvz-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(--gvz-primary); background: none; color: var(--gvz-primary);
	font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer;
}
.gvz-tip-icon:hover { background: var(--gvz-primary); color: var(--gvz-on-primary); }

/* Ondergrens als listbox: een knop die de keuze toont plus een uitklappaneel
   met echte radio's. */
.gvz-selectmin { position: relative; }
.gvz-selectmin__trigger {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 10px 14px; border: 1.5px solid var(--gvz-border); border-radius: var(--gvz-radius-sm);
	background: var(--gvz-card, var(--gvz-surface)); color: var(--gvz-ink);
	font-weight: 700; font-size: .88rem; cursor: pointer; text-align: left;
}
.gvz-selectmin__trigger:hover { border-color: var(--gvz-primary); }
.gvz-selectmin__chevron { flex: 0 0 auto; color: var(--gvz-muted); transition: transform .15s ease; }
.gvz-selectmin__trigger[aria-expanded="true"] .gvz-selectmin__chevron { transform: rotate(180deg); }
.gvz-selectmin__panel {
	position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5;
	background: var(--gvz-card, var(--gvz-surface)); border: 1px solid var(--gvz-border); border-radius: var(--gvz-radius-sm);
	padding: 6px; display: grid; gap: 2px;
}
.gvz-selectmin__panel[hidden] { display: none; }
.gvz-selectmin__option { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--gvz-radius-sm); cursor: pointer; font-size: .88rem; color: var(--gvz-ink); }
.gvz-selectmin__option:hover { background: var(--gvz-surface-2, var(--gvz-tint-1)); }
.gvz-selectmin__option span { display: flex; align-items: baseline; gap: 6px; }
.gvz-selectmin__option em { font-style: normal; font-size: .78rem; color: var(--gvz-muted); }
/* Radiorondjes in dezelfde ontwerptaal als de checkboxen, maar rond en met een
   gevulde stip in plaats van een vinkje. */
.gvz-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(--gvz-border); border-radius: 50%;
	background: var(--gvz-card, var(--gvz-surface));
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.gvz-selectmin__option input[type="radio"]:checked { border-color: var(--gvz-primary); }
.gvz-selectmin__option input[type="radio"]:checked::after {
	content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gvz-primary);
}

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

/* "Aanleg en levering": losse booleaanse filters onder één tussenkop, dicht
   op elkaar gestapeld. */
.gvz-fgroup--levering { display: flex; flex-direction: column; gap: 10px; }
.gvz-fgroup__labelrow--tip { margin-bottom: 0; }
.gvz-fgroup__labelrow--spaced { margin-top: 16px; }

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

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

.gvz-checks-list, .gvz-radio-list { display: flex; flex-direction: column; gap: 8px; }
/* display:flex hierboven wint van de browser-default van [hidden], waardoor
   ingeklapte lijsten (providers, zenderpakketten) toch open bleven staan. */
.gvz-checks-list[hidden], .gvz-radio-list[hidden] { display: none; }
.gvz-check { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; }
/* Afgeronde vierkantjes voor zowel de checkboxen als de contractduurradio's
   (checkboxuiterlijk, radiogedrag: de single-select-logica in
   gvz-resultaten.js blijft ongewijzigd, alleen appearance:none plus een eigen
   vinkje). Zelfde vormtaal als het vinkvak in de pakket-pills. */
.gvz-check input[type="checkbox"], .gvz-check 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(--gvz-border); border-radius: 4px;
	background-color: var(--gvz-card, var(--gvz-surface));
	background-repeat: no-repeat; background-position: center; background-size: 11px 11px;
	cursor: pointer; transition: background-color .12s ease, border-color .12s ease;
}
.gvz-check input[type="checkbox"]:checked, .gvz-check input[type="radio"]:checked {
	background-color: var(--gvz-primary); border-color: var(--gvz-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
.gvz-check input[type="checkbox"]:disabled { opacity: .6; cursor: default; }
.gvz-check.is-unavailable { opacity: .5; }
.gvz-check__loc { font-style: normal; color: var(--gvz-muted); font-size: .82em; }

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

.gvz-fgroup__labelrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.gvz-fgroup__labelrow .gvz-fgroup__label { margin-bottom: 0; }
.gvz-fgroup__wijzig { background: none; border: 0; color: var(--gvz-primary); font-weight: 700; font-size: .82rem; cursor: pointer; padding: 0; white-space: nowrap; }
.gvz-fgroup__summary { margin: 0 0 8px; font-size: .85rem; color: var(--gvz-muted); }

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

/* "Jouw aansluiting": eigen kaartje boven de filterkaart, zelfde kaartvorm
   (dunne rand, geen schaduw). Alleen zichtbaar als de niche-config
   'adrescheck' => true heeft staan. */
.gvz-gegevens {
	background: var(--gvz-card, var(--gvz-surface)); border: 1px solid var(--gvz-border);
	border-radius: var(--gvz-app-radius); padding: 20px;
	display: flex; flex-direction: column; gap: 12px;
}
.gvz-gegevens__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--gvz-ink); }
.gvz-gegevens__ingevuld { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.gvz-gegevens__ingevuld[hidden] { display: none; }
.gvz-gegevens__adres { font-size: .92rem; font-weight: 600; color: var(--gvz-text); }
.gvz-gegevens__potlood {
	display: inline-grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px;
	border: 0; border-radius: 50%; background: var(--gvz-primary); color: var(--gvz-on-primary); cursor: pointer;
}
.gvz-gegevens__potlood:hover { background: var(--gvz-primary-dark); }
.gvz-gegevens__form[hidden] { display: none; }
.gvz-gegevens__hulp { margin: 0 0 10px; font-size: .88rem; color: var(--gvz-muted); }
.gvz-gegevens__row { display: flex; gap: 6px; }
.gvz-gegevens__row input { min-width: 0; flex: 1 1 auto; padding: 9px 10px; border: 1.5px solid var(--gvz-border); border-radius: var(--gvz-radius-sm); font-size: .85rem; }
.gvz-gegevens__row .gvz-btn { flex: 0 0 auto; padding: 9px 14px; }
.gvz-gegevens__status { margin: 0; font-size: .82rem; color: var(--gvz-muted); }
.gvz-gegevens__status[hidden] { display: none; }
.gvz-gegevens__status.is-error { color: var(--gvz-danger); }

/* Vertrouwenskaartje onder de filterkaart: donker petrol vlak, zelfde radius
   als de andere kaarten. Het ringmotief komt subtiel terug als één grote,
   doorschijnende cirkelrand in de hoek. */
.gvz-usp-card {
	position: relative; overflow: hidden;
	background: var(--gvz-primary-dark); color: var(--gvz-on-primary);
	border-radius: var(--gvz-app-radius); padding: 22px 24px;
}
.gvz-usp-card__ring { position: absolute; right: -40px; bottom: -50px; color: rgba(255,255,255,.10); pointer-events: none; }
.gvz-usp-card__title { position: relative; margin: 0 0 14px; font-size: 1.05rem; font-weight: 700; color: var(--gvz-on-primary); }
.gvz-usp-card__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gvz-usp-card__list li { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; line-height: 1.45; color: var(--gvz-on-primary-soft); }
.gvz-usp-card__list svg { flex: 0 0 15px; margin-top: 3px; color: var(--gvz-accent); }

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

.gvz-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
   filterchips (indien aanwezig) eronder. */
.gvz-results__left { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.gvz-results__count { margin: 0; color: var(--gvz-muted); font-size: .92rem; }
.gvz-results__toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gvz-results__sort { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.gvz-results__sort select { padding: 9px 12px; border: 1.5px solid var(--gvz-border); border-radius: var(--gvz-radius-sm); background: var(--gvz-card, var(--gvz-surface)); color: var(--gvz-ink); font-weight: 600; }

/* Tekstschakel die het contractduurfilter wisselt. */
.gvz-contractduur-switch {
	background: none; border: 0; padding: 0; cursor: pointer;
	color: var(--gvz-primary); font-weight: 700; font-size: .85rem;
	display: inline-flex; align-items: center; gap: 6px;
}
.gvz-contractduur-switch:hover { color: var(--gvz-primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.gvz-contractduur-switch[hidden] { display: none; }

/* Actieve filters als verwijderbare chips, links in de balk. Onderscheidt zich
   van de statische .gvz-chip in de uitklap door de rand en het kruisje. */
.gvz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gvz-chip--active {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--gvz-surface-2, var(--gvz-tint-1)); border: 1.5px solid var(--gvz-border);
	border-radius: var(--gvz-radius-pill); padding: 6px 10px 6px 14px;
	font-size: .82rem; font-weight: 700; color: var(--gvz-ink); cursor: pointer;
}
.gvz-chip--active:hover { border-color: var(--gvz-primary); color: var(--gvz-primary); }
.gvz-chip--active span { font-size: 1rem; line-height: 1; color: var(--gvz-muted); }
.gvz-chip--active:hover span { color: var(--gvz-primary); }
.gvz-results__disclaimer { font-size: .82rem; color: var(--gvz-muted); margin-top: 18px; }
.gvz-no-results { padding: 32px; text-align: center; color: var(--gvz-muted); }

.gvz-cards { display: flex; flex-direction: column; gap: 18px; position: relative; transition: opacity .15s ease; }
/* Laadstaat tijdens de server-side telefoniefilters: verminderde opacity plus
   een spinner rechtsboven, geen overlay die de kaarten verbergt. */
.gvz-cards.is-loading { opacity: .5; pointer-events: none; }
.gvz-cards.is-loading::after {
	content: ""; position: absolute; top: 10px; right: 10px; width: 22px; height: 22px;
	border: 3px solid var(--gvz-border); border-top-color: var(--gvz-primary);
	border-radius: 50%; animation: gvz-spin .7s linear infinite;
}
@keyframes gvz-spin { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
	.gvz-results { grid-template-columns: minmax(0, 1fr); }
	.gvz-sidebar-col { position: static; max-height: none; overflow-y: visible; }
	.gvz-filters { position: static; display: none; }
	/* 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. */
	.gvz-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;
	}
	.gvz-filters.is-open .gvz-mfilters-foot { display: flex; }
	.gvz-filters.is-open .gvz-mfilters-sluit { display: block; }
	.gvz-filters.is-open .gvz-mfilters-chips:not([hidden]) { display: flex; }
	.gvz-filters__mobtoggle { display: inline-flex; }
	/* Het vertrouwenskaartje staat "onder de filters" en deelt daarom de
	   Filters-knop-toggle. .gvz-filters.is-open wordt al gezet door de mobiele
	   toggle in gvz-resultaten.js; via de sibling-combinator (het kaartje staat
	   direct na .gvz-filters in de DOM) is daar geen extra JS voor nodig. */
	.gvz-usp-card { display: none; }
	.gvz-filters.is-open ~ .gvz-usp-card { display: block; }
}

/* 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. */
.gvz-mfilters-foot { display: none; align-items: center; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 301; background: var(--gvz-surface); border-top: 1px solid var(--gvz-border); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: var(--gvz-shadow-2); }
.gvz-mfilters-foot .gvz-btn { flex: 1; text-align: center; }
.gvz-mfilters-wis { background: none; border: 0; color: var(--gvz-muted); font-weight: 700; font-size: .88rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
.gvz-mfilters-sluit { display: none; background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--gvz-muted); cursor: pointer; padding: 2px 6px; }
.gvz-mfilters-chips { display: none; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.gvz-mfilters-chips[hidden] { display: none; }
.gvz-mfilters-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--gvz-tint-1, var(--gvz-surface)); border: 1px solid var(--gvz-border); border-radius: 999px; padding: 6px 12px; font-size: .84rem; font-weight: 600; color: var(--gvz-ink); cursor: pointer; }
.gvz-mfilters-chip:hover { border-color: var(--gvz-primary); }

/* =========================================================================
 * 2. Resultatenkaart (.gvz-rcard)
 * ========================================================================= */
/* Drie kolommen: logo, tekstblok, prijspaneel. Rangnummer, topkeuzepil,
   selectievinkje en "Specificaties" staan absoluut gepositioneerd ten opzichte
   van de kaart en vallen dus buiten die grid. Dunne rand, geen schaduw:
   dezelfde kaartvorm als de rest van de site. */
.gvz-rcard {
	position: relative; background: var(--gvz-card, var(--gvz-surface));
	border: 1px solid var(--gvz-border); border-radius: var(--gvz-app-radius);
	padding: 26px 30px 34px; display: grid; grid-template-columns: 140px minmax(0, 1fr) 240px;
	gap: 28px; align-items: center;
}
.gvz-rcard--top { border-width: 2px; border-color: var(--gvz-primary); }

/* Rangnummer: klein rond chipje half over de linkerbovenhoek van de kaartrand. */
.gvz-rcard__rank {
	position: absolute; top: -12px; left: -12px; width: 28px; height: 28px; z-index: 1;
	background: var(--gvz-card, var(--gvz-surface)); border: 1px solid var(--gvz-border); border-radius: 50%;
	display: grid; place-items: center; font-family: var(--gvz-font-head);
	font-weight: 700; font-size: .8rem; color: var(--gvz-muted);
}
/* Topkeuze: los pilletje naast het rangchipje. */
.gvz-rcard__aanraderpill {
	position: absolute; top: -13px; left: 34px; z-index: 1; max-width: calc(100% - 60px);
	background: var(--gvz-primary); color: var(--gvz-on-primary); font-family: var(--gvz-font-head);
	font-size: .75rem; font-weight: 700; padding: 4px 14px; border-radius: var(--gvz-radius-pill);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Redactionele dealtekst bij de topkeuze: eigen regel onder de productnaam,
   zodat de pil een kort label kan blijven. */
.gvz-rcard__dealtekst { margin: 0 0 10px; color: var(--gvz-primary); font-size: .88rem; font-weight: 600; }

/* Logo vrijstaand op vaste maat, geen tegel eromheen. */
.gvz-rcard__logo { display: grid; place-items: center start; }
.gvz-rcard__logo img { width: 120px; height: 60px; object-fit: contain; object-position: left center; }
.gvz-rcard__initials, .gvz-aanrader__initials {
	width: 120px; height: 60px; display: grid; place-items: center;
	background: var(--gvz-surface-2, var(--gvz-bg)); border-radius: var(--gvz-radius);
	font-weight: 700; color: var(--gvz-muted); font-size: 1.3rem;
}

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

/* Metaregel als icoonregel (contractduur, download, upload, zenders, score)
   met een dunne onderlijn. De score staat er prominenter in dan de rest. */
.gvz-rcard__meta {
	display: flex; align-items: center; gap: 20px; color: var(--gvz-muted); font-size: .88rem; font-weight: 500;
	padding-bottom: 14px; border-bottom: 1px solid var(--gvz-border); margin-bottom: 14px; flex-wrap: wrap; row-gap: 8px;
}
.gvz-rcard__meta span { display: inline-flex; align-items: center; gap: 7px; }
.gvz-rcard__meta svg { color: var(--gvz-primary); opacity: .8; flex: 0 0 auto; }
.gvz-rcard__meta-score { color: var(--gvz-ink); font-weight: 700; }
.gvz-rcard__meta-score svg { opacity: 1; color: var(--gvz-accent); }

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

/* Prijspaneel: actietarief groot, daaronder het eerstejaarsbedrag en de prijs
   na de actie. */
.gvz-rcard__price { display: flex; flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
.gvz-rcard__badge {
	display: inline-flex; align-items: center; gap: 6px; background: var(--gvz-surface-2, var(--gvz-tint-1));
	color: var(--gvz-success); font-size: .76rem; font-weight: 700;
	padding: 5px 12px; border-radius: var(--gvz-radius-pill); margin-bottom: 10px; max-width: 100%;
}
.gvz-rcard__priceline { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.gvz-rcard__price-old { color: var(--gvz-muted); font-size: .88rem; font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.gvz-rcard__bedrag { font-family: var(--gvz-font-head); font-weight: 700; font-size: 2rem; color: var(--gvz-ink); letter-spacing: -.01em; line-height: 1.1; }
.gvz-rcard__per { color: var(--gvz-muted); font-size: .8rem; font-weight: 500; }
.gvz-rcard__dash { width: 100%; max-width: 190px; border-top: 1px dashed var(--gvz-border); margin: 10px 0 8px; }
.gvz-rcard__jaar { font-size: .95rem; font-weight: 700; color: var(--gvz-ink); }
.gvz-rcard__jaar span { color: var(--gvz-muted); font-weight: 500; font-size: .8rem; }
.gvz-rcard__daarna { font-size: .76rem; color: var(--gvz-muted); margin-top: 5px; }
.gvz-rcard__cta-btn { margin-top: 14px; width: 100%; max-width: 210px; text-align: center; padding: 13px 20px; border-radius: var(--gvz-radius-pill); font-size: .95rem; }

/* Onderrand: "Specificaties" gecentreerd half over de rand, het selectievinkje
   subtiel linksonder. */
.gvz-rcard__more {
	position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); z-index: 1;
	background: var(--gvz-card, var(--gvz-surface)); border: 1px solid var(--gvz-border);
	border-radius: var(--gvz-radius-pill); padding: 6px 18px;
	font-weight: 700; font-size: .84rem; color: var(--gvz-primary); cursor: pointer; white-space: nowrap;
}
.gvz-rcard__more:hover { border-color: var(--gvz-primary); }
.gvz-rcard__more-i { display: inline-block; transition: transform .15s; }
.gvz-rcard__more.is-open .gvz-rcard__more-i { transform: rotate(180deg); }
.gvz-rcard__comparecb {
	position: absolute; left: 30px; bottom: 10px; z-index: 1;
	display: inline-flex; align-items: center; gap: 7px;
	font-size: .8rem; font-weight: 600; color: var(--gvz-muted); cursor: pointer;
}
.gvz-rcard__comparecb input { accent-color: var(--gvz-primary); cursor: pointer; }

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

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

/* Voordelen die niet op de kaart zelf pasten, herhaald in de uitklap. */
.gvz-detail-benefits { margin: 0 0 16px; }

/* Doorgestreepte normale prijs naast het actietarief, in de kostentab. */
.gvz-price-strike { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.gvz-price-strike__old { text-decoration: line-through; color: var(--gvz-muted); font-size: .9rem; }
.gvz-price-strike__new { font-weight: 700; color: var(--gvz-ink); font-size: 1.1rem; }
.gvz-chip--combi { background: var(--gvz-surface-2, var(--gvz-tint-1)); color: var(--gvz-primary); font-weight: 700; }
.gvz-tv-inbegrepen { color: var(--gvz-success); }

/* Testscore-tab: per onderdeel de sterrenbalk en daaronder het gewicht
   waarmee dat onderdeel meeweegt in het eindcijfer. */
.gvz-score-tab { display: flex; flex-direction: column; gap: 14px; }
.gvz-score-row__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.gvz-score-row__name { font-weight: 700; color: var(--gvz-ink); font-size: .88rem; }
.gvz-score-row__stars {
	position: relative; display: inline-block; width: 90px; height: 12px; flex: 0 0 90px;
	background: var(--gvz-border); border-radius: var(--gvz-radius-pill); overflow: hidden;
}
.gvz-score-row__stars-fill { position: absolute; inset: 0; background: var(--gvz-accent); border-radius: var(--gvz-radius-pill); }
.gvz-score-row__weight { width: 100%; height: 4px; background: var(--gvz-border); border-radius: var(--gvz-radius-pill); overflow: hidden; }
.gvz-score-row__weight span { display: block; height: 100%; background: var(--gvz-primary); border-radius: var(--gvz-radius-pill); }
.gvz-score-tab__total { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--gvz-border); font-size: .85rem; color: var(--gvz-text); line-height: 1.5; }
.gvz-score-tab__total strong { color: var(--gvz-ink); font-size: 1.1rem; }

/* Los bij te boeken opties, gegroepeerd per categorie. */
.gvz-bijboeken { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gvz-border); }
.gvz-bijboeken__title { font-weight: 700; color: var(--gvz-ink); margin: 0 0 10px; font-size: .92rem; }
.gvz-bijboeken__cat { font-weight: 700; color: var(--gvz-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; margin: 12px 0 4px; }
.gvz-bijboeken__cat:first-child { margin-top: 0; }

@media (max-width: 860px) {
	/* Prijspaneel iets smaller zodra de sidebar boven de lijst is geklapt. */
	.gvz-rcard { grid-template-columns: 110px minmax(0, 1fr) 200px; gap: 20px; padding: 26px 22px 34px; }
	.gvz-rcard__logo img, .gvz-rcard__initials { width: 100px; }
}

@media (max-width: 600px) {
	/* Onder 600px stapelen de drie kolommen: het prijspaneel lijnt dan links
	   uit in plaats van rechts, zodat bedrag en knop op één lijn staan met de
	   tekst erboven. */
	.gvz-rcard { grid-template-columns: minmax(0, 1fr); padding: 30px 20px 40px; gap: 16px; justify-items: start; }
	.gvz-rcard__price { align-items: flex-start; text-align: left; width: 100%; }
	.gvz-rcard__priceline { justify-content: flex-start; }
	.gvz-rcard__dash { max-width: none; }
	.gvz-rcard__cta-btn { max-width: 260px; }
	.gvz-rcard__comparecb { left: 20px; }
	.gvz-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

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

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

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

/* =========================================================================
 * 4. Aanrader-kaart [gvz_aanrader]
 * ========================================================================= */
.gvz-aanrader { background: var(--gvz-card, var(--gvz-surface)); border: 2px solid var(--gvz-primary); border-radius: var(--gvz-app-radius); padding: 24px; max-width: 640px; margin-inline: auto; }
.gvz-aanrader__label { display: inline-block; background: var(--gvz-primary); color: var(--gvz-on-primary); font-weight: 700; font-size: .78rem; padding: 5px 14px; border-radius: 999px; margin-bottom: 14px; }
.gvz-aanrader__body { display: flex; align-items: center; gap: 18px; }
.gvz-aanrader__logo { flex: 0 0 84px; width: 84px; height: 64px; border-radius: 12px; background: var(--gvz-bg); border: 1px solid var(--gvz-border); display: grid; place-items: center; overflow: hidden; padding: 8px; }
.gvz-aanrader__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gvz-aanrader__info { flex: 1; min-width: 0; }
.gvz-aanrader__name { margin: 0 0 2px; }
.gvz-aanrader__pakket { margin: 0 0 8px; color: var(--gvz-muted); font-size: .9rem; }
/* De aanrader staat in een gecentreerde sectie; zonder eigen text-align
   erfde de USP-lijst die centrering en lazen de punten als losse regels.
   Zelfde vinkjeslijst als de top3-kaarten. */
.gvz-aanrader { text-align: left; }
.gvz-aanrader__usps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .88rem; color: var(--gvz-text); text-align: left; }
.gvz-aanrader__usps li { display: flex; align-items: flex-start; gap: 7px; }
.gvz-aanrader__usps svg { flex: 0 0 auto; margin-top: 3px; color: var(--gvz-success); }
.gvz-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(--gvz-on-primary); background: var(--gvz-primary); }
.gvz-aanrader .gvz-btn { margin-top: 18px; }

@media (max-width: 600px) {
	/* Onder 600px paste de driekolomsrij (logo, tekst, scorebolletje) niet
	   meer: het bolletje kwam over de USP-tekst te liggen. Logo en score op
	   een eigen regel boven de tekst. */
	.gvz-aanrader { padding: 20px; }
	.gvz-aanrader__body { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "logo score" "info info"; align-items: center; gap: 12px; }
	.gvz-aanrader__logo { grid-area: logo; }
	.gvz-aanrader__score { grid-area: score; justify-self: end; }
	.gvz-aanrader__info { grid-area: info; }
	.gvz-aanrader__logo { flex: none; width: 72px; height: 52px; }
	.gvz-aanrader__name { font-size: 1.05rem; }
	.gvz-aanrader__score { flex: none; width: 48px; height: 48px; font-size: 1.05rem; }
}

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

.gvz-table-scroll { overflow-x: auto; }
.gvz-table-scroll > table { overflow: visible; }
.gvz-prijstabel { width: 100%; border-collapse: collapse; min-width: 640px; }
.gvz-prijstabel th, .gvz-prijstabel td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--gvz-border); }
.gvz-prijstabel thead th { color: var(--gvz-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. */
.gvz-prijstabel td { vertical-align: middle; }
.gvz-ptable-provider { position: relative; }
.gvz-ptable-provider-flex { display: flex; align-items: center; gap: 12px; }
.gvz-ptable-provider-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gvz-ptable-provider-pakket { color: var(--gvz-muted); font-size: .8rem; line-height: 1.3; }
/* De tabel-linkstijl moet de generieke prose-linkstijl overtroeven, anders
   krijgt de providernaam de blauwe onderstreepte tekstlinkopmaak. */
.gvz-prijstabel .gvz-ptable-provider-naam,
.gvz-prose .gvz-prijstabel .gvz-ptable-provider-naam { color: var(--gvz-ink); font-weight: 700; text-decoration: none; }
.gvz-prijstabel .gvz-ptable-provider-naam:hover { color: var(--gvz-primary); text-decoration: none; }
.gvz-ptable-logo { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; background: var(--gvz-bg); border: 1px solid var(--gvz-border); display: grid; place-items: center; overflow: hidden; font-weight: 700; color: var(--gvz-muted); }
.gvz-ptable-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gvz-ptable-row--best { background: var(--gvz-tint-1, var(--gvz-surface)); }
.gvz-ptable-row--best td:first-child { position: relative; }
/* Beste-deal-badge gecentreerd boven de kolom, half over de rijrand heen. */
/* Stond absoluut op top:-11px en viel daardoor over de rand van de eerste
   rij heen, boven op de tabelkop. Nu een gewoon label binnen de cel. */
.gvz-ptable-best-badge { display: inline-block; margin-bottom: 6px; background: var(--gvz-success); color: var(--gvz-on-primary); font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }

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

/* =========================================================================
 * 6. Reviewblok [gvz_reviews]
 * ========================================================================= */
.gvz-reviews__summary { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.gvz-reviews__avg { font-size: 2.6rem; font-weight: 700; color: var(--gvz-ink); line-height: 1; }
.gvz-reviews__count { display: block; color: var(--gvz-muted); font-size: .88rem; margin-top: 4px; }
.gvz-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gvz-review-card { background: var(--gvz-card, var(--gvz-surface)); border: 1px solid var(--gvz-border); border-radius: var(--gvz-radius-sm); padding: 18px; }
.gvz-review-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.gvz-review-card__text { margin: 0 0 10px; color: var(--gvz-text); font-size: .92rem; }
.gvz-review-card__date { color: var(--gvz-muted); font-size: .78rem; }
/* Voet van de reviewkaart: avatar-initiaal, naam met datum eronder, score
   rechts. Zonder deze regels liepen de initiaal en de naam aan elkaar vast
   ("AAnouk R.") en dekte de scorebadge de datum af. */
.gvz-review-card__foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.gvz-review-card__avatar { flex: 0 0 auto; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gvz-tint-1); color: var(--gvz-primary); font-weight: 700; font-size: .9rem; line-height: 1; }
.gvz-review-card__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.gvz-review-card__who strong { font-size: .92rem; line-height: 1.25; color: var(--gvz-ink); }
.gvz-review-card__foot .gvz-rev-score { flex: 0 0 auto; width: 38px; height: 38px; font-size: .92rem; }

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

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

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

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

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

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

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

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

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

.gvz-vs { overflow-x: auto; }
.gvz-vs__table { width: 100%; border-collapse: collapse; min-width: 480px; overflow: visible; }
.gvz-vs__table th, .gvz-vs__table td { padding: 12px 16px; border-bottom: 1px solid var(--gvz-border); text-align: left; }
.gvz-vs__table thead th { background: var(--gvz-tint-1, var(--gvz-surface)); }
.gvz-vs__cta { font-weight: 700; color: var(--gvz-primary); }
.gvz-vs__hint { display: none; margin: 0 0 10px; font-size: .8rem; color: var(--gvz-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) {
	.gvz-vs__table { min-width: 0; }
	.gvz-vs__table th, .gvz-vs__table td { padding: 9px 8px; font-size: .82rem; }
	.gvz-vs__table th:first-child,
	.gvz-vs__table td:first-child { position: sticky; left: 0; background: var(--gvz-surface); z-index: 1; min-width: 96px; max-width: 108px; box-shadow: 2px 0 0 var(--gvz-border); overflow-wrap: break-word; word-break: break-word; hyphens: auto; overflow: hidden; }
	.gvz-vs__table thead th:first-child { background: var(--gvz-surface); }
	.gvz-vs__hint { display: block; }
}

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

/* Scorebadges: EEN consistente regel voor de hele site. Een score op een
   0-10 schaal wordt nooit met stoplichtkleuren gekleurd (dat gaf 9,1 groen
   naast 8,8 teal op hetzelfde archief). Elke scorebadge staat in primary,
   op archief, resultaatkaart, reviewpagina, top3, top5, topdeal, aanrader
   en sidebar. De band-klassen blijven in de markup staan voor semantiek,
   maar sturen geen kleur meer. */
.gvz-score-badge { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--gvz-on-primary); background: var(--gvz-primary); }

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

/* =========================================================================
 * 13. Single review-pagina
 * ========================================================================= */
.gvz-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. */
.gvz-review-main { min-width: 0; }
.gvz-review-grid > * { min-width: 0; }
.gvz-review-main h1, .gvz-review-main h2, .gvz-review-main h3 { overflow-wrap: break-word; word-break: break-word; }
.gvz-rev-header { display: flex; gap: 20px; align-items: center; margin-bottom: 20px; }
.gvz-rev-header__logo { flex: 0 0 96px; width: 96px; height: 96px; border: 1px solid var(--gvz-border); border-radius: 16px; background: var(--gvz-card, var(--gvz-surface)); display: grid; place-items: center; padding: 12px; overflow: hidden; }
.gvz-rev-header__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gvz-rev-header__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.gvz-rev-score { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-weight: 700; color: var(--gvz-on-primary); background: var(--gvz-primary); }
.gvz-rev-score--great { background: var(--gvz-success); }
.gvz-rev-score--good { background: var(--gvz-primary); }
.gvz-rev-score--ok { background: var(--gvz-warning); }
.gvz-rev-score--poor { background: var(--gvz-danger); }
.gvz-rev-score__label { color: var(--gvz-muted); font-size: .85rem; }
.gvz-rev-updated { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--gvz-muted); font-size: .85rem; margin: 0; }
/* Scheidingspuntje tussen de delen van de byline; valt weg als de regel breekt. */
.gvz-rev-updated > span + span::before { content: ''; display: inline-block; width: 3px; height: 3px; margin-right: 10px; border-radius: 50%; background: var(--gvz-border); vertical-align: middle; }
.gvz-rev-updated a { color: var(--gvz-primary); font-weight: 600; text-decoration: none; }
.gvz-rev-updated a:hover { text-decoration: underline; }
.gvz-rev-header__sub { margin: 10px 0 0; color: var(--gvz-text); }
.gvz-rev-pros { background: var(--gvz-tint-1, var(--gvz-surface)); border-radius: var(--gvz-radius-sm); padding: 18px 22px; margin-bottom: 24px; }
.gvz-rev-pros h2 { font-size: 1.1rem; margin: 0 0 10px; color: var(--gvz-success); }
.gvz-rev-pros ul { margin: 0; padding-left: 20px; }
.gvz-rev-specs { margin: 20px 0 24px; background: var(--gvz-card); border: 1px solid var(--gvz-border); border-radius: var(--gvz-radius); padding: 20px 22px; }
.gvz-rev-specs h2 { font-size: 1.1rem; }
.gvz-rev-cta { text-align: center; background: var(--gvz-tint-2, var(--gvz-surface)); border-radius: var(--gvz-app-radius); padding: 28px; }
.gvz-rev-cta__sub { margin: 6px auto 16px; max-width: 520px; color: var(--gvz-muted); }
.gvz-rev-cta__knoppen { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* Provider-check: "{naam} glasvezel check" boven de reviewtekst. */
.gvz-rev-check { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: center; margin: 28px 0 32px; padding: 28px; background: var(--gvz-tint-1, var(--gvz-surface)); border: 1px solid var(--gvz-border); border-radius: var(--gvz-app-radius); scroll-margin-top: 90px; }
.gvz-rev-check__tekst h2 { margin: 6px 0 10px; }
.gvz-rev-check__tekst p { margin: 0 0 14px; }
.gvz-rev-check__usps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gvz-rev-check__usps li { display: flex; align-items: flex-start; gap: 8px; font-size: .92rem; }
.gvz-rev-check__usps svg { flex: 0 0 18px; color: var(--gvz-accent-2, var(--gvz-primary)); margin-top: 2px; }
.gvz-rev-check .gvz-herocheck { max-width: none; }
.gvz-rev-check .gvz-herocheck__row > * { flex: 1 1 0; min-width: 0; }
.gvz-rev-check .gvz-herocheck__row input { width: 100%; }
.gvz-rev-cta .gvz-btn--ghost { background: var(--gvz-card); color: var(--gvz-primary); border: 2px solid var(--gvz-primary); }
@media (max-width: 860px) { .gvz-rev-check { grid-template-columns: minmax(0, 1fr); padding: 20px; } }

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

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

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

/* =========================================================================
 * 15. Reviewbalk [gvz_reviewbalk]
 * ========================================================================= */
.gvz-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(--gvz-border); text-align: center; }
.gvz-reviewbalk__tekst { font-weight: 600; color: var(--gvz-text); }
.gvz-reviewbalk__badge { display: inline-flex; align-items: baseline; gap: 2px; background: var(--gvz-primary); color: var(--gvz-on-primary); font-family: var(--gvz-font-head); font-weight: 700; font-size: 1.3rem; padding: 6px 14px; border-radius: var(--gvz-radius-sm); }
.gvz-reviewbalk__badge small { font-size: .7rem; font-weight: 600; opacity: .8; }
.gvz-reviewbalk__count { color: var(--gvz-muted); font-size: .88rem; }

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

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

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

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

/* =========================================================================
 * 13. Aanbod-tabel [gvz_provider_aanbod]: extra rij-onderdelen
 * ========================================================================= */
.gvz-ptable-provider { position: relative; }
.gvz-ptable-provider-info { display: flex; flex-direction: column; min-width: 0; }
.gvz-ptable-provider-naam { font-weight: 700; color: var(--gvz-ink); text-decoration: none; }
.gvz-ptable-provider-naam:hover { color: var(--gvz-primary); }
.gvz-ptable-product { color: var(--gvz-muted); font-weight: 500; font-size: 13px; text-decoration: none; }
.gvz-ptable-product:hover { color: var(--gvz-primary); text-decoration: underline; }
/* Stond absoluut op top:-11px en viel daardoor over de rand van de eerste
   rij heen, boven op de tabelkop. Nu een gewoon label binnen de cel. */
.gvz-ptable-best-badge { display: inline-block; margin-bottom: 6px; background: var(--gvz-success); color: var(--gvz-on-primary); font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.gvz-prijstabel-foot { margin: 14px 0 0; text-align: center; }
.gvz-prijstabel-foot a { font-weight: 700; color: var(--gvz-primary); }

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

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

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


/* Reviewcomponenten: providerreviews, sitereview-blok en inzendformulier. */
/* Subscores (score_elements): hergebruikt de .gvz-score-row-stijl van de
 * resultatenkaart (sectie 11), zodat "Onze score" op de resultatenpagina en
 * op de reviewpagina er identiek uitzien. */
.gvz-rev-subscores { background: var(--gvz-tint-1, var(--gvz-surface)); border-radius: var(--gvz-app-radius); padding: 22px 24px; }
.gvz-rev-subscores h2 { font-size: 1.1rem; margin: 0 0 14px; }
.gvz-rev-reviews__col--score .gvz-rev-form { text-align: left; margin-top: 10px; }
.gvz-rev-form { background: var(--gvz-card, var(--gvz-surface)); border: 1px solid var(--gvz-border); border-radius: var(--gvz-app-radius); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.gvz-rev-form h3 { margin: 0; font-size: 1.1rem; }
.gvz-rev-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gvz-rev-form__row { display: flex; flex-direction: column; gap: 6px; }
.gvz-rev-form__row label { font-weight: 700; font-size: .88rem; color: var(--gvz-ink); }
.gvz-rev-form__row input[type="text"], .gvz-rev-form__row textarea {
	font: inherit; padding: 10px 12px; border: 1px solid var(--gvz-border); border-radius: var(--gvz-radius-sm);
	background: var(--gvz-bg); color: var(--gvz-text); resize: vertical;
}
.gvz-rev-form__row input[type="text"]:focus, .gvz-rev-form__row textarea:focus { outline: 2px solid var(--gvz-primary); outline-offset: 1px; }
.gvz-rev-form__note { margin: 0; font-size: .78rem; color: var(--gvz-muted); }
/* Scorekiezer 1-10: radio's omgekeerd in de bron (10 -> 1) zodat de CSS-
 * sibling-selector ~ zonder JS alle cijfers t/m de gehoverde/gekozen waarde
 * kan markeren (flex-direction: row-reverse draait de visuele volgorde terug). */
.gvz-rev-scorepicker { display: flex; flex-wrap: wrap; gap: 4px; }
.gvz-rev-scorepicker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gvz-rev-scorepicker label {
	width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	font-size: .78rem; font-weight: 700; background: var(--gvz-tint-1, var(--gvz-surface)); color: var(--gvz-muted);
	cursor: pointer; border: 2px solid transparent; transition: background .12s ease, color .12s ease;
}
/* Cijferscore: alleen de gekozen (of gehoverde) waarde oplicht; een
   sterren-achtig vul-effect klopt hier niet en werkte fout bij wrappen. */
.gvz-rev-scorepicker input:checked + label,
.gvz-rev-scorepicker label:hover { background: var(--gvz-accent-2); color: var(--gvz-ink); }
.gvz-rev-scorepicker input:focus-visible + label { outline: 2px solid var(--gvz-primary); outline-offset: 2px; }
/* Reviewpagina: subscore-rij als 1 leesbare regel (naam, balk, cijfer) in
   plaats van twee losse balken zonder uitleg. De .gvz-score-row__head/stars/
   weight-varianten hierboven blijven in gebruik door de resultatenkaart. */
.gvz-rev-subscores .gvz-score-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 14px; }
.gvz-rev-subscores .gvz-score-row__bar { height: 8px; background: var(--gvz-border); border-radius: 999px; overflow: hidden; }
.gvz-rev-subscores .gvz-score-row__fill { display: block; height: 100%; background: var(--gvz-primary); border-radius: 999px; }
.gvz-rev-subscores .gvz-score-row__cijfer { font-weight: 700; color: var(--gvz-ink); font-size: .9rem; min-width: 30px; text-align: right; }
.gvz-rev-subscores .gvz-score-row { grid-template-columns: 1fr auto; gap: 6px 10px; }
.gvz-rev-subscores .gvz-score-row__bar { grid-column: 1 / -1; }
.gvz-rev-melding--ok { background: var(--gvz-tint-3, var(--gvz-tint-1)); color: var(--gvz-success); border: 1px solid var(--gvz-success); }
.gvz-rev-melding--fout { background: var(--gvz-tint-1); color: var(--gvz-danger); border: 1px solid var(--gvz-danger); }
/* Sitereview-blok (vpnpower-model): scorekaart links, reviews rechts,
   formulier verborgen achter de "Schrijf een review"-knop. */
.gvz-siterev__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.gvz-siterev__score { background: var(--gvz-surface); border: 1px solid var(--gvz-border); border-radius: var(--gvz-app-radius, var(--gvz-radius)); padding: 26px 22px; text-align: center; }
.gvz-siterev__kop { margin: 0 0 6px; font-size: 1.1rem; }
.gvz-siterev__cijfer { display: block; font-family: var(--gvz-font-head); font-size: 2.6rem; font-weight: 700; color: var(--gvz-ink); line-height: 1.1; }
.gvz-siterev__count { color: var(--gvz-muted); font-size: .92rem; margin: 8px 0 16px; }
.gvz-siterev__toggle summary { list-style: none; cursor: pointer; display: block; text-align: center; }
.gvz-siterev__toggle summary::-webkit-details-marker { display: none; }
.gvz-siterev__toggle[open] summary { display: none; }
.gvz-siterev__toggle .gvz-rev-form { text-align: left; margin-top: 8px; }
.gvz-siterev__card { background: var(--gvz-surface); border: 1px solid var(--gvz-border); border-radius: var(--gvz-app-radius, var(--gvz-radius)); padding: 20px 22px; margin-bottom: 16px; }
.gvz-siterev__cardkop { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.gvz-siterev__wie { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gvz-siterev__wie strong { color: var(--gvz-ink); }
.gvz-siterev__cardkop time { color: var(--gvz-muted); font-size: .85rem; white-space: nowrap; align-self: flex-start; }
.gvz-siterev__tekst { margin: 0; color: var(--gvz-text); }
.gvz-siterev__grid { grid-template-columns: minmax(0, 1fr); }
.gvz-rev-form__context { background: var(--gvz-tint-1); border-radius: 10px; padding: 10px 14px; font-size: .9rem; color: var(--gvz-text); margin: 0 0 12px; }

/* Op smalle schermen mag de pakket-pill afbreken: bij lange pakketnamen
   duwde de nowrap-regel de resultatenkaart voorbij de schermrand. */
@media (max-width: 600px) {
  .gvz-rcard__pill { white-space: normal; overflow-wrap: anywhere; }
}

/* De levertijdregel staat rechts uitgelijnd naast de CTA-knop. Op smalle
   schermen paste "Levertijd 19 dagen" niet meer binnen de kaart. */
@media (max-width: 600px) {
  .gvz-rcard__cta { min-width: 0; flex-wrap: wrap; }
  .gvz-rcard__levertijd { white-space: normal; text-align: right; }
}


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

/* Vinkje op de resultaatkaart, onder de CTA-knop in de prijskolom. */
.gvz-rcard__comparecb {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
	font-size: .78rem; font-weight: 600; color: var(--gvz-muted); cursor: pointer;
}
.gvz-rcard__comparecb { max-width: 100%; min-width: 0; }
.gvz-rcard__comparecb input { accent-color: var(--gvz-primary); width: 14px; height: 14px; margin: 0; flex: 0 0 auto; }
.gvz-rcard__comparecb:hover { color: var(--gvz-primary); }

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

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

/* =========================================================================
 * Speedtest [gvz_speedtest]. Eigen SVG-
 * boog (geen canvas-lib), waarde live bijgewerkt vanuit assets/js/
 * gvz-speedtest.js. Breakpoints: 480 / 600 / 860px, zoals de rest van deze
 * stylesheet.
 * ========================================================================= */
.gvz-speedtest { margin-top: 28px; }
.gvz-speedtest__tool {
	max-width: 480px; margin: 0 auto; text-align: center;
	background: var(--gvz-card); border: 1px solid var(--gvz-border); border-radius: var(--gvz-radius);
	box-shadow: var(--gvz-shadow-1); padding: 40px 28px 32px;
}
.gvz-speedtest__meter { position: relative; width: 220px; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto; }
.gvz-speedtest__ring { width: 100%; height: 100%; display: block; }
.gvz-speedtest__track { fill: none; stroke: var(--gvz-border); stroke-width: 14; }
.gvz-speedtest__arc {
	fill: none; stroke: var(--gvz-primary); stroke-width: 14; stroke-linecap: round;
	transform: rotate(-90deg); transform-origin: 100px 100px;
	transition: stroke-dashoffset .25s linear;
}
.gvz-speedtest__readout {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.gvz-speedtest__value { font-family: var(--gvz-font-head); font-weight: 800; font-size: clamp(2rem, 6vw, 2.6rem); color: var(--gvz-ink); line-height: 1; }
.gvz-speedtest__unit { font-size: .82rem; font-weight: 700; color: var(--gvz-muted); }
.gvz-speedtest__btn { margin-top: 26px; min-width: 220px; }
.gvz-speedtest__results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.gvz-speedtest__resbox {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	background: var(--gvz-surface); border-radius: var(--gvz-radius-sm); padding: 14px 8px;
}
.gvz-speedtest__reslabel { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--gvz-muted); }
.gvz-speedtest__resvalue { font-family: var(--gvz-font-head); font-weight: 800; font-size: 1.3rem; color: var(--gvz-ink); }
.gvz-speedtest__resunit { font-size: .74rem; color: var(--gvz-muted); }
.gvz-speedtest__error {
	margin-top: 22px; background: var(--gvz-tint-2); border-radius: var(--gvz-radius-sm); padding: 16px 18px;
}
.gvz-speedtest__error p { margin: 0 0 12px; color: var(--gvz-text); font-size: .92rem; }
.gvz-speedtest__privacy { margin-top: 22px; font-size: .82rem; line-height: 1.55; color: var(--gvz-muted); }
.gvz-speedtest__duiding, .gvz-speedtest__cta {
	max-width: 480px; margin: 22px auto 0;
	background: var(--gvz-card); border: 1px solid var(--gvz-border); border-radius: var(--gvz-radius);
	padding: 28px; text-align: center;
}
.gvz-speedtest__duiding h2, .gvz-speedtest__cta h2 { margin: 0 0 10px; font-size: 1.2rem; }
.gvz-speedtest__cta p { margin: 0 0 18px; color: var(--gvz-text); }
.gvz-speedtest__cta .gvz-herocheck__row { margin-bottom: 0; }
.gvz-speedtest__seo { margin-top: 48px; }
@media (max-width: 600px) {
	.gvz-speedtest__tool { padding: 32px 20px 26px; }
	.gvz-speedtest__btn { width: 100%; min-width: 0; }
}
@media (max-width: 480px) {
	.gvz-speedtest__results { gap: 8px; }
	.gvz-speedtest__resbox { padding: 10px 6px; }
	.gvz-speedtest__resvalue { font-size: 1.05rem; }
	.gvz-speedtest__duiding, .gvz-speedtest__cta { padding: 22px 16px; }
}

/* =========================================================================
 * 13b. Providerpagina: zijkolom, scoreopbouw en gebruikerservaringen.
 *
 * De reviewpagina had wel een sidebar in de markup maar geen kolomindeling,
 * waardoor de levende blokken op volle breedte onder de tekst zakten. Zelfde
 * stramien als het artikel: inhoud links, 300px zijkolom rechts, onder 860px
 * onder elkaar.
 * ========================================================================= */
.gvz-review-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }

@media (max-width: 860px) {
	.gvz-review-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* Scoreopbouw: de losse onderdelen achter het redactiecijfer, als rustige
   balken in petrol. Geen kleurcodering per onderdeel, alleen lengte. */
.gvz-rev-subscores__lead { margin: 0 0 16px; color: var(--gvz-muted); font-size: .95rem; max-width: 60ch; }
.gvz-score-tab { display: flex; flex-direction: column; gap: 12px; }
.gvz-score-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 14px; }
.gvz-score-row__name { font-weight: 600; color: var(--gvz-ink); font-size: .88rem; }
.gvz-score-row__bar { height: 8px; background: var(--gvz-border); border-radius: var(--gvz-radius-pill); overflow: hidden; }
.gvz-score-row__fill { display: block; height: 100%; background: var(--gvz-primary); border-radius: var(--gvz-radius-pill); }
.gvz-score-row__cijfer { font-weight: 700; color: var(--gvz-ink); font-size: .9rem; min-width: 30px; text-align: right; }

/* Ervaringen: scorekaart links, de kaarten rechts. */
.gvz-rev-ervaringen__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.gvz-rev-ervaringen__grid > * { min-width: 0; }
.gvz-rev-scorekaart { background: var(--gvz-card, var(--gvz-surface)); border: 1px solid var(--gvz-border); border-radius: var(--gvz-radius); padding: 22px 20px; text-align: center; position: sticky; top: 96px; }
.gvz-rev-scorekaart__cijfer { display: block; font-family: var(--gvz-font-head); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--gvz-ink); }
.gvz-rev-scorekaart__cijfer small { font-size: 1rem; font-weight: 400; color: var(--gvz-muted); }
.gvz-rev-scorekaart .gvz-stars { justify-content: center; margin: 8px 0 4px; }
.gvz-rev-scorekaart__aantal { display: block; color: var(--gvz-muted); font-size: .85rem; }
.gvz-rev-scorekaart__subs { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--gvz-border); text-align: left; }
.gvz-rev-scorekaart__subs .gvz-score-row { grid-template-columns: 1fr auto; gap: 4px 10px; }
.gvz-rev-scorekaart__subs .gvz-score-row__name { font-size: .82rem; font-weight: 400; color: var(--gvz-text); }
.gvz-rev-scorekaart__subs .gvz-score-row__bar { grid-column: 1 / -1; }
.gvz-rev-scorekaart__knop { display: block; margin-top: 18px; }
.gvz-rev-ervaringen__lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; }
.gvz-rev-ervaringen__lijst .gvz-review-card { display: flex; flex-direction: column; }
/* display:flex hierboven wint het van de browserstandaard voor [hidden]; de
   nog niet uitgeklapte ervaringen moeten echt verborgen blijven. */
.gvz-rev-ervaringen__lijst .gvz-review-card[hidden] { display: none; }
.gvz-rev-ervaringen__lijst .gvz-review-card__foot { margin-top: auto; padding-top: 12px; }
.gvz-rev-loadmore { grid-column: 1 / -1; justify-self: start; margin-top: 4px; padding: 10px 22px; border: 1px solid var(--gvz-border); border-radius: var(--gvz-radius-pill); background: var(--gvz-card, var(--gvz-surface)); color: var(--gvz-primary); font-family: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }
.gvz-rev-loadmore:hover { background: var(--gvz-tint-1); border-color: var(--gvz-primary); }

@media (max-width: 860px) {
	.gvz-rev-ervaringen__grid { grid-template-columns: minmax(0, 1fr); }
	.gvz-rev-scorekaart { position: static; }
}
@media (max-width: 600px) {
	.gvz-rev-ervaringen__lijst { grid-template-columns: minmax(0, 1fr); }
	.gvz-score-row { grid-template-columns: 1fr auto; gap: 4px 10px; }
	.gvz-score-row__bar { grid-column: 1 / -1; }
}

/* =========================================================================
   Datafiguren in de SEO-sectie (includes/shortcode-datafiguren.php).
   Kaartvorm van deze site: dunne rand, 8px radius, geen schaduw. De SVG
   schaalt mee met de breedte; op smalle schermen scrollt de figuur zijwaarts
   met dezelfde veeg-hint als de brede tabellen (assets/js/gvz-scrollhint.js).
   ========================================================================= */
.gvz-figuur { margin: 1.8em 0; padding: 20px 20px 14px; border: 1px solid var(--gvz-border); border-radius: var(--gvz-radius); background: var(--gvz-card, var(--gvz-surface)); }
.gvz-figuur__kop { display: block; margin: 0 0 14px; }
.gvz-figuur__titel { display: block; font-family: var(--gvz-font-head); font-weight: 700; font-size: 1.06rem; line-height: 1.35; color: var(--gvz-ink); }
.gvz-figuur__lead { display: block; margin-top: 4px; font-size: .92rem; line-height: 1.55; color: var(--gvz-muted); }
.gvz-figuur__plot { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gvz-figuur__svg { display: block; width: 100%; height: auto; }
.gvz-figuur__legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 10px 0 0; font-size: .84rem; color: var(--gvz-muted); }
.gvz-figuur__key { display: inline-block; width: 11px; height: 11px; margin-right: 2px; border-radius: 50%; }
.gvz-figuur__key--laag { background: var(--gvz-accent-2); }
.gvz-figuur__key--hoog { background: var(--gvz-primary); }
.gvz-figuur__key--gem { width: 3px; height: 13px; border-radius: 2px; background: var(--gvz-accent); }
.gvz-figuur__voet { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--gvz-border); font-size: .82rem; line-height: 1.5; color: var(--gvz-muted); }

@media (max-width: 860px) {
	.gvz-figuur { padding: 18px 16px 12px; }
	/* Onder deze breedte worden de labels in de SVG te klein om te lezen: de
	   figuur houdt zijn eigen minimumbreedte en de plot scrollt zijwaarts. */
	.gvz-figuur__svg { min-width: 620px; }
}
@media (max-width: 600px) {
	.gvz-figuur { margin: 1.4em 0; }
	.gvz-figuur__titel { font-size: 1rem; }
}
@media (max-width: 480px) {
	.gvz-figuur { padding: 16px 14px 10px; }
}

/* 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) {
  .gvz-prijstabel td, .gvz-prijstabel th { white-space: nowrap; }
  .gvz-prijstabel td.gvz-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. */
.gvz-spin { display: inline-block; width: 16px; height: 16px; border: 3px solid var(--gvz-on-primary-soft); border-top-color: var(--gvz-on-primary); border-radius: 50%; animation: gvz-spin .7s linear infinite; flex: 0 0 auto; }
.gvz-btn.is-busy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none; opacity: .9; }
.gvz-gegevens__status.is-laden, .gvz-adresblok__status.is-laden { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: var(--gvz-radius-sm); background: var(--gvz-tint-1, var(--gvz-surface)); color: var(--gvz-ink); font-weight: 600; font-size: .88rem; }
.gvz-gegevens__status.is-laden::before, .gvz-adresblok__status.is-laden::before { content: ""; display: inline-block; width: 18px; height: 18px; border: 3px solid var(--gvz-border); border-top-color: var(--gvz-primary); border-radius: 50%; animation: gvz-spin .7s linear infinite; flex: 0 0 auto; }
.gvz-results__count.is-laden { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--gvz-ink); }
.gvz-results__count.is-laden::before { content: ""; display: inline-block; width: 16px; height: 16px; border: 3px solid var(--gvz-border); border-top-color: var(--gvz-primary); border-radius: 50%; animation: gvz-spin .7s linear infinite; flex: 0 0 auto; }
.gvz-results__count.is-laden::after { content: "..."; }
.gvz-cards.is-loading { opacity: .4; }
.is-adres-gevonden .gvz-gegevens__ingevuld, .is-adres-gevonden .gvz-adresblok__ingevuld { animation: gvz-adres-ok 2.4s ease-out; border-radius: var(--gvz-radius-sm); }
@keyframes gvz-adres-ok { 0% { box-shadow: 0 0 0 0 var(--gvz-success); } 25% { box-shadow: 0 0 0 4px var(--gvz-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.
 * ========================================================================= */
.gvz-review-main .gvz-prose { max-width: 780px; margin-inline: 0; }
.gvz-sidebar__provcta { background: var(--gvz-card); border: 1px solid var(--gvz-border); border-radius: var(--gvz-radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.gvz-sidebar__provcta-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.gvz-sidebar__provcta-logo { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; padding: 6px; border: 1px solid var(--gvz-border); border-radius: 10px; background: var(--gvz-card); }
.gvz-sidebar__provcta-logo img, .gvz-sidebar__provcta-logo svg { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.gvz-sidebar__provcta-naam { flex: 1; font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.gvz-sidebar__provcta .gvz-btn { width: 100%; justify-content: center; }
.gvz-sidebar__provcta-sub { font-size: .8rem; color: var(--gvz-muted); text-align: center; }
@media (max-width: 860px) {
	.gvz-review-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.gvz-review-main .gvz-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).
 * ========================================================================= */
.gvz-provgrid { align-items: stretch; }
.gvz-provcard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.gvz-provcard__badge { position: absolute; top: -11px; left: 18px; padding: 3px 11px; border-radius: 999px; background: var(--gvz-success); color: var(--gvz-card); font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.gvz-provcard__kop { display: flex; align-items: center; gap: 12px; }
.gvz-provcard__logo { flex: 0 0 56px; width: 56px; height: 56px; display: grid; place-items: center; padding: 8px; border: 1px solid var(--gvz-border); border-radius: 12px; background: var(--gvz-card); text-decoration: none; font-weight: 800; color: var(--gvz-ink); }
.gvz-provcard__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.gvz-provcard__titel { flex: 1; min-width: 0; }
.gvz-provcard__titel h2 { margin: 0; font-size: 1.15rem; line-height: 1.2; }
.gvz-provcard__titel h2 a { color: var(--gvz-ink); text-decoration: none; }
.gvz-provcard__titel h2 a:hover { color: var(--gvz-primary); }
.gvz-provcard__scorelabel { display: block; margin-top: 2px; font-size: .78rem; color: var(--gvz-muted); }
.gvz-provcard__sam { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--gvz-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gvz-provcard__feiten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gvz-provcard__feiten li { font-size: .78rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--gvz-surface); border: 1px solid var(--gvz-border); color: var(--gvz-ink); }
.gvz-provcard__prijs { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--gvz-border); display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; }
.gvz-provcard__vanaf { font-size: .82rem; color: var(--gvz-muted); }
.gvz-provcard__prijs strong { font-size: 1.35rem; color: var(--gvz-ink); }
.gvz-provcard__mnd { font-size: .85rem; color: var(--gvz-muted); }
.gvz-provcard__actie { flex-basis: 100%; font-size: .8rem; color: var(--gvz-muted); }
.gvz-provcard__acties { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gvz-provcard__acties .gvz-btn { justify-content: center; padding-inline: 10px; font-size: .88rem; white-space: nowrap; }
.gvz-provgrid__cta { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; border-radius: var(--gvz-radius); background: var(--gvz-tint-1); flex-wrap: wrap; }
.gvz-provgrid__cta h2 { margin: 0 0 6px; font-size: 1.35rem; }
.gvz-provgrid__cta p { margin: 0; color: var(--gvz-muted); max-width: 60ch; }
.gvz-archive-head__meta { margin: 10px auto 0; font-size: .85rem; color: var(--gvz-muted); }
@media (max-width: 600px) {
	.gvz-provcard { padding: 18px; }
	.gvz-provcard__acties { grid-template-columns: minmax(0, 1fr); }
	.gvz-provgrid__cta { padding: 22px; }
	.gvz-provgrid__cta .gvz-btn { width: 100%; justify-content: center; }
}

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