/**
 * Maatvoering voor de geïnjecteerde Oney-componenten (Svelte, eigen klassen —
 * de svelte-hash is een extra klasse, dus deze selectors blijven werken).
 * Oney's checkout-component vult de volle containerbreedte en het logo rendert
 * zonder rem op natuurlijke grootte (866×195).
 */

.oney-widget .oney-checkoutLogo {
	max-height: 40px;
	width: auto;
}

/*
 * Wettelijke vermelding (loadShortLegalNotice): een fors tekstblok van Oney.
 * Zetten als mention légale — kleiner, gedempt, rustige regelafstand — zodat hij
 * de pagina niet domineert maar wel leesbaar en volledig blijft (charter-eis).
 */
.oney-widget--notice {
	font-size: 0.85em;
	line-height: 1.55;
	color: #52525b;
}

.oney-widget--notice a {
	color: inherit;
}

/*
 * ====== Financieringskaart ============================================
 * Eén ontworpen component voor home/catalogus/product/mand: wit kaartje
 * met hairline en Oney-groene bies, kop met merk + planchips, daaronder de
 * wettelijke waarschuwing en in de voet de acties (simulatie, CGV-knop).
 * Sinds de marketingretour van Oney (04-09-2026) staat de uitgeschreven
 * mention légale niet meer op de pagina's; de notice-stijlen hieronder
 * blijven voor de filter `oney_wc_widget_mentions`. Kleuren volgen de
 * winkel (monochroom) met Oney-groen als enig accent.
 */
:root {
	--oney-groen: #81bc00;
	--oney-inkt: #17181c;
	--oney-gedempt: #62666e;
	--oney-hairline: rgba(23, 24, 28, 0.1);
}

.oney-widget-band {
	margin-top: 56px;
	/* naast de band zwevende theme-floats (bv. de onderste sorteerbalk van de
	   catalogus) er netjes boven laten eindigen */
	clear: both;
}

.oney-widget-band__inner {
	/* Themacontainer (±1280px) + 2×24px eigen padding, zodat de zichtbare
	   kaartrand exact op de contentgridlijn valt — de kaart introduceerde
	   anders een derde containerbreedte die nergens mee spoorde. */
	max-width: calc(1280px + 48px);
	margin: 0 auto;
	padding: 0 24px 56px;
}

.oney-kaart {
	position: relative;
	background: #fff;
	border: 1px solid var(--oney-hairline);
	border-radius: 14px;
	padding: 26px 30px 28px;
	box-shadow: 0 1px 2px rgba(23, 24, 28, 0.04), 0 12px 32px -24px rgba(23, 24, 28, 0.18);
	overflow: hidden;
}

/* Oney-groene bies langs de linkerrand: het enige kleuraccent — dus egaal,
   een gradient introduceerde een tweede, niet-merkeigen groen. */
.oney-kaart::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--oney-groen);
}

.oney-kaart__kop {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--oney-hairline);
}

/* Specifiek genoeg om thema-regels als `img { margin: 0 auto }` te verslaan. */
.oney-kaart .oney-kaart__logo,
.woocommerce .oney-kaart__logo {
	height: 30px;
	width: auto;
	margin: 0 !important;
	display: inline-block;
	flex: none;
}

.oney-kaart__titelblok {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* 1em, en niet groter: de waarschuwing (.oney-avert, 1.2em) moet zichtbaar
   boven de titel uitsteken (retour Oney 11-09-2026). */
.oney-kaart__titel {
	margin: 0 !important;
	font-size: 1em;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--oney-inkt);
	line-height: 1.2;
}

.oney-kaart__sub {
	margin: 0 !important;
	font-size: 0.78em;
	color: var(--oney-gedempt);
	line-height: 1.35;
}

.oney-kaart__chips {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none !important;
	margin: 0 0 0 auto !important;
	padding: 0 !important;
}

/* Borderloos getint: de omrande pill-vorm is exclusief voor échte knoppen,
   anders wekken statische chips een tap-verwachting. Vaste hoogte + flex
   zodat cijfer- en SANS FRAIS-chip exact op één lijn liggen. */
.oney-kaart__chip {
	list-style: none;
	margin: 0 !important;
	display: inline-flex;
	align-items: center;
	min-height: 27px;
	padding: 0 12px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--oney-inkt);
	background: #f3f3f1;
	line-height: 1;
}

.oney-kaart__chip--vrij {
	border-color: transparent;
	background: rgba(129, 188, 0, 0.13);
	color: #4c7000;
	text-transform: uppercase;
	font-size: 0.7em;
	letter-spacing: 0.07em;
}

.oney-kaart__mentions {
	padding-top: 18px;
}

/*
 * Wettelijke waarschuwing — letterlijk de regel van Oney's marketingdienst
 * (retour 04-09-2026), kapitaal, in inkt. Tweede retour (11-09-2026): de
 * waarschuwing moet ZICHTBAAR GROTER zijn dan de aangeprezen financieringen
 * en "sans frais". Daarom is .oney-avert overal het grootste lettertype van
 * zijn blok: in de kaart 1.25em tegenover de titel (1em), de chips (0.78em)
 * en de knoppen; in de compacte regel bij de prijs 1.15em tegenover de regel
 * zelf (0.9em); op mobiel 1.15em / 1.05em. De font-size staat met !important,
 * net als de marges: een themaregel met één klasse méér (bv. `.entry-content
 * p`) zou de hele hiërarchie anders stil platslaan. Wie hier iets verkleint,
 * verliest de marketingvalidatie.
 */
.oney-avert {
	margin: 0 !important;
	font-size: 1.25em !important;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.35;
	text-transform: uppercase;
	color: var(--oney-inkt);
}

.oney-kaart__avert {
	margin-top: 16px !important;
}

/*
 * ====== CGV-pagina (shortcode [oney_conditions]) ==========================
 * Retour Oney 11-09-2026: "payez en plusieurs fois avec Oney" + per
 * financiering de titel + "voir conditions générales" → de CGV-widget van dát
 * document. Zelfde kaart als op de winkelpagina's, zonder chips (de lijst
 * benoemt de financieringen zelf) en zonder band: hij staat in de
 * contentkolom van de pagina.
 */
.oney-kaart--cgv {
	margin: 28px 0 !important;
}

.oney-cgv {
	list-style: none !important;
	margin: 4px 0 0 !important;
	padding: 0 !important;
}

.oney-cgv__rij {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 18px;
	margin: 0 !important;
	padding: 12px 0;
	border-bottom: 1px solid var(--oney-hairline);
}

.oney-cgv__titel {
	font-weight: 600;
	color: var(--oney-inkt);
}

/* Tekstlink in inkt, onderstreept (affordance zonder hover); dubbele klasse
   wint van de `all: unset`-reset van .oney-linkknop. */
.oney-cgv .oney-linkknop.oney-cgv__link {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(23, 24, 28, 0.35);
	color: var(--oney-inkt);
}

.oney-cgv .oney-linkknop.oney-cgv__link:hover {
	color: var(--oney-groen);
	text-decoration-color: var(--oney-groen);
}

.oney-avert__taeg {
	white-space: nowrap;
}

/*
 * Compacte Oney-regel bij de prijs (productpagina): merk + "Payez en plusieurs
 * fois sans frais" + Simuler als tekstlink, waarschuwing eronder. Vervangt de
 * pill-knop "Simuler mon financement" en de link naar de pédagogische pop-in.
 */
.oney-inline {
	margin: 14px 0 4px;
}

.oney-inline__regel {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0 !important;
	/* Kleiner dan de waarschuwing eronder (1.1em), zie .oney-avert. */
	font-size: 0.9em;
	color: var(--oney-inkt);
}

.oney-inline .oney-inline__logo,
.woocommerce .oney-inline__logo {
	height: 22px;
	width: auto;
	margin: 0 !important;
	display: inline-block;
	flex: none;
}

.oney-inline__tekst {
	flex: 1 1 12em;
	min-width: 0;
}

.oney-inline__tekst strong {
	font-weight: 700;
}

.oney-inline__tekst .oney-linkknop.oney-sim {
	display: inline;
	white-space: nowrap;
}

/* Groter dan de regel erboven (0.9em) en dus dan "sans frais" en "Simuler".
   Specifieker dan .oney-avert (twee klassen), zodat de maat niet van de
   volgorde in dit bestand afhangt. */
.oney-inline .oney-inline__avert {
	margin-top: 8px !important;
	font-size: 1.15em !important;
}

/* Simuler: tekstlink in inkt, onderstreept (affordance zonder hover). Dubbele
   klasse: wint van de `all: unset`-reset van .oney-linkknop verderop. */
.oney-linkknop.oney-sim {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(23, 24, 28, 0.35);
	color: var(--oney-inkt);
	font-weight: 600;
}

/*
 * Push-knop "Voir conditions générales financements Oney" (retour 04-09-2026):
 * de enige omrande pill in de kaart, dus ondubbelzinnig klikbaar. Wint van de
 * onderstreepte tekstlinkstijl van .oney-widget__cgv.
 */
.oney-widget__cgv .oney-knop,
.oney-knop {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 18px;
	border: 1.5px solid var(--oney-inkt);
	border-radius: 999px;
	font-weight: 600;
	font-size: 1em;
	color: var(--oney-inkt);
	text-decoration: none !important;
	line-height: 1.2;
}

.oney-knop:hover {
	border-color: var(--oney-groen);
	background: rgba(129, 188, 0, 0.08);
	color: var(--oney-inkt);
}

/* De vermelding als drukwerk: kolommen van ±22em, maximaal drie — dat houdt
   de regels op krantenzetselbreedte (±55 tekens) in plaats van brede lappen. */
.oney-kaart .oney-widget--notice {
	columns: 22em 3;
	column-gap: 44px;
	column-rule: 1px solid var(--oney-hairline);
	font-size: 0.78em;
	line-height: 1.6;
	color: var(--oney-gedempt);
	hyphens: auto;
}

/* Twee families in band = twee officiële documenten, gescheiden als één stuk
   drukwerk in plaats van twee losse lappen. */
.oney-kaart .oney-widget--notice + .oney-widget--notice {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--oney-hairline);
}

@media (max-width: 760px) {
	/* Edge-to-edge sectie op de telefoon: identieke marges op élke pagina,
	   wat de container van het thema ook doet. */
	.oney-widget-band__inner {
		padding: 0 0 40px;
	}

	.oney-widget-band {
		margin-inline: calc(50% - 50vw);
	}

	.oney-kaart {
		padding: 20px 20px 22px;
		border-radius: 0;
		border-inline: none;
	}

	.oney-kaart .oney-widget--notice {
		columns: 1;
		/* op één brede kolom is afbreken ruis ("cré-dit", "ré-servée") */
		hyphens: none;
	}

	.oney-kaart__chips {
		margin-left: 0 !important;
	}

	/* Ook op de telefoon blijft de waarschuwing het grootste lettertype:
	   1.15em tegenover de titel (1em), 1.05em tegenover de regel (0.9em). */
	.oney-avert {
		font-size: 1.15em !important;
	}

	.oney-inline .oney-inline__avert {
		font-size: 1.05em !important;
	}

	/* CGV-lijst: titel en link onder elkaar. */
	.oney-cgv__rij {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	/* Tap targets: 44px hit-hoogte; de extra hoogte vult de witruimte in
	   plaats van de kolom te rekken. */
	.oney-kaart__voet .oney-linkknop,
	.oney-widget__cgv .oney-linkknop,
	.oney-cgv .oney-linkknop {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.oney-knop {
		padding-inline: 20px;
	}

	.oney-widget__cgv {
		margin: 2px 0 0 !important;
	}
}

.oney-widget--notice p {
	margin: 0 0 0.7em !important;
	/* wél mid-alinea laten breken: met avoid duwt de lange Modalités-alinea
	   alles in één kolom en balanceert er niets meer */
}

.oney-widget--notice p:last-child {
	margin-bottom: 0 !important;
}

/* Kaartvoet: acties als voetregel met hairline — spiegelt de kop. Alles links,
   in vaste volgorde, zodat de CGV-knop op elke pagina op dezelfde plek staat. */
.oney-kaart__voet {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px 18px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--oney-hairline);
}

.oney-kaart__voet .oney-widget__cgv {
	margin: 0 !important;
}

/*
 * Actie-ingangen (buttons met linkgedrag): de CGV als push-knop (.oney-knop),
 * de simulatie als tekstlink mét onderstreping (affordance zonder hover, want
 * touch heeft geen hover). Oney-groen alleen bij interactie.
 * `all: unset` eerst: het zijn <button>s en thema's stylen die zwaar.
 */
.oney-linkknop {
	all: unset;
	box-sizing: border-box;
	font: inherit;
	cursor: pointer;
	color: var(--oney-gedempt);
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.oney-widget__cgv .oney-linkknop {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(23, 24, 28, 0.3);
}

.oney-linkknop:hover {
	color: var(--oney-inkt);
	text-decoration-color: var(--oney-inkt);
}

.oney-linkknop:focus-visible {
	outline: 2px solid var(--oney-groen);
	outline-offset: 2px;
	border-radius: 4px;
}

.oney-kaart__voet .oney-linkknop.oney-sim {
	font-size: 0.9em;
}

.oney-widget__cgv {
	font-size: 0.78em;
}

/* In de kaartvoet is de CGV een echte knop: op kaartformaat, niet in kleine letters. */
.oney-kaart__voet .oney-widget__cgv {
	font-size: 0.85em;
}

/* Checkout: CheckoutWC's linkstijlen (teal, geen underline, laag contrast op
   het grijze gatewayvlak) uit het Oney-vak houden; onze eigen zetting wint. */
.payment_method_oney .oney-widget__cgv .oney-linkknop,
.oney-blocks-content .oney-widget__cgv .oney-linkknop {
	color: var(--oney-gedempt) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	text-decoration-color: rgba(23, 24, 28, 0.3);
}

/* Uitlijnen met de binnenmarge van Oney's simulatiecomponent. */
.payment_method_oney .oney-widget__cgv,
.oney-blocks-content .oney-widget__cgv {
	padding-left: 10px;
}

/*
 * Oney's CGV-modal (.oney-modal) brengt zelf geen sluitknop mee; deze knop wordt
 * er door oneyWcCgvGuard ingehangen. Fixed rechtsboven, dus onafhankelijk van
 * hoe de modal zelf gepositioneerd is. Scroll-vangnet voor kleinere schermen.
 */
body .oney-modal {
	max-height: 100vh;
	overflow-y: auto;
}

/* Titel + sluitknop worden door oneyWcCgvGuard in Oney's CGV-modal gehangen; de knop
   staat bínnen de doos (fixed rechtsboven overlapte het winkelmandje). */
.oney-wc-modal-titel {
	margin: 6px 0 4px !important;
	padding: 0 60px 10px 20px;
	font-weight: 700;
	font-size: 1.05em;
	color: var(--oney-inkt);
	border-bottom: 1px solid var(--oney-hairline);
}

.oney-wc-modal-close {
	position: absolute;
	top: 6px;
	right: 14px;
	z-index: 100000;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: #1f2937;
	color: #fff;
	font-size: 22px;
	line-height: 36px;
	padding: 0;
	cursor: pointer;
}

.oney-wc-modal-close:hover {
	background: #111827;
}

/* In het betaalvak van de Blocks-checkout: als rustig subblok onder de keuze. */
.oney-blocks-content .oney-widget {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	font-size: 0.9em;
}

/* Binnen het betaalvak de volle kaderbreedte gebruiken, zodat de rechts
   uitgelijnde bedragen op dezelfde lijn vallen als de rest van het kader. */
.oney-blocks-content #oney-widget-checkout {
	max-width: none;
}

.oney-blocks-content .oney-widget__cgv {
	margin: 8px 0 0;
	font-size: 0.85em;
}

/* Klassieke checkout (container in de footer): nooit paginabreed. */
#oney-widget-checkout {
	max-width: 680px;
}

/*
 * Laadindicator. Twee gevallen:
 *  - :empty — vóór de eerste aanroep (container nog zonder component);
 *  - .oney-widget--laden — tijdens het (her)laden: Oney's component mount
 *    direct een leeg wit frame en haalt de bedragen daarna pas op, dus de
 *    klasse wordt door oneyWcCheckoutWidget gezet en gaat pas uit zodra er
 *    cijfers in het blok staan (MutationObserver, met 15 s-vangnet).
 * De spinner dooft na 15 s (animatie) voor het geval de widget nooit antwoordt.
 */
#oney-widget-checkout:empty,
#oney-widget-checkout.oney-widget--laden {
	position: relative;
	/* Ongeveer de hoogte van de geladen simulatie, zodat de checkout niet
	   verspringt tijdens het herladen. */
	min-height: 150px;
}

/* Korte uitleg onder de spinner (de widget is uitsluitend Franstalig). */
#oney-widget-checkout:empty::before,
#oney-widget-checkout.oney-widget--laden::before {
	content: "Chargement de votre simulation…";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	margin-top: 24px;
	text-align: center;
	font-size: 0.85em;
	color: #6b7280;
}

/* Het lege frame van het ladende component dimmen zodat de spinner draagt. */
#oney-widget-checkout.oney-widget--laden > * {
	opacity: 0.25;
	transition: opacity 0.15s;
}

#oney-widget-checkout:empty::after,
#oney-widget-checkout.oney-widget--laden::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border: 3px solid rgba(0, 0, 0, 0.12);
	border-top-color: #81bc00; /* Oney-groen */
	border-radius: 50%;
	animation: oney-spin 0.8s linear infinite, oney-spin-fade 15s linear forwards;
}

@keyframes oney-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes oney-spin-fade {
	0%,
	95% {
		opacity: 1;
	}
	to {
		opacity: 0;
		visibility: hidden;
	}
}