/* ==========================================================================
   Topvergelijker – opmaak Content Egg (EggBlocks)
   Overgenomen uit Customizer > Extra CSS. Wordt alleen op artikelen/pagina's geladen.
   Selectors zijn ongewijzigd (bevestigd via inspector, mei 2026).
   ========================================================================== */

/* ─────────────────────────────────────────────────
   KEY TAKEAWAYS — Paars
   Outer:  .wp-block-eggb-key-takeaways
   Inner:  section.eggb-key-takeaways--default
───────────────────────────────────────────────── */

.wp-block-eggb-key-takeaways .eggb-key-takeaways--default {
  background-color: #F0ECFE;
  border-radius: 12px;
  padding: 16px 18px;
}

.wp-block-eggb-key-takeaways .eggb-section-title {
  color: #7B6EDD;
}

.wp-block-eggb-key-takeaways h1,
.wp-block-eggb-key-takeaways h2,
.wp-block-eggb-key-takeaways h3 {
  color: #3B2F8A;
}

.wp-block-eggb-key-takeaways .eggb-item-list li::before,
.wp-block-eggb-key-takeaways .eggb-item-list .eggb-item-icon {
  color: #7B6EDD;
}

/* ─────────────────────────────────────────────────
   PROS & CONS — Groen
   Outer:  .wp-block-eggb-pros-cons
   Inner:  div.eggb-pros-cons--default.eggb-block--accented
───────────────────────────────────────────────── */

.wp-block-eggb-pros-cons .eggb-pros-cons--default {
  background-color: #E8F5EE !important;
  border-radius: 12px;
  padding: 16px 18px;
}

.wp-block-eggb-pros-cons .eggb-section-title {
  color: #2DB67D;
}

.wp-block-eggb-pros-cons h1,
.wp-block-eggb-pros-cons h2,
.wp-block-eggb-pros-cons h3 {
  color: #0F5C38;
}

/* Pro-items: groen */
.wp-block-eggb-pros-cons .eggb-pros .eggb-item-icon,
.wp-block-eggb-pros-cons .eggb-pros li::before {
  color: #2DB67D !important;
}

/* Con-items: rood */
.wp-block-eggb-pros-cons .eggb-cons .eggb-item-icon,
.wp-block-eggb-pros-cons .eggb-cons li::before {
  color: #E84040 !important;
}

/* ─────────────────────────────────────────────────
   SPECIFICATIONS — Blauw
   Outer:  .wp-block-eggb-specifications
   Inner:  div.eggb-specs--default.eggb-block--accented
───────────────────────────────────────────────── */

.wp-block-eggb-specifications .eggb-specs--default {
  background-color: #E8EFFE !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
}

.wp-block-eggb-specifications .eggb-section-title {
  color: #4B7CF3 !important;
}

.wp-block-eggb-specifications h1,
.wp-block-eggb-specifications h2,
.wp-block-eggb-specifications h3 {
  color: #1A3A8A !important;
}

.wp-block-eggb-specifications .eggb-specs-label,
.wp-block-eggb-specifications .eggb-spec-label {
  color: #4B7CF3 !important;
}

/* ─────────────────────────────────────────────────
   CONCLUSION — Amber / Geel
   Outer:  .wp-block-eggb-conclusion
   Inner:  section.eggb-conclusion--default
   (Gebruik ook voor Verdict indien aanwezig)
───────────────────────────────────────────────── */

.wp-block-eggb-conclusion .eggb-conclusion--default {
  background-color: #FFF5DC !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
}

.wp-block-eggb-conclusion .eggb-section-title {
  color: #F5A623 !important;
}

.wp-block-eggb-conclusion h1,
.wp-block-eggb-conclusion h2,
.wp-block-eggb-conclusion h3 {
  color: #7A4A00 !important;
}

.wp-block-eggb-conclusion .eggb-item-list li::before,
.wp-block-eggb-conclusion .eggb-item-icon {
  color: #F5A623 !important;
}

/* Verdict (apart blok, zelfde kleurschema) */
.wp-block-eggb-verdict .eggb-verdict--default {
  background-color: #FFF5DC !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
}

.wp-block-eggb-verdict .eggb-section-title {
  color: #F5A623 !important;
}

.wp-block-eggb-verdict h1,
.wp-block-eggb-verdict h2,
.wp-block-eggb-verdict h3 {
  color: #7A4A00 !important;
}

/* ─────────────────────────────────────────────────
   FAQ — Paars (zelfde ramp als Key Takeaways)
   Outer:  .wp-block-eggb-faq
   Inner:  section.eggb-faq.eggb-faq--default
   Items:  details.eggb-faq-item.eggb-card
───────────────────────────────────────────────── */

.wp-block-eggb-faq .eggb-faq--default {
  background-color: #EEEAFE !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
}

.wp-block-eggb-faq .eggb-section-title {
  color: #7B6EDD !important;
}

.wp-block-eggb-faq h1,
.wp-block-eggb-faq h2,
.wp-block-eggb-faq h3 {
  color: #3B2F8A !important;
}

.wp-block-eggb-faq .eggb-faq-item.eggb-card {
  background-color: #F0ECFE;
}

.wp-block-eggb-faq summary,
.wp-block-eggb-faq .eggb-faq-question {
  color: #3B2F8A !important;
}

/* ─────────────────────────────────────────────────
CTA BUTTON color /Blocks naar paars bijgewerkt
───────────────────────────────────────────────── */

.eggb-btn.eggb-btn--filled {
  --eggb-btn-bg: var(--tv-cta);
  --eggb-btn-border: var(--tv-cta);
  --eggb-btn-fg: var(--tv-cta-text);
  --eggb-btn-filled-fg: var(--tv-cta-text);
  color: var(--tv-cta-text) !important;
  font-weight: 700;
}

.eggb-btn.eggb-btn--filled:hover,
.eggb-btn.eggb-btn--filled:focus {
  --eggb-btn-bg: var(--tv-cta-hover);
  --eggb-btn-border: var(--tv-cta-hover);
}

.eggb-block-title.eggb-intro-title {
    color: #222 !important;
    font-weight: 800;
}

.eggb-intro-lead {
    font-weight: 700;
		color: #222;
}

span.eggb-score-num {
    font-size: 1.2rem;
    font-weight: 600;
}

span.eggb-price.eggb-price {
    font-size: 1.3rem;
}

.eggb-rb-stars .filled,
.eggb-rb-stars svg {
    color: #F9D64A;
    fill: #F9D64A;
}

tr:nth-last-child(3) td.text-center.px-3.py-2 svg {
    color: #F9D64A;
    fill: #F9D64A;
}

tr:nth-last-child(2) td.text-center.px-3.py-2 {
    color: var(--tv-price);
    font-weight: 600;
}

/* =========================================================
   TOPVERGELIJKER.NL – PRODUCTLABELS
   ========================================================= */
/* Algemene opmaak voor alle productlabels */
.eggb-award {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 12px !important;
  border: 2px solid !important;
  border-radius: 5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 1.3px !important;
  text-transform: uppercase !important;
  box-sizing: border-box !important;
}
/* =========================================================
   BESTE KEUZE – BLAUW
   HTML-anchor: beste-keuze (en beste-keuze-2, beste-keuze-3 bij duplicaten)
   ========================================================= */
[id^="beste-keuze"] .eggb-award {
  color: #2455D9 !important;
  background-color: #EEF3FF !important;
  border-color: #9EB5F5;
}
/* =========================================================
   PRIJS-KWALITEIT – GOUD
   HTML-anchor: beste-prijs-kwaliteit (en -2, -3 bij duplicaten)
   ========================================================= */
[id^="beste-prijs-kwaliteit"] .eggb-award {
  color: #9A5A00 !important;
  background-color: #FFF7E6 !important;
}
/* =========================================================
   BUDGETTOPPER – GROEN
   HTML-anchor: budget-topper (en budget-topper-2, budget-topper-3 bij duplicaten)
   ========================================================= */
[id^="budget-topper"] .eggb-award {
  color: #18723A !important;
  background-color: #EDF9F1 !important;
  border-color: #8CCFA3;
}
/* =========================================================
   MOBIELE WEERGAVE
   ========================================================= */
@media (max-width: 767px) {
  .eggb-award {
    padding: 7px 10px !important;
    font-size: 12px !important;
    letter-spacing: 1.1px !important;
  }
}

.eggb-award--beste-keuze {
  color: #2455D9 !important;
  background-color: #EEF3FF !important;
  border-color: #9EB5F5 !important;
}
.eggb-award--prijs-kwaliteit {
  color: #9A5A00 !important;
  background-color: #FFF7E6 !important;
}
.eggb-award--budgettopper {
  color: #18723A !important;
  background-color: #EDF9F1 !important;
  border-color: #8CCFA3 !important;
}

/* =========================================================
   PROS-CONS BLOK — alleen "Cons" en specifiek de laatste
   kolom ("Not for") krijgen de rode kleur, "Best for" blijft
   ongemoeid (ze delen dezelfde class, dus positie is het
   enige onderscheid)
   ========================================================= */
.eggb-pros-cons .eggb-section-title--negative {
  color: var(--eggb-negative) !important;
}

.eggb-pros-cons .row > div:last-of-type .eggb-section-title--muted {
  color: var(--eggb-negative) !important;
}

/* Sterren in Content Egg vergelijkingstabellen */
.eggb-ct .eggb-ct-stars,
.eggb-ct .eggb-ct-stars .eggb-ct-star,
.eggb-ct .eggb-ct-stars svg {
    color: #F9D64A !important;
    fill: #F9D64A !important;
}

/* Links in de artikeltekst */
.single-post .entry-content p a,
.single-post .entry-content li a {
  color: #2455D9 !important;
  text-decoration-color: #2455D9;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Bezochte links blijven blauw */
.single-post .entry-content p a:visited,
.single-post .entry-content li a:visited {
  color: #2455D9 !important;
}

/* Hover */
.single-post .entry-content p a:not(.eggb-btn):hover,
.single-post .entry-content li a:not(.eggb-btn):hover,
.single-post .eggb-intro-body a:not(.eggb-btn):hover,
.single-post .cegg5-container p a:not(.eggb-btn):hover {
  color: #0B2A6F !important;
  text-decoration-color: #0B2A6F !important;
  text-decoration-thickness: 1px;
}