/* AW module: Aanvraagfunnel — opmaak van Elementor-formulier met class "awcf-funnel".
   Kleuren en lettertypes via Elementor Global Colors/Fonts. */

.awcf-funnel {
	--awcf-ink: var(--e-global-color-accent, #1B1A1C);
	--awcf-line: var(--e-global-color-sa_lijn, #E4E1DE);
	--awcf-muted: var(--e-global-color-sa_grijs, #5F5A5C);
	--awcf-sel: var(--e-global-color-sa_oranje_licht, #FFF1E4);

	.awcf-hidden { display: none !important; }
	.elementor-field-type-html:focus, .elementor-field-type-html :focus { outline: none; }

	/* Voortgang */
	.e-form__indicators { margin-bottom: 22px; }
	.e-form__indicators__indicator--progress {
		height: 5px;
		border-radius: 3px;
		background: var(--awcf-line);
		overflow: hidden;
	}
	.e-form__indicators__indicator__progress__meter {
		height: 5px;
		border-radius: 3px;
		background: linear-gradient(90deg, var(--e-global-color-primary, #F58A24), var(--e-global-color-secondary, #EE4E86));
		font-size: 0;
		transition: width .3s ease;
	}

	/* Vraag-labels van keuzegroepen als kop */
	.elementor-form .elementor-field-group.elementor-field-type-radio > .elementor-field-label {
		margin-bottom: 14px;
		font-family: var(--e-global-typography-accent-font-family), sans-serif;
		font-weight: 800;
		font-size: 22px;
		line-height: 1.12;
		letter-spacing: -.01em;
		text-transform: uppercase;
		color: var(--awcf-ink);
	}
	.elementor-form .elementor-field-group.elementor-field-type-radio:has(.awcf-funnel-kaarten) > .elementor-field-label { font-size: 24px; }
	.elementor-form .elementor-field-group.elementor-field-type-radio:has(.awcf-funnel-pills) > .elementor-field-label {
		margin-bottom: 10px;
		font-family: var(--e-global-typography-text-font-family), sans-serif;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0;
		text-transform: none;
	}

	/* Keuzekaarten (dienst + vervolgvraag) */
	.elementor-field-subgroup.awcf-funnel-kaarten,
	.elementor-field-subgroup.awcf-funnel-detail {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		width: 100%;
	}
	.elementor-field-type-radio .elementor-field-option {
		position: relative;
		display: flex;
		margin: 0;
	}
	.elementor-field-type-radio .elementor-field-option input {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
		pointer-events: none;
	}
	.awcf-funnel-kaarten .elementor-field-option label,
	.awcf-funnel-detail .elementor-field-option label {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		width: 100%;
		min-height: 56px;
		margin: 0;
		padding: 12px 14px;
		border: 1.5px solid var(--awcf-line);
		border-radius: 14px;
		background: #fff;
		color: var(--awcf-ink);
		font-size: 14.5px;
		font-weight: 600;
		line-height: 1.3;
		cursor: pointer;
		transition: border-color .2s ease, background-color .2s ease;
	}
	.awcf-funnel-kaarten .elementor-field-option label {
		justify-content: flex-start;
		min-height: 84px;
		padding: 14px 16px;
		border-radius: 16px;
	}
	.awcf-funnel-kaart-titel { font-size: 15px; font-weight: 700; line-height: 1.25; }
	.awcf-funnel-kaart-hint { font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--awcf-muted); }

	.elementor-field-type-radio .elementor-field-option label:hover { border-color: var(--awcf-ink); }
	.awcf-funnel-kaarten input:checked + label,
	.awcf-funnel-detail input:checked + label {
		border-color: var(--awcf-ink);
		background: var(--awcf-sel);
	}
	.elementor-field-type-radio input:focus-visible + label {
		outline: 2px solid var(--e-global-color-primary, #F58A24);
		outline-offset: 2px;
	}

	/* Planning als pills */
	.elementor-field-subgroup.awcf-funnel-pills {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	.elementor-field-subgroup.awcf-funnel-pills .elementor-field-option { flex: 0 0 auto; }
	.awcf-funnel-pills .elementor-field-option label {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin: 0;
		padding: 0 18px;
		border: 1.5px solid var(--awcf-line);
		border-radius: 999px;
		background: #fff;
		color: var(--awcf-ink);
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		transition: border-color .2s ease, background-color .2s ease, color .2s ease;
	}
	/* Extra specificiteit: Elementor zet .elementor-field-subgroup label-kleur via widget-ID (0,4,1). */
	.elementor-field-subgroup.awcf-funnel-pills input:checked + label {
		border-color: var(--awcf-ink);
		background: var(--awcf-ink);
		color: #fff;
	}

	/* Stapknoppen: hoofdknop eerst, "Terug" als kleine tekstlink links eronder */
	.e-form__buttons { flex-wrap: wrap; gap: 14px; }
	.e-form__buttons__wrapper:has(.e-form__buttons__wrapper__button-previous) { order: 2; flex: 0 0 auto; width: auto; }
	.e-form__buttons__wrapper:has(.e-form__buttons__wrapper__button-next) { order: 1; flex: 1 1 100%; }
	.elementor-button.e-form__buttons__wrapper__button-previous {
		width: auto;
		min-height: 0;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		background-image: none !important;
		color: var(--awcf-muted) !important;
		font-family: var(--e-global-typography-text-font-family), sans-serif !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		justify-content: flex-start;
	}
	.elementor-button.e-form__buttons__wrapper__button-previous::before { content: '← '; white-space: pre; }
	.elementor-button.e-form__buttons__wrapper__button-previous:hover { color: var(--awcf-ink) !important; }

	.e-form__buttons > .elementor-field-type-submit { order: 1; flex: 1 1 100%; }

	/* Kop + samenvatting in stap 3 */
	.awcf-funnel-kop {
		margin: 0 0 10px;
		font-family: var(--e-global-typography-accent-font-family), sans-serif;
		font-weight: 800;
		font-size: 22px;
		line-height: 1.12;
		letter-spacing: -.01em;
		text-transform: uppercase;
		color: var(--awcf-ink);
	}
	.awcf-funnel-samenvatting {
		display: inline-flex;
		max-width: 100%;
		margin: 0;
		padding: 7px 14px;
		border-radius: 999px;
		background: var(--e-global-color-sa_zand, #F4F2F0);
		color: var(--e-global-color-text, #3A3638);
		font-size: 13px;
		line-height: 1.35;
	}
	.awcf-funnel-samenvatting:empty { display: none; }

	/* Privacy-regel */
	.awcf-funnel-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--awcf-muted); }

	/* Upload-veld rustiger */
	.elementor-upload-field { font-size: 14px; color: var(--e-global-color-text, #3A3638); }

	/* Bevestiging */
	.elementor-message.elementor-message-success {
		margin-top: 18px;
		padding: 18px 20px;
		border: 1.5px solid var(--awcf-line);
		border-radius: 18px;
		background: #FBFAF9;
		color: var(--awcf-ink);
		font-size: 16px;
		line-height: 1.6;
	}
	.elementor-message-success::before { display: none; }
}

@media (max-width: 400px) {
	.awcf-funnel .elementor-field-subgroup.awcf-funnel-kaarten,
	.awcf-funnel .elementor-field-subgroup.awcf-funnel-detail { grid-template-columns: 1fr; }
}