/**
 * Gravity Forms Custom Styles
 *
 * Uses Elementor global CSS variables:
 * --e-global-color-secondary:  #9A7C6D  (accent)
 * --e-global-color-f37f4be:    #38292C  (hover dark)
 * --e-global-color-ef5de0d:    #FFFFFF  (white)
 * --e-global-typography-primary-font-family: "museo-sans"
 */

/* Hide floating "Termin buchen" button — this IS the booking page */
.floated-buttons {
	display: none;
}

/* ── Custom Properties ── */

.gform-theme.gform-theme--framework.gform_wrapper {
	--gf-custom-text-color: #3C3C3C;
	--gf-custom-track-color: #707070;
	--gf-custom-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--gf-custom-font-heading: var(--e-global-typography-primary-font-family, "museo-sans"), sans-serif;
}

/* ── Progress Bar ── */

.gf_progressbar_wrapper {

	.gf_progressbar_title {
		text-transform: uppercase;
		font-size: 18px;
		font-weight: 400;
		color: var(--gf-custom-text-color);
		letter-spacing: 1.8px;
		line-height: 22px;
		margin-bottom: 18px;
	}

	/* Track: 3 equal segments via flexbox */
	.gf_progressbar {
		background: transparent;
		border-radius: 0;
		height: auto;
		display: flex;
		align-items: center;
		gap: 0;

		/* Inactive segments: 1px */
		&::before {
			content: "";
			order: 2;
			flex: 1;
			height: 1px;
			background: var(--gf-custom-track-color);
		}

		&::after {
			content: "";
			order: 3;
			flex: 1;
			height: 1px;
			background: var(--gf-custom-track-color);
		}

		/* Step 2 — only segment 2 active */
		&:has(.percentbar_66)::before {
			height: 4px;
		}

		/* Step 3 — only segment 3 active */
		&:has(.percentbar_100)::after {
			height: 4px;
		}
	}

	/* Segment 1 = the actual fill element */
	.gf_progressbar_percentage {
		position: static !important;
		order: 1;
		flex: 1;
		width: auto !important;
		height: 1px !important;
		border-radius: 0;
		background: var(--gf-custom-track-color) !important;

		span {
			display: none;
		}

		/* Only step 1 — segment 1 active */
		&.percentbar_33 {
			height: 4px !important;
		}
	}

	/* Step 3: more space below progress bar (no radio groups, just inputs) */
	&:has(.percentbar_100) {
		margin-block-end: 105px !important;
	}
}

/* ── Progress Bar: 2-step override (Form 2 – Gutschein) ── */

#gform_wrapper_2 .gf_progressbar_wrapper {

	/* Hide unused 3rd segment */
	.gf_progressbar::after {
		display: none;
	}

	/* Step 1 active */
	.gf_progressbar_percentage.percentbar_50 {
		height: 4px !important;
	}

	/* Step 2: activate segment 2 (::before), suppress ::after */
	.gf_progressbar:has(.percentbar_100)::before {
		height: 4px;
	}
	.gf_progressbar:has(.percentbar_100)::after {
		display: none;
	}
}

/* ── Override GF Orbital theme variables ── */

.gform-theme.gform-theme--framework.gform_wrapper {

	/* Accent color for interactive controls (radio, checkbox, focus rings etc.)
	   !important needed: GF injects these via inline <style> with ID selectors */
	--gf-color-in-ctrl-primary: #9A7C6D !important;
	--gf-color-in-ctrl-primary-rgb: 154, 124, 109 !important;
	--gf-color-in-ctrl-primary-contrast: #FFFFFF !important;

	/* Input borders & focus rings → accent */
	--gf-ctrl-border-color: #9A7C6D !important;
	--gf-ctrl-border-color-hover: #9A7C6D !important;
	--gf-ctrl-border-color-focus: #9A7C6D !important;
	--gf-ctrl-outline-color-focus: rgba(154, 124, 109, 0.65) !important;
	--gf-ctrl-shadow: none !important;

	/* Radio / Checkbox size → 26px (XD) */
	--gf-ctrl-choice-size: 26px !important;
	--gf-ctrl-choice-size-sm: 26px !important;
	--gf-ctrl-choice-size-md: 26px !important;

	/* ── Vertical spacing ── */
	--gf-field-choice-gap: 0px !important;
	--gf-field-pg-prog-margin-y-end: 50px !important;

	/* Shared button tokens */
	--gf-ctrl-btn-font-family: var(--gf-custom-font-heading);
	--gf-ctrl-btn-font-size: 16px;
	--gf-ctrl-btn-font-size-md: 16px;
	--gf-ctrl-btn-font-weight: 600;
	--gf-ctrl-btn-letter-spacing: 1.28px;
	--gf-ctrl-btn-text-transform: uppercase;
	--gf-ctrl-btn-radius: 50px;
	--gf-ctrl-btn-padding-x: 42px;
	--gf-ctrl-btn-padding-y: 0;
	--gf-ctrl-btn-size: auto;
	--gf-ctrl-btn-shadow: none;
	--gf-ctrl-btn-shadow-hover: none;
	--gf-ctrl-btn-shadow-focus: none;

	/* Primary (Weiter / Submit) */
	--gf-ctrl-btn-bg-color-primary: var(--e-global-color-secondary, #9A7C6D);
	--gf-ctrl-btn-color-primary: var(--e-global-color-ef5de0d, #FFFFFF);
	--gf-ctrl-btn-border-color-primary: var(--e-global-color-secondary, #9A7C6D);

	/* Secondary (Zurück) */
	--gf-ctrl-btn-bg-color-secondary: transparent;
	--gf-ctrl-btn-color-secondary: var(--e-global-color-secondary, #9A7C6D);
	--gf-ctrl-btn-border-color-secondary: var(--e-global-color-secondary, #9A7C6D);

	/* ── Buttons ── */

	.gform_next_button,
	.gform_previous_button,
	.gform_button {
		padding: 18px 42px 16px !important;
		height: auto !important;
		transition: background-color 0.3s, color 0.3s, border-color 0.3s;

		&:hover,
		&:focus {
			background-color: var(--e-global-color-f37f4be, #38292C) !important;
			border-color: var(--e-global-color-f37f4be, #38292C) !important;
			color: var(--e-global-color-ef5de0d, #FFFFFF) !important;
		}
	}

	.gform_previous_button {
		background-color: transparent !important;
	}

	/* ── Field Labels (legend + label) ── */

	legend.gfield_label.gform-field-label,
	label.gfield_label.gform-field-label {
		font-family: var(--gf-custom-font-heading);
		font-size: 28px;
		font-weight: 400;
		letter-spacing: 2.24px;
		color: var(--gf-custom-text-color);
		text-transform: uppercase;
	}

	.gfield_label .gfield_required {
		font-family: var(--gf-custom-font-heading);
		font-size: 28px;
		font-weight: 400;
		letter-spacing: 2.24px;
		color: var(--gf-custom-text-color);
	}

	.gf-optional {
		font-size: 16px;
		text-transform: none;
		letter-spacing: 0.4px;
	}

	/* ── Radio / Checkbox choices ── */

	.gchoice {
		align-items: center;
	}

	.gchoice label {
		text-align: left;
		font-family: var(--gf-custom-font-body);
		font-size: 21px !important;
		font-weight: 400;
		letter-spacing: 0.53px;
		color: var(--gf-custom-text-color);
	}

	/* ── Text Inputs ── */

	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="date"],
	select,
	textarea {
		height: 50px !important;
		font-family: var(--gf-custom-font-body) !important;
		font-size: 21px !important;
		font-weight: 400 !important;
		letter-spacing: 0.53px !important;
		color: var(--gf-custom-text-color) !important;
		background-color: #FFFFFF !important;
		border-radius: 0 !important;
	}

	select {
		line-height: 50px !important;
	}

	/* Step 1: narrower text inputs */
	#gform_page_1_1 input[type="text"],
	#gform_page_1_1 input[type="date"] {
		max-width: 565px;
	}

	/* ── Grid / Spacing ── */

	.gform_fields {
		gap: 26px 24px !important;
	}

	/* ── Required notice: move below buttons ── */

	.gform_required_legend {
		display: none;
	}

	.gform_page_footer {
		margin-top: 40px !important;
		/*
		&::after {
			content: '* erforderlich';
			flex-basis: 100%;
			order: 99;
			font-family: var(--gf-custom-font-body);
			font-size: 16px;
			font-weight: 500;
			letter-spacing: 0.4px;
			color: var(--gf-custom-text-color);
			margin-top: 15px;
		}*/
	}
}

/* ── Form 1 (Termin anfragen) – specific overrides ── */

#gform_wrapper_1 {

	legend.gfield_label.gform-field-label,
	label.gfield_label.gform-field-label {
		margin-bottom: 35px !important;
	}

	.gfield_radio .gchoice:first-child,
	.gfield_checkbox .gchoice:first-child {
		padding-block-start: 0;
	}

	.gchoice {
		padding-block: 13px;
	}

	/* Category headings – no extra padding, line-height handles spacing */
	.gchoice.gchoice_category {
		padding-block: 0;
	}

	.gchoice label {
		line-height: 1.35 !important;
	}
}

/* ── Form 1: Accordion – single-column ── */

#gform_wrapper_1 .gf-cat-group {
	display: block;
}

#gform_wrapper_1 .gf-cat-body-inner {
	display: flex;
	flex-direction: column;
}

/* ── Responsive: < 1050px ── */

@media (max-width: 1049px) {

	.gf_progressbar_wrapper .gf_progressbar_title {
		font-size: 15px;
		letter-spacing: 1.5px;
		margin-bottom: 14px;
	}

	.gform-theme.gform-theme--framework.gform_wrapper {

		/* Smaller radio/checkbox controls */
		--gf-ctrl-choice-size: 22px !important;
		--gf-ctrl-choice-size-sm: 22px !important;
		--gf-ctrl-choice-size-md: 22px !important;

		/* Less space below progress bar */
		--gf-field-pg-prog-margin-y-end: 35px !important;

		/* ── Field Labels ── */
		legend.gfield_label.gform-field-label,
		label.gfield_label.gform-field-label {
			font-size: 22px;
			letter-spacing: 1.76px;
		}

		.gfield_label .gfield_required {
			font-size: 22px;
			letter-spacing: 1.76px;
		}

		.gf-optional {
			font-size: 14px;
		}

		/* ── Radio / Checkbox choices ── */
		.gchoice {
			padding-block: 8px;
		}

		.gchoice label {
			font-size: 17px !important;
			line-height: 1.45 !important;
			letter-spacing: 0.4px;
		}

		/* ── Text Inputs ── */
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		input[type="date"],
		select,
		textarea {
			height: 44px !important;
			font-size: 17px !important;
			letter-spacing: 0.4px !important;
		}

		select {
			line-height: 44px !important;
		}

		/* Step 1: loosen max-width so inputs use available space */
		#gform_page_1_1 input[type="text"],
		#gform_page_1_1 input[type="date"] {
			max-width: 100%;
		}

		/* ── Grid / Spacing ── */
		.gform_fields {
			gap: 20px 18px !important;
		}

		.gform_page_footer {
			margin-top: 30px !important;
		}

		/* ── Buttons ── */
		.gform_next_button,
		.gform_previous_button,
		.gform_button {
			padding: 14px 34px 13px !important;
			font-size: 14px;
			letter-spacing: 1.1px;
		}

		.gform_page_footer::after {
			font-size: 14px;
		}
	}

	#gform_wrapper_1 {

		legend.gfield_label.gform-field-label,
		label.gfield_label.gform-field-label {
			margin-bottom: 20px !important;
		}
	}
}

/* ── Responsive: single-column (< 640px) ── */

@media (max-width: 639px) {

	.gform-theme.gform-theme--framework.gform_wrapper {

		/* More vertical space before Wunschtermin, Zeitraum, Mitarbeiter */
		#field_1_3,
		#field_1_5,
		#field_1_6 {
			margin-top: 20px;
		}
	}
}

/* ── Voucher Form: Category Accordion ── */

/* 2-column layout via flexbox — fixed columns, no reflow on accordion expand */
#gform_wrapper_2 .gfield_checkbox {
	display: flex !important;
	flex-direction: row !important;
	gap: 12px;
	align-items: flex-start;
}

#gform_wrapper_2 .gf-col {
	flex: 1;
	min-width: 0;
}

#gform_wrapper_2 .gf-cat-group {
	display: block;
}

.gf-cat-body {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows 0.25s ease;
	margin-left: -4px;
	padding-left: 4px;
}

.gf-cat-body-inner {
	min-height: 0;
}

.gf-cat-heading {
	display: block;
	font-size: 21px;
	line-height: 65px;
	letter-spacing: 0.53px;
	color: #3C3C3C;
	font-weight: 400;
	font-family: var(--gf-custom-font-body);
	cursor: pointer;
}
@media (max-width: 768px) {
	.gf-cat-heading {
		line-height: 40px;
	}
}

.gf-cat-heading::after {
	content: ' +';
}

.gf-cat-heading.open {
	font-weight: 700;
}

.gf-cat-heading.open::after {
	content: ' -';
}

/* Checkbox labels inside accordion */
#gform_wrapper_2 #input_2_11 .gchoice label {
	font-size: 18px;
	line-height: 36px;
	letter-spacing: 0.45px;
	color: #3C3C3C;
}

/* Preis display */
#gform_wrapper_2 .ginput_product_price_label,
#gform_wrapper_2 .ginput_product_price {
	font-size: 24px;
	line-height: 26px;
	letter-spacing: 0.6px;
	font-weight: 500;
	color: #3C3C3C;
}

/* Gutscheinart radio options */
#gform_wrapper_2 #field_2_1 .gfield_label {
	margin-bottom: 35px !important;
}

#gform_wrapper_2 #field_2_1 .gfield_radio {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	gap: 40px;
}

#gform_wrapper_2 #field_2_1 .gchoice {
	width: auto !important;
}

#gform_wrapper_2 #field_2_1 .gchoice label {
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 26px !important;
	letter-spacing: 0.45px !important;
	color: #3C3C3C !important;
}

/* Space before BEHANDLUNGEN: grid-gap(26px) + margin(54px) = 80px */
#gform_wrapper_2 #field_2_11 {
	margin-top: 54px !important;
}

/* Gutscheinbetrag (Geldbetrag path) – same 80px gap as Behandlung */
#gform_wrapper_2 #field_2_8 {
	margin-top: 54px !important;
}

#gform_wrapper_2 #field_2_8 input {
	max-width: 300px !important;
}

/* Separator (field 15) + Preis/button spacing */
#gform_wrapper_2 #field_2_15 {
	border-bottom-color: #707070 !important;
	margin-top: 36px !important;
	margin-bottom: 36px !important;
	padding-bottom: 0 !important;
}

#gform_wrapper_2 #field_2_15 .gsection_title {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

#gform_wrapper_2 #field_2_9 {
	margin-bottom: 8px !important;
}

#gform_wrapper_2 .gform_page_footer {
	margin-top: 32px !important;
}

/* ── Responsive: accordion 1-column below 600px ── */

@media (max-width: 600px) {

	#gform_wrapper_2 .gfield_checkbox {
		flex-direction: column !important;
		gap: 0;
	}
}

/* ── Responsive: radio options stack vertically below 768px ── */

@media (max-width: 768px) {

	#gform_wrapper_2 #field_2_1 .gfield_radio {
		flex-direction: column !important;
		gap: 16px;
	}
}