/**
 * Vormgeving van het inschrijvingsformulier, afgestemd op de rest van de site.
 *
 * Gravity Forms gebruikt hier het orbital-thema, dat volledig op CSS-variabelen
 * draait. We overschrijven die variabelen in plaats van losse regels te
 * forceren: zo blijft het formulier meebewegen met updates van de plugin.
 *
 * Kleuren komen uit de Elementor-instellingen van de site:
 *   #8CC040  knopgroen (het merkkleur)
 *   #EBFEDF  lichte groentint (.highlight)
 *   #38393B  tekstkleur
 *   #363A3C  titelkleur
 */

/* Op :root, zodat ook de bevestiging na het verzenden erover beschikt: die
   staat buiten .gform_wrapper. */
:root {
	--edumedic-groen:        #8CC040;
	--edumedic-groen-donker: #74A331;
	--edumedic-groen-licht:  #EBFEDF;
	--edumedic-tekst:        #38393B;
	--edumedic-titel:        #363A3C;
	--edumedic-rand:         #DFE3E1;
	--edumedic-radius:       6px;

	/* Hetzelfde lettertype als de rest van de site (Elementor-instelling). */
	--edumedic-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------------------------------------------
 * Lettertype
 *
 * Elementor zet Poppins op de body via .elementor-kit-15, maar invoervelden
 * erven van nature geen lettertype van hun omgeving, en het basislettertype
 * van Gravity Forms staat standaard op "initial". Daarom zetten we het hier
 * expliciet op de wrapper en laten we de velden dat overerven.
 * ------------------------------------------------------------------ */

.gform_wrapper,
.gform_confirmation_wrapper,
.gform_confirmation_message {
	font-family: var(--edumedic-font);
}

.gform_wrapper input,
.gform_wrapper select,
.gform_wrapper textarea,
.gform_wrapper button,
.gform_confirmation_message input,
.gform_confirmation_message button {
	font-family: inherit;
}

.gform-theme--framework,
.gform_wrapper.gform-theme {
	/* Primaire kleur: keuzerondjes, vinkjes, focusranden, knoppen. */
	--gf-color-primary:                    var(--edumedic-groen);
	--gf-color-primary-rgb:                140, 192, 64;
	--gf-color-primary-darker:             var(--edumedic-groen-donker);
	--gf-color-primary-lighter:            var(--edumedic-groen-licht);
	--gf-color-primary-contrast:           #FFFFFF;
	--gf-color-primary-contrast-rgb:       255, 255, 255;

	--gf-color-in-ctrl-primary:              var(--edumedic-groen);
	--gf-color-in-ctrl-primary-rgb:          140, 192, 64;
	--gf-color-in-ctrl-primary-darker:       var(--edumedic-groen-donker);
	--gf-color-in-ctrl-primary-lighter:      var(--edumedic-groen-licht);
	--gf-color-in-ctrl-primary-contrast:     #FFFFFF;
	--gf-color-in-ctrl-primary-contrast-rgb: 255, 255, 255;

	/* Lettertype van de site. */
	--gf-font-family-base:      var(--edumedic-font);
	--gf-font-family-primary:   var(--gf-font-family-base);
	--gf-font-family-secondary: var(--gf-font-family-base);
	--gf-ctrl-font-family:      var(--gf-font-family-base);
	--gf-ctrl-btn-font-family:  var(--gf-font-family-base);

	/* Labels. */
	--gf-ctrl-label-color-primary:   var(--edumedic-titel);
	--gf-ctrl-label-color-secondary: var(--edumedic-tekst);

	/* Invoervelden. */
	--gf-ctrl-radius:              var(--edumedic-radius);
	--gf-ctrl-textarea-radius:     var(--edumedic-radius);
	--gf-ctrl-select-dropdown-radius: var(--edumedic-radius);
	--gf-ctrl-border-color:        var(--edumedic-rand);
	--gf-ctrl-border-color-hover:  var(--edumedic-groen);
	--gf-ctrl-border-color-focus:  var(--edumedic-groen);

	/* Knoppen, zoals de knoppen elders op de site. */
	--gf-ctrl-btn-radius:                var(--edumedic-radius);
	--gf-ctrl-btn-font-size:             18px;
	--gf-ctrl-btn-font-weight:           500;
	--gf-ctrl-btn-padding-x:             26px;
	--gf-ctrl-btn-padding-y:             16px;
	--gf-ctrl-btn-bg-color-primary:      var(--edumedic-groen);
	--gf-ctrl-btn-bg-color-hover-primary: var(--edumedic-groen-donker);
	--gf-ctrl-btn-bg-color-focus-primary: var(--edumedic-groen-donker);
	--gf-ctrl-btn-color-primary:         #FFFFFF;
	--gf-ctrl-btn-color-hover-primary:   #FFFFFF;
	--gf-ctrl-btn-color-focus-primary:   #FFFFFF;

	/* Stappenbalk: het bolletje van een afgeronde stap.

	   Gravity Forms legt over dat bolletje een vinkje (::after) en haalt de
	   kleur daarvan uit --gf-color-primary. Die variabele zetten we hierboven
	   op het groen van de site, maar Gravity Forms schrijft per formulier ook
	   een inline <style> met een id-selector (#gform_wrapper_1...) die zwaarder
	   weegt dan dit bestand en er weer blauw van maakt.

	   De variabelen van de stappenbalk zelf staan niet in die inline stijl, dus
	   die kunnen we hier wel gewoon zetten. Zo wordt een afgeronde stap groen
	   zonder dat we regels met !important hoeven te forceren. */
	--gf-field-pg-steps-number-bg-color-complete:     var(--edumedic-groen);
	--gf-field-pg-steps-number-border-color-complete: var(--edumedic-groen);
	--gf-field-pg-steps-number-color-complete:        #FFFFFF;

	/* Knopjes om een deelnemer toe te voegen of te verwijderen. */
	--gf-field-list-btn-radius: var(--edumedic-radius);
}

/* De verzendknop. Het thema geeft die niet automatisch de primaire kleur. */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"] {
	background-color: var(--edumedic-groen);
	border: none;
	border-radius: var(--edumedic-radius);
	color: #FFFFFF;
	font-family: var(--gf-font-family-base);
	font-size: 18px;
	font-weight: 500;
	padding: 16px 26px;
	cursor: pointer;
	transition: background-color .15s ease-in-out;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer input[type="submit"]:focus {
	background-color: var(--edumedic-groen-donker);
	color: #FFFFFF;
}

/* ---------------------------------------------------------------------
 * De leskeuze: elke les als een aanklikbare kaart.
 * ------------------------------------------------------------------ */

.gform_wrapper .edumedic-lessen .gchoice {
	background-color: #FFFFFF;
	border: 1px solid var(--edumedic-rand);
	border-radius: 10px;
	margin-bottom: 12px;
	padding: 18px 20px;
	transition: border-color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.gform_wrapper .edumedic-lessen .gchoice:hover {
	border-color: var(--edumedic-groen);
	box-shadow: 0 2px 10px rgba(140, 192, 64, .16);
}

.gform_wrapper .edumedic-lessen .gchoice:has(input:checked) {
	background-color: var(--edumedic-groen-licht);
	border-color: var(--edumedic-groen);
	box-shadow: inset 0 0 0 1px var(--edumedic-groen);
}

.gform_wrapper .edumedic-lessen .gchoice label {
	cursor: pointer;
	width: 100%;
}

/* De inhoud van één les: titel, praktische regels en de beschikbaarheid. */
.gform_wrapper .edumedic-les {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 16px;
	align-items: baseline;
}

.gform_wrapper .edumedic-les__titel {
	color: var(--edumedic-titel);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
}

.gform_wrapper .edumedic-les__regel {
	color: #6E7472;
	font-size: 14.5px;
	font-weight: 400;
	grid-column: 1 / -1;
	line-height: 1.5;
}

.gform_wrapper .edumedic-les__adres {
	align-items: flex-start;
	color: #8A908E;
	display: flex;
	gap: 6px;
}

/* De kaartspeld bij de locatie.
   Afmetingen staan hier expliciet: het thema zet "svg { height: auto }", wat
   het height-attribuut van de SVG overschrijft en hem in een flexcontainer
   naar nul hoogte laat klappen. Ook fill en stroke zetten we in CSS, zodat
   een regel elders de presentatie-attributen niet stilletjes kan overrulen. */
.gform_wrapper .edumedic-les__icoon {
	color: var(--edumedic-groen, #8CC040);
	/* Gevuld icoon, geen lijntekening. */
	fill: currentColor;
	flex: 0 0 auto;
	height: 16px;
	/* Optisch uitlijnen met de eerste tekstregel. */
	margin-top: 2px;
	max-width: none;
	stroke: none;
	width: 16px;
}

/* De prijs. Staat op een eigen regel en niet tussen de andere praktische
   gegevens: het bedrag bepaalt mee de keuze en mag dus opvallen. */
.gform_wrapper .edumedic-les__prijs {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	grid-column: 1 / -1;
	margin-top: 6px;
}

.gform_wrapper .edumedic-les__bedrag {
	color: var(--edumedic-groen-donker);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.gform_wrapper .edumedic-les__btw {
	color: #8A908E;
	font-size: 13px;
	line-height: 1.4;
}

/* De beschikbaarheid, rechtsboven naast de titel. */
.gform_wrapper .edumedic-les__badge {
	background-color: var(--edumedic-groen-licht);
	border-radius: 999px;
	color: var(--edumedic-groen-donker);
	font-size: 12.5px;
	font-weight: 600;
	grid-column: 2;
	grid-row: 1;
	padding: 4px 12px;
	white-space: nowrap;
}

.gform_wrapper .edumedic-les__badge--vol {
	background-color: #EFEFEF;
	color: #7A7F7D;
}

/* Volzette lessen: zichtbaar, maar duidelijk niet beschikbaar. */
.gform_wrapper .edumedic-lessen .gchoice[data-volzet="1"],
.gform_wrapper .edumedic-lessen .gchoice[data-volzet="1"]:hover {
	background-color: #F8F9F9;
	border-color: var(--edumedic-rand);
	border-style: dashed;
	box-shadow: none;
}

.gform_wrapper .edumedic-lessen .gchoice[data-volzet="1"] label,
.gform_wrapper .edumedic-lessen .gchoice[data-volzet="1"] input {
	cursor: not-allowed;
}

.gform_wrapper .edumedic-lessen .gchoice[data-volzet="1"] .edumedic-les__titel {
	color: #7A7F7D;
}

.gform_wrapper .edumedic-lessen .gchoice[data-volzet="1"] .edumedic-les__regel {
	color: #9AA0A0;
}

.gform_wrapper .edumedic-lessen .gchoice[data-volzet="1"] .edumedic-les__icoon {
	color: #9AA0A0;
}

.gform_wrapper .edumedic-lessen .gchoice[data-volzet="1"] .edumedic-les__bedrag {
	color: #7A7F7D;
}

@media (max-width: 520px) {
	/*
	 * Naast het keuzerondje blijft er op smalle schermen te weinig breedte
	 * over voor de titel en de praktische regels. Het rondje krijgt daarom
	 * een eigen regel boven de tekst: Gravity Forms zet de keuze standaard
	 * in twee kolommen (rondje | label), hier houden we er één over.
	 */
	.gform_wrapper .edumedic-lessen .gchoice {
		display: grid;
		gap: 10px;
		grid-template-columns: 1fr;
		justify-items: start;
	}

	/* Gravity Forms geeft het keuzelabel een linkermarge van 12px: dat is de
	   ruimte naast het rondje. Nu het rondje erboven staat, springt de tekst
	   daardoor in. Op nul zetten, zodat rondje en tekst links op één lijn
	   beginnen. */
	.gform_wrapper .edumedic-lessen .gchoice label {
		--gf-local-margin-x: 0;
	}

	.gform_wrapper .edumedic-les {
		grid-template-columns: 1fr;
	}

	.gform_wrapper .edumedic-les__badge {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
		margin-top: 8px;
	}
}

/* ---------------------------------------------------------------------
 * Deelnemerslijst
 * ------------------------------------------------------------------ */

.gform_wrapper table.gfield_list th {
	color: var(--edumedic-titel);
	font-family: var(--gf-font-family-base);
	font-weight: 600;
}

/* ---------------------------------------------------------------------
 * De bevestiging na het inschrijven
 * ------------------------------------------------------------------ */

.gform_confirmation_message {
	color: var(--edumedic-tekst, #38393B);
	font-family: var(--edumedic-font);
}

.gform_confirmation_message h3 {
	color: var(--edumedic-titel, #363A3C);
	margin-top: 0;
}

.gform_confirmation_message h4 {
	color: var(--edumedic-titel, #363A3C);
	margin-bottom: .4em;
}

.gform_confirmation_message table.gfield_list {
	background-color: #FFFFFF;
	border-collapse: collapse;
	border-radius: 6px;
	overflow: hidden;
}

.gform_confirmation_message table.gfield_list th,
.gform_confirmation_message table.gfield_list td {
	border: 1px solid #FFFFFF;
	padding: 8px 14px;
	text-align: left;
}

.gform_confirmation_message table.gfield_list th {
	background-color: var(--edumedic-groen, #8CC040);
	color: #FFFFFF;
	font-weight: 600;
}

.gform_confirmation_message table.gfield_list td {
	background-color: #F6F7F7;
}

/* ---------------------------------------------------------------------
 * Stappenbalk: Opleiding > Je gegevens > Deelnemers
 * ------------------------------------------------------------------ */

.gform_wrapper .gf_page_steps {
	border-bottom: 1px solid var(--edumedic-rand, #DFE3E1);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin-bottom: 32px;
	padding-bottom: 18px;
}

.gform_wrapper .gf_step {
	align-items: center;
	color: #9AA0A0;
	display: flex;
	font-family: var(--edumedic-font);
	font-size: 15px;
	font-weight: 500;
	gap: 10px;
	margin: 0;
	opacity: 1;
}

/* Het bolletje met het stapnummer. */
.gform_wrapper .gf_step .gf_step_number {
	align-items: center;
	background-color: #FFFFFF;
	border: 2px solid var(--edumedic-rand, #DFE3E1);
	border-radius: 50%;
	color: #9AA0A0;
	display: flex;
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	height: 32px;
	justify-content: center;
	width: 32px;
}

/* De stap waar je nu staat. */
.gform_wrapper .gf_step.gf_step_active {
	color: var(--edumedic-titel, #363A3C);
	font-weight: 600;
}

.gform_wrapper .gf_step.gf_step_active .gf_step_number {
	background-color: var(--edumedic-groen, #8CC040);
	border-color: var(--edumedic-groen, #8CC040);
	color: #FFFFFF;
}

/* Stappen die je al doorlopen hebt. */
.gform_wrapper .gf_step.gf_step_completed {
	color: var(--edumedic-tekst, #38393B);
}

.gform_wrapper .gf_step.gf_step_completed .gf_step_number {
	background-color: var(--edumedic-groen, #8CC040);
	border-color: var(--edumedic-groen, #8CC040);
	color: #FFFFFF;
}

/* De knoppen om tussen de stappen te navigeren. */
.gform_wrapper .gform_page_footer input[type="button"] {
	border-radius: var(--edumedic-radius, 6px);
	cursor: pointer;
	font-family: var(--edumedic-font);
	font-size: 18px;
	font-weight: 500;
	padding: 16px 26px;
	transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

/* "Volgende" krijgt dezelfde nadruk als de verzendknop. */
.gform_wrapper .gform_page_footer input.gform_next_button {
	background-color: var(--edumedic-groen, #8CC040);
	border: none;
	color: #FFFFFF;
}

.gform_wrapper .gform_page_footer input.gform_next_button:hover,
.gform_wrapper .gform_page_footer input.gform_next_button:focus {
	background-color: var(--edumedic-groen-donker, #74A331);
}

/* "Vorige" blijft secundair. */
.gform_wrapper .gform_page_footer input.gform_previous_button {
	background-color: transparent;
	border: 1px solid var(--edumedic-rand, #DFE3E1);
	color: var(--edumedic-tekst, #38393B);
	margin-right: 10px;
}

.gform_wrapper .gform_page_footer input.gform_previous_button:hover,
.gform_wrapper .gform_page_footer input.gform_previous_button:focus {
	background-color: var(--edumedic-groen-licht, #EBFEDF);
	border-color: var(--edumedic-groen, #8CC040);
	color: var(--edumedic-titel, #363A3C);
}

@media (max-width: 600px) {
	/*
	 * Op mobiel is er te weinig breedte voor de stappenbalk: die valt uit
	 * elkaar over meerdere regels en duwt het formulier onder de vouw.
	 * De knoppen "Vorige"/"Volgende" onderaan blijven de navigatie.
	 */
	.gform_wrapper .gf_page_steps {
		display: none;
	}

	.gform_wrapper .gform_page_footer input[type="button"] {
		font-size: 16px;
		padding: 14px 20px;
	}
}

/* ---------------------------------------------------------------------
 * De uitleg '"*" geeft vereiste velden aan'
 *
 * Visueel verbergen, maar beschikbaar houden voor schermlezers: die hebben
 * de uitleg nodig om te weten waar het sterretje voor staat.
 * ------------------------------------------------------------------ */

.gform_wrapper .gform_required_legend {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Zonder titel en omschrijving blijft er een lege kop over. */
.gform_wrapper .gform_heading:has(> .gform_required_legend:only-child) {
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------
 * De begeleidende zin bovenaan elke stap
 * ------------------------------------------------------------------ */

.gform_wrapper .edumedic-stap-intro {
	margin-bottom: 4px;
}

.gform_wrapper .edumedic-stap-intro p {
	color: #6E7472;
	font-size: 15.5px;
	line-height: 1.6;
	margin: 0;
	max-width: 62ch;
}

.gform_wrapper .edumedic-stap-intro p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * "Ga verder" volgt de keuze.
 *
 * De lijst met lessen kan lang zijn; form.js verhuist de knoppenbalk van
 * stap 1 naar net onder de aangeklikte les. Hier halen we de afstanden weg
 * die Gravity Forms de balk onderaan een stap geeft.
 * ------------------------------------------------------------------ */

.gform_wrapper .edumedic-lessen .gform_page_footer {
	border: none;
	margin: 0 0 12px;
	padding: 0;
}

/* Even laten opkomen, zodat het verspringen niet als een schok aanvoelt. */
.gform_wrapper .edumedic-lessen .edumedic-verder-bij-keuze {
	animation: edumedic-verder-op .18s ease-out;
}

@keyframes edumedic-verder-op {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gform_wrapper .edumedic-lessen .edumedic-verder-bij-keuze {
		animation: none;
	}
}