/*
 * Mautic forms, styled like the Gravity Forms they replace.
 */
.ow-mautic-form {
	--ow-label-color: var(--wp--preset--color--neutral-900, #121212);
	--ow-placeholder-color: var(--wp--preset--color--neutral-500);
	--ow-ctrl-border-color: var(--wp--preset--color--neutral-700);
	--ow-ctrl-color: var(--_fg-color, currentcolor);
	--ow-ctrl-bg-color: transparent;
	--ow-error-color: var(--wp--preset--color--alert-error, #da1e27);
	--ow-form-gap-y: var(--wp--preset--spacing--30);
	--ow-form-gap-x: var(--wp--preset--spacing--50);

	font-size: var(--wp--preset--font-size--small);
}

.is-style-dark .ow-mautic-form {
	--ow-label-color: var(--wp--preset--color--neutral-100);
	--ow-ctrl-border-color: var(--wp--preset--color--neutral-100);
	--ow-error-color: #f8a28f;

	color-scheme: dark;
}

.ow-mautic-form .mauticform-page-wrapper {
	display: grid;
	gap: var(--ow-form-gap-y) var(--ow-form-gap-x);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
	.ow-mautic-form .mauticform-page-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ow-mautic-form .mauticform-page-wrapper > :not(.mauticform-50) {
		grid-column: 1 / -1;
	}
}

.ow-mautic-form .mauticform-row {
	display: grid;
	gap: var(--wp--preset--spacing--10, 0.5rem);
	align-content: start;
	margin: 0;
}

.ow-mautic-form .mauticform-fieldset {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.ow-mautic-form .mauticform-label {
	padding: 0;
	color: var(--ow-label-color);
	font-weight: 400;
}

.ow-mautic-form .mauticform-required-mark {
	color: var(--ow-error-color);
}

.ow-mautic-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.5rem;
	padding: 0.4rem 0;
	border: 0;
	border-bottom: 2px solid var(--ow-ctrl-border-color);
	border-radius: 0;
	background-color: var(--ow-ctrl-bg-color);
	color: var(--ow-ctrl-color);
	font: inherit;
}

.ow-mautic-form textarea {
	resize: none;
}

.ow-mautic-form select {
	appearance: none;
	padding-inline-end: 1.5rem;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.29 0.29a1 1 0 0 1 1.42 0L5 3.59 8.29 0.29a1 1 0 1 1 1.42 1.42l-4 4a1 1 0 0 1-1.42 0l-4-4a1 1 0 0 1 0-1.42z' fill='%23888'/%3E%3C/svg%3E");
	background-position: right center;
	background-repeat: no-repeat;
}

.is-style-dark .ow-mautic-form select option {
	background-color: var(--_bg-color, #121212);
}

.ow-mautic-form ::placeholder {
	color: var(--ow-placeholder-color);
	opacity: 1;
}

.ow-mautic-form :is(input, textarea, select):focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

.ow-mautic-form input[type="file"] {
	font: inherit;
	color: var(--ow-ctrl-color);
}

.ow-mautic-form .mauticform-options {
	display: grid;
	gap: var(--wp--preset--spacing--10, 0.5rem) var(--ow-form-gap-x);
}

@media (min-width: 640px) {
	.ow-mautic-form .mauticform-checkboxgrp .mauticform-options {
		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	}
}

.ow-mautic-form :is(.mauticform-checkboxgrp-row, .mauticform-radiogrp-row) {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
}

.ow-mautic-form :is(.mauticform-checkboxgrp-row, .mauticform-radiogrp-row) input {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0.15rem 0 0;
	accent-color: var(--wp--preset--color--primary-500, currentcolor);
}

.ow-mautic-form .mauticform-description {
	margin: 0;
	color: var(--ow-label-color);
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
	opacity: 0.8;
}

.ow-mautic-form .mauticform-errormsg {
	color: var(--ow-error-color);
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
}

.ow-mautic-form .mauticform-has-error :is(input, textarea, select) {
	border-bottom-color: var(--ow-error-color);
}

.ow-mautic-form :is(.mauticform-error, .mauticform-message):empty {
	display: none;
}

.ow-mautic-form .mauticform-error {
	color: var(--ow-error-color);
}

.ow-mautic-form .mauticform-message {
	padding: var(--wp--preset--spacing--20);
	border-inline-start: 4px solid var(--wp--preset--color--primary-500, currentcolor);
	font-size: var(--wp--preset--font-size--medium);
}

.ow-mautic-form .mauticform-button-wrapper {
	justify-items: end;
}

.ow-mautic-form .mauticform-button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* Honeypot: off-screen, not display:none, so that bots still fill it. */
.ow-mautic-form .mauticform-honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ow-mautic-form .mauticform-checkboxgrp-label a {
	color: inherit;
	text-decoration: underline;
}