/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================================
   Collins Bar Systems — child theme CSS

   Aanpak: "meteen opschonen". Het ontwerp leeft in Elementor's Global Settings
   en in Saved Templates, NIET hier. Deze stylesheet bevat uitsluitend wat
   Elementor niet kan uitdrukken.

   Wat hier NIET meer staat, en waar het nu hoort:
   - Kleuren            → Elementor Global Colors
   - Typografieschaal   → Elementor Global Fonts (5 breakpoints, zie hieronder)
   - Buttons            → Elementor kit → Buttons
   - Kaarten, headers   → Saved Templates
   - Grid / kolommen    → Elementor Containers (flexbox), Bootstrap is eruit
   - Carousels          → Elementor Carousel, Owl is eruit
   - Scroll-animaties   → Elementor Motion Effects, GSAP/ScrollMagic zijn eruit

   Wat hier WEL staat: design tokens (nodig voor de Gravity Forms-CSS hieronder)
   en de Gravity Forms-styling, want GF-output valt buiten Elementor's bereik.
   ========================================================================== */

:root {
	/* Brand — spiegelt Elementor's Global Colors, voor gebruik in deze stylesheet */
	--cbs-primary: #040817;
	--cbs-secondary: #ff001f;
	--cbs-alt: #ffffff;
	--cbs-background: #2f2f2f;
	--cbs-background-dark: #262626;
	--cbs-input-bg: #191a1d;
	--cbs-text-medium: #808080;
	--cbs-text-light: #b5b5b5;
	--cbs-error: #dc3545;

	--cbs-font-primary: 'neue-haas-unica', sans-serif;
	--cbs-font-secondary: 'bebas-neue-by-fontfabric', sans-serif;
}

/* ==========================================================================
   Koppen boven media
   Het oude theme zette text-shadow op ALLE koppen, omdat sommige koppen over
   een afbeelding staan. Dat is een botte oplossing. Hier alleen waar het nodig
   is: zet deze klasse op een Heading-widget die over media ligt.
   ========================================================================== */

.cbs-heading-on-media,
.cbs-heading-on-media h1,
.cbs-heading-on-media h2,
.cbs-heading-on-media h3 {
	text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Taalwisselaar
   Hoort bij de [cbs_lang_switcher] shortcode in functions.php. Vorm 1-op-1
   overgenomen uit components/_nav.sass — de enige plek waar dat verdedigbaar
   is, omdat het een eigen component is en geen Elementor-widget.
   ========================================================================== */

.lang-toggle {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lang-toggle li {
	font-size: 0.875rem;          /* 14px */
	line-height: 0.9em;
	padding: 0 0.5em;
	margin: 0;
	border-right: 2px solid rgba(255, 255, 255, 0.5);
}

.lang-toggle li:last-child {
	border-right: none;
}

.lang-toggle a {
	font-family: var(--cbs-font-primary);
	font-size: 0.875rem;
	font-weight: 400;
	text-transform: uppercase;
	text-decoration: none !important;
	color: var(--cbs-alt);
	opacity: 0.5;
	transition: opacity 0.2s, box-shadow 0.2s;
}

.lang-toggle a:hover,
.lang-toggle a:focus,
.lang-toggle a:active {
	opacity: 1;
	color: var(--cbs-alt);
	text-decoration: none;
	box-shadow: inset 0 -2px 0 var(--cbs-secondary);
}

.lang-toggle li.active a {
	font-weight: 700;
	opacity: 1;
}

/* ==========================================================================
   Speed & Efficiency — pagina-onderdelen
   ========================================================================== */

/* Kleine rode bovenkop, generiek herbruikbaar */
.cbs-eyebrow {
	font-family: var(--cbs-font-primary) !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cbs-secondary) !important;
	text-shadow: none !important;
}

/* De drie pijlers: menu, team, baroperatie */
.cbs-pillar {
	border-top: 2px solid var(--cbs-secondary);
	padding-top: 1.25rem;
}

.cbs-pillar h3,
.cbs-pillar .elementor-heading-title {
	font-size: 1.25rem !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Genummerd traject-blok */
.cbs-track {
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(4, 8, 23, 0.4);
}

.cbs-track-num {
	font-family: var(--cbs-font-secondary) !important;
	font-size: 3rem !important;
	line-height: 1 !important;
	color: var(--cbs-secondary) !important;
	text-shadow: none !important;
}

/* Feitenstrook onderaan een traject */
.cbs-facts {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-top: 1.1rem;
}

.cbs-facts p {
	font-family: var(--cbs-font-primary);
	font-size: 0.9375rem;
	color: var(--cbs-text-light);
	margin: 0 0 0.3rem;
}

.cbs-facts p:last-child { margin-bottom: 0; }
.cbs-facts strong { color: var(--cbs-alt); font-weight: 500; }

/* Meetwaarden als losse chips */
.cbs-metrics p {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin: 0;
}

.cbs-metrics span {
	display: inline-block;
	border: 1px solid rgba(255, 255, 255, 0.22);
	padding: 0.3em 0.7em;
	font-size: 0.875rem;
	color: var(--cbs-alt);
}

/* ==========================================================================
   USP-blok
   Licht de belangrijkste claims uit de lopende tekst. Zonder dit staan
   "40% meer cocktails" en "terugverdientijd ±3 maanden" als bullet 4 en 5
   in een opsomming — de sterkste argumenten op de zwakste plek.
   ========================================================================== */

.cbs-usp {
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-left: 3px solid var(--cbs-secondary);
	background: rgba(4, 8, 23, 0.4);
}

.cbs-usp .elementor-icon-list-icon svg,
.cbs-usp .elementor-icon-list-icon i {
	color: var(--cbs-secondary);
	fill: var(--cbs-secondary);
}

.cbs-usp .elementor-icon-list-text {
	font-family: var(--cbs-font-primary);
	font-size: 1.0625rem;
	font-weight: 300;
	color: var(--cbs-alt);
}

/* ==========================================================================
   Secundaire knop
   Geeft hiërarchie waar meerdere CTA's naast elkaar staan: één rode primaire,
   de rest omlijnd. Vervangt de stapel gelijkwaardige knoppen.
   ========================================================================== */

.cbs-btn-secondary .elementor-button,
a.cbs-btn-secondary {
	background: transparent !important;
	border: 2px solid var(--cbs-alt) !important;
	color: var(--cbs-alt) !important;
}

.cbs-btn-secondary .elementor-button:hover,
.cbs-btn-secondary .elementor-button:focus,
a.cbs-btn-secondary:hover {
	background: var(--cbs-alt) !important;
	color: var(--cbs-primary) !important;
}

/* ==========================================================================
   FAQ-accordeon
   Elementor's standaardvorm heeft kaders en vlakken die niet bij de huisstijl
   passen. Hier teruggebracht tot dunne scheidingslijnen met een rood teken.
   ========================================================================== */

.cbs-faq .elementor-accordion .elementor-accordion-item {
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.cbs-faq .elementor-accordion .elementor-accordion-item:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.cbs-faq .elementor-tab-title {
	background: transparent;
	border: 0;
	padding: 1.1em 0;
	font-family: var(--cbs-font-secondary);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--cbs-alt);
	transition: color 0.2s;
}

.faq-items .elementor-tab-title {
	border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.faq-items .elementor-accordion-icon {
	font-size: 18px;
}

.faq-items .elementor-accordion-icon svg {
	width: 18px;
	height: 18px;
}

.cbs-faq .elementor-tab-title:hover,
.cbs-faq .elementor-tab-title.elementor-active {
	color: var(--cbs-secondary);
}

.cbs-faq .elementor-tab-title .elementor-accordion-icon {
	color: var(--cbs-secondary);
}

.cbs-faq .elementor-tab-content {
	background: transparent;
	border: 0;
	padding: 0 0 1.5em;
	color: var(--cbs-text-light);
}

.cbs-faq .elementor-tab-content p {
	font-size: 1rem;
	line-height: 1.65;
	margin-bottom: 0.9em;
}

.cbs-faq .elementor-tab-content p:last-child { margin-bottom: 0; }

/* ==========================================================================
   ROI-rekenmodule
   Hoort bij de Saved Template "ROI — Terugverdientijd". Alleen het rekenpaneel
   is maatwerk; kop, tekst en knop zijn gewone Elementor-widgets.

   Meerdere modules op één pagina werken los van elkaar — de JS initialiseert
   per .cbs-roi-panel en gebruikt klassen, geen ID's.
   ========================================================================== */

.cbs-roi-panel {
	background: rgba(4, 8, 23, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.14);
	padding: 2rem;
}

@media (min-width: 768px) {
	.cbs-roi-panel { padding: 2.5rem; }
}

.cbs-roi-panel__head {
	font-family: var(--cbs-font-primary);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cbs-text-light);
	padding-bottom: 1.25rem;
	margin: 0 0 1.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.cbs-roi-controls {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.cbs-roi-control label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font-family: var(--cbs-font-primary);
	font-size: 0.9375rem;
	font-weight: 300;
	color: var(--cbs-text-light);
	margin-bottom: 0.6rem;
}

.cbs-roi-control .cbs-roi-val {
	font-family: var(--cbs-font-secondary);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--cbs-alt);
	font-variant-numeric: tabular-nums;
}

.cbs-roi-panel input[type='range'] {
	width: 100%;
	height: 1.5rem;
	background: transparent;
	accent-color: var(--cbs-secondary);
	cursor: pointer;
}

.cbs-roi-panel input[type='range']:focus-visible {
	outline: 2px solid var(--cbs-secondary);
	outline-offset: 4px;
}

.cbs-roi-results {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	flex-direction: column;
	gap: 0;
}

.cbs-roi-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}

.cbs-roi-row dt {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 300;
	color: var(--cbs-text-light);
}

.cbs-roi-row dd {
	margin: 0;
	font-family: var(--cbs-font-secondary);
	font-size: 1.625rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--cbs-alt);
}

.cbs-roi-row--muted dd {
	color: var(--cbs-text-light);
	font-size: 1.25rem;
}

.cbs-roi-payback {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 2px solid var(--cbs-secondary);
}

.cbs-roi-payback__label {
	font-family: var(--cbs-font-primary);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cbs-secondary);
	margin: 0 0 0.5rem;
}

.cbs-roi-figure {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0;
	font-family: var(--cbs-font-secondary);
	font-weight: 700;
	line-height: 0.9;
}

.cbs-roi-figure .cbs-roi-weeks {
	font-size: clamp(3.5rem, 9vw, 5.5rem);
	font-variant-numeric: tabular-nums;
	color: var(--cbs-alt);
}

.cbs-roi-figure .cbs-roi-unit {
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cbs-text-light);
}

/* Terugverdientijd afgezet tegen een heel jaar */
.cbs-roi-bar {
	position: relative;
	overflow: hidden;
	height: 6px;
	margin-top: 1.5rem;
	background: rgba(255, 255, 255, 0.12);
}

.cbs-roi-bar span {
	position: absolute;
	inset: 0 auto 0 0;
	background: var(--cbs-secondary);
	transition: width 0.25s ease-out;
}

.cbs-roi-bar__caption {
	display: flex;
	justify-content: space-between;
	margin: 0.6rem 0 0;
	font-size: 0.8125rem;
	color: var(--cbs-text-medium);
}

.cbs-roi-fineprint {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.5;
	color: var(--cbs-text-medium);
}

.cbs-roi-eyebrow {
	font-family: var(--cbs-font-primary) !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cbs-secondary) !important;
	text-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.cbs-roi-bar span { transition: none; }
}

/* ==========================================================================
   Header bij scrollen
   Zet de klasse `header-menu` op de header-container en schakel Sticky in
   (Advanced → Motion Effects → Sticky: Top). Elementor voegt dan vanzelf
   `elementor-sticky--effects` toe zodra je voorbij de offset scrolt.

   Overgenomen uit components/_nav.sass — `.navbar` was transparant en kreeg
   in de `.fixed`-staat rgba(4,8,23,0.8), met een fade van .2s.
   ========================================================================== */

.header-menu {
	/* Zorgt dat de overgang vloeit in plaats van springt. */
	transition: background-color 0.2s ease-in-out;
}

.header-menu.elementor-sticky--effects {
	background-color: rgba(4, 8, 23, 0.8) !important;

	/* Elementor stuurt de flex-instellingen van de container via custom
	   properties aan; de inner leest `flex-wrap: var(--flex-wrap)`. Die
	   variabele overschrijven is netter dan de inner rechtstreeks forceren. */
	--flex-wrap: nowrap;
}

/* Directe regel als achtervang, voor het geval de inner niet via de variabele
   werkt. Vijf klassen diep, dus hij wint van Elementor's eigen selector zonder
   dat er !important aan te pas hoeft te komen. */
.header-menu.elementor-sticky--effects.e-con.e-flex > .e-con-inner {
	flex-wrap: nowrap;
}

/* Logo krimpt mee naar zijn eigen breedte zodra de header sticky wordt.
   Zet de klasse `header-logo` op de logo-widget. */
.header-menu.elementor-sticky--effects .header-logo {
	--width: auto;
	width: auto !important;
}

/* De basisstaat: transparant, zodat de header over de hero-afbeelding valt en
   het scroll-effect ook echt zichtbaar is. Elementor zet de containerachtergrond
   inline, vandaar !important.

   Haal dit blok weg als je de header altijd massief wilt houden — dan is het
   scroll-effect alleen wel nagenoeg onzichtbaar.
*/
.header-menu:not(.elementor-sticky--effects) {
	background-color: transparent !important;
}

/* Optioneel, exact zoals het origineel: het logo verscheen pas bij scrollen.
   In het oude ontwerp kon dat, omdat de topbar er los boven stond met een eigen
   logo. Heb jij één header, dan blijf je bovenaan zonder logo zitten — vandaar
   uitgeschakeld.

.header-menu .cbs-logo { opacity: 0; transition: opacity 0.2s ease-in-out; }
.header-menu.elementor-sticky--effects .cbs-logo { opacity: 1; }
*/

/* ==========================================================================
   Header-lijnen
   De twee rode verticale balken linksboven uit het oude ontwerp
   (partials/lines.blade.php + common/_elements.sass).

   Zet de klasse `cbs-lines` op de header-container.

   Beide balken worden in ÉÉN pseudo-element getekend, met twee
   achtergrondlagen. Reden: Elementor gebruikt `::before` op containers voor de
   background overlay — die is dus bezet.
   ========================================================================== */

/* De HTML-widget die de markup bevat mag geen ruimte innemen in de flex-flow
   van de container. Absoluut positioneren met nulafmeting doet dat. */
.cbs-lines-holder {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Onveranderd overgenomen uit common/_elements.sass */
.lines {
	display: flex;
	position: absolute;
	top: 0;
	left: 12px;
	height: 100vh;
	max-height: 700px;
	z-index: 1;
	pointer-events: none;
}

.line {
	width: 4px;
	background-image: linear-gradient(180deg, var(--cbs-secondary) 70%, transparent 100%);
	background-repeat: repeat-x;
}

.line + .line {
	margin-left: 3px;
}

@media (min-width: 1064px) {
	.lines { left: 48px; }
	.line  { width: 7px; }
	.line + .line { margin-left: 5px; }
}

@media (min-width: 1264px) {
	.lines { left: 64px; }
}

/* ==========================================================================
   Logo-slider — continu draaiende band
   Zet de klasse `logo-slider` op de Loop Carousel-widget (Advanced → CSS Classes).

   Werkt zonder JavaScript: Swiper zet `transform` als inline style, en een
   CSS-animatie wint in de cascade van inline styles. De animatie neemt de
   beweging dus over van Swiper.

   AFSTEMMEN OP HET AANTAL LOGO'S — zie --cbs-marquee-shift hieronder.
   ========================================================================== */

.logo-slider {
	/* Hoeveel de band opschuift voor één naadloze ronde.
	   Swiper dupliceert de slides; de verschuiving is 100% ÷ aantal sets.
	   Nu: 18 slides bij 6 logo's = 3 sets → 33.3333%.
	   Bij 2 sets (12 slides) wordt dit 50%. Tel de .swiper-slide elementen
	   en deel door het aantal logo's om het aantal sets te vinden. */
	--cbs-marquee-shift: -33.3333%;
	--cbs-marquee-duration: 70s;
	--cbs-logo-height: 60px;
}

.logo-slider .swiper,
.logo-slider .elementor-loop-container {
	overflow: hidden;

	/* Vervaagt de band aan beide zijden, zodat logo's in- en uitvloeien
	   in plaats van hard af te kappen bij de rand. */
	-webkit-mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 0%,
		rgb(0, 0, 0) 12.5%,
		rgb(0, 0, 0) 87.5%,
		rgba(0, 0, 0, 0) 100%
	);
	mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 0%,
		rgb(0, 0, 0) 12.5%,
		rgb(0, 0, 0) 87.5%,
		rgba(0, 0, 0, 0) 100%
	);
}

.logo-slider .swiper-wrapper {
	/* Swiper's eigen transitie uitschakelen — die zou schokken veroorzaken.
	   !important is hier nodig omdat Swiper inline schrijft. */
	transition: none !important;
	animation: cbs-logo-marquee var(--cbs-marquee-duration) linear infinite;
	align-items: center;
	/* Voorkomt subpixel-trillen tijdens de animatie */
	will-change: transform;
}

@keyframes cbs-logo-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(var(--cbs-marquee-shift), 0, 0); }
}

.logo-slider:hover .swiper-wrapper,
.logo-slider:focus-within .swiper-wrapper {
	animation-play-state: paused;
}

/* Logo's op één lijn brengen — de bronbestanden lopen van 225px tot 2560px
   en van vierkant tot 16:9. Zonder dit springt de band alle kanten op. */
.logo-slider .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
}

.logo-slider .swiper-slide img {
	height: var(--cbs-logo-height);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Een ticker heeft geen pijlen of bolletjes nodig. */
.logo-slider .elementor-swiper-button,
.logo-slider .swiper-pagination {
	display: none;
}

/* Optioneel: logo's ontkleuren zodat de band rustig blijft op de donkere
   achtergrond, en op hover in kleur. Verwijder dit blok als je de logo's
   altijd in kleur wilt.
.logo-slider .swiper-slide img {
	filter: grayscale(1) brightness(1.6);
	opacity: 0.75;
	transition: filter 0.3s, opacity 0.3s;
}
.logo-slider .swiper-slide:hover img {
	filter: none;
	opacity: 1;
}
*/

@media (min-width: 768px) {
	.logo-slider { --cbs-logo-height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
	.logo-slider .swiper-wrapper { animation: none; }
}

/* ==========================================================================
   Gravity Forms
   Elementor kan GF-output niet stylen, dus dit blijft CSS. Compacte herschrijving
   van de oude components/_form.sass (613 regels), met dezelfde visuele intentie:
   donkere velden, 2px rand, geen radius, witte rand op focus.
   ========================================================================== */

.gform_wrapper form {
	margin: 0;
}

.gform_wrapper .gfield {
	margin-bottom: 1.5rem;
}

.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
	font-family: var(--cbs-font-primary);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--cbs-alt);
	margin-bottom: 0.5em;
	display: block;
}

.gform_wrapper .gfield_required {
	color: var(--cbs-secondary);
}

/* Velden */
.gform_wrapper input[type='text'],
.gform_wrapper input[type='email'],
.gform_wrapper input[type='tel'],
.gform_wrapper input[type='url'],
.gform_wrapper input[type='number'],
.gform_wrapper input[type='password'],
.gform_wrapper textarea,
.gform_wrapper select {
	width: 100%;
	background-color: var(--cbs-input-bg);
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 0;
	color: var(--cbs-alt);
	font-family: var(--cbs-font-primary);
	font-size: 1rem;
	font-weight: 300;
	padding: 0.75em 1em;
	transition: border-color 0.2s;
	-webkit-appearance: none;
	appearance: none;
}

.gform_wrapper textarea {
	min-height: 8em;
	resize: vertical;
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	border-color: var(--cbs-alt);
	outline: none;
}

.gform_wrapper ::placeholder {
	color: var(--cbs-text-medium);
	opacity: 1;
}

/* Select met eigen pijl — de oude vorm: rode driehoek */
.gform_wrapper .ginput_container_select {
	position: relative;
}

.gform_wrapper .ginput_container_select::after {
	content: '';
	position: absolute;
	right: 1em;
	top: 50%;
	margin-top: -2px;
	pointer-events: none;
	border-top: 5px solid var(--cbs-secondary);
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	border-bottom: 0;
}

.gform_wrapper select::-ms-expand {
	display: none;
}

/* Checkboxes en radio's */
.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label {
	font-weight: 300;
	color: var(--cbs-alt);
}

/* Validatie */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
	border-color: var(--cbs-error);
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	color: var(--cbs-error);
	font-size: 0.9375rem;
	font-weight: 400;
	background: none;
	border: none;
	padding: 0.4em 0 0;
}

.gform_wrapper .validation_error {
	color: var(--cbs-error);
	border: 2px solid var(--cbs-error);
	background: none;
	padding: 1em;
	margin-bottom: 1.5rem;
}

/* Submit — leunt op de Elementor button-tokens, maar GF rendert buiten Elementor */
.gform_wrapper .gform_footer input[type='submit'],
.gform_wrapper .gform_page_footer input[type='submit'] {
	font-family: var(--cbs-font-secondary);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1;
	background: var(--cbs-secondary);
	color: var(--cbs-alt);
	border: none;
	border-radius: 0;
	min-height: 44px;
	padding: 0.3em 1.2em 0.2em;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.gform_wrapper .gform_footer input[type='submit']:hover,
.gform_wrapper .gform_footer input[type='submit']:focus {
	background: var(--cbs-alt);
	color: var(--cbs-secondary);
}

@media (min-width: 768px) {
	.gform_wrapper .gform_footer input[type='submit'] { font-size: 1.25rem; }
}

@media (min-width: 1064px) {
	.gform_wrapper .gform_footer input[type='submit'] { font-size: 1.5rem; }
}

/* Bevestiging */
.gform_confirmation_wrapper,
.gform_confirmation_message {
	color: var(--cbs-alt);
}

/* Honeypot netjes verbergen */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield_visibility_hidden {
	display: none !important;
}