/**
 * Contact Form 7 — Global Styles
 *
 * Site-wide styling for any CF7 form dropped into an Elementor container.
 * No wrapper class is required — the base styles target CF7's own classes.
 *
 * CONTRAST VARIANTS
 *   default          → for DARK backgrounds (white text, transparent fields)
 *   .pm-form-light   → for LIGHT backgrounds (dark text, white fields)
 *   .pm-form-dark    → re-asserts the dark variant inside a light ancestor
 *
 * Add the variant class to the Elementor Container (Advanced → CSS Classes),
 * to the CF7 widget, or to any ancestor — the tokens inherit down.
 * `.pm-light` / `.pm-dark` are accepted as short aliases.
 *
 * SPECIFICITY
 *   Base rules stay at 1–2 class selectors so widget-scoped CF7 styles
 *   (e.g. .pm-footer-cta__right ...) always win without !important.
 */

/* ── Tokens — dark backgrounds (default) ──────────────────────────────────── */

:root {
	--pm-form-text: var(--pm-color-white, #fff);
	--pm-form-muted: rgba(255, 255, 255, 0.55);
	--pm-form-placeholder: rgba(255, 255, 255, 0.4);

	--pm-form-field-bg: transparent;
	--pm-form-field-border: rgba(255, 255, 255, 0.25);
	--pm-form-field-border-hover: rgba(255, 255, 255, 0.45);
	--pm-form-field-border-focus: rgba(255, 255, 255, 0.75);
	--pm-form-field-ring: rgba(255, 255, 255, 0.15);

	--pm-form-choice-bg: transparent;
	--pm-form-choice-bg-checked: rgba(255, 255, 255, 0.12);
	--pm-form-choice-border-checked: var(--pm-color-white, #fff);
	--pm-form-accent: var(--pm-color-action, #E1FF2B);

	--pm-form-btn-bg: var(--pm-color-action, #E1FF2B);
	--pm-form-btn-text: var(--pm-color-primary-d80, #052E2C);
	--pm-form-btn-bg-hover: var(--pm-color-white, #fff);
	--pm-form-btn-text-hover: var(--pm-color-primary-d80, #052E2C);

	--pm-form-error: #FF9A9A;
	--pm-form-success: var(--pm-color-primary-l60, #87F3EE);

	--pm-form-spinner: rgba(255, 255, 255, 0.85);
	--pm-form-spinner-dot: var(--pm-color-primary-d80, #052E2C);

	--pm-form-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	--pm-form-radius: var(--pm-radius-md, 8px);
	--pm-form-gap: 0.75rem;
	--pm-form-field-padding: 0.9rem 1rem;
}

/* ── Tokens — light backgrounds ───────────────────────────────────────────── */

.pm-form-light,
.pm-light {
	--pm-form-text: var(--pm-color-type-body, #333741);
	--pm-form-muted: var(--pm-color-gray-600, #6C757D);
	--pm-form-placeholder: var(--pm-color-gray-500, #ADB5BD);

	--pm-form-field-bg: var(--pm-color-white, #fff);
	--pm-form-field-border: var(--pm-color-gray-300, #DEE2E6);
	--pm-form-field-border-hover: var(--pm-color-gray-500, #ADB5BD);
	--pm-form-field-border-focus: var(--pm-color-primary, #09605C);
	--pm-form-field-ring: rgba(9, 96, 92, 0.15);

	--pm-form-choice-bg: var(--pm-color-white, #fff);
	--pm-form-choice-bg-checked: rgba(9, 96, 92, 0.08);
	--pm-form-choice-border-checked: var(--pm-color-primary, #09605C);
	--pm-form-accent: var(--pm-color-primary, #09605C);

	--pm-form-btn-bg: var(--pm-color-primary, #09605C);
	--pm-form-btn-text: var(--pm-color-white, #fff);
	--pm-form-btn-bg-hover: var(--pm-color-primary-l20, #109E97);
	--pm-form-btn-text-hover: var(--pm-color-white, #fff);

	--pm-form-error: #C0432B;
	--pm-form-success: var(--pm-color-primary, #09605C);

	--pm-form-spinner: var(--pm-color-primary, #09605C);
	--pm-form-spinner-dot: var(--pm-color-white, #fff);

	--pm-form-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23333741' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Re-assert dark inside a light ancestor (dark card on a light section). */
.pm-form-dark,
.pm-dark {
	--pm-form-text: var(--pm-color-white, #fff);
	--pm-form-muted: rgba(255, 255, 255, 0.55);
	--pm-form-placeholder: rgba(255, 255, 255, 0.4);

	--pm-form-field-bg: transparent;
	--pm-form-field-border: rgba(255, 255, 255, 0.25);
	--pm-form-field-border-hover: rgba(255, 255, 255, 0.45);
	--pm-form-field-border-focus: rgba(255, 255, 255, 0.75);
	--pm-form-field-ring: rgba(255, 255, 255, 0.15);

	--pm-form-choice-bg: transparent;
	--pm-form-choice-bg-checked: rgba(255, 255, 255, 0.12);
	--pm-form-choice-border-checked: var(--pm-color-white, #fff);
	--pm-form-accent: var(--pm-color-action, #E1FF2B);

	--pm-form-btn-bg: var(--pm-color-action, #E1FF2B);
	--pm-form-btn-text: var(--pm-color-primary-d80, #052E2C);
	--pm-form-btn-bg-hover: var(--pm-color-white, #fff);
	--pm-form-btn-text-hover: var(--pm-color-primary-d80, #052E2C);

	--pm-form-error: #FF9A9A;
	--pm-form-success: var(--pm-color-primary-l60, #87F3EE);

	--pm-form-spinner: rgba(255, 255, 255, 0.85);
	--pm-form-spinner-dot: var(--pm-color-primary-d80, #052E2C);

	--pm-form-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Form shell ───────────────────────────────────────────────────────────── */

.wpcf7 {
	margin: 0;
	font-family: var(--pm-font-sans, 'Inter', system-ui, sans-serif);
	color: var(--pm-form-text);
}

.wpcf7-form p {
	margin: 0 0 var(--pm-form-gap);
}

.wpcf7-form p:last-of-type {
	margin-bottom: 0;
}

/* Paragraphs holding only copy (no field) act as section intros. */
.wpcf7-form p:not(:has(.wpcf7-form-control)) {
	color: var(--pm-form-text);
	font-size: var(--pm-text-body, 1rem);
	opacity: 0.9;
}

.wpcf7-form-control-wrap {
	display: block;
}

/* ── Labels ───────────────────────────────────────────────────────────────── */

.wpcf7-form label {
	display: block;
	color: var(--pm-form-text);
	font-size: var(--pm-text-body-sm, 0.9375rem);
	line-height: var(--pm-leading-normal, 1.4);
	margin-bottom: 0.4rem;
}

/* Choice items wrap their control in the label — keep it inline. */
.wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	margin-bottom: 0;
}

/* ── Text-style fields ────────────────────────────────────────────────────── */

.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-url,
.wpcf7-form-control.wpcf7-number,
.wpcf7-form-control.wpcf7-date,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: var(--pm-form-field-padding);
	background-color: var(--pm-form-field-bg);
	border: 1.5px solid var(--pm-form-field-border);
	border-radius: var(--pm-form-radius);
	outline: none;
	color: var(--pm-form-text);
	font-family: inherit;
	font-size: var(--pm-text-body, 1rem);
	line-height: var(--pm-leading-body, 1.5);
	transition: border-color var(--pm-duration-base, 250ms) var(--pm-ease, ease),
		box-shadow var(--pm-duration-base, 250ms) var(--pm-ease, ease);
}

.wpcf7-form-control.wpcf7-text:hover,
.wpcf7-form-control.wpcf7-email:hover,
.wpcf7-form-control.wpcf7-tel:hover,
.wpcf7-form-control.wpcf7-url:hover,
.wpcf7-form-control.wpcf7-number:hover,
.wpcf7-form-control.wpcf7-date:hover,
.wpcf7-form-control.wpcf7-textarea:hover,
.wpcf7-form-control.wpcf7-select:hover {
	border-color: var(--pm-form-field-border-hover);
}

.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-email:focus,
.wpcf7-form-control.wpcf7-tel:focus,
.wpcf7-form-control.wpcf7-url:focus,
.wpcf7-form-control.wpcf7-number:focus,
.wpcf7-form-control.wpcf7-date:focus,
.wpcf7-form-control.wpcf7-textarea:focus,
.wpcf7-form-control.wpcf7-select:focus {
	border-color: var(--pm-form-field-border-focus);
	box-shadow: 0 0 0 3px var(--pm-form-field-ring);
}

.wpcf7-form-control::placeholder {
	color: var(--pm-form-placeholder);
	opacity: 1;
}

.wpcf7-form-control:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* The native date icon is dark by default — invert it for dark backgrounds. */
.wpcf7-form-control.wpcf7-date::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 0.7;
	filter: invert(1);
}

.pm-form-light .wpcf7-form-control.wpcf7-date::-webkit-calendar-picker-indicator,
.pm-light .wpcf7-form-control.wpcf7-date::-webkit-calendar-picker-indicator {
	filter: none;
}

.pm-form-dark .wpcf7-form-control.wpcf7-date::-webkit-calendar-picker-indicator,
.pm-dark .wpcf7-form-control.wpcf7-date::-webkit-calendar-picker-indicator {
	filter: invert(1);
}

/* ── Textarea ─────────────────────────────────────────────────────────────── */

.wpcf7-form-control.wpcf7-textarea {
	min-height: calc(5 * 1.5rem + 1.8rem);
	resize: vertical;
}

/* ── Select ───────────────────────────────────────────────────────────────── */

.wpcf7-form-control.wpcf7-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
	background-image: var(--pm-form-select-arrow);
	background-repeat: no-repeat;
	background-position: right 1rem center;
	cursor: pointer;
}

/* Native option lists can't inherit the transparent field, so keep them legible. */
.wpcf7-form-control.wpcf7-select option {
	color: var(--pm-color-type-body, #333741);
	background-color: var(--pm-color-white, #fff);
}

.wpcf7-form-control.wpcf7-select[multiple] {
	background-image: none;
	padding-right: 1rem;
}

/* ── File upload ──────────────────────────────────────────────────────────── */

.wpcf7-form-control.wpcf7-file {
	display: block;
	width: 100%;
	box-sizing: border-box;
	color: var(--pm-form-text);
	font-size: var(--pm-text-body-sm, 0.9375rem);
}

.wpcf7-form-control.wpcf7-file::file-selector-button {
	margin-right: 0.75rem;
	padding: 0.55rem 1.1rem;
	background-color: transparent;
	border: 1.5px solid var(--pm-form-field-border);
	border-radius: var(--pm-radius-full, 9999px);
	color: var(--pm-form-text);
	font-family: inherit;
	font-size: var(--pm-text-caption, 0.8125rem);
	cursor: pointer;
	transition: border-color var(--pm-duration-base, 250ms) var(--pm-ease, ease);
}

.wpcf7-form-control.wpcf7-file::file-selector-button:hover {
	border-color: var(--pm-form-field-border-focus);
}

/* ── Radio & checkbox groups — pill toggles ───────────────────────────────── */

.wpcf7-form-control.wpcf7-radio,
.wpcf7-form-control.wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.wpcf7-radio .wpcf7-list-item,
.wpcf7-checkbox .wpcf7-list-item {
	display: inline-flex;
	align-items: center;
	position: relative;
	margin: 0;
	cursor: pointer;
}

/*
 * Hide the native control but stretch it over the whole pill so the pill stays
 * clickable. CF7 only emits a <label> wrapper when the form-tag carries the
 * `use_label_element` option, so a 0×0 hidden input would leave the pill dead.
 */
.wpcf7-radio .wpcf7-list-item input,
.wpcf7-checkbox .wpcf7-list-item input {
	position: absolute;
	inset: 0;
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

/* CF7 pads its labels with literal " " pseudo-elements — drop them in pills. */
.wpcf7-radio .wpcf7-list-item-label::before,
.wpcf7-radio .wpcf7-list-item-label::after,
.wpcf7-checkbox .wpcf7-list-item-label::before,
.wpcf7-checkbox .wpcf7-list-item-label::after {
	content: none;
}

.wpcf7-radio .wpcf7-list-item-label,
.wpcf7-checkbox .wpcf7-list-item-label {
	display: inline-block;
	padding: 0.7rem 1.1rem;
	background-color: var(--pm-form-choice-bg);
	border: 1.5px solid var(--pm-form-field-border);
	border-radius: var(--pm-radius-full, 9999px);
	color: var(--pm-form-text);
	font-size: var(--pm-text-body-sm, 0.9375rem);
	line-height: var(--pm-leading-normal, 1.4);
	user-select: none;
	transition: border-color var(--pm-duration-base, 250ms) var(--pm-ease, ease),
		background-color var(--pm-duration-base, 250ms) var(--pm-ease, ease);
}

.wpcf7-radio .wpcf7-list-item:hover .wpcf7-list-item-label,
.wpcf7-checkbox .wpcf7-list-item:hover .wpcf7-list-item-label {
	border-color: var(--pm-form-field-border-hover);
}

/* :has() rather than `+` — the `label_first` option flips input/span order. */
.wpcf7-radio .wpcf7-list-item:has(input:checked) .wpcf7-list-item-label,
.wpcf7-checkbox .wpcf7-list-item:has(input:checked) .wpcf7-list-item-label {
	background-color: var(--pm-form-choice-bg-checked);
	border-color: var(--pm-form-choice-border-checked);
}

/* Keyboard focus must stay visible now that the input itself is invisible. */
.wpcf7-radio .wpcf7-list-item:has(input:focus-visible) .wpcf7-list-item-label,
.wpcf7-checkbox .wpcf7-list-item:has(input:focus-visible) .wpcf7-list-item-label {
	box-shadow: 0 0 0 3px var(--pm-form-field-ring);
}

/* ── Acceptance & quiz — plain checkbox, not a pill ───────────────────────── */

.wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item {
	display: block;
	margin: 0;
}

.wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	cursor: pointer;
}

.wpcf7-acceptance .wpcf7-list-item input[type="checkbox"] {
	flex-shrink: 0;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.15rem 0 0;
	accent-color: var(--pm-form-accent);
	cursor: pointer;
}

.wpcf7-acceptance .wpcf7-list-item-label {
	font-size: var(--pm-text-body-sm, 0.9375rem);
	line-height: var(--pm-leading-normal, 1.4);
	color: var(--pm-form-text);
}

.wpcf7-form-control.wpcf7-quiz {
	max-width: 12rem;
}

/* ── Submit button ────────────────────────────────────────────────────────── */

/*
 * Kept at two classes: enough to beat Elementor's Theme Style button rules
 * (.elementor-kit-N input[type="submit"]), low enough that widget-scoped
 * overrides like .pm-footer-cta__right .wpcf7-submit still win.
 */
.wpcf7 .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 2.25rem;
	background-color: var(--pm-form-btn-bg);
	border: none;
	border-radius: var(--pm-radius-full, 9999px);
	color: var(--pm-form-btn-text);
	font-family: var(--pm-font-header, 'A Love of Thunder', serif);
	font-size: var(--pm-text-body, 1rem);
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color var(--pm-duration-base, 250ms) var(--pm-ease, ease),
		color var(--pm-duration-base, 250ms) var(--pm-ease, ease),
		transform var(--pm-duration-fast, 150ms) var(--pm-ease, ease);
}

.wpcf7 .wpcf7-submit:hover {
	background-color: var(--pm-form-btn-bg-hover);
	color: var(--pm-form-btn-text-hover);
}

.wpcf7 .wpcf7-submit:active {
	transform: translateY(1px);
}

.wpcf7 .wpcf7-submit:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--pm-form-field-ring);
}

/* CF7 disables the button while a submission is in flight. */
.wpcf7 .wpcf7-submit:disabled {
	opacity: 0.6;
}

/* CF7's spinner is a fixed dark grey — retint it so it reads on both variants. */
.wpcf7 .wpcf7-spinner {
	vertical-align: middle;
	width: 20px;
	height: 20px;
	margin: 0 0 0 0.75rem;
	background-color: var(--pm-form-spinner);
	opacity: 1;
}

.wpcf7 .wpcf7-spinner::before {
	background-color: var(--pm-form-spinner-dot);
	top: 3px;
	left: 3px;
	width: 5px;
	height: 5px;
	transform-origin: 7px 7px;
}

/* ── Validation & response ────────────────────────────────────────────────── */

.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.35rem;
	color: var(--pm-form-error);
	font-size: var(--pm-text-caption, 0.8125rem);
	line-height: var(--pm-leading-normal, 1.4);
}

.wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--pm-form-error);
}

/* Matches CF7's own `.wpcf7 form .wpcf7-response-output` specificity. */
.wpcf7 form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.75rem 1rem;
	border: 1.5px solid var(--pm-form-field-border);
	border-radius: var(--pm-form-radius);
	color: var(--pm-form-text);
	font-size: var(--pm-text-body-sm, 0.9375rem);
	line-height: var(--pm-leading-normal, 1.4);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--pm-form-success);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: var(--pm-form-error);
}

/* ── Layout helper — side-by-side fields ──────────────────────────────────── */

/*
 * Usage inside the CF7 form editor:
 *   <div class="pm-form-row">[text* first-name][text* last-name]</div>
 */
.pm-form-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pm-form-gap);
	margin-bottom: var(--pm-form-gap);
}

.pm-form-row > p,
.pm-form-row > .wpcf7-form-control-wrap,
.pm-form-row > label {
	flex: 1 1 12rem;
	min-width: 0;
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.pm-form-row {
		flex-direction: column;
	}
}