/* ================================================
   CT Deal Voordeel-card — ct-deal-voordeel.css
   Blok: "Wat levert deze deal je op?"
   Prefix: ct-deal-vd-

   Erft de variabelen van .ct-deal-wrap. De toon komt van de Deal Alert-box
   (overhangend rondje, oranje eyebrow) en de postcodecheck (verloopband met
   invoerveld en label eronder).
   ================================================ */

.ct-deal-vd {
  --ct-vd-orange: linear-gradient(150deg, #ffab00 0%, #ff6d00 100%);
  --ct-vd-hair:   #f1f5f9;

  position: relative;
  /* Even veel ruimte boven de kaart als de pakkettabel houdt, zodat een vaste
     menubalk hem niet half bedekt na een sprong vanuit "Pakket aanpassen". */
  scroll-margin-top: 100px;
  background: #fff;
  border-radius: 20px;
  /* Dezelfde schaduw als de andere blokken. De vorige was zwaarder (40px
     blur, 10px omlaag) en duwde het blok optisch los van de tekst eromheen. */
  box-shadow: var(--ct-shadow);
  color: var(--ct-text);
  margin-bottom: 20px;
  animation: ctDealFadeUp .45s .12s ease both;
}

/* ── Kop met overhangend rondje ── */
.ct-deal-vd-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 34px 20px 0;
}

/* Steekt maar net over de rand: genoeg om op te vallen, niet genoeg om
   de aandacht van de kop weg te trekken. */
.ct-deal-vd-orb {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  margin-left: -12px;
  border-radius: 50%;
  background: var(--ct-vd-orange);
  box-shadow: 0 5px 14px rgba(249, 115, 22, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.ct-deal-vd-eyebrow {
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ct-accent);
  margin: 0 0 2px;
}

/* In lijn met de koppen in de artikeltekst (.ct-deal-article h2). */
.ct-deal-vd-title {
  font-family: 'Sora', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ct-text);
  margin: 0;
}

.ct-deal-vd-sub {
  margin: 4px 0 0;
  font-size: .85rem;
  color: var(--ct-text-muted);
  line-height: 1.45;
}

/* ── Secties ── */
.ct-deal-vd-sec {
  padding: 22px 34px;
  border-top: 1px solid var(--ct-vd-hair);
}

.ct-deal-vd-label {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ct-deal-vd-label em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: #cbd5e1;
}

/* Het pakketblok vouwt open in plaats van te verspringen. */
.ct-deal-vd-panel.is-revealing {
  animation: ctDealVdReveal .28s ease both;
}

@keyframes ctDealVdReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ── Vast item (cadeau of korting) ── */
.ct-deal-vd-fixed {
  border: 1px solid var(--ct-border);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Cadeau-afbeelding, zelfde tegel als de icoontjes bij de alternatieven. */
.ct-deal-vd-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--ct-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ct-deal-vd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
  box-sizing: border-box;
  display: block;
}

.ct-deal-vd-fixed-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ct-deal-vd-fixed-name {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.ct-deal-vd-fixed-desc {
  font-size: .88rem;
  color: var(--ct-text-muted);
}

/* Groene waardepil, zoals bij de aanbevolen alternatieven. */
.ct-deal-vd-worth {
  background: var(--ct-green-light);
  color: var(--ct-green);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .92rem;
  padding: 10px 20px;
  border-radius: 50px;
  white-space: nowrap;
}

/* ── Keuzeraster ──
   De minimumbreedte is zo gekozen dat vijf internetpakketten — het maximum in
   de provider-data — naast elkaar passen binnen de 860px-kolom. Anders valt de
   vijfde als wees op een tweede rij.

   De ruimte voor de "Meest gekozen"-pill zit op het raster, niet op de kaart:
   zou de uitgelichte kaart zelf een marge krijgen, dan zakt hij ten opzichte
   van zijn buren. De rijafstand is ruim genoeg zodat een pill op een tweede rij
   de kaarten erboven niet raakt. */
.ct-deal-vd-opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 22px 8px;
  padding-top: 12px;
}

.ct-deal-vd-opt {
  position: relative;
  font-family: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  background: #fff;
  border: 2px solid var(--ct-border);
  border-radius: 14px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  /* "Geen TV" heeft geen prijsregel en is dus een regel korter dan zijn buren.
     Het raster rekt alle tegels even hoog; centreren houdt die ene tegel in
     balans in plaats van bovenin te blijven hangen. */
  justify-content: center;
  gap: 3px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ct-deal-vd-opt:hover {
  border-color: #b6c2d1;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
}

/* Wel te zien, niet te kiezen: het pakket bestaat, maar niet bij dit cadeau.
   Gedempt en zonder hover-reactie, zodat het niet uitnodigt tot klikken. */
.ct-deal-vd-opt.is-locked {
  background: var(--ct-surface, #f8fafc);
  border-style: dashed;
  color: var(--ct-text-muted, #64748b);
  cursor: not-allowed;
}

/* De demping op de inhoud en niet op de knop: een opacity op de knop zelf zou
   ook de tooltip eronder wegdrukken, want die is een pseudo-element ervan. */
.ct-deal-vd-opt.is-locked > * {
  opacity: .55;
}

.ct-deal-vd-opt.is-locked:hover {
  border-color: var(--ct-border);
  transform: none;
  box-shadow: none;
}

/* ── Tooltip bij een vergrendeld pakket ──
   Boven de knop, zodat de cursor de tekst niet afdekt. Eigen opmaak in plaats
   van het native title-attribuut: dat verschijnt pas na een seconde, onder de
   cursor en in de stijl van het besturingssysteem. */
.ct-deal-vd-opt[data-tip]::after,
.ct-deal-vd-opt[data-tip]::before {
  position: absolute;
  left: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.ct-deal-vd-opt[data-tip]::after {
  content: attr(data-tip);
  bottom: calc(100% + 11px);
  z-index: 3;
  width: max-content;
  max-width: 216px;
  transform: translate(-50%, 4px);
  background: #0f172a;
  color: #fff;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .26);
}

/* Het pijltje: een gekanteld vierkantje dat naadloos onder de bubbel schuift. */
.ct-deal-vd-opt[data-tip]::before {
  content: '';
  bottom: calc(100% + 6px);
  z-index: 4;
  width: 10px;
  height: 10px;
  transform: translate(-50%, 4px) rotate(45deg);
  background: #0f172a;
  border-radius: 2px;
}

/* Ook op :focus en niet alleen :focus-visible: op een aanraakscherm bestaat
   hover niet, en dan is een tik op de knop de enige manier om de uitleg te
   krijgen. Een tik geeft focus, maar telt niet als focus-visible. */
.ct-deal-vd-opt[data-tip]:hover,
.ct-deal-vd-opt[data-tip]:focus {
  /* Boven de buurknoppen, anders schuift de tooltip eronder. */
  z-index: 2;
}

.ct-deal-vd-opt[data-tip]:hover::after,
.ct-deal-vd-opt[data-tip]:focus::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.ct-deal-vd-opt[data-tip]:hover::before,
.ct-deal-vd-opt[data-tip]:focus::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .ct-deal-vd-opt[data-tip]::after,
  .ct-deal-vd-opt[data-tip]::before {
    transition: none;
  }
}

.ct-deal-vd-opt:focus-visible {
  outline: 2px solid var(--ct-brand);
  outline-offset: 3px;
}

.ct-deal-vd-opt[aria-pressed="true"] {
  border-color: var(--ct-accent);
  background: var(--ct-accent-light);
  box-shadow: 0 8px 22px rgba(249, 115, 22, .22);
}

.ct-deal-vd-opt-name {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .88rem;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.ct-deal-vd-opt-meta {
  font-size: .74rem;
  line-height: 1.3;
  color: var(--ct-text-muted);
  font-variant-numeric: tabular-nums;
}

.ct-deal-vd-opt-price {
  font-family: 'Sora', sans-serif;
  font-size: .84rem;
  font-weight: 800;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.ct-deal-vd-opt-price s {
  display: block;
  color: #94a3b8;
  font-weight: 500;
  font-size: .72rem;
  margin-bottom: 1px;
}

.ct-deal-vd-opt-price .ct-deal-vd-act { color: var(--ct-green); }

/* "Meest gekozen", zelfde plek en gloed als de "Beste keus"-pill. */
.ct-deal-vd-flag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ct-vd-orange);
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(249, 115, 22, .45);
  white-space: nowrap;
}

/* ── Gecentreerde schakelaar ── */
.ct-deal-vd-switch {
  padding: 16px 34px;
  border-top: 1px solid var(--ct-vd-hair);
  text-align: center;
}

.ct-deal-vd-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  font-size: .86rem;
  font-weight: 700;
  color: var(--ct-brand);
  transition: gap .18s ease;
}

.ct-deal-vd-link:hover { gap: 11px; text-decoration: underline; }

.ct-deal-vd-link:focus-visible {
  outline: 2px solid var(--ct-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.ct-deal-vd-link svg { flex-shrink: 0; transition: transform .2s; }

/* Wijst omhoog zodra de knop iets dichtklapt. */
.ct-deal-vd-switch--up .ct-deal-vd-link svg { transform: rotate(180deg); }

/* Band om de actiezone, zodat er zowel open als dicht een lijn boven staat:
   dicht sluit hij aan op de kop, open op de sluitknop van het pakketblok. */
.ct-deal-vd-band { border-top: 1px solid var(--ct-hair); }

/* ── Actiezone, opgebouwd als de postcodecheck ── */
/* Beide kolommen beginnen met hetzelfde kleine kapitalenlabel en worden aan de
   bovenkant uitgelijnd. Daardoor staan "Huidige maandkosten" en "Totaal
   voordeel" op één lijn, en het invoerveld op één lijn met het bedrag. */
.ct-deal-vd-action {
  margin: 14px 20px 20px;
  background: linear-gradient(145deg, #e8eeea 0%, #eff3f0 40%, #f5f7f5 100%);
  border: 1px solid #e0e6e2;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  /* Drie losse kolommen: invoerveld, bedrag en knop. Daardoor verdeelt
     space-between de overgebleven ruimte over twee gelijke tussenruimtes.
     Zaten bedrag en knop samen in één omhulsel, dan was er maar één
     tussenruimte en kreeg die alle ruimte in één klap. */
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.ct-deal-vd-now {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ct-deal-vd-input {
  border: 1.5px solid #d0d9d4;
  border-radius: 10px;
  background: #fff;
  height: 42px;
  padding: 0 13px;
  width: 132px;
  box-sizing: border-box;
  font-family: 'Sora', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ct-text);
  font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ct-deal-vd-input::placeholder { color: #b8c4bc; font-weight: 400; }

.ct-deal-vd-input:focus {
  outline: none;
  border-color: var(--ct-brand);
  box-shadow: 0 0 0 4px rgba(26, 86, 219, .12);
}

/* Identiek aan .ct-deal-vd-figure-cap: samen vormen ze de kolomkoppen
   van de actiezone. */
.ct-deal-vd-now-label {
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #7c8a80;
}

.ct-deal-vd-now-label em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: #9aa79f;
}

/* De middelste kolom: kop, bedrag en de regel eronder. */
.ct-deal-vd-figure {
  min-width: 0;
}

.ct-deal-vd-figure-cap {
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #7c8a80;
  margin-bottom: 5px;
}

/* Bedragopmaak zoals op de deal card: klein euroteken, groot getal, kleine decimalen. */
.ct-deal-vd-amount {
  display: flex;
  align-items: flex-start;
  line-height: 1;
  gap: 1px;
  color: var(--ct-green);
  font-family: 'Sora', sans-serif;
}

.ct-deal-vd-amount.is-negative { color: #b91c1c; }

.ct-deal-vd-amount-cur   { font-weight: 700; font-size: .95rem; margin-top: 3px; }
.ct-deal-vd-amount-whole { font-weight: 800; font-size: 1.85rem; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.ct-deal-vd-amount-dec   { font-weight: 700; font-size: .9rem; margin-top: 3px; font-variant-numeric: tabular-nums; }

.ct-deal-vd-figure-sub {
  font-size: 11.5px;
  color: #7c8a80;
  margin-top: 3px;
}

.ct-deal-vd-figure-sub strong { color: var(--ct-text); }

/* Knop met de gradiënt van de promo card. */
.ct-deal-vd-btn {
  /* De rij lijnt aan de bovenkant uit; de knop hoort op de middellijn van
     het bedrag te staan. */
  align-self: center;
  background: var(--ct-vd-orange);
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .88rem;
  padding: 0 20px;
  height: 42px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 5px 14px rgba(249, 115, 22, .3);
  transition: box-shadow .18s ease, transform .12s ease;
}

.ct-deal-vd-btn:hover {
  color: #fff;
  box-shadow: 0 8px 20px rgba(249, 115, 22, .42);
  transform: translateY(-1px);
}

.ct-deal-vd-btn:active { transform: scale(.98); }

.ct-deal-vd-btn:focus-visible {
  outline: 2px solid var(--ct-text);
  outline-offset: 3px;
}

.ct-deal-vd-btn-arrow {
  width: 22px;
  height: 22px;
  background: rgba(0, 0, 0, .18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Uitkomst in gewone zinnen ──
   Sluit de berekening af over de volle breedte. De kleur blijft
   --ct-text-muted: dat is met 4,55:1 op deze ondergrond precies de lichtste
   tint die lopende tekst nog leesbaar houdt. Lichter oogt het door het kleinere
   formaat en de plek helemaal onderaan. */
.ct-deal-vd-story {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ct-border);
  font-size: .82rem;
  line-height: 1.65;
  color: var(--ct-text-muted);
}

.ct-deal-vd-story strong {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  color: var(--ct-green);
}

.ct-deal-vd-story strong.is-worse { color: #b91c1c; }

/* ── Berekening, opgebouwd als de specificatietabel ── */
.ct-deal-vd-calc { border-top: 1px solid var(--ct-vd-hair); }

.ct-deal-vd-table {
  width: 100%;
  border-collapse: collapse;
}

.ct-deal-vd-table tr { border-bottom: 1px solid var(--ct-vd-hair); }

.ct-deal-vd-table td {
  padding: 14px 34px;
  font-size: 14.5px;
  vertical-align: middle;
}

.ct-deal-vd-table td:first-child { font-weight: 700; }

.ct-deal-vd-table td:last-child {
  text-align: right;
  /* Sora, net als de bedragen in het totalenblok en op de pakkettegels. Deze
     tabel erfde het paginalettertype en week daarmee als enige af. */
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  width: 1%;
}

.ct-deal-vd-table-sub {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ct-text-muted);
  margin-top: 2px;
}

.ct-deal-vd-table tr.is-gain td { color: var(--ct-green); }
.ct-deal-vd-table tr.is-sum td  { border-top: 2px solid var(--ct-text); }

/* Kolomkop HUIDIG / NIEUW, alleen zichtbaar zodra het huidige bedrag is ingevuld. */
.ct-deal-vd-table tr.is-head td {
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #94a3b8;
  padding-top: 12px;
  padding-bottom: 6px;
}

/* De huidige situatie staat gedempt naast de nieuwe. */
.ct-deal-vd-table td.is-old,
.ct-deal-vd-totals-table td.is-old {
  text-align: right;
  white-space: nowrap;
  width: 1%;
  padding-right: 26px;
  color: var(--ct-text-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ct-deal-vd-table tr.is-gain td.is-old { color: #cbd5e1; }
.ct-deal-vd-table td.is-old .ct-deal-vd-table-sub { color: #94a3b8; }

.ct-deal-vd-totals {
  background: var(--ct-surface);
  padding: 20px 34px 24px;
  border-radius: 0 0 20px 20px;
}

.ct-deal-vd-totals-cap {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 12px;
}

.ct-deal-vd-totals-table {
  width: 100%;
  border-collapse: collapse;
}

.ct-deal-vd-totals-table td {
  padding: 7px 0;
  font-size: 14.5px;
  vertical-align: baseline;
}

/* Zelfde gewicht als de labels in de specificatie erboven. Deze stonden op de
   standaardwaarde en vielen daardoor mager uit tussen twee vette buren. */
.ct-deal-vd-totals-table td:first-child { font-weight: 700; }

.ct-deal-vd-totals-table td:last-child {
  text-align: right;
  white-space: nowrap;
  width: 1%;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ct-deal-vd-totals-table tr.is-gain td:last-child { color: var(--ct-green); }
.ct-deal-vd-totals-table tr.is-gain td.is-old     { color: #cbd5e1; }

.ct-deal-vd-totals-table tr.is-net td {
  border-top: 2px solid var(--ct-text);
  padding-top: 14px;
  font-size: 15.5px;
}

.ct-deal-vd-totals-table tr.is-net td:first-child { font-weight: 800; }
.ct-deal-vd-totals-table tr.is-net td:last-child  { font-size: 1.15rem; }

/* Het bedrag waar het om draait: nu betalen min straks netto kwijt zijn. */
.ct-deal-vd-fair {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ct-border);
}

.ct-deal-vd-fair-title {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ct-green);
}

.ct-deal-vd-fair-sum {
  display: block;
  font-size: 12.5px;
  color: var(--ct-text-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.ct-deal-vd-fair-value {
  font-family: 'Sora', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ct-green);
  font-variant-numeric: tabular-nums;
}

.ct-deal-vd-fair.is-worse .ct-deal-vd-fair-title,
.ct-deal-vd-fair.is-worse .ct-deal-vd-fair-value { color: #b91c1c; }

/* ── Bewegingsvoorkeur ── */
@media (prefers-reduced-motion: reduce) {
  .ct-deal-vd,
  .ct-deal-vd-panel.is-revealing { animation: none; }
  .ct-deal-vd-opt,
  .ct-deal-vd-btn,
  .ct-deal-vd-link { transition: none; }
  .ct-deal-vd-opt:hover,
  .ct-deal-vd-btn:hover { transform: none; }
}

/* ── Mobiel ── */
@media (max-width: 680px) {
  .ct-deal-vd-head { padding: 20px 20px 18px; gap: 14px; }
  /* Binnen de kaart in plaats van over de rand: buiten de rand zou het
     rondje op smalle schermen tegen de zijkant van het scherm plakken. */
  .ct-deal-vd-orb { width: 38px; height: 38px; margin-left: 0; }
  .ct-deal-vd-sec,
  .ct-deal-vd-switch { padding-left: 20px; padding-right: 20px; }
  /* ── Actiezone op smalle schermen ──
     Alles onder elkaar stapelen liet de halve schermbreedte ongebruikt en
     maakte het blok onnodig lang. Invoerveld en uitkomst zijn allebei smal
     genoeg om een rij te delen, dus die staan naast elkaar; de knop krijgt
     een eigen regel over de volle breedte als eindpunt van de kaart.
     Scheelt zo'n 60 pixels hoogte. */
  .ct-deal-vd-action { margin: 12px 14px 14px; padding: 14px; gap: 14px 12px; }

  .ct-deal-vd-now,
  .ct-deal-vd-figure {
    flex: 1 1 0;
    width: auto;
    /* Onder de 320px past twee naast elkaar niet meer; dan valt het
       vanzelf terug op onder elkaar. */
    min-width: 120px;
  }

  .ct-deal-vd-input { width: 100%; }

  /* "(optioneel)" duwt het label over twee regels, waardoor het veld niet
     meer op één lijn met het bedrag staat. Dat de invoer optioneel is blijkt
     ook uit het lege veld zelf. */
  .ct-deal-vd-now-label em { display: none; }

  /* Bedragen als € 1.977,60 moeten in een halve kolom passen. */
  .ct-deal-vd-amount-whole { font-size: 1.5rem; }
  .ct-deal-vd-amount-cur,
  .ct-deal-vd-amount-dec { font-size: .85rem; }

  .ct-deal-vd-btn { flex: 0 0 100%; justify-content: center; }
  .ct-deal-vd-table td { padding-left: 20px; padding-right: 20px; }
  .ct-deal-vd-table td.is-old { padding-right: 14px; }
  .ct-deal-vd-totals { padding-left: 20px; padding-right: 20px; }
  .ct-deal-vd-totals-table td.is-old { padding-right: 14px; }
  /* Twee kaarten naast elkaar blijft prettiger dan een lange kolom. */
  .ct-deal-vd-opts { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .ct-deal-vd-fair-value { font-size: 1.35rem; }
}

/* ================================================
   De cadeaukiezer
   Verschijnt zodra er meer dan één welkomstcadeau aan de deal hangt: drie
   televisies bij dezelfde actie bijvoorbeeld. Staat bóven het uitklapbare
   pakketblok, want dat er meer te kiezen valt hoort niemand te hoeven
   ontdekken.

   De tegels zijn dezelfde bouwsteen als .ct-deal-vd-opt, één maat groter en
   met een afbeelding erbij. Het accent is oranje in plaats van blauw: dit is
   de keuze die de deal bepaalt, de pakketten daaronder verfijnen hem.
   ================================================ */

/* Een zweem van de accentkleur, zodat de sectie zich van het pakketblok
   onderscheidt zonder een tweede kader nodig te hebben. */
.ct-deal-vd-sec--gifts {
  background: linear-gradient(180deg, #fffbf5 0%, #fff 100%);
  border-top: 0;
}

.ct-deal-vd-gifts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 22px 10px;
  padding-top: 14px;
}

.ct-deal-vd-gift {
  position: relative;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  background: #fff;
  border: 2px solid var(--ct-border);
  border-radius: 16px;
  padding: 15px 12px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ct-deal-vd-gift:hover {
  border-color: #b6c2d1;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
}

.ct-deal-vd-gift[aria-pressed="true"] {
  border-color: var(--ct-accent);
  box-shadow: 0 8px 22px rgba(249, 115, 22, .16);
}

/* Zelfde tegel als de cadeau-afbeelding in het pakketblok, iets groter: hier
   is het beeld het onderscheid tussen de opties, daar een illustratie bij een
   naam die toch al vaststaat. */
.ct-deal-vd-gift-art {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--ct-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 2px;
}

.ct-deal-vd-gift-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
  box-sizing: border-box;
  display: block;
}

.ct-deal-vd-gift-name {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .9rem;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.ct-deal-vd-gift-meta {
  font-size: .73rem;
  line-height: 1.35;
  color: var(--ct-text-muted);
  font-variant-numeric: tabular-nums;
}

/* De regel staat er altijd, ook leeg: hij wordt bij elke pakketwissel opnieuw
   gevuld, en een span die er bij het opbouwen niet was valt daarna niet meer
   te vullen. Leeg mag hij dan geen 4px gap kosten. */
.ct-deal-vd-gift-meta:empty {
  display: none;
}

/* De bijbetaling hoort bij de keuze, niet bij de kleine lettertjes: hij kan
   het verschil tussen twee cadeaus helemaal omdraaien. Vandaar een eigen
   pil, groen wanneer er niets bij hoeft en oranje wanneer wel. */
.ct-deal-vd-gift-fee {
  margin-top: 5px;
  font-family: 'Sora', sans-serif;
  font-size: .74rem;
  font-weight: 800;
  color: var(--ct-green);
  background: var(--ct-green-light);
  border-radius: 50px;
  padding: 4px 12px;
  font-variant-numeric: tabular-nums;
}

.ct-deal-vd-gift-fee.is-paid {
  color: #b45309;
  background: var(--ct-accent-light, #fff7ed);
}

/* ================================================
   De vergelijktabel
   Een eigen kaart onder de Voordeel-card. Hier zit de winst van één pagina
   met varianten boven drie losse pagina's: pas naast elkaar zie je dat een
   duurdere televisie met bijbetaling per saldo hetzelfde kan opleveren.
   ================================================ */

.ct-deal-vd-compare {
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--ct-shadow);
  margin-bottom: 20px;
  overflow: hidden;
}

.ct-deal-vd-compare-head { padding: 20px 34px 0; }

.ct-deal-vd-compare-title {
  font-family: 'Sora', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ct-text);
}

.ct-deal-vd-compare-sub {
  margin: 5px 0 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ct-text-muted);
}

/* De tabel heeft vijf kolommen en moet op een telefoon niet ineenschuiven,
   dus krijgt hij zijn eigen scroll in plaats van de pagina te verbreden. */
.ct-deal-vd-compare-scroll {
  overflow-x: auto;
  /* Aan beide kanten minder ruimte dan de kop erboven, precies zoveel als de
     buitenste kolommen er zelf bij doen. Tekst en bedragen komen daardoor uit
     op dezelfde lijn als de titel, terwijl de groene rand links en de
     ademruimte rechts in de marge vallen. */
  padding: 14px 19px 26px;
}

.ct-deal-vd-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  min-width: 540px;
}

/* De eerste kolom houdt links een marge vrij. Daar staat de groene rand van
   het voordeligste cadeau in, zodat die niet tegen de naam aan plakt. De marge
   geldt voor elke rij, want anders zou juist de gemarkeerde rij een stukje
   inspringen en stonden de namen niet meer onder elkaar. */
.ct-deal-vd-compare-table th:first-child,
.ct-deal-vd-compare-table td:first-child { padding-left: 15px; }

.ct-deal-vd-compare-table th {
  text-align: left;
  font-family: 'Sora', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 0 12px 9px 0;
  border-bottom: 1px solid var(--ct-border);
}

.ct-deal-vd-compare-table td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--ct-vd-hair, #f1f5f9);
  color: var(--ct-text-muted);
}

.ct-deal-vd-compare-table tr:last-child td { border-bottom: 0; }

.ct-deal-vd-compare-table th.is-num,
.ct-deal-vd-compare-table td.is-num { text-align: right; padding-right: 0; }

/* Rechts dezelfde marge als de eerste kolom links heeft, zodat het bedrag niet
   tegen de rand van de kaart plakt.
   
   Moet ná de regel hierboven staan: de cel draagt is-num én is-net, de twee
   selectors zijn even specifiek, en dan wint de laatste. Stond hij ervoor, dan
   zette is-num de marge meteen weer op nul.
   
   Op de kolom en niet op de laatste cel, want de knopkolom voor smalle schermen
   staat daarachter en is op een breed scherm verborgen. */
.ct-deal-vd-compare-table th.is-net,
.ct-deal-vd-compare-table td.is-net { padding-right: 15px; }

.ct-deal-vd-compare-table td.is-name {
  color: var(--ct-text);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
}

/* De cadeaunaam is de affiliate-link. Geen linkkleur: de naam is de kop van de
   rij en moet als kop blijven lezen. Het pijltje zegt dat er iets achter zit. */
.ct-deal-vd-compare-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ct-deal-vd-compare-arrow {
  color: #94a3b8;
  flex-shrink: 0;
  transition: transform .18s ease, color .18s ease;
}

/* De knopkolom bestaat alleen op een telefoon. Op een breed scherm is de hele
   rij aanklikbaar en zou een knop per rij vier keer hetzelfde zeggen. */
.ct-deal-vd-compare-table th.is-action,
.ct-deal-vd-compare-table td.is-action { display: none; }

.ct-deal-vd-compare-table tr.is-clickable { cursor: pointer; }

.ct-deal-vd-compare-table tr.is-clickable:hover td { background: var(--ct-surface); }
.ct-deal-vd-compare-table tr.is-clickable.is-active:hover td { background: #fff3e6; }

.ct-deal-vd-compare-table tr.is-clickable:hover .ct-deal-vd-compare-link { text-decoration: underline; }

.ct-deal-vd-compare-table tr.is-clickable:hover .ct-deal-vd-compare-arrow {
  color: var(--ct-accent);
  transform: translateX(2px);
}

.ct-deal-vd-compare-link:focus-visible {
  outline: 2px solid var(--ct-brand);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Het gekozen cadeau licht op, zodat de kaart erboven en de tabel eronder
   zichtbaar over hetzelfde gaan. */
.ct-deal-vd-compare-table tr.is-active td { background: #fffaf3; }
.ct-deal-vd-compare-table tr.is-active td.is-name { color: #b45309; }

/* Alle bedragen in het groen zetten laat er geen enkel uitspringen. Neutraal
   dus, en alleen de hoogste uitkomst krijgt de kleur. */
.ct-deal-vd-compare-net {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  color: var(--ct-text);
}

.ct-deal-vd-compare-net.is-best { font-weight: 800; color: var(--ct-green); }
.ct-deal-vd-compare-net.is-worse { color: #b91c1c; font-weight: 700; }

/* Het cadeau dat het meeste oplevert: een groene rand langs de rij en een
   groen bedrag, verder niets. Geen woorden erbij — de legenda boven de tabel
   zegt het één keer — en geen rangnummer, want dat zou een oordeel suggereren
   dat er niet is. De rand hangt aan de eerste cel: op een <tr> tekent border
   niet betrouwbaar bij border-collapse. */
.ct-deal-vd-compare-table tr.is-best td:first-child {
  box-shadow: inset 3px 0 0 var(--ct-green);
}

/* Bewust geen groene achtergrond erbij. De tabel draagt twee signalen die niet
   hetzelfde zeggen — welk cadeau je gekozen hebt (warme achtergrond, gelijk aan
   de kaart) en welk cadeau het meeste oplevert (groene rand) — en die kunnen op
   dezelfde rij samenvallen. Twee achtergronden zouden elkaar dan opeten. */

@media (max-width: 640px) {
  .ct-deal-vd-gifts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .ct-deal-vd-compare-head { padding-left: 20px; padding-right: 20px; }

  /* ── De vergelijking op een telefoon ──
     Vijf kolommen in een zijwaartse scroll duwt juist het netto voordeel buiten
     beeld, en dat is de kolom waar de tabel om draait. Elke rij wordt daarom
     een kaartje: de naam als kop, daaronder label en waarde tegenover elkaar.
     De kolomkoppen komen uit data-label, dus de tabel blijft één opbouw. */
  .ct-deal-vd-compare-scroll { overflow-x: visible; padding: 6px 20px 20px; }

  .ct-deal-vd-compare-table { min-width: 0; display: block; }
  .ct-deal-vd-compare-table thead { display: none; }
  .ct-deal-vd-compare-table tbody { display: block; }

  .ct-deal-vd-compare-table tr {
    display: block;
    border: 1px solid var(--ct-border);
    border-radius: 14px;
    padding: 12px 15px;
    margin-top: 10px;
  }

  /* Het randje verhuist naar het kaartje, want een eerste cel op volle breedte
     zet hem anders over de kop in plaats van langs de rij. */
  .ct-deal-vd-compare-table tr.is-best {
    border-color: var(--ct-green);
    box-shadow: inset 3px 0 0 var(--ct-green);
  }

  .ct-deal-vd-compare-table tr.is-best td:first-child { box-shadow: none; }

  .ct-deal-vd-compare-table tr.is-active { background: #fffaf3; }
  .ct-deal-vd-compare-table tr.is-active td { background: transparent; }
  .ct-deal-vd-compare-table tr.is-clickable:hover td { background: transparent; }

  .ct-deal-vd-compare-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0;
    border-bottom: 0;
    text-align: right;
  }

  .ct-deal-vd-compare-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    font-family: 'Sora', sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #94a3b8;
  }

  /* De naam is de kop van het kaartje, geen label-waardepaar. */
  .ct-deal-vd-compare-table td.is-name {
    display: block;
    text-align: left;
    font-size: .95rem;
    padding: 0 0 9px;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--ct-vd-hair, #f1f5f9);
  }

  .ct-deal-vd-compare-table td.is-name::before { content: none; }
  .ct-deal-vd-compare-table td.is-num,
  .ct-deal-vd-compare-table td.is-net { padding-right: 0; }

  /* Het bedrag waar het om gaat mag hier zwaarder wegen dan in de tabel: op een
     kaartje concurreert het niet met een kolom ernaast. */
  .ct-deal-vd-compare-net { font-size: 1rem; }

  /* ── De knop onder het kaartje ──
     Het kaartje zelf is hier niet aanklikbaar, dus staat de link als knop
     onderaan. Een omlijnde knop en niet de oranje van de kaart: er staan er
     net zoveel als er cadeaus zijn, en die horen niet met de hoofdknop van de
     pagina te concurreren. */
  .ct-deal-vd-compare-table tr.is-clickable { cursor: default; }
  .ct-deal-vd-compare-table tr.is-clickable:hover .ct-deal-vd-compare-link { text-decoration: none; }

  /* Het pijltje achter de naam vervalt: de knop zegt het al. */
  .ct-deal-vd-compare-arrow { display: none; }

  .ct-deal-vd-compare-table td.is-action {
    display: block;
    padding: 11px 0 0;
    margin-top: 7px;
    border-top: 1px solid var(--ct-vd-hair, #f1f5f9);
  }

  .ct-deal-vd-compare-table td.is-action::before { content: none; }

  .ct-deal-vd-compare-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 16px;
    border: 1.5px solid var(--ct-brand);
    border-radius: 50px;
    background: #fff;
    color: var(--ct-brand);
    font-family: 'Sora', sans-serif;
    font-size: .86rem;
    font-weight: 800;
    text-decoration: none;
  }

  .ct-deal-vd-compare-btn:hover,
  .ct-deal-vd-compare-btn:focus {
    background: var(--ct-brand);
    color: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ct-deal-vd-gift { transition: none; }
  .ct-deal-vd-gift:hover { transform: none; }
  .ct-deal-vd-compare-arrow { transition: none; }
  .ct-deal-vd-compare-table tr.is-clickable:hover .ct-deal-vd-compare-arrow { transform: none; }
}

/* ── Invoer op een aanraakscherm ──
   Safari op iOS zoomt de hele pagina in zodra je een invoerveld met een
   lettergrootte onder de 16 pixels aantikt, en zoomt daarna niet terug. Het
   veld stond op .95rem, dus dat gebeurde bij elk bedrag dat iemand invulde:
   halve kaart buiten beeld. Alleen op aanraakschermen aanpassen — op een
   bureaublad bestaat het probleem niet en blijft de maatvoering zoals hij was. */
@media (pointer: coarse) {
  /* Zwaarder dan één klasse. Een thema dat `input[type="number"]` aanspreekt
     weegt (0,1,1) en zou een losse klasse (0,1,0) verslaan, ongeacht welke
     stylesheet later laadt. Deze selector weegt (0,2,1) en wint daarvan. */
  .ct-deal-vd input.ct-deal-vd-input { font-size: 16px; }
}