/*
 * Connect Gravity Forms' modern themes to the active Zephyr Field Style.
 * The us-field-style_* class is added to the form wrapper by Zephyr.
 */
body .gform_wrapper.gform-theme[class*="us-field-style_"],
body [class*="us-field-style_"] .gform_wrapper.gform-theme {
	--gf-ctrl-bg-color: var(--inputs-background) !important;
	--gf-ctrl-bg-color-hover: var(--inputs-background) !important;
	--gf-ctrl-bg-color-focus: var(--inputs-focus-background) !important;
	--gf-ctrl-border-color: var(--inputs-border-color) !important;
	--gf-ctrl-border-color-hover: var(--inputs-border-color) !important;
	--gf-ctrl-border-color-focus: var(--inputs-focus-border-color) !important;
	--gf-ctrl-border-style: solid !important;
	--gf-ctrl-border-width: var(--inputs-border-width) !important;
	--gf-ctrl-color: var(--inputs-text-color) !important;
	--gf-ctrl-color-hover: var(--inputs-text-color) !important;
	--gf-ctrl-color-focus: var(--inputs-focus-text-color) !important;
	--gf-ctrl-font-family: var(--inputs-font-family, inherit) !important;
	--gf-ctrl-font-size: var(--inputs-font-size) !important;
	--gf-ctrl-font-weight: var(--inputs-font-weight) !important;
	--gf-ctrl-letter-spacing: var(--inputs-letter-spacing) !important;
	--gf-ctrl-padding-x: var(--inputs-padding) !important;
	--gf-ctrl-placeholder-color: var(--inputs-text-color) !important;
	--gf-ctrl-radius: var(--inputs-border-radius) !important;
	--gf-ctrl-radius-max-sm: var(--inputs-border-radius) !important;
	--gf-ctrl-radius-max-md: var(--inputs-border-radius) !important;
	--gf-ctrl-radius-max-lg: var(--inputs-border-radius) !important;
	--gf-ctrl-shadow: var(--inputs-box-shadow) !important;
	--gf-ctrl-size: var(--inputs-height) !important;
	--gf-ctrl-choice-size: var(--inputs-checkbox-size) !important;
	--gf-ctrl-select-multiple-radius: var(--inputs-border-radius) !important;
	--gf-ctrl-textarea-radius: var(--inputs-border-radius) !important;
	--gf-ctrl-outline-width: 0px !important;
	--gf-ctrl-outline-width-focus: 0px !important;
}

/* Match the same declarations Zephyr applies to native form fields. */
body :is(
	.gform_wrapper.gform-theme--foundation[class*="us-field-style_"],
	[class*="us-field-style_"] .gform_wrapper.gform-theme--foundation
) .gfield :is(
	input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]),
	select,
	textarea
) {
	font-family: var(--inputs-font-family, inherit) !important;
	font-size: var(--inputs-font-size, inherit) !important;
	font-weight: var(--inputs-font-weight, inherit) !important;
	letter-spacing: var(--inputs-letter-spacing, inherit) !important;
	text-transform: var(--inputs-text-transform, inherit) !important;
	border-radius: var(--inputs-border-radius, 0px) !important;
	background: var(--inputs-background, transparent) !important;
	border-color: var(--inputs-border-color, currentColor) !important;
	color: var(--inputs-text-color, inherit) !important;
	box-shadow: var(--inputs-box-shadow, none) !important;
	border-width: var(--inputs-border-width, 1px) !important;
	border-style: solid !important;
}

body :is(
	.gform_wrapper.gform-theme--foundation[class*="us-field-style_"],
	[class*="us-field-style_"] .gform_wrapper.gform-theme--foundation
) .gfield :is(
	input[type="date"],
	input[type="datetime-local"],
	input[type="email"],
	input[type="file"],
	input[type="month"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="text"],
	input[type="time"],
	input[type="url"],
	input[type="week"]
) {
	height: auto !important;
	min-height: var(--inputs-height, 2em) !important;
	line-height: var(--inputs-height, 2em) !important;
	padding: 0 var(--inputs-padding, 0.6em) !important;
}

body :is(
	.gform_wrapper.gform-theme--foundation[class*="us-field-style_"],
	[class*="us-field-style_"] .gform_wrapper.gform-theme--foundation
) .gfield select {
	height: calc(var(--inputs-height, 2em) + var(--inputs-border-width, 1px) * 2) !important;
	min-height: var(--inputs-height, 2em) !important;
	line-height: var(--inputs-height, 2em) !important;
	padding-inline: var(--inputs-padding, 0.6em) !important;
}

body :is(
	.gform_wrapper.gform-theme--foundation[class*="us-field-style_"],
	[class*="us-field-style_"] .gform_wrapper.gform-theme--foundation
) .gfield textarea {
	height: 8vw !important;
	min-height: 8vw !important;
	max-height: none !important;
	line-height: var(--magic-text-medium-line-height) !important;
	padding: var(--inputs-padding, 0.6em) !important;
}

@media (max-width: 800px) {
	body :is(
		.gform_wrapper.gform-theme--foundation[class*="us-field-style_"],
		[class*="us-field-style_"] .gform_wrapper.gform-theme--foundation
	) .gfield textarea {
		height: 160px !important;
		min-height: 160px !important;
	}
}

body :is(
	.gform_wrapper.gform-theme--foundation[class*="us-field-style_"],
	[class*="us-field-style_"] .gform_wrapper.gform-theme--foundation
) .gfield :is(
	input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]),
	select,
	textarea
):focus {
	background: var(--inputs-focus-background, transparent) !important;
	border-color: var(--inputs-focus-border-color, currentColor) !important;
	color: var(--inputs-focus-text-color, inherit) !important;
	box-shadow: var(--inputs-focus-box-shadow, none) !important;
}

/* Gravity Form element > Button tab. */
body .mt-gravity-form-button-custom .gform_wrapper.gform-theme :is(
	.gform_button,
	.gform-button,
	.gform_next_button,
	.gform_previous_button,
	input[type="submit"],
	button[type="submit"]
) {
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	padding: var(--mt-gf-button-padding-vertical) var(--mt-gf-button-padding-horizontal) !important;
	background: var(--mt-gf-button-background) !important;
	border-color: var(--mt-gf-button-border-color) !important;
	border-style: solid !important;
	border-width: var(--mt-gf-button-border-width) !important;
	border-radius: var(--mt-gf-button-border-radius) !important;
	color: var(--mt-gf-button-color) !important;
	font-size: var(--mt-gf-button-font-size) !important;
	font-weight: var(--mt-gf-button-font-weight) !important;
	letter-spacing: var(--mt-gf-button-letter-spacing) !important;
	line-height: 1.2 !important;
	text-transform: var(--mt-gf-button-text-transform) !important;
}

body .mt-gravity-form-button-custom .gform_wrapper.gform-theme :is(
	.gform_button,
	.gform-button,
	.gform_next_button,
	.gform_previous_button,
	input[type="submit"],
	button[type="submit"]
):hover {
	background: var(--mt-gf-button-background-hover) !important;
	border-color: var(--mt-gf-button-border-color-hover) !important;
	color: var(--mt-gf-button-color-hover) !important;
}

/* Let labels and supporting copy follow the Gravity Form element's Design color. */
body .mt-gravity-form-button-custom .gform_wrapper.gform-theme :is(
	.gform-field-label,
	.gfield_label,
	.gfield_description,
	.gform_required_legend,
	.gform_description,
	.gsection_description,
	.gfield_required
) {
	color: inherit !important;
}

body .gform_wrapper.gform-theme :is(input, textarea)::placeholder {
	color: #fff !important;
	opacity: 1 !important;
}

/* Keep all field labels on the shared responsive Text Medium preset. */
body .gform_wrapper.gform-theme :is(
	.gform-field-label,
	.gfield_label,
	.gchoice label,
	.ginput_container_consent label
) {
	font-size: var(--magic-text-medium-font-size) !important;
	line-height: var(--magic-text-medium-line-height) !important;
}

body .gform_wrapper.gform-theme .gfield_required_asterisk {
	position: relative;
	top: -0.15em;
	align-self: flex-start;
	line-height: 1 !important;
	vertical-align: top;
}

/* Replace checkbox and radio marks with the shared Checked SVG. */
body .gform_wrapper.gform-theme input:is([type="checkbox"], [type="radio"]) {
	position: relative;
}

body .gform_wrapper.gform-theme input:is([type="checkbox"], [type="radio"])::before {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	display: block !important;
	width: 72% !important;
	height: 72% !important;
	margin: 0 !important;
	background-color: currentColor !important;
	color: inherit !important;
	content: "" !important;
	opacity: 0 !important;
	transform: translate(-50%, -50%) !important;
	-webkit-mask: url("../../img/icons/checked.svg") center / contain no-repeat;
	mask: url("../../img/icons/checked.svg") center / contain no-repeat;
}

body .gform_wrapper.gform-theme input:is([type="checkbox"], [type="radio"]):checked::before {
	opacity: 1 !important;
}