/* Import shared visually-hidden utility so editor and frontend match */
@use "../../blocks/shared/styles/visually-hidden" as *;

:root {
	--jetpack--contact-form--border: 1px solid #8c8f94;
	--jetpack--contact-form--border-color: #8c8f94;
	--jetpack--contact-form--border-size: 1px;
	--jetpack--contact-form--border-style: solid;
	--jetpack--contact-form--border-radius: 0px;
	--jetpack--contact-form--input-padding: 16px;
	--jetpack--contact-form--font-size: 16px;
	--jetpack--contact-form--error-color: #b32d2e;
	--jetpack--contact-form--inverted-text-color: #fff;
}

.contact-form .clear-form {
	clear: both;
}

.contact-form input::placeholder {
	transition: opacity 0.3s ease-out;
}

.contact-form input:hover::placeholder {
	opacity: 0.5;
}

.contact-form input:focus::placeholder {
	opacity: 0.3;
}

.jetpack-form-step {
	display: none;
}

.jetpack-form-step.is-current-step {
	position: relative;
	visibility: visible;
	opacity: 1;
	height: auto;
	overflow: visible;
	z-index: 2;
	display: block;
}

.contact-form .wp-block-jetpack-button:has(button.is-hidden) {
	display: none;
}

/*
	Using :where we will keep a lower CSS specificity,
	allowing themes to easily override these styles
 */
:where(
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form input[type="number"],
.contact-form input[type="time"],
.contact-form textarea,
/** for compound fields, input-wrap is the input element wrapper
that needs to mimic the input element styles */
.contact-form .wp-block-jetpack-input-wrap .jetpack-field__input-phone-wrapper
) {
	box-sizing: border-box;
	width: 100%;
	padding: 16px;
	font: inherit;
	border: 1px solid #8c8f94;
	border-radius: 0;
}

:where(.contact-form textarea) {
	display: block;
	height: 200px;
}

.contact-form .grunion-field {
	padding-left: max(var(--jetpack--contact-form--input-padding-left, 16px), var(--jetpack--contact-form--border-radius));
	padding-right: max(var(--jetpack--contact-form--input-padding-left, 16px), var(--jetpack--contact-form--border-radius));
}

.contact-form .grunion-field-wrap input,
.contact-form .grunion-field-wrap textarea {
	margin: 0;
}

.contact-form select {
	min-width: 150px;
}

.contact-form input[type="radio"],
.contact-form input[type="checkbox"] {
	min-width: 1em;
	width: 1em;
	height: 1em;
	margin: 0 0.75rem 0 0;
	opacity: 1;
}

.contact-form input[type="checkbox"] {
	top: 0;
	margin-left: 0;
	border-radius: 4px;
}

.contact-form label {
	float: none;
	display: block;
}

.contact-form :where(legend.grunion-field-label),
.contact-form :where(label) {
	margin-bottom: 0.25em;
	font-weight: 700;
}

.contact-form :where(legend.grunion-field-label) {
	padding: 0;
}

.contact-form :where(label.consent) {
	font-size: var(--jetpack--contact-form--label--font-size, 16px);
	font-weight: 400;
}

.contact-form label.consent {
	display: flex;
	align-items: center;
}

.is-style-list.is-style-list label.consent {
	align-items: baseline;
}

.contact-form label.consent-implicit input {
	display: none;
}

.contact-form :where(label.checkbox-multiple),
.contact-form :where(label.radio),
.contact-form :where(label.checkbox) {

	/* Inherit the font weight from the parent 'option' block wrapper */
	font-weight: inherit;
}

.contact-form label.checkbox-multiple,
.contact-form label.radio {
	margin-bottom: 0;
	flex: 1;
}

.contact-form label[style*="--jetpack--contact-form--label--font-size"] {
	font-size: var(--jetpack--contact-form--label--font-size);
}

.contact-form .grunion-checkbox-multiple-options,
.contact-form .grunion-radio-options {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
}

/* Ensure global styles can ovewrite the default border and padding. */
:where(.contact-form .grunion-checkbox-multiple-options),
:where(.contact-form .grunion-radio-options) {
	border: none;
	padding: 0;
}

:where(.contact-form .is-style-outlined .grunion-checkbox-multiple-options),
:where(.contact-form .is-style-outlined .grunion-radio-options) {
	border: solid 1px var(--jetpack--contact-form--border-color);
}

.contact-form .is-style-animated .grunion-checkbox-multiple-options legend,
.contact-form .is-style-animated .grunion-radio-options legend,
.contact-form .is-style-outlined .grunion-checkbox-multiple-options legend,
.contact-form .is-style-outlined .grunion-radio-options legend {
	margin: 0 0 -0.75em;
	padding: 0 0.25em 10px 0.25em;
	cursor: text;
	pointer-events: auto;
}

.wp-block-jetpack-contact-form.is-style-outlined .wp-block-jetpack-options legend {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	padding: 0 0.25em;
	position: relative;
	top: calc(var(--jetpack--contact-form--border-top-size, 1px) / 2 * -1);
}

.contact-form .grunion-checkbox-multiple-options .contact-form-field,
.contact-form .grunion-radio-options .contact-form-field {
	display: flex;
	align-items: baseline; /* Align input with first label line */
	margin: 0;
}

.contact-form :where(label span.required),
.contact-form :where(.grunion-label-required) {
	font-size: 85%;
	margin-left: 0.25em;
	font-weight: 400;
	opacity: 0.6;
}

.contact-form-submission {
	margin-bottom: 4em;
	padding: 1.5em 1em;
	width: 100%;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

.contact-form-submission p {
	margin: 0 auto;
	word-wrap: break-word;
}

.contact-form-submission h4 {
	margin-top: 32px;
	margin-bottom: 32px;
	font-weight: 200;
}

.contact-form-submission .go-back-message {
	margin-top: 20px;
	margin-bottom: 32px;
	text-align: left;
}

.contact-form-submission .go-back-message .link {
	font-weight: 200;
	color: inherit;
	cursor: pointer;
}

.contact-form-submission .field-name {
	font-weight: 200;
}

.contact-form-submission .field-value {
	margin-bottom: 20px;
	font-weight: 600;
	white-space: pre-wrap;
}

.form-errors .form-error-message {
	color: var(--jetpack--contact-form--error-color);
}

.textwidget .contact-form input[type="text"],
.textwidget .contact-form input[type="email"],
.textwidget .contact-form input[type="tel"],
.textwidget .contact-form input[type="url"],
.textwidget .contact-form input[type="number"],
.textwidget .contact-form input[type="time"],
.textwidget .contact-form textarea,
.wp-block-column .contact-form input[type="text"],
.wp-block-column .contact-form input[type="email"],
.wp-block-column .contact-form input[type="tel"],
.wp-block-column .contact-form input[type="url"],
.wp-block-column .contact-form input[type="number"],
.wp-block-column .contact-form input[type="time"],
.wp-block-column .contact-form textarea {
	width: 100%;
}

#jetpack-check-feedback-spam {
	margin: 1px 8px 0 0;
}

.jetpack-check-feedback-spam-spinner {
	display: inline-block;
	margin-top: 7px;
}

.wp-block-jetpack-form-step {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	flex-direction: row;
	flex-grow: 1;
	gap: var(--wp--style--block-gap, 1.5rem);
}

.wp-block-jetpack-form-step > * {
	flex: 0 0 100%;
	box-sizing: border-box;
}

.wp-block-jetpack-contact-form {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	flex-direction: row;
	flex-grow: 1;
	gap: var(--wp--style--block-gap, 1.5rem);
}

.wp-block-jetpack-contact-form > *:not(.wp-block-jetpack-button) {
	flex: 0 0 100%;
	box-sizing: border-box;
}

:where(.wp-block-jetpack-contact-form .wp-block-separator) {
	max-width: var(--wp--preset--spacing--80, 100px);
	margin-top: 0;
	margin-bottom: 0;
}

:where(.wp-block-jetpack-contact-form .wp-block-separator.is-style-wide),
:where(.wp-block-jetpack-contact-form .wp-block-separator.is-style-dots) {
	max-width: inherit;
}

/* Added circa Nov 2022: container class assigned to topmost block div */
.wp-block-jetpack-contact-form-container.alignfull .wp-block-jetpack-contact-form {
	padding-right: 0;
	padding-left: 0;
}

.wp-block-jetpack-contact-form .wp-block-jetpack-button {
	width: fit-content;
}

.wp-block-jetpack-contact-form .wp-block-jetpack-button.aligncenter {
	display: block;

	margin-left: auto;
	margin-right: auto;
}

.wp-block-jetpack-contact-form .wp-block-jetpack-button.alignleft {
	display: block;

	margin-right: auto;
}

.wp-block-jetpack-contact-form .wp-block-jetpack-button.alignright {
	display: block;

	margin-left: auto;
}

.wp-block-jetpack-contact-form .grunion-field-wrap {
	box-sizing: border-box;
	position: relative;
}

.wp-block-jetpack-contact-form .grunion-field-width-25-wrap {
	flex: 1 1 calc(25% - calc(var(--wp--style--block-gap, 1.5rem) * 1));
	max-width: 25%;
}

.wp-block-jetpack-contact-form .grunion-field-width-33-wrap {
	flex: 1 1 calc(33.33% - calc(var(--wp--style--block-gap, 1.5rem) * 1));
	max-width: 33.33%;
}

.wp-block-jetpack-contact-form .grunion-field-width-50-wrap {
	flex: 1 1 calc(50% - calc(var(--wp--style--block-gap, 1.5rem) * 1));
	max-width: 50%;
}

.wp-block-jetpack-contact-form .grunion-field-width-75-wrap {
	flex: 1 1 calc(75% - calc(var(--wp--style--block-gap, 1.5rem) * 1));
	max-width: 75%;
}

@media only screen and ( max-width: 480px ) {

	.wp-block-jetpack-contact-form .grunion-field-wrap {
		flex-basis: 100%;
		max-width: none;
	}
}

.grunion-field-consent-wrap {
	align-self: center;
}

@media only screen and ( min-width: 600px ) {

	.contact-form input[type="text"],
	.contact-form input[type="email"],
	.contact-form input[type="tel"],
	.contact-form input[type="url"],
	.contact-form input[type="number"],
	.contact-form input[type="time"] {
		width: 50%;
	}

	/****
	 * Older users keep the 50% width to avoid breaking
	 * designs, but newer users using the contact
	 * form block get 100% width.
	 */
	.wp-block-jetpack-contact-form input[type="text"],
	.wp-block-jetpack-contact-form input[type="email"],
	.wp-block-jetpack-contact-form input[type="tel"],
	.wp-block-jetpack-contact-form input[type="url"],
	.wp-block-jetpack-contact-form input[type="number"],
	.wp-block-jetpack-contact-form input[type="time"] {
		width: 100%;
	}
}

/** For the "Empty Spam" button on
/wp-admin/edit.php?post_status=spam&post_type=feedback */
.jetpack-empty-spam-container {
	display: inline-block;
}

.jetpack-empty-spam {
	display: inline-block;
}

.jetpack-empty-spam-spinner {
	display: inline-block;
	margin-top: 7px;
}

/* Respect set height of Spacer block nested inside Contact Form block */
.wp-block-jetpack-contact-form .wp-block-spacer {
	width: 100%;
}

.contact-form .contact-form__select-wrapper {
	position: relative;

	/*
	 * Remove padding set on .grunion-field. We want the nested input to have no
	 * space around it. Instead padding is added to the `select` element itself.
	 */
	padding: 0;
}

.contact-form .contact-form__select-wrapper .jetpack-field-dropdown__icon {
	position: relative;
}

.contact-form .contact-form__select-wrapper .jetpack-field-dropdown__icon::after {
	position: absolute;
	inset-inline-end: 20px;
	top: 50%;
	content: "";
	display: block;
	width: calc(1em / 2.5);
	height: calc(1em / 2.5);
	border-bottom: calc(1em / 10) solid;
	border-right: calc(1em / 10) solid;
	color: inherit;
	font-size: inherit;

	/*
	 * The translateY is to center the arrow vertically.
	 * It's set to -75% to account for the fact that only the bottom-half of the
	 * element is visible. If we set it to -50%, the element would be centered,
	 * but not the visible part of the arrow.
	 */
	transform: translateY(-75%) rotate(45deg);
	transform-origin: center center;
	pointer-events: none;
	z-index: 1;
}

.contact-form :where(.contact-form__select-wrapper) {
	background-color: var(--jetpack--contact-form--input-background);
	border: var(--jetpack--contact-form--border);
	border-color: var(--jetpack--contact-form--border-color);
	border-radius: var(--jetpack--contact-form--border-radius);
	border-style: var(--jetpack--contact-form--border-style);
	border-width: var(--jetpack--contact-form--border-left-size, var(--jetpack--contact-form--border-size));
	color: var(--jetpack--contact-form--text-color);
	font-family: var(--jetpack--contact-form--font-family);
	font-size: var(--jetpack--contact-form--font-size);
}

.contact-form .contact-form__select-element-wrapper {
	display: flex;
}

.contact-form :where(.contact-form__select-element-wrapper),
.contact-form :where(.contact-form__select-wrapper select) {
	border: 0 !important;
	background: inherit !important;
	border-radius: inherit !important;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-decoration: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	font-style: inherit;
	z-index: 1;

	/*
	 * Remove border width from select element, border should be added
	 * by the wrapper. Radius is retained to ensure the select element
	 * has the same radius as the wrapper.
	 */
	border-width: 0 !important;
}

.contact-form .contact-form__select-wrapper select {
	box-sizing: border-box;
	width: 100%;
	appearance: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: var(--jetpack--contact-form--input-padding, 16px);
}

.contact-form .is-style-outlined,
.contact-form .is-style-animated,
.contact-form .is-style-outlined .grunion-field-wrap,
.contact-form .is-style-animated .grunion-field-wrap {

	/*
	 * This is duplicated in class-contact-form-field.php. Does it
	 * need to be set here? This might be back compat for shortcodes.
	 */
	--jetpack--contact-form--notch-width: max(var(--jetpack--contact-form--input-padding-left, 16px), var(--jetpack--contact-form--border-radius));
}

.contact-form .is-style-outlined .grunion-field-wrap:not(.grunion-field-checkbox-wrap):not(.grunion-field-consent-wrap):not(.grunion-field-checkbox-multiple-wrap):not(.grunion-field-radio-wrap):not(.grunion-field-select-wrap):not(.grunion-field-file-wrap),
.contact-form .is-style-animated .grunion-field-wrap:not(.grunion-field-checkbox-wrap):not(.grunion-field-consent-wrap):not(.grunion-field-checkbox-multiple-wrap):not(.grunion-field-radio-wrap):not(.grunion-field-select-wrap):not(.grunion-field-file-wrap) {
	position: relative;
	display: flex;
	flex-direction: row-reverse;
}

.contact-form .is-style-outlined .grunion-field-wrap .grunion-checkbox-multiple-options,
.contact-form .is-style-outlined .grunion-field-wrap .grunion-radio-options {
	padding: var(--jetpack--contact-form--input-padding, 16px);
	padding-top: calc(var(--jetpack--contact-form--input-padding-top, 16px) + 4px);
	padding-left: calc(min(100px, var(--jetpack--contact-form--notch-width)));
}

.contact-form .is-style-outlined .grunion-field-wrap .notched-label {
	position: absolute;
	right: 0;
	left: 0;
	width: 100%;
	max-width: 100%;
	height: 100%;
	display: flex;
	box-sizing: border-box;
	text-align: left;
	pointer-events: none;
	z-index: 1;
}

.contact-form .contact-form__select-wrapper + .notched-label {
	top: 0;
}

.contact-form .is-style-outlined .grunion-field-wrap .notched-label .notched-label__leading {
	width: var(--jetpack--contact-form--notch-width);
	max-width: 100px;
	border-right: none;
	border-top-right-radius: unset;
	border-bottom-right-radius: unset;
}

.contact-form .is-style-outlined .grunion-field-wrap .notched-label .notched-label__notch {
	border-radius: unset;
	padding: 0 4px;
	transition: border 150ms linear;

	/*
	 * This is required to ensure the color is not overridden by the global styles.
	 * See selector in class-contact-form-block.php for jetpack/input registration.
	 */
	color: unset !important;
}


:where(.wp-block-jetpack-contact-form.is-style-outlined) .notched-label__leading {
	border-color: var(--jetpack--contact-form--border-color);
	border-style: var(--jetpack--contact-form--border-style);
	border-top-width: var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size));
	border-bottom-width: var(--jetpack--contact-form--border-bottom-size, var(--jetpack--contact-form--border-size));
	border-left-width: var(--jetpack--contact-form--border-left-size, var(--jetpack--contact-form--border-size));
	border-radius: var(--jetpack--contact-form--border-radius);
	width: var(--jetpack--contact-form--notch-width);
	max-width: 100px;
	border-right: none !important;
	border-top-right-radius: unset !important;
	border-bottom-right-radius: unset !important;
	background-color: var(--jetpack--contact-form--input-background);
}

:where(.wp-block-jetpack-contact-form.is-style-outlined) .notched-label__notch {
	border-color: var(--jetpack--contact-form--border-color);
	border-style: var(--jetpack--contact-form--border-style);
	border-top-width: var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size));
	border-bottom-width: var(--jetpack--contact-form--border-bottom-size, var(--jetpack--contact-form--border-size));
	border-radius: unset !important;
	padding: 0 4px;
	transition: border 150ms linear;
	border-left: none !important;
	border-right: none !important;
	background-color: var(--jetpack--contact-form--input-background);
}

:where(.wp-block-jetpack-contact-form.is-style-outlined) .notched-label__filler {
	border-color: var(--jetpack--contact-form--border-color);
	border-style: var(--jetpack--contact-form--border-style);
	border-top-width: var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size));
	border-bottom-width: var(--jetpack--contact-form--border-bottom-size, var(--jetpack--contact-form--border-size));
	flex-grow: 1;
	border-left: none !important;
	border-right: none !important;
	border-radius: unset !important;
	background-color: var(--jetpack--contact-form--input-background);
}

:where(.wp-block-jetpack-contact-form.is-style-outlined) .notched-label__trailing {
	border-color: var(--jetpack--contact-form--border-color);
	border-style: var(--jetpack--contact-form--border-style);
	border-top-width: var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size));
	border-right-width: var(--jetpack--contact-form--border-right-size, var(--jetpack--contact-form--border-size));
	border-bottom-width: var(--jetpack--contact-form--border-bottom-size, var(--jetpack--contact-form--border-size));
	border-radius: var(--jetpack--contact-form--border-radius);
	flex-grow: 1;
	max-width: 100px;
	border-left: none !important;
	border-top-left-radius: unset !important;
	border-bottom-left-radius: unset !important;
	background-color: var(--jetpack--contact-form--input-background);
}

/* Preserve the background color for the checkbox multiple and radio
 * wrap when using the old checkbox multiple and radio blocks. */
.contact-form .is-style-outlined .grunion-field-checkbox-multiple-wrap:not(.wp-block-jetpack-field-checkbox-multiple),
.contact-form .is-style-outlined .grunion-field-radio-wrap:not(.wp-block-jetpack-field-radio) {
	background-color: var(--jetpack--contact-form--input-background);
}

:where(.wp-block-jetpack-contact-form.is-style-outlined) .wp-block-jetpack-options {
	background-color: var(--jetpack--contact-form--input-background);
}


/*
For some reason, when keeping the rule below together with the above selector,
on production builds, the attributes are being reordered, causing side-effects
*/
/* stylelint-disable-next-line no-duplicate-selectors*/
.contact-form .is-style-outlined .grunion-field-wrap .notched-label .notched-label__notch {
	border-left: none !important;
	border-right: none;
}

.contact-form .is-style-outlined .grunion-field-wrap.no-label .notched-label__notch {
	padding: 0;
}

.contact-form .is-style-outlined .grunion-field-wrap .notched-label .notched-label__label {
	position: relative;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
	margin: 0;
}

.contact-form .is-style-outlined .grunion-field-wrap .notched-label .grunion-label-text {
	will-change: font-size;
	transition: font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-form .is-style-outlined .grunion-field-wrap .notched-label .grunion-label-required {
	will-change: font-size;
	transition: font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.is-style-outlined :where(.wp-block-jetpack-label),
.contact-form :where(.is-style-outlined .grunion-field-wrap .notched-label .notched-label__label),
.contact-form :where(.is-style-outlined .grunion-field-wrap legend.grunion-field-label) {
	font-weight: 300;
}

.contact-form .is-style-outlined .grunion-field-textarea-wrap .notched-label .notched-label__label {
	top: var(--jetpack--contact-form--input-padding-top, 16px);
	transform: unset;
}

.contact-form .is-style-outlined .grunion-field-wrap .notched-label .notched-label__filler {
	flex-grow: 1;
	border-left: none !important;
	border-right: none !important;
	border-radius: unset !important;
}

.contact-form .is-style-outlined .grunion-field-wrap .notched-label .notched-label__trailing {
	flex-grow: 1;
	border-left: none !important;
	border-top-left-radius: unset !important;
	border-bottom-left-radius: unset !important;
	max-width: 100px;
}

.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:focus) .notched-label__notch,
.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-value) .notched-label__notch,
.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-placeholder) .notched-label__notch,
.contact-form .is-style-outlined .grunion-field-wrap.grunion-field-select-wrap .notched-label .notched-label__notch {
	border-top-color: transparent !important;
}

.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:focus) .notched-label__label,
.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-value) .notched-label__label,
.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-placeholder) .notched-label__label,
.contact-form .is-style-outlined .grunion-field-wrap.grunion-field-select-wrap .notched-label .notched-label__label {
	top: calc(var(--jetpack--contact-form--border-size) * -1);
	transform: translateY(-50%);
}

/* Form that upgrade to use inner blocks look to the global styles
 * border size accessible via the CSS vars.
 * See Contact_Form_Field::get_form_variation_style_properties() .*/
.contact-form .is-style-outlined .wp-block-jetpack-input-wrap .notched-label:has(~ .grunion-field:focus) .notched-label__label,
.contact-form .is-style-outlined .wp-block-jetpack-input-wrap .notched-label:has(~ .grunion-field.has-value) .notched-label__label,
.contact-form .is-style-outlined .wp-block-jetpack-input-wrap .notched-label:has(~ .grunion-field.has-placeholder) .notched-label__label,
.contact-form .is-style-outlined .wp-block-jetpack-field-select.wp-block-jetpack-input-wrap .notched-label .notched-label__label {
	top: calc(var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size)) * -1);
}

.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:focus) .grunion-label-text,
.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-value) .grunion-label-text,
.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-placeholder) .grunion-label-text,
.contact-form .is-style-outlined .grunion-field-wrap .grunion-checkbox-multiple-options .grunion-label-text,
.contact-form .is-style-outlined .grunion-field-wrap .grunion-radio-options .grunion-label-text,
.contact-form .is-style-outlined .grunion-field-wrap.grunion-field-select-wrap .notched-label .grunion-label-text {
	font-size: 0.8em;
}

.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:focus) .grunion-label-required,
.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-value) .grunion-label-required,
.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-placeholder) .grunion-label-required,
.contact-form .is-style-outlined .grunion-field-wrap .grunion-checkbox-multiple-options .grunion-label-required,
.contact-form .is-style-outlined .grunion-field-wrap .grunion-radio-options .grunion-label-required,
.contact-form .is-style-outlined .grunion-field-wrap.grunion-field-select-wrap .notched-label .grunion-label-required {

	/*
	 * The font size should be 85% of the label font size, which is
	 * reduced separately to 0.8em for this focused style.
	 * 0.85 * 0.8 = 0.68em.
	 */
	font-size: 0.68em;
}

.contact-form .is-style-outlined .grunion-field-wrap > input,
.contact-form .is-style-outlined .grunion-field-wrap > textarea,
.contact-form .is-style-outlined .grunion-field-wrap select:not(.jetpack-field__input-element) {
	background: none !important; /* Need to override styles coming from the style attribute*/
	border-color: transparent !important; /* Need to override styles coming from the style attribute*/
	border-radius: unset !important; /* Need to override styles coming from the style attribute*/
	outline: none;
	padding-left: calc(min(100px, var(--jetpack--contact-form--notch-width)) + 4px);
	padding-right: calc(min(100px, var(--jetpack--contact-form--notch-width)) + 4px);
	position: relative;
}

.contact-form .is-style-animated .grunion-field-wrap {
	--left-offset: calc(var(--jetpack--contact-form--input-padding-left, 16px) + var(--jetpack--contact-form--border-size));
	--label-left: max(var(--left-offset), var(--jetpack--contact-form--border-radius));
	--field-padding: calc(var(--label-left) - var(--jetpack--contact-form--border-size));
}

.contact-form .is-style-animated .grunion-field-wrap input:not([type="checkbox"]):not([type="radio"]) {
	outline: none;
}

.contact-form .is-style-animated .grunion-field-wrap textarea {
	padding: var(--jetpack--contact-form--input-padding, 16px);
	outline: none;
}

.contact-form .is-style-animated .grunion-field-wrap:not(.no-label) > input,
.contact-form .is-style-animated .grunion-field-wrap:not(.no-label) > textarea,
.contact-form .is-style-animated .grunion-field-wrap:not(.no-label) select:not(.jetpack-field__input-element) {
	padding-top: 1.4em;
	padding-left: var(--field-padding);
	padding-right: var(--field-padding);
}

/* Fix padding for new forms in animated style */
.contact-form .is-style-animated .grunion-field-wrap:not(.no-label) > .wp-block-jetpack-input:not(.contact-form__select-wrapper):not(.jetpack-field__input-element),
.contact-form .is-style-animated .grunion-field-wrap:not(.no-label) .wp-block-jetpack-input:not(.contact-form__select-wrapper):not(.jetpack-field__input-element),
.contact-form .is-style-animated .wp-block-jetpack-options.jetpack-field-multiple__list--has-border {
	padding-left: var(--jetpack--contact-form--animated-left-offset);
	padding-right: var(--jetpack--contact-form--animated-left-offset);
}

.contact-form .is-style-animated .grunion-field-wrap .animated-label__label {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: baseline;
	position: absolute;
	top: calc(50% + (var(--jetpack--contact-form--border-top-size, 0px) * 0.5) - (var(--jetpack--contact-form--border-bottom-size, 0px) * 0.5));
	left: calc(var(--jetpack--contact-form--border-left-size, 0px) + var(--jetpack--contact-form--animated-left-offset, var(--label-left)));
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	pointer-events: none;
	margin: 0;
	transform: translateY(-50%);
	transition: translatey 150ms cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 2;
}

.contact-form .is-style-animated .grunion-field-wrap .grunion-label-text {
	transition: font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-form .is-style-animated .grunion-field-wrap .grunion-label-required {
	transition: font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-form .is-style-animated .grunion-field-textarea-wrap .animated-label__label {
	transform: unset;
	top: calc(2px + var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size, 1px)));
}

.contact-form .is-style-animated .grunion-field-wrap .animated-label__label:has(~ .grunion-field:focus),
.contact-form .is-style-animated .grunion-field-wrap .animated-label__label:has(~ .grunion-field.has-value),
.contact-form .is-style-animated .grunion-field-wrap .animated-label__label:has(~ .grunion-field.has-placeholder),
.contact-form .is-style-animated .grunion-field-wrap.grunion-field-select-wrap .animated-label__label {
	transform: translateY(0);
	top: calc(2px + var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size, 1px)));
}

.contact-form .is-style-animated .grunion-field-wrap .animated-label__label:has(~ .grunion-field:focus) .grunion-label-text,
.contact-form .is-style-animated .grunion-field-wrap .animated-label__label:has(~ .grunion-field.has-value) .grunion-label-text,
.contact-form .is-style-animated .grunion-field-wrap .animated-label__label:has(~ .grunion-field.has-placeholder) .grunion-label-text,
.contact-form .is-style-animated .grunion-field-wrap.grunion-field-select-wrap .animated-label__label .grunion-label-text {
	font-size: 0.75em;
}

.contact-form .is-style-animated .grunion-field-wrap .animated-label__label:has(~ .grunion-field:focus) .grunion-label-required,
.contact-form .is-style-animated .grunion-field-wrap .animated-label__label:has(~ .grunion-field.has-value) .grunion-label-required,
.contact-form .is-style-animated .grunion-field-wrap .animated-label__label:has(~ .grunion-field.has-placeholder) .grunion-label-required,
.contact-form .is-style-animated .grunion-field-wrap.grunion-field-select-wrap .animated-label__label .grunion-label-required {

	/*
	 * The required text is always 85% of the label font size.
	 * The label font size is reduced to 0.75em in a separate
	 * rule, so that needs to be accounted for.
	 * 0.85 * 0.75 = 0.6375em.
	 */
	font-size: 0.6375em;
}

/* The following is scoped by the presence of the custom font size
 * CSS var to avoid needing conditional fallback within the var() */
.contact-form .is-style-animated .grunion-field-wrap .animated-label__label[style*="--jetpack--contact-form--label--font-size"]:has(~ .grunion-field:focus),
.contact-form .is-style-animated .grunion-field-wrap .animated-label__label[style*="--jetpack--contact-form--label--font-size"]:has(~ .grunion-field.has-value),
.contact-form .is-style-animated .grunion-field-wrap .animated-label__label[style*="--jetpack--contact-form--label--font-size"]:has(~ .grunion-field.has-placeholder),
.contact-form .is-style-animated .grunion-field-wrap.grunion-field-select-wrap .animated-label__label[style*="--jetpack--contact-form--label--font-size"] {
	font-size: calc(var(--jetpack--contact-form--label--font-size) * 0.75);
}

.contact-form .is-style-animated .grunion-field-wrap .animated-label__label:has(~ .grunion-checkbox-multiple-options),
.contact-form .is-style-animated .grunion-field-wrap .animated-label__label:has(~ .grunion-radio-options) {
	top: 0;
	left: 0;
	transform: translateY(0);
}

/* Ensure the outlined field is not hidden by the absolutely positioned label */
.contact-form .is-style-outlined .grunion-field:not(.contact-form__select-wrapper) {
	z-index: 1;
}

.contact-form .is-style-below .grunion-field-wrap .below-label__label {
	margin-left: var(--jetpack--contact-form--border-left-size, var(--jetpack--contact-form--border-size));
}

/* fields with multiple options */
.wp-block-jetpack-contact-form:not(.is-style-outlined) .jetpack-field-multiple__fieldset {
	padding: 8px 0 0 0;
	border: 0;
	margin: 0;
}

/* fields with multiple options - not .wp-block-jetpack-options
 * because the inner blocks introduce new markup */
.contact-form :where(.grunion-field-wrap:not(.is-style-button-wrap)) .grunion-checkbox-multiple-options:not(.wp-block-jetpack-options),
.contact-form :where(.grunion-field-wrap:not(.is-style-button-wrap)) .grunion-radio-options:not(.wp-block-jetpack-options) {
	padding-top: 8px;
}

:where(.wp-block-jetpack-options.has-background) {
	padding: var(--jetpack--contact-form--input-padding, 16px) 16px;
}

/* Ensure global styles can ovewrite the default border color. */
:where(.wp-block-jetpack-options.jetpack-field-multiple__list--has-border) {
	padding-left: var(--jetpack--contact-form--input-padding-left, 16px);
	padding-right: var(--jetpack--contact-form--input-padding-left, 16px);
	border-color: var(--jetpack--contact-form--border-color);
}

.contact-form :where(.grunion-checkbox-multiple-options .contact-form-field),
.contact-form :where(.grunion-radio-options .contact-form-field),
.contact-form :where(.grunion-checkbox .contact-form-field) {
	font-weight: 400;
}

.contact-form :where(.grunion-checkbox-multiple-options .contact-form-field),
.contact-form :where(.grunion-radio-options .contact-form-field) {

	/* Back compat for old css vars used in the old radio and checkbox styles */
	font-size: var(--jetpack--contact-form--font-size);
}

.contact-form .is-style-list input.consent,
.contact-form .is-style-list input.checkbox,
.contact-form .grunion-field-wrap:not(.is-style-plain) input.checkbox-multiple,
.contact-form .grunion-field-wrap:not(.is-style-plain) input.radio {
	position: relative;

	box-sizing: border-box;

	/* Inherit the font size from the parent element.
	 * This allows the input to scale with the font size
	 * set from global styles or from block styles */
	font-size: inherit;
	width: 1em;
	min-width: 1em;
	height: 1em;
	margin-inline-end: calc(var(--jetpack--contact-form--font-size) / 2);
	padding: 0;

	appearance: none;
	border: solid 1px currentColor;
	color: currentColor;
	outline-offset: 1px;
	transform: translateY(0.15em);
}

.contact-form .grunion-field-wrap:not(.is-style-plain) input.radio {
	border-radius: 50%;
}

.contact-form .is-style-list input.consent:checked,
.contact-form .is-style-list input.checkbox:checked,
.contact-form .grunion-field-wrap:not(.is-style-plain) input.checkbox-multiple:checked {
	background-color: currentColor;

}

.contact-form .is-style-list input.consent::before,
.contact-form .is-style-list input.checkbox::before,
.contact-form .grunion-field-wrap:not(.is-style-plain) input.checkbox-multiple::before {
	position: absolute;
	width: 0.25em;
	height: 0.5em;
	content: "";
	display: block;
	opacity: 0; /* Hidden by default */
	scale: 0.7;
	margin-left: 50%;
	margin-top: 50%;
	transition: opacity 0.1s ease-in-out, scale 0.15s ease-in-out;

	font-size: inherit;
	border: solid var(--jetpack--contact-form--inverted-text-color, var(--jetpack--contact-form--input-background));
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -60%) rotate(40deg);
	top: 0;
	left: 0;
}

.contact-form .is-style-list input.consent:checked::before,
.contact-form .is-style-list input.checkbox:checked::before,
.contact-form .grunion-field-wrap:not(.is-style-plain) input.checkbox-multiple:checked::before {
	scale: 1;
	opacity: 1;
}

.contact-form .grunion-field-wrap:not(.is-style-plain) input.radio:checked::before {
	background: currentColor;
	border-radius: 50%;
	content: "";

	/* Inherit the font size from the parent element.
	 * This allows the input to scale with the font size
	 * set from global styles or from block styles */
	font-size: inherit;
	height: calc(1em / 2);
	width: calc(1em / 2);
	margin-left: 50%;
	margin-top: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	top: 0;
	left: 0;
}

.contact-form .grunion-field-wrap.grunion-field-checkbox-multiple-wrap.is-style-button-wrap .contact-form-field,
.contact-form .grunion-field-wrap.grunion-field-radio-wrap.is-style-button-wrap .contact-form-field {
	display: inline-flex;
	align-items: center;
	padding: var(--jetpack--contact-form--button-outline--padding);
}

.contact-form :where(.grunion-field-wrap.grunion-field-checkbox-multiple-wrap.is-style-button-wrap .contact-form-field),
.contact-form :where(.grunion-field-wrap.grunion-field-radio-wrap.is-style-button-wrap .contact-form-field) {
	background: var(--jetpack--contact-form--button-outline--background-color);
	border: var(--jetpack--contact-form--button-outline--border);
	border-radius: var(--jetpack--contact-form--button-outline--border-radius);
	color: var(--jetpack--contact-form--button-outline--text-color);
	line-height: var(--jetpack--contact-form--button-outline--line-height);
}

.contact-form .grunion-field-wrap.is-style-button-wrap .grunion-field.radio {

	/* visually-hidden */
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.contact-form .grunion-field-wrap.is-style-button-wrap .grunion-field.radio:checked + .grunion-radio-label {
	display: inline-flex;
	gap: 0.5em;
}

.contact-form .grunion-field-wrap.is-style-button-wrap .grunion-field.radio:checked + .grunion-radio-label::before {
	content: "\2713";
}

.contact-form .grunion-field-wrap.grunion-field-checkbox-multiple-wrap.is-style-button-wrap .contact-form-field:focus-within,
.contact-form .grunion-field-wrap.is-style-button-wrap .grunion-field.radio:focus + .grunion-radio-label {
	outline: var(--jetpack--contact-form--button-outline--border);
	outline-offset: 2px;
}

.contact-form :where(.grunion-field-wrap.is-style-button-wrap .grunion-field.checkbox-multiple) {
	border-radius: var(--jetpack--contact-form--button-outline--border-radius);
	color: var(--jetpack--contact-form--button-outline--text-color);
	font-family: var(--wp--preset--font-family--body);
}

.contact-form .grunion-field-wrap.is-style-button-wrap .grunion-field.checkbox-multiple {

	/*
	* Options typically have a transform applied to
	* line the checkbox/radio with the label.
	* This is not needed for the button style.
	*/
	transform: unset !important;
}

.contact-form .grunion-field-wrap.is-style-button-wrap .grunion-field.checkbox-multiple:focus {
	outline-width: 0; /* focus style defined on parent */
}

/* TODO - is this style used anywhere? if not, remove it */
.contact-form :where(.is-style-button-wrap input.grunion-field + .grunion-field-text::before) {
	background: var(--jetpack--contact-form--button-outline--background-color);
	border: var(--jetpack--contact-form--button-outline--border);
	border-color: currentColor;
	border-radius: var(--jetpack--contact-form--button-outline--border-radius);
	box-sizing: initial;
	content: "";
	display: block;
	height: 100%;
	left: calc(var(--jetpack--contact-form--button-outline--border-size) * -1);
	position: absolute;
	top: calc(var(--jetpack--contact-form--button-outline--border-size) * -1);
	width: 100%;
	z-index: -1;
}

.contact-form :where(.is-style-button-wrap input.grunion-field) {
	color: var(--jetpack--contact-form--button-outline--color);
}

.contact-form :where(.is-style-button-wrap input.grunion-field:checked),
.contact-form :where(.is-style-button-wrap input.grunion-field:checked + .grunion-field-text) {
	color: var(--jetpack--contact-form--button-outline--background-color-fallback);
}

.contact-form :where(.is-style-button-wrap input.grunion-field:checked + .grunion-field-text::before) {
	background: var(--jetpack--contact-form--button-outline--text-color);
	border-color: var(--jetpack--contact-form--button-outline--text-color);
}

.contact-form__error {
	display: none;
	padding: 1em;
	gap: var(--warning-icon-margin);

	background-color: var(--jetpack--contact-form--error-color);
	color: var(--jetpack--contact-form--inverted-text-color);
}

.contact-form__error.show-errors {
	display: inline-block;
	min-width: 100%;
	box-sizing: inherit;
	margin-block-end: 0.5em;
}

.contact-form__error ul {
	flex-basis: 100%;
	margin: 0;
	padding-inline-start: calc(var(--warning-icon-size) + var(--warning-icon-margin));

	list-style-position: inside;
}

.contact-form__error ul:empty {
	display: none;
}

.contact-form__error ul li {
	padding: 0;
}

.contact-form__error a {
	color: inherit;
}

.contact-form__input-error {
	margin: 0.25rem 0;
	gap: 0.33em;
	font-size: 1rem;
	color: var(--jetpack--contact-form--error-color);
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transform: translateY(-0.33em);
	transition: max-height 200ms cubic-bezier(0.34, 0.8, 0.34, 1), opacity 200ms cubic-bezier(0.34, 0.8, 0.34, 1), transform 100ms cubic-bezier(0.34, 0.8, 0.34, 1);
}

.contact-form__input-error.has-errors {
	display: flex;
	opacity: 1;
	max-height: 2em;
	transform: translateY(0);
	transition: opacity 200ms cubic-bezier(0.34, 0.8, 0.34, 1), transform 200ms cubic-bezier(0.34, 0.8, 0.34, 1);
}

.contact-form [aria-invalid="true"]:not(fieldset),
.contact-form .wp-block-jetpack-contact-form.is-style-outlined fieldset[aria-invalid="true"] {
	border: solid 1px var(--jetpack--contact-form--error-color);
}

.contact-form .wp-block-jetpack-contact-form:not(.is-style-outlined) fieldset[aria-invalid="true"] {
	outline: solid 1px var(--jetpack--contact-form--error-color);
	outline-offset: 0.5em;
	margin-bottom: 12px;
}

.contact-form__warning-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto 0;
}

.contact-form__warning-icon svg {
	fill: currentColor;
	display: block;
	margin: 0 auto;
}

.contact-form__checkbox-wrap {
	display: inline-flex;
	align-items: baseline;
}

.contact-form :is([type="submit"],button:not([type="reset"])) {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	width: 100%;
}

.contact-form .contact-form__spinner {
	fill: currentColor;
}

.contact-form .contact-form__spinner svg {

	/* Ensure container is of the exact same dimension */
	display: block;
}

.contact-form.is-ajax-form.submission-success {
	display: none;
}

.contact-form-ajax-submission:not(.submission-success) {
	display: none;
}