/**
 * Contact form — eyebrow labels, underline fields, type badges.
 */

.heinz-contact-form {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem 1.5rem;
	width: 100%;
	margin: 0;
}

@media (min-width: 768px) {
	.heinz-contact-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.heinz-contact-form__field--full,
	.heinz-contact-form__hp,
	.heinz-contact-form__actions,
	.heinz-contact-form__status {
		grid-column: 1 / -1;
	}
}

.heinz-contact-form__field {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.heinz-contact-form__label {
	margin: 0;
	padding: 0;
	color: var(--heinz-color-title);
	font-family: var(--heinz-font-body);
	font-size: var(--text-xs);
	font-weight: 400;
	letter-spacing: var(--tracking-widest);
	line-height: var(--text-xs--line-height);
	text-transform: uppercase;
}

.heinz-contact-form__required {
	color: var(--heinz-color-primary);
	font-weight: inherit;
	letter-spacing: 0;
	text-transform: none;
}

.heinz-contact-form input.heinz-contact-form__control,
.heinz-contact-form textarea.heinz-contact-form__control,
.elementor-widget-heinz-contact-form input.heinz-contact-form__control,
.elementor-widget-heinz-contact-form textarea.heinz-contact-form__control {
	display: block;
	width: 100%;
	margin-block-start: 0.1rem;
	padding-block: 0.5rem;
	padding-inline: 0;
	border-radius: 0;
	border-top: 0 none transparent !important;
	border-right: 0 none transparent !important;
	border-left: 0 none transparent !important;
	border-inline: 0 none transparent !important;
	border-block-start: 0 none transparent !important;
	border-bottom: 1px solid #ffffff19 !important;
	border-block-end: 1px solid #ffffff19 !important;
	background: transparent;
	color: var(--heinz-color-text);
	font-family: var(--heinz-font-body);
	font-size: var(--text-base);
	line-height: var(--text-base--line-height);
	box-shadow: none !important;
	appearance: none;
	-webkit-appearance: none;
	outline: none !important;
	transition: border-bottom-color var(--heinz-transition), border-block-end-color var(--heinz-transition);
}

.heinz-contact-form .heinz-contact-form__control::placeholder {
	color: var(--heinz-color-text);
	opacity: 0.72;
}

.heinz-contact-form input.heinz-contact-form__control:is(:hover, :focus, :focus-visible, :active),
.heinz-contact-form textarea.heinz-contact-form__control:is(:hover, :focus, :focus-visible, :active),
.elementor-widget-heinz-contact-form input.heinz-contact-form__control:is(:hover, :focus, :focus-visible, :active),
.elementor-widget-heinz-contact-form textarea.heinz-contact-form__control:is(:hover, :focus, :focus-visible, :active) {
	border-top: 0 none transparent !important;
	border-right: 0 none transparent !important;
	border-left: 0 none transparent !important;
	border-inline: 0 none transparent !important;
	border-block-start: 0 none transparent !important;
	border-bottom: 1px solid var(--heinz-color-primary) !important;
	border-block-end: 1px solid var(--heinz-color-primary) !important;
	outline: none !important;
	box-shadow: none !important;
}

.heinz-contact-form__control--area {
	min-height: 8rem;
	resize: vertical;
}

.heinz-contact-form__control.is-invalid {
	border-bottom-color: var(--heinz-color-primary);
}

.heinz-contact-form__control:-webkit-autofill,
.heinz-contact-form__control:-webkit-autofill:hover,
.heinz-contact-form__control:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--heinz-color-title);
	caret-color: var(--heinz-color-title);
	box-shadow: 0 0 0 1000px var(--heinz-color-bg) inset;
	transition: background-color 9999s ease-out;
}

.heinz-contact-form__types {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: 0.75rem;
}

.heinz-contact-form__badge {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0.5rem 0.875rem;
	border: 1px solid #ffffff19;
	border-radius: 0;
	color: var(--heinz-color-text);
	font-family: var(--heinz-font-body);
	font-size: var(--text-sm);
	line-height: var(--text-sm--line-height);
	cursor: pointer;
	transition: border-color var(--heinz-transition), color var(--heinz-transition);
}

.heinz-contact-form__badge:hover {
	border-color: var(--heinz-color-border-subtle);
}

.heinz-contact-form__type {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.heinz-contact-form__badge:has(.heinz-contact-form__type:checked),
.heinz-contact-form__badge:has(.heinz-contact-form__type:focus-visible),
.elementor-widget .heinz-contact-form__badge:has(.heinz-contact-form__type:checked),
.elementor-widget .heinz-contact-form__badge:has(.heinz-contact-form__type:focus-visible) {
	border-color: var(--heinz-color-primary);
	color: var(--heinz-color-title) !important;
}

.heinz-contact-form__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	margin: 0;
}

.heinz-contact-form__submit {
	position: relative;
	overflow: hidden;
}

.heinz-contact-form__submit-bar {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 2px;
	background: var(--heinz-color-text-dark);
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

.heinz-contact-form__loader {
	display: none;
	width: min(100%, 28rem);
}

.heinz-contact-form__loader-title {
	margin: 0.5rem 0 0;
	color: var(--heinz-color-title);
	font-family: var(--heinz-font-heading);
	font-size: var(--text-xl);
	font-weight: var(--font-weight-medium);
	letter-spacing: -0.04em;
	line-height: var(--text-xl--line-height);
}

.heinz-contact-form__rail {
	position: relative;
	display: block;
	width: 100%;
	height: 2px;
	margin-block-start: 1.25rem;
	overflow: hidden;
	background: #ffffff19;
}

.heinz-contact-form__rail-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--heinz-send-progress, 12%);
	background: var(--heinz-color-primary);
	transition: width 0.45s ease;
}

.heinz-contact-form__rail-fill::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4.5rem;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, #f3f1ee 55%, transparent), transparent);
	animation: heinz-contact-rail-scan 1.4s ease-in-out infinite;
}

.heinz-contact-form__loader-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.heinz-contact-form__loader-steps li {
	position: relative;
	margin: 0;
	color: var(--heinz-color-text);
	font-family: var(--heinz-font-body);
	font-size: var(--text-sm);
	line-height: var(--text-sm--line-height);
	opacity: 0.45;
	transition: color var(--heinz-transition), opacity var(--heinz-transition);
}

.heinz-contact-form__loader-steps li.is-active {
	color: var(--heinz-color-title);
	opacity: 1;
}

.heinz-contact-form__loader-steps li.is-done {
	color: var(--heinz-color-primary);
	opacity: 1;
}

.heinz-contact-form__status {
	margin: 0;
	color: var(--heinz-color-text);
	font-family: var(--heinz-font-body);
	font-size: var(--text-base);
	line-height: var(--text-base--line-height);
}

.heinz-contact-form__status.is-success {
	color: var(--heinz-color-title);
}

.heinz-contact-form__status.is-error {
	color: var(--heinz-color-primary);
}

.heinz-contact-form.is-sending {
	cursor: wait;
}

.heinz-contact-form.is-sending .heinz-contact-form__field {
	opacity: 0.32;
	pointer-events: none;
	transition: opacity 0.35s ease;
}

.heinz-contact-form.is-sending .heinz-contact-form__submit {
	cursor: wait;
}

.heinz-contact-form.is-sending .heinz-contact-form__submit .btn-icon {
	opacity: 0;
	transform: translateX(6px);
}

.heinz-contact-form.is-sending .heinz-contact-form__submit-bar {
	opacity: 1;
	animation: heinz-contact-submit-bar 1.35s ease-in-out infinite;
}

.heinz-contact-form.is-sending .heinz-contact-form__loader {
	display: block;
}

.heinz-contact-form.is-success .heinz-contact-form__field,
.heinz-contact-form.is-success .heinz-contact-form__actions {
	display: none;
}

.heinz-contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@keyframes heinz-contact-submit-bar {
	0% {
		transform: scaleX(0.08);
		transform-origin: left center;
	}

	50% {
		transform: scaleX(1);
		transform-origin: left center;
	}

	51% {
		transform-origin: right center;
	}

	100% {
		transform: scaleX(0.08);
		transform-origin: right center;
	}
}

@keyframes heinz-contact-rail-scan {
	0% {
		transform: translateX(-120%);
	}

	100% {
		transform: translateX(280%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.heinz-contact-form.is-sending .heinz-contact-form__submit-bar,
	.heinz-contact-form__rail-fill,
	.heinz-contact-form__rail-fill::after {
		animation: none;
		transition: none;
	}

	.heinz-contact-form.is-sending .heinz-contact-form__submit-bar {
		transform: scaleX(1);
		opacity: 1;
	}
}