/*
 * MEI Pricing Calculator: styling of the WPForms form printed inside
 * [mei_pricing_planform].
 *
 * Scope
 * -----
 * Every rule below starts with .mei-pricing-form, a class only the planform block
 * prints. Any other WPForms form on the site — a [wpforms] shortcode in a page, a
 * form in a widget, a form in another plugin's block — is outside that class and
 * stays exactly as WPForms renders it.
 *
 * Order and specificity
 * ---------------------
 * This stylesheet is enqueued with every wpforms-* stylesheet of the request as a
 * dependency, so WordPress always prints it last (see Assets::enqueue_form_style).
 * On top of that, each selector mirrors the WPForms one and swaps its
 * "div.wpforms-container-full" for ".mei-pricing-form .wpforms-container": one class
 * more, one element less, so it wins on specificity as well. That is why there is no
 * !important anywhere in this file.
 *
 * Modern Markup
 * -------------
 * With WPForms 1.8.1+ and Modern Markup on, the wrapper also carries
 * .mei-pricing-form--modern and the block below maps the --wpforms-* custom
 * properties onto the plugin palette instead of overriding rules. The structural
 * rules that follow are written so that they agree with those variables: they set
 * what the variables do not cover (font family, focus ring, help and error text)
 * and repeat what they do, so classic markup looks identical.
 */

.mei-pricing-form {
	/* Overridden per site by Assets::form_css(); the defaults follow the palette. */
	--mei-form-field-radius: var(--mei-radius-inner);
	--mei-form-field-height: 44px;
	--mei-form-field-padding-h: 14px;
	--mei-form-button-bg: var(--mei-coral);
	--mei-form-button-color: var(--mei-white);
	--mei-form-button-hover-bg: color-mix(in srgb, var(--mei-coral) 84%, black);
	--mei-form-button-height: 48px;
}

/* ---------- Modern Markup: the plugin palette through the WPForms variables ---------- */

.mei-pricing-form--modern .wpforms-container {
	/* Fields */
	--wpforms-field-border-radius: var(--mei-form-field-radius);
	--wpforms-field-border-style: solid;
	--wpforms-field-border-size: 1.5px;
	--wpforms-field-border-color: var(--mei-line);
	--wpforms-field-background-color: var(--mei-white);
	--wpforms-field-text-color: var(--mei-navy);
	--wpforms-field-menu-color: var(--mei-white);

	/* Field sizes: the same heights and paddings as the control bar. */
	--wpforms-field-size-input-height: var(--mei-form-field-height);
	--wpforms-field-size-input-spacing: 16px;
	--wpforms-field-size-font-size: 16px;
	--wpforms-field-size-line-height: 20px;
	--wpforms-field-size-padding-h: var(--mei-form-field-padding-h);
	--wpforms-field-size-sublabel-spacing: 6px;
	--wpforms-field-size-icon-size: 1;
	--wpforms-field-size-checkbox-size: 18px;

	/* Labels */
	--wpforms-label-color: var(--mei-navy);
	--wpforms-label-sublabel-color: var(--mei-muted);
	--wpforms-label-error-color: var(--mei-coral);
	--wpforms-label-size-font-size: 15px;
	--wpforms-label-size-line-height: 20px;
	--wpforms-label-size-sublabel-font-size: 13px;
	--wpforms-label-size-sublabel-line-height: 18px;

	/* Submit button: the plugin primary button. */
	--wpforms-button-border-radius: 999px;
	--wpforms-button-border-style: none;
	--wpforms-button-border-size: 0;
	--wpforms-button-border-color: var(--mei-form-button-bg);
	--wpforms-button-background-color: var(--mei-form-button-bg);
	--wpforms-button-text-color: var(--mei-form-button-color);
	--wpforms-button-size-font-size: 16px;
	--wpforms-button-size-height: var(--mei-form-button-height);
	--wpforms-button-size-padding-h: 26px;
	--wpforms-button-size-margin-top: 0;

	/* Container and page breaks */
	--wpforms-container-padding: 0;
	--wpforms-container-shadow-size: none;
	--wpforms-page-break-color: var(--mei-navy);
}

/* ---------- Container ---------- */

.mei-pricing-form .wpforms-container {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--mei-navy);
	font-family: var(--mei-font-ui);
	font-size: 16px;
	line-height: 1.45;
}

.mei-pricing-form .wpforms-container .wpforms-form {
	display: grid;
	gap: 0;
	margin: 0;
}

/* The form title and description, when the form prints them. */
.mei-pricing-form .wpforms-container .wpforms-form .wpforms-title {
	margin: 0 0 4px;
	font-family: var(--mei-font-title);
	font-weight: 600;
	font-size: 1.15rem;
	letter-spacing: 0.02em;
	line-height: 1.3;
	color: var(--mei-navy);
}

.mei-pricing-form .wpforms-container .wpforms-form .wpforms-description {
	margin: 0 0 18px;
	font-size: 0.9rem;
	color: var(--mei-muted);
}

/* ---------- Field rows ---------- */

.mei-pricing-form .wpforms-container .wpforms-form .wpforms-field {
	padding: 0 0 18px;
	clear: both;
}

.mei-pricing-form .wpforms-container .wpforms-form .wpforms-field-hidden {
	padding: 0;
}

/* ---------- Labels ---------- */

.mei-pricing-form .wpforms-container .wpforms-form .wpforms-field-label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--mei-font-ui);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mei-navy);
}

.mei-pricing-form .wpforms-container .wpforms-form .wpforms-field-label-inline {
	font-weight: 400;
	color: var(--mei-navy);
}

.mei-pricing-form .wpforms-container .wpforms-form .wpforms-required-label {
	color: var(--mei-coral);
}

.mei-pricing-form .wpforms-container .wpforms-form .wpforms-field-sublabel {
	margin: 6px 0 0;
	font-size: 0.8rem;
	line-height: 1.35;
	font-weight: 400;
	color: var(--mei-muted);
}

/* ---------- Help texts ---------- */

.mei-pricing-form .wpforms-container .wpforms-form .wpforms-field-description,
.mei-pricing-form .wpforms-container .wpforms-form .wpforms-field-limit-text {
	margin: 8px 0 0;
	padding: 0;
	font-size: 0.85rem;
	line-height: 1.4;
	font-style: normal;
	color: var(--mei-muted);
}

.mei-pricing-form .wpforms-container .wpforms-form .wpforms-field-description-before {
	margin: 0 0 8px;
}

/* ---------- Text controls ---------- */

.mei-pricing-form .wpforms-container .wpforms-form input[type="text"],
.mei-pricing-form .wpforms-container .wpforms-form input[type="email"],
.mei-pricing-form .wpforms-container .wpforms-form input[type="tel"],
.mei-pricing-form .wpforms-container .wpforms-form input[type="url"],
.mei-pricing-form .wpforms-container .wpforms-form input[type="number"],
.mei-pricing-form .wpforms-container .wpforms-form input[type="password"],
.mei-pricing-form .wpforms-container .wpforms-form input[type="search"],
.mei-pricing-form .wpforms-container .wpforms-form input[type="date"],
.mei-pricing-form .wpforms-container .wpforms-form input[type="datetime-local"],
.mei-pricing-form .wpforms-container .wpforms-form select,
.mei-pricing-form .wpforms-container .wpforms-form textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: var(--mei-form-field-height);
	margin: 0;
	padding: 8px var(--mei-form-field-padding-h);
	border: 1.5px solid var(--mei-line);
	border-radius: var(--mei-form-field-radius);
	background-color: var(--mei-white);
	background-image: none;
	color: var(--mei-navy);
	font-family: var(--mei-font-ui);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	box-shadow: none;
	transition: border-color 0.15s ease;
}

.mei-pricing-form .wpforms-container .wpforms-form textarea {
	min-height: 120px;
	padding-top: 12px;
	padding-bottom: 12px;
	resize: vertical;
}

.mei-pricing-form .wpforms-container .wpforms-form select {
	appearance: none;
	-webkit-appearance: none;
	height: auto;
	padding-right: 40px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23211b45' stroke-width='1.6' d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
}

.mei-pricing-form .wpforms-container .wpforms-form input::placeholder,
.mei-pricing-form .wpforms-container .wpforms-form textarea::placeholder {
	color: var(--mei-muted);
	opacity: 1;
}

/* WPForms width classes: on one column they would leave the row half empty. */
.mei-pricing-form .wpforms-container .wpforms-form .wpforms-field-small,
.mei-pricing-form .wpforms-container .wpforms-form .wpforms-field-medium,
.mei-pricing-form .wpforms-container .wpforms-form .wpforms-field-large {
	max-width: 100%;
}

/* ---------- Hover and focus ---------- */

.mei-pricing-form .wpforms-container .wpforms-form input[type="text"]:hover,
.mei-pricing-form .wpforms-container .wpforms-form input[type="email"]:hover,
.mei-pricing-form .wpforms-container .wpforms-form input[type="tel"]:hover,
.mei-pricing-form .wpforms-container .wpforms-form input[type="url"]:hover,
.mei-pricing-form .wpforms-container .wpforms-form input[type="number"]:hover,
.mei-pricing-form .wpforms-container .wpforms-form select:hover,
.mei-pricing-form .wpforms-container .wpforms-form textarea:hover {
	border-color: var(--mei-navy);
}

.mei-pricing-form .wpforms-container .wpforms-form input:focus,
.mei-pricing-form .wpforms-container .wpforms-form select:focus,
.mei-pricing-form .wpforms-container .wpforms-form textarea:focus {
	border-color: var(--mei-navy);
	background-color: var(--mei-white);
	color: var(--mei-navy);
	outline: 3px solid var(--mei-coral);
	outline-offset: 2px;
	box-shadow: none;
}

/* ---------- Checkboxes and radios ---------- */

.mei-pricing-form .wpforms-container .wpforms-form ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mei-pricing-form .wpforms-container .wpforms-form ul li {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.mei-pricing-form .wpforms-container .wpforms-form input[type="checkbox"],
.mei-pricing-form .wpforms-container .wpforms-form input[type="radio"] {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0 8px 0 0;
	accent-color: var(--mei-coral);
	vertical-align: middle;
}

.mei-pricing-form .wpforms-container .wpforms-form input[type="checkbox"]:focus-visible,
.mei-pricing-form .wpforms-container .wpforms-form input[type="radio"]:focus-visible {
	outline: 3px solid var(--mei-coral);
	outline-offset: 2px;
}

/* ---------- Errors ---------- */

.mei-pricing-form .wpforms-container .wpforms-form label.wpforms-error,
.mei-pricing-form .wpforms-container .wpforms-form em.wpforms-error,
.mei-pricing-form .wpforms-container .wpforms-form .wpforms-error-container {
	display: block;
	margin: 8px 0 0;
	padding: 0;
	font-family: var(--mei-font-ui);
	font-size: 0.85rem;
	font-weight: 500;
	font-style: normal;
	line-height: 1.4;
	color: var(--mei-coral);
}

.mei-pricing-form .wpforms-container .wpforms-form .wpforms-error-container {
	margin: 0 0 18px;
	padding: 12px 16px;
	border: 1.5px solid var(--mei-coral);
	border-radius: var(--mei-form-field-radius);
	background: color-mix(in srgb, var(--mei-coral) 8%, var(--mei-white));
}

.mei-pricing-form .wpforms-container .wpforms-form input.wpforms-error,
.mei-pricing-form .wpforms-container .wpforms-form select.wpforms-error,
.mei-pricing-form .wpforms-container .wpforms-form textarea.wpforms-error {
	border-color: var(--mei-coral);
}

/* ---------- Submit button: identical to .mei-button ---------- */

.mei-pricing-form .wpforms-container .wpforms-form .wpforms-submit-container {
	margin: 4px 0 0;
	padding: 0;
	text-align: left;
}

.mei-pricing-form .wpforms-container .wpforms-form button[type="submit"],
.mei-pricing-form .wpforms-container .wpforms-form input[type="submit"],
.mei-pricing-form .wpforms-container .wpforms-form .wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: var(--mei-form-button-height);
	margin: 0;
	padding: 12px 26px;
	border: 0;
	border-radius: 999px;
	background-color: var(--mei-form-button-bg);
	background-image: none;
	color: var(--mei-form-button-color);
	font-family: var(--mei-font-ui);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.mei-pricing-form .wpforms-container .wpforms-form button[type="submit"]:hover,
.mei-pricing-form .wpforms-container .wpforms-form input[type="submit"]:hover,
.mei-pricing-form .wpforms-container .wpforms-form .wpforms-submit:hover {
	background-color: var(--mei-form-button-hover-bg);
	color: var(--mei-form-button-color);
	text-decoration: none;
}

.mei-pricing-form .wpforms-container .wpforms-form button[type="submit"]:focus-visible,
.mei-pricing-form .wpforms-container .wpforms-form input[type="submit"]:focus-visible,
.mei-pricing-form .wpforms-container .wpforms-form .wpforms-submit:focus-visible {
	outline: 3px solid var(--mei-navy);
	outline-offset: 2px;
}

.mei-pricing-form .wpforms-container .wpforms-form button[type="submit"]:disabled,
.mei-pricing-form .wpforms-container .wpforms-form input[type="submit"]:disabled,
.mei-pricing-form .wpforms-container .wpforms-form .wpforms-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

/* The spinner WPForms shows while submitting. */
.mei-pricing-form .wpforms-container .wpforms-form .wpforms-submit-spinner {
	margin-left: 10px;
	vertical-align: middle;
}

/* ---------- Confirmation message ---------- */

.mei-pricing-form .wpforms-confirmation-container,
.mei-pricing-form .wpforms-confirmation-container-full {
	margin: 0;
	padding: 22px 26px;
	border: 1px solid var(--mei-line);
	border-left: 6px solid var(--mei-navy);
	border-radius: var(--mei-radius);
	background: var(--mei-white);
	color: var(--mei-navy);
	font-family: var(--mei-font-ui);
	font-size: 16px;
	line-height: 1.45;
}

.mei-pricing-form .wpforms-confirmation-container p,
.mei-pricing-form .wpforms-confirmation-container-full p {
	margin: 0 0 8px;
	color: inherit;
}

.mei-pricing-form .wpforms-confirmation-container p:last-child,
.mei-pricing-form .wpforms-confirmation-container-full p:last-child {
	margin-bottom: 0;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 600px) {
	.mei-pricing-form .wpforms-container .wpforms-form .wpforms-submit-container {
		text-align: center;
	}

	.mei-pricing-form .wpforms-container .wpforms-form button[type="submit"],
	.mei-pricing-form .wpforms-container .wpforms-form input[type="submit"],
	.mei-pricing-form .wpforms-container .wpforms-form .wpforms-submit {
		width: 100%;
	}
}