/*
 * Huisstijl voor de RecruitNow-widgets (.rnFormWrapper voor het
 * sollicitatieformulier, .oe_* voor de open inschrijving).
 *
 * Aparte stylesheet omdat hij alleen nodig is op pagina's met een formulier.
 * Zelfde custom properties als ghs-vacatures.css; overschrijf ze in de globals
 * van de site in plaats van dit bestand te patchen.
 *
 * De foutmelding bij de akkoord-checkbox staat in de custom property
 * --ghs-akkoord-melding, die PHP vult met de vertaalde string. Dus geen
 * hardcoded Nederlandse tekst in de CSS.
 */

:root {
	--ghs-primair: #003865;
	--ghs-accent: #f28c00;
	--ghs-tekst: #000;
	--ghs-tekst-zacht: #7a8794;
	--ghs-rand: #003865;
	--ghs-rand-stippel: #c6d2dc;
	--ghs-fout: #c24438;
	--ghs-wit: #ffffff;
	--ghs-radius: 10px;
	--ghs-font: inherit;
	--ghs-font-alt: "Momo Trust Display";
	--ghs-akkoord-melding: "";
}

.rnFormWrapper {
	font-family: var(--ghs-font);
}

.rnFormWrapper h2 {
	color: var(--ghs-primair);
	font-size: 24px;
	line-height: 32px;
	margin: 0 0 18px;
}

.rnFormWrapper > .rnFormContainer > h2,
.rnFormWrapper h2:first-child {
	font-size: 30px;
	line-height: 40px;
	text-transform: uppercase;
	margin-bottom: 24px;
}

.rnFormWrapper .rnTitlePrefix {
	color: var(--ghs-primair);
}
.rnFormWrapper .rnVacancyTitle {
	color: var(--ghs-accent);
}

/* Velden in twee kolommen, brede velden over de volle breedte */

.rnFormWrapper fieldset {
	border: none;
	padding: 0;
	margin: 0 0 22px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 22px;
	align-items: start;
}

.rnFormWrapper fieldset legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.rnFormWrapper .rnFormGroup {
	margin-bottom: 0;
	min-width: 0;
}

.rnFormWrapper .rnFormGroup:has(textarea),
.rnFormWrapper .rnFormGroup:has(input[type="file"]),
.rnFormWrapper .rnFormGroup:has(input[type="checkbox"]),
.rnFormWrapper .rnFormGroup:has(select) {
	grid-column: 1 / -1;
}

.rnFormWrapper .rnFormGroup label {
	display: block;
	margin-bottom: 4px;
}

.rnFormWrapper label,
.rnFormWrapper .rnFieldLabel {
	color: var(--ghs-primair);
	font-weight: 700;
	font-size: 15px;
}

/* Labels visueel verborgen (placeholder doet het werk), maar wel voor
   screenreaders leesbaar. */
.rnFormWrapper .rnLabel {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.rnFormWrapper .rncheckboxField .rnLabel {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	white-space: normal;
	color: var(--ghs-tekst);
	font-weight: 400;
	font-size: 15px;
	line-height: 24px;
}

.rnFormWrapper input[type="text"],
.rnFormWrapper input[type="email"],
.rnFormWrapper input[type="tel"],
.rnFormWrapper input[type="number"],
.rnFormWrapper input[type="date"],
.rnFormWrapper select,
.rnFormWrapper textarea,
.oe_field input,
.oe_field select,
.oe_field textarea {
	background: var(--ghs-wit);
	border: 1px solid var(--ghs-rand);
	border-radius: var(--ghs-radius);
	min-height: 44px;
	padding: 8px 14px;
	font-size: 15px;
	font-family: var(--ghs-font);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.rnFormWrapper textarea,
.oe_field textarea {
	min-height: 110px;
}

.rnFormWrapper input[type="checkbox"],
.oe_field input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--ghs-accent);
}

.rnFormWrapper button,
.rnFormWrapper input[type="submit"],
.oe_buttons button {
	background: var(--ghs-accent);
	color: var(--ghs-wit);
	border: none;
	border-radius: var(--ghs-radius);
	font-weight: 800;
	font-size: 16px;
	padding: 10px 24px;
	cursor: pointer;
	transition: background-color 0.2s ease;
	font-family: var(--ghs-font);
}

.rnFormWrapper button {
	grid-column: 1 / -1;
	justify-self: start;
}

.rnFormWrapper button:hover,
.rnFormWrapper input[type="submit"]:hover,
.oe_buttons button:hover {
	background: var(--ghs-primair);
}

.rnFormWrapper .rnError,
.rnFormWrapper .rnFieldError,
.oe_error,
.oe_formSubmitError {
	color: var(--ghs-fout);
	font-size: 14px;
}

/* Telefoon: landkeuze en nummer op een rij */

.rnFormWrapper .rnFormGroup.rninternationalphoneField {
	grid-column: auto;
}

.rnFormWrapper .rnInternationalPhone {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

.rnFormWrapper .rnPhoneCountry {
	flex: 0 0 132px;
	margin: 0;
	position: relative;
}

.rnFormWrapper .rnSelectBox {
	position: relative;
	display: block;
	height: 100%;
}

.rnFormWrapper .rnSelectValue {
	display: flex;
	align-items: center;
	height: 44px;
	background: var(--ghs-wit);
	border: 1px solid var(--ghs-rand);
	border-radius: var(--ghs-radius);
	padding: 0 14px;
	font-size: 15px;
	color: var(--ghs-tekst);
	white-space: nowrap;
	overflow: hidden;
}

.rnFormWrapper .rnSelectBox select {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	height: 100%;
	min-height: 0;
}

.rnFormWrapper .rnInternationalPhone > *:not(.rnPhoneCountry) {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}

.rnFormWrapper .rnInternationalPhone label,
.rnFormWrapper .rnInternationalPhone > div > span,
.rnFormWrapper .rnPhonePrefix {
	flex: none;
	color: var(--ghs-primair);
	font-weight: 700;
	font-size: 15px;
	margin: 0;
}

.rnFormWrapper .rnInternationalPhone input {
	width: 100%;
	height: 44px;
	flex: 1 1 auto;
}

/* CV-upload */

.rnFormWrapper .rnFileUpload {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--ghs-wit);
	border: 1px dashed var(--ghs-rand-stippel);
	border-radius: var(--ghs-radius);
	padding: 9px 10px 9px 16px;
}

.rnFormWrapper .rnFilename {
	color: var(--ghs-tekst-zacht);
	font-size: 14px;
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rnFormWrapper .rnAction {
	flex: none;
	background: var(--ghs-primair);
	color: var(--ghs-wit);
	font-weight: 800;
	font-size: 14px;
	border-radius: 8px;
	padding: 8px 16px;
	cursor: pointer;
}

.rnFormWrapper .rnFileUpload input[type="file"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	width: 100%;
	height: 100%;
	min-height: 0;
}

/* Akkoord-checkbox: checkbox, label en validatiemelding in vaste volgorde */

.rnFormWrapper .rncheckboxField {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px 12px;
}

.rnFormWrapper .rncheckboxField .rnFieldWrap {
	flex: none;
	order: 1;
	padding-top: 3px;
}

.rnFormWrapper .rncheckboxField .rnLabel {
	order: 2;
	flex: 1 1 0;
	min-width: 0;
}

.rnFormWrapper .rncheckboxField > *:not(.rnLabel):not(.rnFieldWrap) {
	order: 3;
	flex-basis: 100%;
	font-size: 0;
	line-height: 0;
	margin: 0;
}

.rnFormWrapper .rncheckboxField > *:not(.rnLabel):not(.rnFieldWrap) * {
	display: none;
}

.rnFormWrapper .rncheckboxField > *:not(.rnLabel):not(.rnFieldWrap)::before {
	content: var(--ghs-akkoord-melding);
	color: var(--ghs-fout);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

/* ============================================================================
 * Open inschrijving (recruitnow-open-enrollment-widget)
 *
 * Structuur, afgelezen uit de gerenderde DOM:
 *
 *   .ghs-rnform--open > .oe_widget
 *     .oe_step > .oe_stepContainer > .oe_block.oe_block_<naam> > .oe_formElement
 *     .oe_formElement > label.oe_textElement       > span.oe_label + input
 *     .oe_formElement > .oe_professionElement      > .oe_functions > input + ul.oe_functionsList
 *     .oe_formElement > label.oe_fileElement       > .oe_uploader > waarde + knop + input[file]
 *     .oe_formElement > fieldset.oe_fieldset       > legend + label.oe_phoneNumber + label.oe_phoneNumberInput
 *     .oe_formElement > .oe_googleMaps             > span.oe_label + #oe_map + .oe_mapResult
 *     .oe_formElement > .oe_checkboxElement        > .oe_label + .oe_help + .oe_checkboxList
 *
 * De vendor levert een platte reeks velden per blok. Zonder ingrijpen staat de
 * helft daarvan alleen op een rij (Achternaam, E-mailadres, Woonplaats), wat
 * grote gaten geeft. Daarom een 12-koloms grid met plaatsing PER VELD op zijn
 * id: die ids komen uit Cockpit (FirstName, Zipcode, ...) en zijn stabiel.
 *
 * !important staat alleen op eigenschappen die de vendor zelf zet. Zijn
 * stylesheet is cross-origin, dus sheet.cssRules gooit een securityfout en zijn
 * selectors zijn niet uit te lezen om er op specificiteit onder te blijven.
 * ========================================================================= */

.ghs-rnform--open .oe_widget {
	/* Krap ritme op desktop. Daar staat het formulier in een smalle kolom
	   naast de afbeelding, en rekt die afbeelding mee met de hoogte van het
	   formulier. Alle velden moeten blijven staan, dus de winst moet uit de
	   ruimte ertussen komen.

	   Vanaf 1024px en smaller schuift de afbeelding boven het formulier en is
	   die druk weg; daar mag het weer ruimer, zie de media query onderaan dit
	   blok.

	   De veldhoogte mag hier onder de 44px omdat dit alleen boven 1024px
	   geldt, en dat is muisbediening. De 44px-ondergrens voor aanraakdoelen
	   staat in de media query hieronder, waar de vingers zitten. */
	--oe-rij: 10px;
	--oe-kolom: 16px;
	--oe-hoogte: 40px;
	--oe-stap: 14px;
	--oe-label: 3px;
	--oe-veld-padding: 9px 12px;
	--oe-knop-padding: 11px 26px;
	--oe-knop-marge: 18px;
}

/* Afbeelding staat hier boven het formulier in plaats van ernaast, dus de
   hoogte van het formulier trekt niets meer scheef. Ruimer is hier prettiger
   te lezen en te bedienen, zeker op een aanraakscherm. */
@media (max-width: 1024px) {
	.ghs-rnform--open .oe_widget {
		--oe-rij: 18px;
		--oe-kolom: 20px;
		--oe-hoogte: 48px;
		--oe-stap: 30px;
		--oe-label: 6px;
		--oe-veld-padding: 12px 14px;
		--oe-knop-padding: 14px 32px;
		--oe-knop-marge: 30px;
	}
}

/* --------------------------------------------------------- stappen als secties */

.ghs-rnform--open .oe_step + .oe_step {
	margin-top: var(--oe-stap);
}

.ghs-rnform--open .oe_stepContainer {
	display: flex;
	flex-direction: column;
	gap: var(--oe-rij);
}

/* Kopjes per blok: de vendor levert geen stapnamen, waardoor het formulier één
   lange ongedeelde kolom is. De blokklassen zijn wel betrouwbaar. */
.ghs-rnform--open .oe_block_name::before,
.ghs-rnform--open .oe_block_address::before,
.ghs-rnform--open .oe_block_cv::before {
	grid-column: 1 / -1;
	margin-bottom: 2px;
	color: var(--ghs-primair);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ghs-rnform--open .oe_block_name::before {
	content: "Persoonsgegevens";
}
.ghs-rnform--open .oe_block_address::before {
	content: "Adres";
}
.ghs-rnform--open .oe_block_cv::before {
	content: "CV en functie";
}

/* -------------------------------------------------------------- het grid */

.ghs-rnform--open .oe_block {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--oe-rij) var(--oe-kolom);
	align-items: start;
}

/* Standaard: half. Daarna per veld overschreven. */
.ghs-rnform--open .oe_block > .oe_formElement {
	grid-column: span 6;
	min-width: 0;
}

/* Naam: voornaam, tussenvoegsel, achternaam op één rij. */
.ghs-rnform--open .oe_formElement:has(#FirstName) {
	grid-column: span 4;
}
.ghs-rnform--open .oe_formElement:has(#MiddleName) {
	grid-column: span 3;
}
.ghs-rnform--open .oe_formElement:has(#LastName) {
	grid-column: span 5;
}

/* Contact: e-mail naast het telefoonblok. */
.ghs-rnform--open .oe_formElement:has(#Email) {
	grid-column: span 5;
}
.ghs-rnform--open .oe_formElement:has(.oe_fieldset) {
	grid-column: span 7;
}

/* Adres: postcode, huisnummer, toevoeging op één rij; straat en woonplaats eronder. */
.ghs-rnform--open .oe_formElement:has(#Zipcode) {
	grid-column: span 4;
}
.ghs-rnform--open .oe_formElement:has(#Housenumber) {
	grid-column: span 4;
}
.ghs-rnform--open .oe_formElement:has(#HousenumberSuffix) {
	grid-column: span 4;
}
.ghs-rnform--open .oe_formElement:has(#Street) {
	grid-column: span 7;
}
.ghs-rnform--open .oe_formElement:has(#City) {
	grid-column: span 5;
}

/* CV en functie naast elkaar, en de brede velden over de volle breedte. */
.ghs-rnform--open .oe_formElement:has(.oe_fileElement) {
	grid-column: span 6;
}
.ghs-rnform--open .oe_formElement:has(#Profession) {
	grid-column: span 6;
}
.ghs-rnform--open .oe_formElement:has(.oe_googleMaps),
.ghs-rnform--open .oe_formElement:has(.oe_checkboxElement) {
	grid-column: 1 / -1;
}

/* ---------------------------------------------------------------- labels */

.ghs-rnform--open .oe_label {
	display: block;
	margin-bottom: var(--oe-label);
	color: var(--ghs-primair);
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.35;
}

.ghs-rnform--open .oe_textElement,
.ghs-rnform--open .oe_professionElement,
.ghs-rnform--open .oe_fileElement,
.ghs-rnform--open .oe_googleMaps,
.ghs-rnform--open .oe_checkboxElement {
	display: block;
}

.ghs-rnform--open .oe_help {
	margin-top: var(--oe-label);
	color: var(--ghs-tekst);
	font-size: 12.5px;
	line-height: 1.55;
	opacity: 0.85;
}

/* ------------------------------------------------- één maat voor alle velden */

.ghs-rnform--open input[type="text"],
.ghs-rnform--open input[type="email"],
.ghs-rnform--open input[type="tel"],
.ghs-rnform--open input[type="number"],
.ghs-rnform--open textarea,
.ghs-rnform--open .oe_selectorValue,
.ghs-rnform--open .oe_mapResult select,
.ghs-rnform--open .oe_uploader {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--oe-hoogte);
	background: var(--ghs-wit);
	border: 1px solid var(--ghs-rand);
	border-radius: var(--ghs-radius);
	color: var(--ghs-tekst);
	font-family: var(--ghs-font);
	font-size: 15px;
}

.ghs-rnform--open input[type="text"],
.ghs-rnform--open input[type="email"],
.ghs-rnform--open input[type="tel"],
.ghs-rnform--open input[type="number"],
.ghs-rnform--open textarea {
	padding: var(--oe-veld-padding);
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

/* De vendor zet margin-bottom: 30px op elk invoerveld. Dat gaf een rommelige
   verticale ritmiek (bovenop onze grid-gap) en zorgde ervoor dat een veld in een
   flexrij 7px omhoog schoof, waardoor de landkeuze niet meer uitlijnde met het
   telefoonnummer. Spacing regelen we met de grid-gap. */
.ghs-rnform--open input,
.ghs-rnform--open select,
.ghs-rnform--open textarea {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.ghs-rnform--open input:focus,
.ghs-rnform--open select:focus,
.ghs-rnform--open textarea:focus {
	outline: none;
	border-color: var(--ghs-primair);
	box-shadow: 0 0 0 3px rgba(0, 56, 101, 0.12);
}

.ghs-rnform--open input::placeholder {
	color: var(--ghs-tekst-zacht);
}

/* Straat en woonplaats komen uit de postcode-lookup en zijn tot dat moment
   disabled; stippellijn maakt duidelijk dat dat automatisch gaat. */
.ghs-rnform--open input[disabled] {
	background: #f7f9fb !important;
	border-style: dashed;
	color: var(--ghs-tekst-zacht);
	cursor: not-allowed;
}

/* ------------------------------------------- functietitel-autocomplete */

.ghs-rnform--open .oe_functions {
	position: relative;
}

/* De vendor toont na een keuze DRIE dingen: de gekozen chip, het inputveld met
   de getypte tekst, en een los kruisje om dat veld te wissen. Dat leest als een
   dubbele invoer. De chip is de echte waarde en heeft zijn eigen kruisje, dus
   het losse kruisje gaat weg. */
.ghs-rnform--open .oe_functions_removeInput {
	display: none !important;
}

/* Gekozen functietitel als tag boven het zoekveld. */
.ghs-rnform--open .oe_functionsSelectedList {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.ghs-rnform--open .oe_functionsSelectedItem {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px 7px 14px;
	background: var(--ghs-primair) !important;
	border-radius: 999px !important;
	color: var(--ghs-wit) !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.ghs-rnform--open .oe_functionSelectedDelete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	color: var(--ghs-wit) !important;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
}

.ghs-rnform--open .oe_functionSelectedDelete:hover {
	background: var(--ghs-accent);
}

/* Je MOET hier een suggestie aanklikken: alleen dan wordt de Cockpit-id
   opgeslagen. Vrije tekst laat de waarde leeg en levert "Dit veld is
   verplicht" op. Daarom als echte keuzelijst vormgegeven. */
.ghs-rnform--open .oe_functionsList {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 264px;
	overflow-y: auto;
	margin: 0 !important;
	padding: 4px !important;
	list-style: none !important;
	background: var(--ghs-wit);
	border: 1px solid var(--ghs-rand);
	border-radius: var(--ghs-radius);
	box-shadow: 0 12px 30px rgba(0, 56, 101, 0.16);
}

.ghs-rnform--open .oe_functionsList li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.ghs-rnform--open .oe_functionsList li::marker {
	content: "";
}

.ghs-rnform--open .oe_function {
	display: block;
	padding: 9px 12px;
	border-radius: 6px;
	color: var(--ghs-tekst);
	font-size: 14.5px;
	line-height: 1.35;
	text-decoration: none;
}

.ghs-rnform--open .oe_function:hover,
.ghs-rnform--open .oe_functionsList li.active .oe_function {
	background: var(--ghs-primair);
	color: var(--ghs-wit);
}

/* -------------------------------------------------------- telefoonnummer */

.ghs-rnform--open .oe_fieldset {
	display: grid;
	grid-template-columns: 168px minmax(0, 1fr);
	gap: var(--oe-label) 12px;
	margin: 0;
	padding: 0;
	border: none;
	align-items: start;
}

.ghs-rnform--open .oe_fieldset > legend {
	grid-column: 1 / -1;
	float: none;
	width: auto;
	margin: 0 0 6px;
	padding: 0;
}

/* Beide kolommen zijn een label met eigen inhoud. Zonder gelijke hoogte en
   centrering staat de landkeuze een paar pixels lager dan het nummerveld. */
.ghs-rnform--open .oe_phoneNumber,
.ghs-rnform--open .oe_phoneNumberInput {
	display: flex;
	align-items: stretch;
	min-width: 0;
	min-height: var(--oe-hoogte);
	margin: 0;
	line-height: 1;
}

.ghs-rnform--open .oe_phoneNumberInput {
	gap: 10px;
	align-items: center;
}

/* Het nummerveld vult de rij, zodat zijn bovenrand gelijk ligt met de
   landkeuze ernaast. */
.ghs-rnform--open .oe_phoneNumberInput > input {
	align-self: stretch;
	height: auto;
}

.ghs-rnform--open .oe_phoneNumber > .oe_selector {
	display: flex;
	align-items: stretch;
	align-self: stretch;
	width: 100%;
}

.ghs-rnform--open .oe_phoneNumber .oe_selectorValue {
	width: 100%;
	height: auto;
	min-height: var(--oe-hoogte);
}

.ghs-rnform--open .oe_phoneNumberInput > input {
	flex: 1 1 auto;
	min-width: 0;
}

.ghs-rnform--open .oe_phone_prefix {
	flex: none;
	color: var(--ghs-primair);
	font-weight: 600;
	font-size: 15px;
}

/* -------------------------------------------------------- keuzelijsten */

.ghs-rnform--open .oe_selector,
.ghs-rnform--open .oe_select {
	position: relative;
	display: block;
	width: 100%;
}

/* De vendor zet hier een eigen font-size (18px) en een grijze rand; zonder
   overrule wijkt dit veld af van alle andere. */
.ghs-rnform--open .oe_selectorValue {
	display: flex;
	align-items: center;
	padding: 12px 38px 12px 14px;
	font-size: 15px !important;
	border-color: var(--ghs-rand) !important;
	background-color: var(--ghs-wit) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%23003865' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 14px !important;
	cursor: pointer;
}

.ghs-rnform--open .oe_phoneSelector select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	opacity: 0;
	cursor: pointer;
}

/* ------------------------------------------------------------ cv-upload */

.ghs-rnform--open .oe_uploader {
	display: flex !important;
	align-items: stretch;
	padding: 0 !important;
	border-style: dashed;
	border-color: var(--ghs-rand-stippel);
	overflow: hidden;
}

.ghs-rnform--open .oe_uploaderValue {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 12px 16px !important;
	color: var(--ghs-tekst-zacht);
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ghs-rnform--open .oe_uploaderButton {
	flex: none;
	display: flex !important;
	align-items: center;
	padding: 0 22px !important;
	background: var(--ghs-primair) !important;
	color: var(--ghs-wit) !important;
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ghs-rnform--open .oe_uploaderButton:hover {
	background: var(--ghs-accent) !important;
}

.ghs-rnform--open .oe_uploader input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* ------------------------------------------------- vestiging en kaart */

/* De wrapper als kolom, zodat label, kaart en keuzelijst elkaar niet meer
   overlappen; de vendor zet hier een grijze achtergrond die eronder uitpiekte. */
.ghs-rnform--open .oe_googleMaps {
	display: flex !important;
	flex-direction: column;
	background: none !important;
	padding: 0 !important;
}

/* De kaart zelf is verborgen, de vestigingskeuze blijft staan.
 *
 * Het open-inschrijvingsformulier bevat alle velden die Mike wil houden en
 * werd daardoor zo lang dat de afbeelding ernaast meerekte tot ruim 1600px.
 * De kaart is het enige onderdeel dat puur decoratief is: hij toont waar de
 * gekozen vestiging ligt, maar je kiest die in de select eronder
 * (.oe_mapResult), niet op de kaart. Verbergen scheelt 260px zonder dat er
 * een veld verdwijnt.
 *
 * Alleen #oe_map gaat weg; span.oe_label ("Kies de vestiging van jouw
 * voorkeur") en .oe_mapResult blijven zichtbaar.
 *
 * !important omdat de widget inline styles op dit element zet, net als bij de
 * omliggende regels in dit blok.
 *
 * De kaart werkte sowieso niet: de widget laadt Google Maps met de
 * placeholder-sleutel JOUW_API_KEY, waarop Google met "InvalidKey"
 * antwoordt. Er stond dus 260px aan foutmelding.
 *
 * Let op: verbergen is puur hoogtewinst. De widget initialiseert de kaart nog
 * steeds, dus de verzoeken naar maps.googleapis.com gaan door. Wil je die ook
 * kwijt (en de gegevensdeling die eraan vastzit), dan moet de kaart in
 * Cockpit zelf uit het formulier. Daar hoort ook de API-sleutel ingevuld te
 * worden als de kaart ooit wel moet werken. */
.ghs-rnform--open #oe_map {
	display: none !important;
}

.ghs-rnform--open .oe_mapResult {
	flex: none;
	margin-top: 14px;
	background: none !important;
}

.ghs-rnform--open .oe_mapResult .oe_selectorValue {
	display: none;
}

.ghs-rnform--open .oe_mapResult select {
	position: static !important;
	inset: auto !important;
	opacity: 1 !important;
	height: auto;
	padding: 12px 38px 12px 14px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%23003865' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
	cursor: pointer;
}

/* ------------------------------------------------------------ akkoord */

/* .oe_checkboxElement is de container van label, uitleg en keuzelijst, geen
   rij: op flex zetten maakte van de privacytekst een smalle kolom. */
.ghs-rnform--open .oe_checkboxList {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 14px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* De vendor zet de echte checkbox op position:absolute met opacity 0 en tekent
   het vinkje zelf op het label. Daarom hier GEEN flex met gap: dat reserveert
   ruimte voor een onzichtbaar element en geeft een dubbele inspring. */
.ghs-rnform--open .oe_checkboxListElement {
	display: block;
	margin: 0;
	padding: 16px 18px;
	background: var(--ghs-wit);
	border: 1px solid var(--ghs-rand);
	border-radius: var(--ghs-radius);
	cursor: pointer;
}

.ghs-rnform--open .oe_checkboxListElement .oe_label {
	margin: 0;
	color: var(--ghs-tekst);
	font-weight: 400;
	font-size: 13.5px !important;
	line-height: 1.55;
}

/* De privacytekst is lopende tekst en geen kop: kleiner dan de labels, zodat
   het blok niet het hele formulier domineert. */
.ghs-rnform--open .oe_checkboxElement > .oe_help {
	max-width: 78ch;
	margin-top: 4px;
	font-size: 13px !important;
	line-height: 1.6 !important;
	opacity: 0.9;
}

.ghs-rnform--open a {
	color: var(--ghs-primair);
	text-underline-offset: 2px;
}

/* ------------------------------------------------------------ foutstaat */

.ghs-rnform--open .oe_error input,
.ghs-rnform--open .oe_error textarea,
.ghs-rnform--open .oe_error .oe_uploader,
.ghs-rnform--open .oe_error .oe_selectorValue,
.ghs-rnform--open .oe_error select,
.ghs-rnform--open .oe_error .oe_checkboxListElement {
	border-color: var(--ghs-fout);
}

.ghs-rnform--open .oe_validation,
.ghs-rnform--open .oe_formSubmitError {
	margin-top: 6px;
	color: var(--ghs-fout);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}

/* Label blijft navy in de foutstaat; rand en melding zijn het signaal. */
.ghs-rnform--open .oe_error .oe_label {
	color: var(--ghs-primair);
}

/* ------------------------------------------------------------ verzenden */

.ghs-rnform--open .oe_buttons {
	display: flex;
	gap: 12px;
	margin-top: var(--oe-knop-marge);
	padding-top: calc(var(--oe-knop-marge) * 0.8);
	border-top: 1px solid var(--ghs-rand);
}

.ghs-rnform--open .oe_buttons button {
	padding: var(--oe-knop-padding);
	font-size: 16px;
	border-radius: var(--ghs-radius);
}

.ghs-rnform--open .oe_buttons button[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 860px) {
	.ghs-rnform--open .oe_formElement:has(#FirstName),
	.ghs-rnform--open .oe_formElement:has(#LastName),
	.ghs-rnform--open .oe_formElement:has(#Email),
	.ghs-rnform--open .oe_formElement:has(.oe_fieldset),
	.ghs-rnform--open .oe_formElement:has(#Street),
	.ghs-rnform--open .oe_formElement:has(#City),
	.ghs-rnform--open .oe_formElement:has(.oe_fileElement),
	.ghs-rnform--open .oe_formElement:has(#Profession) {
		grid-column: 1 / -1;
	}

	.ghs-rnform--open .oe_formElement:has(#MiddleName) {
		grid-column: span 4;
	}
	.ghs-rnform--open .oe_formElement:has(#Zipcode) {
		grid-column: span 8;
	}
	.ghs-rnform--open .oe_formElement:has(#Housenumber) {
		grid-column: span 6;
	}
	.ghs-rnform--open .oe_formElement:has(#HousenumberSuffix) {
		grid-column: span 6;
	}
}

@media (max-width: 600px) {
	.ghs-rnform--open .oe_block > .oe_formElement,
	.ghs-rnform--open .oe_formElement:has(#MiddleName),
	.ghs-rnform--open .oe_formElement:has(#Zipcode),
	.ghs-rnform--open .oe_formElement:has(#Housenumber),
	.ghs-rnform--open .oe_formElement:has(#HousenumberSuffix) {
		grid-column: 1 / -1;
	}

	.ghs-rnform--open .oe_fieldset {
		grid-template-columns: 1fr;
	}

}