/*
Theme Name:   Vergelijkjeprijs Child
Theme URI:    https://www.vergelijkjeprijs.com/
Description:  Child-thema van "Vergelijkjeprijs". Gebruik dit voor alle eigen
              aanpassingen (kleuren, teksten, extra templates) zodat het
              hoofdthema veilig bijgewerkt kan worden zonder dat je werk
              overschreven wordt.
Author:       Vergelijkjeprijs.com
Template:     vergelijkjeprijs
Version:      1.0.0
Text Domain:  vergelijkjeprijs-child
*/

/* Voeg hieronder eigen CSS toe — deze wordt na de stijl van het hoofdthema geladen. */




.dc-tool,
[class*="dc-"][class$="-tool"] {
	--color-primary: var(--ink) !important;
	--color-primary-contrast: #ffffff !important;

	--color-secondary: var(--coral) !important;
	--color-secondary-contrast: #ffffff !important;

	--color-in-primary: #ffffff !important;
	--color-in-secondary: #ffffff !important;

	--color-switch-track-selected: var(--ink) !important;
	--color-switch-track-unselected: var(--line) !important;

	/* Bewust NIET overschreven: --color-text-primary, --color-text-secondary
	   en hun *-contrast varianten. Daisycon gebruikt deze verschillend per
	   widget — soms donkere tekst op een lichte achtergrond (vergelijkers),
	   soms lichte tekst op een gekleurd paneel (bijv. dc-prefill-energy-tool).
	   Zie de gerichte uitzondering onderaan dit bestand voor die laatste. */

	font-family: var(--body) !important;
}

/* Uniforme witte achtergrond voor élke widget, ongeacht wat Daisycon er zelf
   voor instelt (achtergrond wordt niet via een CSS-variabele blootgegeven,
   dus dit móet met een brede, harde override). Vangt zowel de buitenste
   container als de meest voorkomende interne wrapper-namen. */
.dc-tool,
[class*="dc-"][class$="-tool"],
.dc-tool [class$="__main"],
.dc-tool [class*="__prefill"],
.dc-tool [class*="__results"],
.dc-tool [class*="__panel"] {
	background: var(--paper-2) !important;
}

/* Letters op koppen/labels wél overal in het merklettertype, ongeacht kleur */
.dc-tool [class*="__title"],
.dc-tool [class*="__label-title"] {
	font-family: var(--display) !important;
}

/* Typografie: koppen en labels in het merklettertype */
.dc-tool [class*="__header-title"],
.dc-tool [class*="__title"],
.dc-tool [class*="__products-button"] {
	font-family: var(--display) !important;
}

/* Prijzen in het mono-lettertype, net als de rest van de site
   (breed genoeg om ook __price__big / __price__average (alles-in-één) en
   price-row_amount (energie) te vangen, ongeacht de vertical) */
.dc-tool [class*="price"] {
	font-family: var(--mono) !important;
}

/* Knoppen: vorm en gewicht consistent maken (kleur komt al uit de CSS-variabelen hierboven) */
.dc-tool [class*="__button"],
.dc-tool .dc-tool__button {
	border-radius: 999px !important;
	font-family: var(--display) !important;
	font-weight: 600 !important;
}

/* Checkbox-vinkjes in de merkkleur i.p.v. hardcoded zwart */
.dc-tool [class*="checkbox__icon__checked"],
.dc-tool [class*="svg-checkbox-check"] {
	fill: var(--ink) !important;
	stroke: var(--ink) !important;
}

/* Tabs (namen verschillen per vertical, maar de class-structuur is gedeeld) */
.dc-tool [class*="__tabs-tab"] {
	font-family: var(--display) !important;
}
.dc-tool [class*="__tabs-tab"].filter-tab-active {
	color: var(--ink) !important;
}

/* ==========================================================================
   Menu-navigatie visueel gelijktrekken tussen tabs (Energie/Alles-in-één) en
   accordeon-panelen (Sim-Only). De onderliggende interactie blijft
   verschillend (klikken vs. uitklappen) — dat zit in Daisycon's eigen
   HTML/JS — maar typografie, kleur en randen worden overal gelijk.
   ========================================================================== */
.dc-tool [class*="__tabs-tab"],
.dc-tool [class*="__panel__header"] {
	font-family: var(--display) !important;
	font-weight: 600 !important;
	color: var(--slate) !important;
	border-bottom: 1px solid var(--line) !important;
	transition: color .15s ease !important;
}
.dc-tool [class*="__tabs-tab"]:hover,
.dc-tool [class*="__panel__header"]:hover,
.dc-tool [class*="__tabs-tab"].filter-tab-active {
	color: var(--ink) !important;
}
/* Pijltje-icoon in de accordeon-kop in dezelfde kleur als de koptekst */
.dc-tool [class*="__panel__header"] svg,
.dc-tool [class*="__panel__header"] path,
.dc-tool [class*="__panel__header"] polygon {
	fill: currentColor !important;
	stroke: none !important;
}

/* Kaartranden en afronding van de aanbieder-/product-kaarten, welke vertical dan ook */
.dc-tool [class*="__product"]:not([class*="__products"]) {
	border-radius: var(--radius) !important;
}

/* Uitgelicht/Top deal-badge in de accentkleur, ongeacht de exacte class-naam per vertical
   (--spotlight-title bij Energie, __spotlight bij Sim-Only, enz.) */
.dc-tool [class*="spotlight"] {
	background: var(--coral) !important;
	color: #ffffff !important;
	font-family: var(--display) !important;
}
.dc-tool [class*="spotlight"] svg {
	fill: #ffffff !important;
}

/* Kortingsbadge (het cadeautje-icoon) in de volt-kleur, goed leesbaar */
.dc-tool [class*="_gift"] {
	color: var(--ink) !important;
}
.dc-tool [class*="_gift__label"] {
	font-family: var(--mono) !important;
	font-weight: 600 !important;
}

/* ==========================================================================
   Uitzondering: Prefil Energie (dc-prefill-energy-tool)
   ==========================================================================
   Deze widget gaat er standaard van uit dat zijn paneel gekleurd blijft
   (witte hoofdtekst, wit gevulde iconen). Nu we hierboven overal een witte
   achtergrond forceren, moet de tekst/iconen van déze widget specifiek naar
   een donkere kleur, anders wordt het wit-op-wit en onleesbaar.
   Kom je nog een andere categorie tegen met hetzelfde "gekleurd paneel"-
   patroon (witte --color-text-primary in de HTML die je deelt), kopieer dit
   blok dan en pas de class-prefix aan naar die widget. */
.dc-prefill-energy-tool {
	--color-text-primary: var(--ink) !important;
	--color-text-primary-contrast: #ffffff !important;
	--color-text-secondary: var(--slate) !important;
	--color-text-secondary-contrast: #ffffff !important;
}
.dc-prefill-energy-tool svg[fill] {
	fill: var(--coral) !important;
}