/* ==========================================================================
   Formulieren (Fluent Forms) in de huisstijl
   MOBILE FIRST.

   Fluent Forms levert een eigen opmaak mee, en zet de knopkleuren boven-
   dien per formulier in een eigen <style>-blok met hoge voorrang. Daarom
   staat er op de knop !important: anders wint het standaardblauw van de
   plugin. De rest van de regels is gewoon specifiek genoeg.

   Deze opmaak geldt voor élk formulier op de site — nieuwsbrief, contact
   en wat er later nog bijkomt. Je hoeft in Fluent Forms zelf niets in te
   stellen.
   ========================================================================== */

/* Fluent Forms werkt intern met een eigen accentkleur, standaard blauw.
   Door die variabele hier op ons oranje te zetten, kleurt alles mee wat
   de plugin zelf opmaakt — ook onderdelen waar we geen regel voor
   schrijven. De regels verderop doen het nog eens over, zodat het hoe
   dan ook klopt. */
.frm-fluent-form,
.fluentform {
	--fluentform-primary: #E87722;
	--fluentform-primary-hover: #D0630F;
}

.frm-fluent-form {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	font-family: var(--bc-font);
	color: var(--bc-body);
}

.frm-fluent-form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}


/* --- Velden onder elkaar ------------------------------------------------ */

.frm-fluent-form .ff-el-group {
	margin-bottom: 16px;
}

.frm-fluent-form .ff-el-group:last-of-type {
	margin-bottom: 0;
}


/* --- Labels ------------------------------------------------------------- */

.frm-fluent-form .ff-el-input--label {
	margin-bottom: 6px;
}

.frm-fluent-form .ff-el-input--label label {
	display: inline-block;
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bc-bruin);
}

/* Het sterretje bij een verplicht veld in de huiskleur. */
.frm-fluent-form .ff-el-is-required.asterisk-right label::after {
	color: var(--bc-oranje-tekst);
	margin-left: 2px;
}


/* --- Invoervelden ------------------------------------------------------- */

.frm-fluent-form .ff-el-form-control {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--bc-rand);
	border-radius: 12px;
	background: var(--bc-wit);
	color: var(--bc-body);
	font-family: var(--bc-font);
	font-size: 15px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.frm-fluent-form textarea.ff-el-form-control {
	min-height: 120px;
	padding-top: 12px;
	resize: vertical;
}

.frm-fluent-form .ff-el-form-control::placeholder {
	color: var(--bc-meta);
	opacity: 1;
}

.frm-fluent-form .ff-el-form-control:hover {
	border-color: #E0CFB8;
}

.frm-fluent-form .ff-el-form-control:focus,
.frm-fluent-form .ff-el-form-control:focus-visible {
	outline: none;
	border-color: var(--bc-oranje);
	box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.18);
}

/* Een jaartal heeft geen pijltjes nodig; die staan er bovendien lelijk bij. */
.frm-fluent-form input[type="number"].ff-el-form-control {
	appearance: textfield;
	-moz-appearance: textfield;
}

.frm-fluent-form input[type="number"].ff-el-form-control::-webkit-outer-spin-button,
.frm-fluent-form input[type="number"].ff-el-form-control::-webkit-inner-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

/* Keuzelijsten krijgen hetzelfde kader plus een eigen pijltje. */
.frm-fluent-form select.ff-el-form-control {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239A8878' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}


/* --- Aanvinkvakjes en keuzerondjes -------------------------------------- */

.frm-fluent-form .ff-el-form-check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-bottom: 8px;
}

.frm-fluent-form .ff-el-form-check-input,
.frm-fluent-form .ff-el-form-check input[type="checkbox"],
.frm-fluent-form .ff-el-form-check input[type="radio"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--bc-oranje);
	cursor: pointer;
}

.frm-fluent-form .ff-el-form-check-label,
.frm-fluent-form .ff_tc_label {
	margin: 0;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bc-body);
	cursor: pointer;
}

.frm-fluent-form .ff_tc_label a,
.frm-fluent-form .ff-el-form-check-label a {
	color: var(--bc-oranje-tekst);
	text-decoration: underline;
}

/* Het akkoordvakje onderaan krijgt wat lucht van de velden erboven. */
.frm-fluent-form .ff_gdpr_field,
.frm-fluent-form .ff-el-tc {
	margin-top: 4px;
}


/* --- Verzendknop -------------------------------------------------------- */

.frm-fluent-form .ff_submit_btn_wrapper {
	margin-top: 20px;
}

.frm-fluent-form .ff-btn-submit,
.frm-fluent-form button.ff-btn.ff-btn-submit,
.frm-fluent-form .ff-btn-submit.ff_btn_style {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 52px !important;
	padding: 14px 24px !important;
	border: 0 !important;
	border-radius: var(--bc-radius-pill) !important;
	background: var(--bc-oranje) !important;
	color: var(--bc-wit) !important;
	font-family: var(--bc-font) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form .ff-btn-submit:focus-visible {
	background: var(--bc-oranje-hover) !important;
	color: var(--bc-wit) !important;
}

.frm-fluent-form .ff-btn-submit:disabled,
.frm-fluent-form .ff-btn-submit.ff_working {
	opacity: 0.6;
	cursor: wait;
}


/* --- Foutmeldingen en bevestiging --------------------------------------- */

.frm-fluent-form .ff-el-is-error .ff-el-form-control {
	border-color: #B32D2E;
	box-shadow: 0 0 0 3px rgba(179, 45, 46, 0.12);
}

.frm-fluent-form .error,
.frm-fluent-form .text-danger,
.frm-fluent-form .error-text {
	margin-top: 5px;
	font-size: 12.5px;
	line-height: 1.4;
	color: #B32D2E;
}

.ff-message-success,
.frm-fluent-form + .ff-message-success,
.ff_submit_success {
	box-sizing: border-box;
	max-width: 560px;
	margin: 0 auto;
	padding: 16px 18px;
	border: 0;
	border-left: 4px solid var(--bc-oranje);
	border-radius: 12px;
	background: var(--bc-creme);
	color: var(--bc-bruin);
	font-family: var(--bc-font);
	font-size: 15px;
	line-height: 1.5;
}

.ff-errors-in-stack,
.frm-fluent-form .ff-errors-in-stack {
	box-sizing: border-box;
	padding: 14px 16px;
	border-radius: 12px;
	border-left: 4px solid #B32D2E;
	background: #FCF0F0;
	color: #B32D2E;
	font-size: 14px;
}


/* --- De nieuwsbrief als blok (footer en huidtest) -----------------------
   Daar staat het formulier in een kolom of kaart, niet midden op een
   eigen pagina: dus links uitlijnen en de volle breedte nemen. */

.bc-nieuwsbrief .frm-fluent-form {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.bc-nieuwsbrief .ff-message-success {
	max-width: none;
	margin: 0;
}


/* ==========================================================================
   Opschalen naar grotere schermen
   ========================================================================== */

/* In een nieuwsbriefblok vanaf een brede telefoon in liggende stand:
   voornaam naast achternaam, e-mail naast geboortejaar. Het akkoord en
   de knop blijven over de volle breedte. */
@media (min-width: 560px) {

	.bc-nieuwsbrief .frm-fluent-form fieldset {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 12px;
	}

	.bc-nieuwsbrief .frm-fluent-form fieldset > * {
		grid-column: 1 / -1;
	}

	.bc-nieuwsbrief .frm-fluent-form fieldset > .ff-el-group:not(.ff-el-input--content):not(.ff_submit_btn_wrapper) {
		grid-column: auto;
	}
}

@media (min-width: 700px) {

	.frm-fluent-form .ff-el-input--label label {
		font-size: 14px;
	}

	.frm-fluent-form .ff-el-form-control {
		font-size: 16px;
	}

	/* Op een breed scherm hoeft de knop niet de volle breedte te vullen. */
	.frm-fluent-form .ff-btn-submit,
	.frm-fluent-form button.ff-btn.ff-btn-submit,
	.frm-fluent-form .ff-btn-submit.ff_btn_style {
		width: auto !important;
		min-width: 220px !important;
	}
}