/**
 * Sixie – BrightStaffing GF Sync
 * Keuzevelden (radio / checkbox / multi-choice) als bordered selectievakjes
 * met dezelfde rand als de invoervelden. Huisstijl: Sixie-blauw.
 *
 * Wordt enkel geladen op formulieren met een actieve BrightStaffing-feed.
 * !important is bewust gebruikt om de Orbital-theme te overschrijven
 * (die met extra scope-klassen een hogere specificiteit heeft).
 */

:root {
	--sixie-bs-label-color: #231E46; /* Sixie donkerblauw (labels) */
	--sixie-bs-accent: #2392E5;      /* Sixie blauw (selectie, fallback) */
	--sixie-bs-tint: #f3f9fe;        /* lichte achtergrond bij selectie */
}

/* ---------------------------------------------------------------------------
 * Hoofdlabels uniform — ook het <legend> dat GF voor radio/checkbox gebruikt.
 * (Het legend krijgt anders float + afwijkende stijl t.o.v. gewone <label>.)
 * ------------------------------------------------------------------------- */
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
	float: none !important;
	display: inline-block !important;
	width: auto !important;
	max-width: 100%;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--sixie-bs-label-color) !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Keuzes als bordered vakjes.
 * ------------------------------------------------------------------------- */
.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox {
	display: flex;
	flex-wrap: wrap;
	/* GF maakt hier een grid met 32px kolom-gap; gelijktrekken met de inputs (8px). */
	gap: 8px !important;
	margin: 0;
	padding: 0;
}

/* Elke optie = vakje met dezelfde rand als een invoerveld (GF-control tokens). */
.gform_wrapper .gfield_radio .gchoice,
.gform_wrapper .gfield_checkbox .gchoice {
	flex: 1 1 auto;
	min-width: 140px;
	display: flex !important;
	align-items: center !important; /* verticaal gecentreerd */
	gap: 10px;
	margin: 0 !important;
	height: 40px !important;          /* gelijk aan de inputs */
	padding: 0 16px;
	box-sizing: border-box;
	background: #fff;
	/* Identiek aan de invoervelden: 1.5px donkerblauw (fel blauw bij selectie). */
	border: 1.5px solid var(--sixie-bs-label-color);
	border-radius: 8px;
	cursor: pointer;
	transition: box-shadow .15s ease, background-color .15s ease;
}

.gform_wrapper .gfield_radio .gchoice:hover,
.gform_wrapper .gfield_checkbox .gchoice:hover {
	border-color: var(--sixie-bs-accent);
}

/* Geselecteerd: één enkele felblauwe rand (geen dubbele rand). */
.gform_wrapper .gfield_radio .gchoice:has(input:checked),
.gform_wrapper .gfield_checkbox .gchoice:has(input:checked) {
	border-color: var(--sixie-bs-accent) !important;
	box-shadow: none !important;
	background: var(--sixie-bs-tint);
}

/* Het vink-/keuzevakje in huisstijlkleur, zonder eigen marges. */
.gform_wrapper .gfield_radio .gchoice > input,
.gform_wrapper .gfield_checkbox .gchoice > input {
	flex: 0 0 auto;
	margin: 0 !important;
	/* GF zet keuzevakjes bij horizontale uitlijning absoluut → terug in flow. */
	position: static !important;
	inset: auto !important;
	accent-color: var(--sixie-bs-accent);
}

/* Optie-label: identiek aan de placeholder-tekst van de invoervelden —
 * donker navy, normaal gewicht, 16px (gemeten op de echte inputs). */
.gform_wrapper .gfield_radio .gchoice label,
.gform_wrapper .gfield_checkbox .gchoice label {
	flex: 1 1 auto;
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	color: var(--sixie-bs-label-color) !important;
	line-height: 1.3 !important;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Multi-choice / image-choice: GF zet het keuzevakje absoluut, waardoor het
 * label erachter valt. Terug in de flex-flow zetten zodat [vakje] [label].
 * ------------------------------------------------------------------------- */
.gform_wrapper .gfield--type-multi_choice .gchoice,
.gform_wrapper .gfield--type-image_choice .gchoice {
	display: flex !important;
	align-items: center !important;
	gap: 10px;
}
.gform_wrapper .gfield--type-multi_choice .gchoice input.gfield-choice-input,
.gform_wrapper .gfield--type-image_choice .gchoice input.gfield-choice-input {
	position: static !important;
	inset: auto !important;
	margin: 0 !important;
	width: 18px !important;
	height: 18px !important;
	flex: 0 0 auto !important;
	accent-color: var(--sixie-bs-accent);
}
.gform_wrapper .gfield--type-multi_choice .gchoice label,
.gform_wrapper .gfield--type-image_choice .gchoice label {
	padding-left: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Invoervelden, select en textarea: 1.5px donkerblauwe rand, fel blauw bij
 * focus. Hoogte 40px voor alle inputs behalve de textarea.
 * ------------------------------------------------------------------------- */
.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=file]):not([type=image]):not([type=hidden]),
.gform_wrapper select,
.gform_wrapper textarea {
	border: 1.5px solid var(--sixie-bs-label-color) !important;
	border-radius: 8px !important;
}

.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=file]):not([type=image]):not([type=hidden]):focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	border-color: var(--sixie-bs-accent) !important;
}

/* Hoogte 40px (geldt niet voor de textarea). */
.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=file]):not([type=image]):not([type=hidden]),
.gform_wrapper select {
	height: 40px !important;
}

/* Select houdt witte achtergrond + donkere tekst, zelfde 16px als de rest.
 * (GF's legacy .gravity-theme zet select op 15px — expliciet overschrijven.) */
.gform_wrapper select,
.gform_wrapper.gravity-theme select,
.gform_wrapper .gfield select {
	background-color: #fff !important;
	color: var(--sixie-bs-label-color) !important;
	font-size: 16px !important;
}

/* Placeholders overal donkerblauw (de theme stylet enkel de inputs, niet de textarea). */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
	color: var(--sixie-bs-label-color) !important;
	opacity: 1 !important;
}
.gform_wrapper input::-webkit-input-placeholder,
.gform_wrapper textarea::-webkit-input-placeholder {
	color: var(--sixie-bs-label-color) !important;
	opacity: 1 !important;
}

/* ---------------------------------------------------------------------------
 * "Terug"-knop (vorige pagina): geen rand, geen padding — platte tekstlink.
 * ------------------------------------------------------------------------- */
.gform_wrapper input.gform_previous_button,
.gform_wrapper input.gform_previous_button.gform-theme-button,
.gform_wrapper .gform_page_footer input.gform_previous_button {
	border: 0 !important;
	padding: 0 !important;
	padding-block: 0 !important;
	padding-inline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	min-height: 0 !important;
}

/* ---------------------------------------------------------------------------
 * "Hoe wilt u werken" (veld 11): opties horizontaal op één rij.
 * (Wrapt naar onder op smalle schermen.)
 * ------------------------------------------------------------------------- */
.gform_wrapper #field_5_11 .gfield_checkbox {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 8px;
}
.gform_wrapper #field_5_11 .gchoice {
	min-width: 0 !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
}

/* ---------------------------------------------------------------------------
 * Checkboxes (incl. multi_choice): de theme tekent het vakje met een absoluut
 * gepositioneerde label::before die over het label viel. We verbergen die en
 * tonen de nette native control (zoals bij de radio's).
 * ------------------------------------------------------------------------- */
.gform_wrapper .gfield_radio .gchoice label::before,
.gform_wrapper .gfield_radio .gchoice label::after,
.gform_wrapper .gfield_checkbox .gchoice label::before,
.gform_wrapper .gfield_checkbox .gchoice label::after {
	content: none !important;
	display: none !important;
}
/* Eén custom vierkant control voor zowel radio als checkbox (radio blijft
 * functioneel één keuze, maar oogt als een checkbox). */
.gform_wrapper .gfield_radio .gchoice > input,
.gform_wrapper .gfield_checkbox .gchoice > input {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	opacity: 1 !important;
	clip: auto !important;
	position: static !important;
	box-sizing: border-box !important;
	border: 1.5px solid #9092b0 !important;
	border-radius: 4px !important;
	background: #fff !important;
	cursor: pointer;
}
.gform_wrapper .gfield_radio .gchoice > input:checked,
.gform_wrapper .gfield_checkbox .gchoice > input:checked {
	background-color: var(--sixie-bs-accent) !important;
	border-color: var(--sixie-bs-accent) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 12px 12px !important;
}
.gform_wrapper .gfield_radio .gchoice label,
.gform_wrapper .gfield_checkbox .gchoice label {
	padding-left: 0 !important;
}

/* Toegankelijkheid: zichtbare focus. */
.gform_wrapper .gfield_radio .gchoice > input:focus-visible,
.gform_wrapper .gfield_checkbox .gchoice > input:focus-visible {
	outline: 2px solid var(--sixie-bs-accent);
	outline-offset: 2px;
}