/* ==========================================================================
   Helpers for the native Elementor homepage (scripts/build-home-native.php).

   Texts, colours, fonts, spacing, buttons and backgrounds are set in Elementor
   (element panels + Site Settings › Global Colors / Global Fonts / Buttons).
   This file only covers what Elementor (free) cannot set in its panels. It
   never sets padding, gap, margins or colours that Elementor controls, so
   edits made in the editor always win.

   Classes are added in each element's Advanced › CSS Classes.
   ========================================================================== */

/* Words highlighted inside a Heading: <span class="sx-accent">…</span>
   (follows Site Settings › Global Colors › Accent). */
.sx-accent { color: var(--e-global-color-accent, #BDF967); }

/* "sx-sr": heading kept for screen readers and SEO, visually hidden. */
.elementor-widget.sx-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Keyboard focus on Elementor buttons. */
.elementor-button:focus-visible { outline: 2px solid var(--c-focus-light); outline-offset: 3px; }
:is(.hd, .hr, .pr, .fo) .elementor-button:focus-visible { outline-color: var(--c-focus-dark); }

/* Buttons with an arrow ("sx-btn-arrow"): the arrow slides a little on hover. */
.sx-btn-arrow .elementor-button-icon { transition: transform 0.2s ease; }
.sx-btn-arrow .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }

/* ---- Home hero (mockup 2026-10-13): TV with a family + two overlapping cards.
   .hr-visual has the proportions of the TV visual (900 × 730); the cards are
   placed in % of it, so the composition scales as one block on every screen. */
.e-con.hr-media { justify-content: center; }
.e-con.hr-visual { position: relative; aspect-ratio: 900 / 730; isolation: isolate; }
.e-con.hr-visual::before {
	content: "";
	position: absolute;
	inset: 6% 2% 2% 4%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(189, 249, 103, 0.24), rgba(189, 249, 103, 0.08) 55%, transparent);
	pointer-events: none;
}
.hr-visual .elementor-widget.hr-visual-tv { position: absolute; inset: 0; z-index: 1; width: 100%; margin: 0; }
.hr-visual .hr-visual-tv img { display: block; width: 100%; height: 100%; object-fit: contain; }
.e-con.hr-card {
	position: absolute;
	z-index: 2;
	overflow: hidden;
	border: 1.5px solid rgba(189, 249, 103, 0.6);
	border-radius: 14px;
	box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.7), 0 0 26px -6px rgba(189, 249, 103, 0.45);
	transition: transform 0.25s ease;
}
.e-con.hr-card--films { top: 5.5%; left: 47.6%; width: 47.2%; aspect-ratio: 425 / 262; }
.e-con.hr-card--kids { top: 62.3%; left: 66.7%; width: 29.1%; aspect-ratio: 262 / 223; }
.e-con.hr-card:hover { transform: translateY(-3px); }
.hr-card .elementor-widget.hr-card-img { position: absolute; inset: 0; width: 100%; margin: 0; }
.hr-card .hr-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hr-card .elementor-widget.hr-card-label { position: absolute; left: 7%; bottom: 9%; z-index: 1; width: auto; margin: 0; }
.hr-card .hr-card-label .elementor-icon-list-text { font-size: clamp(12px, 0.55rem + 0.6vw, 18px); white-space: nowrap; }
@media (max-width: 1024px) {
	.e-con.hr-media { width: 100%; max-width: 640px; align-self: center; }
}
@media (max-width: 767px) {
	.e-con.hr-card { border-radius: 10px; }
	.hr-card .elementor-widget.hr-card-label { left: 6%; bottom: 7%; }
}
@media (prefers-reduced-motion: reduce) {
	.e-con.hr-card { transition: none; }
	.e-con.hr-card:hover { transform: none; }
}

/* ---- Categories: six cards (cg-grid > cg-card = cg-media image + cg-body text) */
.e-con.cg-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.e-con.cg-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(7, 21, 15, 0.45); }
/* Picture: the whole upload as a centred thumbnail (Image widget, 180 px wide,
   set in Elementor) on a light panel – no fixed height, no cover, no zoom. */
.e-con.cg-media { flex: none; }
.elementor-widget.cg-thumb img { display: block; height: auto; margin-inline: auto; box-shadow: 0 14px 26px -16px rgba(7, 21, 15, 0.55); }
.e-con.cg-body { flex-grow: 1; }

/* ---- Advantages: four equal cards (.fe-card) ------------------------------- */
.elementor-widget.fe-card,
.elementor-widget.fe-card > .elementor-widget-container { height: 100%; }
.elementor-widget.fe-card { transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.elementor-widget.fe-card:hover { border-color: var(--c-accent-ink); box-shadow: var(--shadow-md); }
/* Device cards (icon boxes): one-word titles, so no room reserved for a second line –
   the text sits right under the title, at the same level in every card. */
.fe-card .elementor-icon-box-title { min-height: 0; margin-bottom: 0; }

/* ---- Home: "Zo bestel je je abonnement" numbered steps ---------------------- */
.hm-steps ol { margin: 0; padding-inline-start: 1.25em; }
.hm-steps li { margin: 0 0 8px; padding-inline-start: 4px; }
.hm-steps li:last-child { margin-bottom: 0; }
.hm-steps li::marker { color: var(--c-accent-ink); font-weight: var(--fw-bold); }

/* ---- Devices: composition image (.dv-visual) -------------------------------- */
.dv-visual img { display: block; width: 100%; height: auto; }
@media (max-width: 1024px) {
	.e-con.dv-media { max-width: 640px; align-self: center; }
}

/* ---- Pricing: premium cinema tickets (scripts/build-pricing-tickets.php) ---- */
/* Subtle cinema lighting over the band background (set in Elementor): two warm
   spotlights from the top corners, a faint lime glow behind the tickets, a darker floor. */
.e-con.pr-cinema { isolation: isolate; overflow: hidden; }
.e-con.pr-cinema::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		conic-gradient(from 148deg at 12% -8%, transparent 0deg, rgba(255, 233, 180, 0.075) 12deg, rgba(255, 233, 180, 0.03) 24deg, transparent 34deg),
		conic-gradient(from 178deg at 88% -8%, transparent 0deg, rgba(255, 233, 180, 0.03) 10deg, rgba(255, 233, 180, 0.075) 22deg, transparent 34deg),
		radial-gradient(40% 36% at 12% 0%, rgba(255, 233, 180, 0.1), transparent 70%),
		radial-gradient(40% 36% at 88% 0%, rgba(255, 233, 180, 0.1), transparent 70%),
		radial-gradient(55% 40% at 50% 55%, rgba(189, 249, 103, 0.06), transparent 70%),
		linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35));
}

/* Standaard / Premium switch drawn as one pill. */
.pr-tabs .e-n-tabs-heading {
	width: fit-content;
	max-width: 100%;
	padding: 4px;
	border: 1px solid rgba(243, 239, 228, 0.18);
	border-radius: var(--radius-pill);
}
.pr-tabs .e-n-tabs-heading { margin-inline: auto; } /* Centred under the title. */

/* Ticket shape: real notches cut on both sides at the tear line. --tear is the
   height of .pr-ticket-top: 232px by default (its min-height in Elementor), then
   measured exactly by assets/js/sections.js. */
.e-con.pr-ticket {
	--notch: 13px;
	--tear: 232px;
	-webkit-mask:
		radial-gradient(circle var(--notch) at 0 var(--tear), transparent 97%, #000) left / 51% 100% no-repeat,
		radial-gradient(circle var(--notch) at 100% var(--tear), transparent 97%, #000) right / 51% 100% no-repeat;
	mask:
		radial-gradient(circle var(--notch) at 0 var(--tear), transparent 97%, #000) left / 51% 100% no-repeat,
		radial-gradient(circle var(--notch) at 100% var(--tear), transparent 97%, #000) right / 51% 100% no-repeat;
	transition: transform 0.25s ease;
}
.e-con.pr-ticket:hover { transform: translateY(-4px); }
/* Decorative barcode at the bottom of each ticket. */
.e-con.pr-ticket-body::after {
	content: "";
	display: block;
	align-self: center;
	width: 128px;
	height: 26px;
	margin-top: 4px;
	background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 3px, currentColor 3px 4px, transparent 4px 7px, currentColor 7px 10px, transparent 10px 12px, currentColor 12px 13px, transparent 13px 16px);
	color: var(--e-global-color-sxivory, #F3EFE4);
	opacity: 0.35;
}
.pr-ticket--featured .e-con.pr-ticket-body::after { color: var(--e-global-color-sxdark, #0A1D16); opacity: 0.55; }
/* Key differences above the tickets; the last item links to the comparison. */
.pr-tier .elementor-icon-list-item:last-child a .elementor-icon-list-text { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(189, 249, 103, 0.6); }

/* "€24 | 50% korting": old price struck through, discount in lime (dark on the lime ticket). */
.pr-was del { text-decoration-thickness: 1px; }
.pr-was .pr-sep { margin-inline: 4px; opacity: 0.5; }
.pr-was strong { color: var(--e-global-color-accent, #BDF967); font-weight: var(--fw-semibold); }
.pr-ticket--featured .pr-was strong { color: inherit; }
/* Inline text for screen readers only (e.g. "Was" before the old price). */
.sx-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Quality labels HD / FHD / 4K as small outlined tags (colour = list text colour). */
.pr-quality .elementor-icon-list-items .elementor-icon-list-item { padding: 2px 8px; border: 1px solid currentColor; border-radius: 6px; }
.pr-quality .elementor-icon-list-text { color: inherit; }

@media (prefers-reduced-motion: reduce) {
	.e-con.pr-ticket { transition: none; }
	.e-con.pr-ticket:hover { transform: none; }
}

/* ---- FAQ ------------------------------------------------------------------ */
/* Rounded box: clip the rows, no separator above the first question. */
.elementor-widget.fq-list { overflow: hidden; }
.fq-list .e-n-accordion-item:first-child > .e-n-accordion-item-title { border-top-width: 0; }

/* ==========================================================================
   Header – .samen-header (Elementor template "Header – TV Provider",
   built by scripts/build-header.php).
   Colours, fonts, sizes and spacing are set in Elementor. This only adds what
   its panels cannot: keyboard focus, the active-page line, the hidden label of
   the menu button and the mobile dropdown. Keep the 3 colours below in sync
   with the template (background, text, accent).
   ========================================================================== */
.samen-header {
	--samen-bg: #071A17;
	--samen-text: #F2F7F5;
	--samen-accent: #B9F566;
	--samen-line: rgba(242, 247, 245, 0.12);
}

/* Visible keyboard focus on every link and button. */
.samen-header a:focus-visible,
.samen-header summary:focus-visible,
.samen-header .elementor-button:focus-visible {
	outline: 2px solid var(--samen-accent);
	outline-offset: 4px;
	border-radius: 6px;
}

/* Discreet lime line: faint on hover, full on the active page (aria-current set by sections.js). */
.samen-header .samen-header__links .elementor-icon-list-text {
	text-decoration: underline 2px transparent;
	text-underline-offset: 10px;
	transition: text-decoration-color 0.2s ease;
}
.samen-header .samen-header__links a:hover .elementor-icon-list-text { text-decoration-color: rgba(185, 245, 102, 0.45); }
.samen-header .samen-header__links a[aria-current="page"] .elementor-icon-list-text { text-decoration-color: var(--samen-accent); }

/* Menu button: icon only; the word "Menu" stays for screen readers. The accordion panel itself stays empty. */
.samen-header .samen-header__toggle .e-n-accordion-item-title-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
/* The accordion panel stays empty; 1px (not 0) so Elementor runs its open/close cycle and updates aria-expanded. */
.samen-header .samen-header__toggle .e-n-accordion-item > .e-con { height: 1px; min-height: 0; overflow: hidden; }

/* Tablet and mobile: the <nav> becomes a dropdown under the header bar. */
@media (max-width: 1024px) {
	.samen-header .samen-header__nav.e-con {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 100;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		width: auto;
		padding: 8px 24px 24px;
		border-top: 1px solid var(--samen-line);
		box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.6);
	}
	.samen-header.is-open .samen-header__nav.e-con,
	.samen-header:has(.samen-header__toggle details[open]) .samen-header__nav.e-con { display: flex; }
	.samen-header .samen-header__links .elementor-icon-list-items.elementor-inline-items { flex-direction: column; align-items: stretch; }
	.samen-header .samen-header__links .elementor-icon-list-item > a { min-height: 48px; padding-block: 12px; border-bottom: 1px solid var(--samen-line); }
	.samen-header .samen-header__links .elementor-icon-list-text { text-underline-offset: 6px; }
	.samen-header .samen-header__nav .samen-header__cta { width: 100%; }
}
@media (max-width: 767px) {
	.samen-header .samen-header__nav.e-con { padding-inline: 16px; }
}

/* ==========================================================================
   Contact form – widget "Contactformulier (TV Provider)" (.samen-form).
   Colours, padding and corner radius come from the widget's Style tab
   (CSS variables below are only the fallbacks).
   ========================================================================== */
.samen-form {
	--sf-card: #0A1D16;
	--sf-card-border: #24473A;
	--sf-title: #F3F7F4;
	--sf-muted: #A7B9B0;
	--sf-label: #F3F7F4;
	--sf-required: #FF8F86;
	--sf-input-bg: #FFFFFF;
	--sf-input-text: #0D1B15;
	--sf-input-border: #748880;
	--sf-focus: #BDF967;
	--sf-button-bg: #BDF967;
	--sf-button-text: #0A1D16;
	--sf-button-hover: #AAE84F;
	padding: 32px;
	border: 1px solid var(--sf-card-border);
	border-radius: 20px;
	background: var(--sf-card);
	color: var(--sf-label);
}
.samen-form .samen-form__title { margin: 0 0 8px; color: var(--sf-title); }
.samen-form .samen-form__intro { margin: 0 0 24px; color: var(--sf-muted); font-size: 16px; line-height: 1.6; }
.samen-form .samen-form__form { display: grid; gap: 16px; margin: 0; }
.samen-form .samen-form__field { display: grid; gap: 6px; }
.samen-form .samen-form__label { color: var(--sf-label); font-size: 14px; font-weight: 600; line-height: 1.4; }
.samen-form .samen-form__req { margin-left: 2px; color: var(--sf-required); }
.samen-form .samen-form__input {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--sf-input-border);
	border-radius: 10px;
	background: var(--sf-input-bg);
	color: var(--sf-input-text);
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
}
.samen-form textarea.samen-form__input { min-height: 132px; resize: vertical; }
.samen-form .samen-form__input::placeholder { color: var(--sf-input-text); opacity: 0.55; }
.samen-form .samen-form__input:focus { border-color: var(--sf-input-border); outline: 2px solid var(--sf-focus); outline-offset: 2px; }
.samen-form .samen-form__submit,
.samen-form .samen-form__submit:focus {
	justify-self: start;
	min-height: 48px;
	padding: 12px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--sf-button-bg);
	color: var(--sf-button-text);
	font-family: var(--e-global-typography-accent-font-family, "Inter"), sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.samen-form .samen-form__submit:hover { background: var(--sf-button-hover); color: var(--sf-button-text); }
.samen-form .samen-form__submit:focus-visible { outline: 2px solid var(--sf-focus); outline-offset: 3px; }
/* Drop-down field (control "Keuzelijst"): own chevron, placeholder colour while empty. */
.samen-form .samen-form__select { position: relative; display: block; color: var(--sf-input-text); }
.samen-form .samen-form__select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}
.samen-form select.samen-form__input { padding-right: 48px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.samen-form select.samen-form__input:has(option[value=""]:checked) { color: color-mix(in srgb, var(--sf-input-text) 55%, var(--sf-input-bg)); }
.samen-form select.samen-form__input option { color: var(--sf-input-text); }
/* Button: optional arrow (slides on hover) and full width. */
.samen-form .samen-form__submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.samen-form .samen-form__arrow { flex: none; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.samen-form .samen-form__submit:hover .samen-form__arrow { transform: translateX(4px); }
.samen-form--btn-full .samen-form__submit,
.samen-form--btn-full .samen-form__submit:focus { justify-self: stretch; min-height: 56px; font-size: 17px; }
/* Short line with a check under the button. */
.samen-form .samen-form__note { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--sf-note, #BDF967); font-size: 15px; font-weight: 500; line-height: 1.4; }
.samen-form .samen-form__check { flex: none; }
.samen-form .samen-form__check circle { fill: currentColor; }
.samen-form .samen-form__check path { fill: none; stroke: var(--sf-card); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.samen-form .samen-form__privacy { margin: 0; color: var(--sf-muted); font-size: 13px; line-height: 1.5; }
.samen-form .samen-form__privacy a { color: inherit; text-decoration: underline; }
.samen-form .samen-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.samen-form .samen-form__notice { margin: 0 0 16px; padding: 12px 16px; border: 1px solid; border-radius: 10px; color: var(--sf-title); font-size: 15px; line-height: 1.5; }
.samen-form .samen-form__notice--ok { border-color: var(--sf-focus); background: rgba(189, 249, 103, 0.12); }
.samen-form .samen-form__notice--error { border-color: var(--sf-required); background: rgba(255, 143, 134, 0.12); }
@media (max-width: 767px) {
	.samen-form .samen-form__submit { justify-self: stretch; }
}

/* ==========================================================================
   Order modal – widget "Bestelmodal (TV Provider)" (<dialog id="bestellen">).
   Colours come from the widget's Style tab (variables below are fallbacks).
   Never set "display" on .samen-order: the closed <dialog> must stay hidden.
   ========================================================================== */
.samen-order {
	--so-bg: #0A1D16;
	--so-text: #F3EFE4;
	--so-muted: #A7B9B0;
	--so-field: #133227;
	--so-border: #2C5446;
	--so-accent: #BDF967;
	--so-on-accent: #0A1D16;
	--so-error: #FF8F86;
	position: relative;
	width: min(560px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 32px;
	overflow: auto;
	border: 1px solid var(--so-border);
	border-radius: 20px;
	background: var(--so-bg);
	color: var(--so-text);
	font-family: var(--e-global-typography-text-font-family, "Inter"), sans-serif;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
}
dialog.samen-order::backdrop { background: rgba(3, 10, 8, 0.72); backdrop-filter: blur(4px); }
dialog.samen-order[open] { animation: samen-order-in 0.2s ease; }
@keyframes samen-order-in { from { opacity: 0; transform: translateY(12px); } }
.samen-order.samen-order--preview { width: 100%; max-height: none; margin: 0; }
.samen-order__editor-note { margin: 0 0 12px; padding: 10px 14px; border: 1px dashed #748880; border-radius: 10px; background: #EFF4F1; color: #0D1B15; font-size: 13px; }

.samen-order .samen-order__close,
.samen-order .samen-order__close:focus {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--so-border);
	border-radius: 999px;
	background: transparent;
	color: var(--so-text);
	cursor: pointer;
}
.samen-order .samen-order__close:hover { border-color: var(--so-accent); background: transparent; color: var(--so-accent); }
.samen-order .samen-order__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.samen-order .samen-order__title {
	margin: 0 52px 18px 0;
	color: var(--so-text);
	font-family: var(--e-global-typography-primary-font-family, "Outfit"), sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}
.samen-order .samen-order__summary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 24px;
	padding: 16px;
	border: 1px dashed rgba(243, 239, 228, 0.24);
	border-radius: 14px;
	background: rgba(243, 239, 228, 0.04);
}
.samen-order .samen-order__summary dt { margin: 0 0 4px; color: var(--so-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.samen-order .samen-order__summary dd { margin: 0; color: var(--so-text); font-size: 16px; font-weight: 600; line-height: 1.3; }
.samen-order .samen-order__summary .samen-order__price { color: var(--so-accent); font-family: var(--e-global-typography-primary-font-family, "Outfit"), sans-serif; font-size: 22px; font-weight: 700; }
.samen-order .samen-order__form { display: grid; gap: 18px; margin: 0; }
.samen-order .samen-order__field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.samen-order .samen-order__label { padding: 0; color: var(--so-text); font-size: 14px; font-weight: 600; line-height: 1.4; }
.samen-order .samen-order__req { color: var(--so-accent); }
.samen-order .samen-order__input-wrap { position: relative; }
.samen-order .samen-order__input {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--so-border);
	border-radius: 10px;
	background: var(--so-field);
	color: var(--so-text);
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
}
.samen-order .samen-order__input-wrap .samen-order__input { padding-right: 46px; }
.samen-order .samen-order__input::placeholder { color: var(--so-muted); opacity: 1; }
.samen-order .samen-order__input:focus { border-color: var(--so-accent); outline: 2px solid var(--so-accent); outline-offset: 1px; }
.samen-order .samen-order__input[aria-invalid="true"] { border-color: var(--so-error); }
.samen-order .samen-order__icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.samen-order .samen-order__icon--field { position: absolute; top: 50%; right: 16px; width: 20px; height: 20px; transform: translateY(-50%); color: var(--so-muted); pointer-events: none; }
.samen-order .samen-order__error { margin: 0; color: var(--so-error); font-size: 13px; line-height: 1.4; }
.samen-order .samen-order__choices { display: flex; flex-wrap: wrap; gap: 10px; }
.samen-order .samen-order__choices legend { margin-bottom: 8px; }
.samen-order .samen-order__choice {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--so-border);
	border-radius: 10px;
	background: var(--so-field);
	color: var(--so-text);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.samen-order .samen-order__choice:hover { border-color: var(--so-muted); }
.samen-order .samen-order__choice:has(input:checked) { border-color: var(--so-accent); background: rgba(189, 249, 103, 0.1); }
.samen-order .samen-order__choice:has(input:focus-visible) { outline: 2px solid var(--so-accent); outline-offset: 2px; }
.samen-order .samen-order__choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--so-accent); }
.samen-order .samen-order__alert { margin: 0; padding: 10px 14px; border: 1px solid var(--so-error); border-radius: 10px; background: rgba(255, 143, 134, 0.1); font-size: 14px; line-height: 1.5; }
.samen-order .samen-order__submit,
.samen-order .samen-order__submit:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	justify-self: start;
	min-height: 52px;
	padding: 14px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--so-accent);
	color: var(--so-on-accent);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	cursor: pointer;
}
.samen-order .samen-order__submit:hover { background: var(--so-accent); color: var(--so-on-accent); filter: brightness(0.94); }
.samen-order .samen-order__submit:disabled { opacity: 0.7; cursor: wait; }
.samen-order .samen-order__submit:focus-visible,
.samen-order .samen-order__close:focus-visible { outline: 2px solid var(--so-accent); outline-offset: 3px; }
.samen-order .samen-order__note { margin: 0; color: var(--so-muted); font-size: 13px; line-height: 1.5; }
.samen-order .samen-order__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.samen-order .samen-order__done { display: grid; justify-items: center; gap: 12px; padding: 24px 0 8px; text-align: center; }
.samen-order .samen-order__done[hidden],
.samen-order .samen-order__panel[hidden] { display: none; }
.samen-order .samen-order__done .samen-order__title { margin: 0; }
.samen-order .samen-order__done .samen-order__submit { justify-self: center; }
.samen-order .samen-order__done-icon { width: 56px; height: 56px; fill: none; stroke: var(--so-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Mobile: bottom sheet. */
@media (max-width: 600px) {
	dialog.samen-order {
		width: 100%;
		max-height: 92dvh;
		margin: auto 0 0;
		padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
		border-radius: 20px 20px 0 0;
	}
	.samen-order .samen-order__summary { gap: 8px; padding: 12px; }
	.samen-order .samen-order__summary .samen-order__price { font-size: 18px; }
	.samen-order .samen-order__submit { justify-self: stretch; }
	.samen-order .samen-order__choice { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	dialog.samen-order[open] { animation: none; }
	.samen-form .samen-form__submit,
	.samen-form .samen-form__arrow { transition: none; }
	.e-con.cg-card,
	.elementor-widget.fe-card,
	.sx-btn-arrow .elementor-button-icon { transition: none; }
	.e-con.cg-card:hover { transform: none; }
	.samen-header .samen-header__links .elementor-icon-list-text { transition: none; }
}

/* Editor note above an inserted template (widget "Sjabloon invoegen"); not shown on the site. */
.samen-template__note { margin: 0; padding: 8px 12px; background: #FFF8D6; color: #3B3200; font-size: 13px; }

/* Empty table header cell whose title is only for screen readers ("sx-vh-cell"). */
.elementor-widget.sx-vh-cell .elementor-heading-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Abonnementen page – comparison table (.ab-row): on mobile the "Inbegrepen" cells show
   only the check mark; the word stays for screen readers. */
@media (max-width: 767px) {
	.ab-row .elementor-widget-icon-list .elementor-icon-list-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.ab-row .elementor-widget-icon-list .elementor-icon-list-icon { padding: 0; }
}

/* ==========================================================================
   Home – section "IPTV abonnement" (#hm-abonnement.hm-abo--rings): layout of the
   mockup of 2026-10-13 in the site colours. Colours of texts, cards and button
   come from Elementor (global colours); the rules below draw the circles: a dark
   green disc with a lime ring and a soft lime glow.
   ========================================================================== */
.e-con.hm-ring {
	position: relative;
	z-index: 2;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 36%, var(--e-global-color-sxsurface, #133227), var(--e-global-color-sxdark, #0A1D16) 70%);
	box-shadow: 0 0 0 6px var(--e-global-color-sxwhite, #FFFFFF), 0 0 30px 6px rgba(189, 249, 103, 0.35), 0 18px 40px -16px rgba(7, 21, 15, 0.55);
}
.e-con.hm-ring::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 3px;
	border-radius: 50%;
	background: var(--e-global-color-accent, #BDF967);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.e-con.hm-ring--2::before { background: linear-gradient(135deg, var(--e-global-color-accent, #BDF967), var(--e-global-color-sxink, #1E6B3A)); }
.hm-ring .hm-ring-icon .elementor-icon { filter: drop-shadow(0 0 8px rgba(189, 249, 103, 0.55)); }
.hm-ring .elementor-widget-heading .elementor-heading-title { margin: 0; }
.e-con.hm-tier-card { position: relative; z-index: 1; flex-grow: 1; box-shadow: var(--shadow-md); } /* Same height for both cards. */

/* Containers used as lists (HTML tag ul / li, inc/list-containers.php): no bullets. */
:is(ul, ol).e-con,
li.e-con { list-style: none; }

/* ==========================================================================
   Home – free trial (#hm-gratis, mockup 2026-10-13) in the site colours (set in
   Elementor): white band, light card panel, photo with rounded corners and a
   lime "GRATIS" badge over its top-left corner.
   ========================================================================== */
/* Words in dark green inside a Heading: <span class="sx-ink">…</span>. */
.sx-ink { color: var(--e-global-color-sxink, #1E6B3A); }

.e-con.hm-gratis-panel { position: relative; isolation: isolate; }
.e-con.hm-gratis-panel::before,
.e-con.hm-gratis-panel::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	background: var(--e-global-color-sxiconbg, #E1EDE4);
	opacity: 0.9;
	pointer-events: none;
}
.e-con.hm-gratis-panel::before { top: -6%; left: -2%; width: 30%; height: 70%; }
.e-con.hm-gratis-panel::after { right: -2%; bottom: -10%; width: 16%; height: 34%; opacity: 0.55; }

.e-con.hm-gratis-media { position: relative; }
.hm-gratis-img img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 24px 50px -24px rgba(7, 21, 15, 0.45); }
/* Badge: covers the top-left corner of the photo, scales with it. */
.hm-gratis-media .elementor-widget.hm-gratis-badge { position: absolute; top: -6%; left: -3.8%; z-index: 2; width: 23%; margin: 0; aspect-ratio: 1; }
.hm-gratis-badge .elementor-heading-title {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--e-global-color-accent, #BDF967);
	font-size: clamp(14px, 0.6rem + 1.1vw, 28px);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	transform: rotate(-10deg);
	box-shadow: 0 12px 26px -12px rgba(7, 21, 15, 0.5);
}
@media (max-width: 767px) {
	.hm-gratis-img img { border-radius: 16px; }
	.e-con.hm-gratis-panel::before,
	.e-con.hm-gratis-panel::after { display: none; }
}

/* Title blocks of sections with cards: centred block and text (scripts/center-card-heads.php). */
.e-con.sx-head-center { margin-inline: auto; text-align: center; }

/* ==========================================================================
   Home – "Waarom kiezen voor TV Provider?" (#fe-voordelen.fe--warm), mockup of
   2026-10-13 in the site palette (global colours only).
   ========================================================================== */
.e-con.fe--warm { isolation: isolate; }
.e-con.fe--warm::after {
	content: "";
	position: absolute;
	top: -12%;
	left: 50%;
	z-index: -1;
	width: 120%;
	height: 46%;
	border-radius: 50%;
	background: var(--e-global-color-sxwhite, #FFFFFF);
	opacity: 0.7;
	transform: translateX(-50%);
	pointer-events: none;
}
/* Eyebrow between two thin lines. */
:is(.fe-eyebrow-lines, .sx-eyebrow-lines) .elementor-heading-title { display: inline-flex; align-items: center; gap: 16px; }
:is(.fe-eyebrow-lines, .sx-eyebrow-lines) .elementor-heading-title::before,
:is(.fe-eyebrow-lines, .sx-eyebrow-lines) .elementor-heading-title::after { content: ""; width: 56px; height: 1.5px; background: currentColor; opacity: 0.45; }
/* Small rays on both sides of the H2, spreading away from the title (not arrows). */
.fe-title-spark .elementor-heading-title { position: relative; display: inline-block; padding-inline: 56px; }
.fe-title-spark .elementor-heading-title::before,
.fe-title-spark .elementor-heading-title::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 36px;
	height: 40px;
	background: var(--e-global-color-sxink, #1E6B3A);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 40'%3E%3Cg stroke='%23000' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M4 13L13 4'/%3E%3Cpath d='M8 20h18'/%3E%3Cpath d='M4 27l9 9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 40'%3E%3Cg stroke='%23000' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M4 13L13 4'/%3E%3Cpath d='M8 20h18'/%3E%3Cpath d='M4 27l9 9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0.8;
	transform: translateY(-50%);
}
.fe-title-spark .elementor-heading-title::before { left: 0; transform: translateY(-50%) scaleX(-1); }
.fe-title-spark .elementor-heading-title::after { right: 0; }
@media (max-width: 767px) {
	.fe-title-spark .elementor-heading-title { padding-inline: 0; }
	.fe-title-spark .elementor-heading-title::before,
	.fe-title-spark .elementor-heading-title::after { display: none; }
	:is(.fe-eyebrow-lines, .sx-eyebrow-lines) .elementor-heading-title::before,
	:is(.fe-eyebrow-lines, .sx-eyebrow-lines) .elementor-heading-title::after { width: 32px; }
}

/* Cards: soft shadow, illustration fading into the card, titles aligned. */
.e-con.fe-tile { box-shadow: 0 14px 34px -22px rgba(7, 21, 15, 0.35); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.e-con.fe-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -22px rgba(7, 21, 15, 0.45); }
.fe-tile .elementor-widget.fe-illu { width: 100%; margin: 0; padding: 16px 16px 0; }
.fe-tile .fe-illu img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 3; /* Same height for the four illustrations. */
	object-fit: contain;
	-webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%);
	mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%);
}
.fe-tile .elementor-heading-title { margin: 0; }
/* Titles start on the same line in every card; room for two lines, so the texts line up too. */
@media (min-width: 768px) {
	.fe-tile .fe-tile-title .elementor-heading-title { min-height: 2.4em; }
}
@media (prefers-reduced-motion: reduce) {
	.e-con.fe-tile { transition: none; }
	.e-con.fe-tile:hover { transform: none; }
}

/* ==========================================================================
   Home – wave between the hero and the pricing tickets (#hm-golf, 2026-10-13).
   Above: hero colour (band background, global sxdark); the wave fills with the
   pricing band colour (global sxdark2); thin lime outline. Decorative SVG.
   ========================================================================== */
.e-con.hm-wave { line-height: 0; }
.hm-wave .elementor-widget.hm-wave-html { width: 100%; margin: 0; }
.hm-wave .hm-wave-svg { display: block; width: 100%; height: 70px; overflow: visible; }
.hm-wave .hm-wave-fill { fill: var(--e-global-color-sxdark2, #0E2A20); }
.hm-wave .hm-wave-line {
	fill: none;
	stroke: var(--e-global-color-accent, #BDF967);
	stroke-opacity: 0.35;
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
	filter: drop-shadow(0 0 6px rgba(189, 249, 103, 0.35));
}
@media (max-width: 1024px) {
	.hm-wave .hm-wave-svg { height: 50px; }
}
@media (max-width: 767px) {
	.hm-wave .hm-wave-svg { height: 35px; }
}

/* ==========================================================================
   Home – harmonised cards (scripts/harmonize-home.php, 2026-10-13): one soft
   shadow and one hover lift for every card type (radius 18 is set in Elementor).
   ========================================================================== */
.e-con:is(.cg-card, .fe-tile, .hm-tier-card) { box-shadow: 0 14px 34px -22px rgba(7, 21, 15, 0.35); }
.e-con.dv-item { filter: drop-shadow(0 10px 18px rgba(7, 21, 15, 0.08)); transition: transform 0.25s ease; }
.e-con.dv-item:hover { transform: translateY(-4px); }
.elementor-widget.fq-list { box-shadow: 0 14px 34px -22px rgba(7, 21, 15, 0.3); }
@media (prefers-reduced-motion: reduce) {
	.e-con.dv-item { transition: none; }
	.e-con.dv-item:hover { transform: none; }
}

/* ==========================================================================
   Page "Gratis proberen" – request section (#gp-aanvraag, mockup 2026-10-13):
   numbered steps (<ol>) joined by a thin line, a check before the note, and a
   photo that fills the column down to the bottom of the form card (desktop).
   Colours, fonts and spacing are set in Elementor; this only draws shapes.
   ========================================================================== */
.gp-request .elementor-widget.gp-badge .elementor-icon-list-item { gap: 0; }
li.e-con.gp-step { position: relative; }
li.e-con.gp-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 52px;
	bottom: -20px; /* step list gap 28 px − 8 px */
	left: 21px;
	width: 2px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--e-global-color-sxink, #1E6B3A) 25%, transparent);
}
.gp-step .elementor-widget.gp-step-num { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; }
.gp-note p { position: relative; padding-left: 40px; }
.gp-note p::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--e-global-color-sxdark, #0A1D16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F7F4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.4l3.3 3.3L17 9'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.gp-note strong { color: var(--e-global-color-primary, #0D1B15); }
.elementor-widget.gp-photo { position: relative; min-height: 260px; }
.elementor-widget.gp-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
	box-shadow: 0 24px 50px -28px rgba(7, 21, 15, 0.45);
}
.gp-form .samen-form { height: 100%; }
@media (max-width: 1024px) {
	.elementor-widget.gp-photo { min-height: 0; }
	.elementor-widget.gp-photo img { position: static; height: auto; aspect-ratio: 703 / 371; border-radius: 16px; }
	.gp-form .samen-form { height: auto; }
}
@media (max-width: 767px) {
	li.e-con.gp-step:not(:last-child)::after { top: 48px; left: 19px; bottom: -16px; } /* gap 24 px on mobile */
}

/* ==========================================================================
   Divider between a dark hero and the pricing band (scripts/lib-divider.php,
   2026-10-13): thin lime gradient line on the boundary of the two bands and a
   dark-green circle with a chevron (link to the pricing). The divider has no
   height and sits above the next band (z-index set in Elementor).
   ========================================================================== */
.sx-divider-band .elementor-widget.sx-divider-html { width: 100%; margin: 0; }
.sx-divider { position: relative; height: 0; }
.sx-divider__line {
	position: absolute;
	top: -0.5px;
	right: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		color-mix(in srgb, var(--e-global-color-accent, #BDF967) 40%, transparent) 22%,
		var(--e-global-color-accent, #BDF967) 50%,
		color-mix(in srgb, var(--e-global-color-accent, #BDF967) 40%, transparent) 78%,
		transparent 100%);
	box-shadow: 0 0 10px color-mix(in srgb, var(--e-global-color-accent, #BDF967) 25%, transparent);
}
.sx-divider__dot {
	position: absolute;
	top: 0;
	left: 50%;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid color-mix(in srgb, var(--e-global-color-accent, #BDF967) 55%, transparent);
	border-radius: 50%;
	background: var(--e-global-color-sxdark, #0A1D16);
	color: var(--e-global-color-accent, #BDF967);
	transform: translate(-50%, -50%);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sx-divider__dot svg { fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.sx-divider__dot:hover,
.sx-divider__dot:focus-visible { border-color: var(--e-global-color-accent, #BDF967); box-shadow: 0 0 18px color-mix(in srgb, var(--e-global-color-accent, #BDF967) 30%, transparent); color: var(--e-global-color-accent, #BDF967); }
.sx-divider__dot:hover svg { transform: translateY(2px); }
.sx-divider__dot:focus-visible { outline: 2px solid var(--c-focus-dark); outline-offset: 3px; }
/* Room under the circle, added to the pricing band's own top padding (Elementor). */
.e-con.sx-divider-band + .elementor-widget-samen-template .e-con.pr-head { margin-top: 24px; }
@media (max-width: 1024px) {
	.sx-divider__dot { width: 40px; height: 40px; }
	.e-con.sx-divider-band + .elementor-widget-samen-template .e-con.pr-head { margin-top: 20px; }
}
@media (max-width: 767px) {
	.sx-divider__dot { width: 36px; height: 36px; }
	.sx-divider__dot svg { width: 18px; height: 18px; }
	.e-con.sx-divider-band + .elementor-widget-samen-template .e-con.pr-head { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.sx-divider__dot,
	.sx-divider__dot svg { transition: none; }
	.sx-divider__dot:hover svg { transform: none; }
}

/* ==========================================================================
   Legal pages (scripts/build-legal-pages.php, 2026-10-13): table of contents
   that stays in view on desktop, readable lists and links in the articles.
   Colours, fonts, spacing and the white sheets are set in Elementor.
   ========================================================================== */
.e-con.lg-section { scroll-margin-top: 24px; }
.lg-text :is(ul, ol) { margin: 0 0 1em; padding-inline-start: 1.25em; }
.lg-text li { margin-bottom: 6px; }
.lg-text li::marker { color: var(--e-global-color-sxink, #1E6B3A); }
.lg-text p:last-child,
.lg-text :is(ul, ol):last-child { margin-bottom: 0; }
.lg-text strong { color: var(--e-global-color-primary, #0D1B15); }
.lg-text a { color: var(--e-global-color-sxink, #1E6B3A); text-decoration: underline; text-underline-offset: 2px; }
.lg-text a:hover { text-decoration-thickness: 2px; }
.lg-toc-list .elementor-icon-list-item a:hover .elementor-icon-list-text { text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 1025px) {
	.e-con.lg-toc { position: sticky; top: 24px; }
}

/* ==========================================================================
   Abonnementen – steps and payment in the dark design (mockup 2026-10-13,
   scripts/lib-abonnementen-stappen.php): faint lime glow behind the title,
   card shadow, link in the guarantee text. Colours are set in Elementor.
   ========================================================================== */
.e-con.ab-steps--dark { background-image: radial-gradient(55% 60% at 50% 0%, color-mix(in srgb, var(--e-global-color-accent, #BDF967) 7%, transparent), transparent 70%); }
.ab-steps--dark .elementor-widget-icon-box,
.ab-pay .e-con.ab-card { box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.6); }
.ab-pay .elementor-icon-box-description a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ab-pay .elementor-icon-box-description a:hover { color: var(--e-global-color-accent, #BDF967); }

/* ---- Handleidingen: "IPTV installeren in drie stappen" (#hd-uitleg, scripts/handleidingen-content.php, 2026-10-15) ---- */
.hd-uitleg .hd-uitleg-body { margin-inline: auto; }
.hd-uitleg .hd-uitleg-text { font-size: 17px; line-height: 1.7; }
.hd-uitleg .hd-uitleg-text p { margin: 0 0 1em; }
.hd-uitleg .hd-uitleg-text strong { color: var(--e-global-color-primary, #0D1B15); }
.hd-uitleg .hd-uitleg-text a { color: var(--e-global-color-sxink, #1E6B3A); text-decoration: underline; text-underline-offset: 2px; }
.hd-uitleg .hd-uitleg-text ol { margin: 0 0 1.2em; padding: 0; list-style: none; counter-reset: hd-step; display: grid; gap: 12px; }
.hd-uitleg .hd-uitleg-text ol > li { position: relative; margin: 0; padding: 14px 16px 14px 60px; border: 1px solid var(--e-global-color-sxborderl, #DAE4DE); border-radius: 14px; background: var(--e-global-color-sxlight, #EFF4F1); counter-increment: hd-step; }
.hd-uitleg .hd-uitleg-text ol > li::before { content: counter(hd-step); position: absolute; top: 12px; left: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--e-global-color-accent, #BDF967); color: var(--e-global-color-sxdark, #0A1D16); font-family: "Outfit", "Outfit Fallback", sans-serif; font-weight: 700; }
@media (max-width: 767px) {
	.hd-uitleg .hd-uitleg-text { font-size: 16px; }
	.hd-uitleg .hd-uitleg-text ol > li { padding: 12px 14px 12px 54px; }
}