/*
 * 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 {
	--oe-rij: 18px;
	--oe-kolom: 20px;
	--oe-hoogte: 48px;
}

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

.ghs-rnform--open .oe_step + .oe_step {
	margin-top: 30px;
}

.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: 6px;
	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: 6px;
	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: 12px 14px;
	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: 6px 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;
}

.ghs-rnform--open #oe_map {
	flex: none;
	width: 100% !important;
	height: 260px !important;
	border-radius: var(--ghs-radius);
	overflow: hidden;
}

.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: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--ghs-rand);
}

.ghs-rnform--open .oe_buttons button {
	padding: 14px 32px;
	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;
	}

	.ghs-rnform--open #oe_map {
		height: 190px !important;
	}
}