/*
 * The form sits inside an existing site identity, so it inherits the theme's
 * typeface and colour and only owns spacing, states and focus. Override any of
 * these custom properties in your theme to restyle it.
 */

.cfta-petition {
	--cfta-gap: 1.25rem;
	--cfta-radius: 6px;
	--cfta-border: #737373;
	/* Set as a pair. An input with a white background and inherited text
	   colour disappears on a dark theme, so the surface owns both. */
	--cfta-input-bg: #fff;
	--cfta-input-text: #1a1a1a;
	--cfta-border-focus: currentColor;
	--cfta-error: #a4262c;
	/* Picks up the site's Elementor global colour when one is defined. */
	--cfta-button-bg: var(--e-global-color-primary, currentColor);
	--cfta-button-text: #fff;
	--cfta-focus-ring: 3px;

	max-width: 34rem;
	font: inherit;
	/* Keeps browser-rendered chrome — autofill highlight, checkbox, spinners —
	   matched to our light input surface even when the OS is in dark mode. */
	color-scheme: light;
}

.cfta-field {
	margin: 0 0 var(--cfta-gap);
}

.cfta-field label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 600;
	line-height: 1.35;
}

.cfta-petition .cfta-field input[type="text"],
.cfta-petition .cfta-field input[type="email"],
.cfta-petition .cfta-field textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.7rem 0.75rem;
	font: inherit;
	color: var(--cfta-input-text);
	background: var(--cfta-input-bg);
	border: 1px solid var(--cfta-border);
	border-radius: var(--cfta-radius);
	/* 16px minimum stops iOS zooming the page when the field is tapped.
	   Plain value first, in case max() is unavailable. */
	font-size: 1rem;
	font-size: max(1rem, 16px);
}

.cfta-field textarea {
	min-height: 8rem;
	resize: vertical;
}

/* Base rule first. :where() and :focus-visible are widely supported now, but if
   either is unknown the whole selector is discarded — and since many themes
   remove the default outline, that leaves no focus indicator at all. */
.cfta-petition input:focus,
.cfta-petition textarea:focus,
.cfta-petition button:focus {
	outline: var(--cfta-focus-ring) solid var(--cfta-border-focus);
	outline-offset: 2px;
}

/* Where supported, drop the ring for pointer users on the button only. */
.cfta-petition button:focus:not(:focus-visible) {
	outline: none;
}

/* Page builders often set display on generic elements, which would override
   the browser default for [hidden]. */
.cfta-petition [hidden] {
	display: none !important;
}

.cfta-field--check label {
	display: flex;
	align-items: flex-start;
	font-weight: 400;
	cursor: pointer;
	/* Padding rather than a bare checkbox gives a comfortable tap area:
	   the control itself is well under the 44px touch guidance. */
	padding: 0.4rem 0;
	gap: 0.6rem;
}

/* Fallback for browsers without flexbox gap. Harmless where gap works
   because the margin is overridden below. */
.cfta-field--check label > input + span {
	margin-left: 0.6rem;
}

@supports (gap: 1rem) {
	.cfta-field--check label > input + span {
		margin-left: 0;
	}
}

.cfta-field--check input {
	/* Comfortably tappable, and aligned to the first line of the label. */
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
}

.cfta-petition .cfta-field--error input,
.cfta-petition .cfta-field--error textarea {
	border-color: var(--cfta-error);
	border-width: 2px;
}

.cfta-error {
	display: block;
	margin-top: 0.35rem;
	color: var(--cfta-error);
	font-size: 0.9375em;
}

/* An error with no field of its own — an expired form, say. */
.cfta-error--form {
	max-width: 34rem;
	margin: 0 0 var(--cfta-gap);
	padding: 0.7rem 0.85rem;
	border: 2px solid var(--cfta-error);
	border-radius: var(--cfta-radius);
	font-size: 1em;
}

.cfta-actions {
	margin: 0;
}

.cfta-petition .cfta-button {
	padding: 0.8rem 1.5rem;
	font: inherit;
	font-weight: 700;
	color: var(--cfta-button-text);
	background: var(--cfta-button-bg);
	border: 0;
	border-radius: var(--cfta-radius);
	cursor: pointer;
	min-height: 44px;
}

.cfta-petition .cfta-button[aria-disabled="true"] {
	opacity: 0.6;
	cursor: progress;
}

/* Off-screen rather than display:none, so bots that skip hidden fields still fill it. */
.cfta-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cfta-notice {
	padding: 0.9rem 1rem;
	border: 1px solid var(--cfta-border);
	border-left-width: 4px;
}

.cfta-notice--done {
	border-left-color: #1f7a3f;
}

@media (prefers-reduced-motion: reduce) {
	.cfta-petition * {
		transition: none !important;
	}
}

/* Signature count and goal */

.cfta-count {
	font-variant-numeric: tabular-nums;
}

.cfta-progress {
	max-width: 34rem;
	margin: 0 0 1.25rem;
}

.cfta-progress__text {
	margin: 0 0 0.5rem;
}

.cfta-progress__text strong {
	font-size: 1.35em;
	font-variant-numeric: tabular-nums;
}

.cfta-progress__track {
	height: 0.6rem;
	/* A border rather than a faint fill, so the empty part of the bar stays
	   visible on both light and dark backgrounds. */
	border: 1px solid var(--cfta-border);
	border-radius: 999px;
	overflow: hidden;
}

.cfta-progress__bar {
	display: block;
	height: 100%;
	min-width: 2px;
	background: currentColor;
	border-radius: 999px;
	transition: width 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
	.cfta-progress__bar {
		transition: none;
	}
}

/* Share block */

.cfta-share {
	max-width: 34rem;
	margin: 0 0 1.5rem;
}

.cfta-share__heading {
	margin: 0 0 0.6rem;
	font-weight: 600;
}

.cfta-share__native {
	margin-bottom: 0.75rem;
}

.cfta-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Fallback for browsers without flexbox gap. */
.cfta-share__list > li {
	margin: 0 0.5rem 0.5rem 0;
}

@supports (gap: 1rem) {
	.cfta-share__list {
		margin-bottom: -0.5rem;
	}

	.cfta-share__list > li {
		margin: 0;
	}
}

.cfta-petition .cfta-share__link,
.cfta-share__link {
	display: inline-block;
	padding: 0.65rem 1rem;
	min-height: 44px;
	box-sizing: border-box;
	font: inherit;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	background: none;
	border: 1px solid var(--cfta-border);
	border-radius: var(--cfta-radius);
	cursor: pointer;
}

.cfta-share__link:hover,
.cfta-share__link:focus {
	border-color: var(--cfta-border-focus);
}

.cfta-share__link:focus-visible {
	outline: var(--cfta-focus-ring) solid var(--cfta-border-focus);
	outline-offset: 2px;
}

.cfta-share__status {
	margin: 0.6rem 0 0;
	min-height: 1.4em;
	font-size: 0.9375em;
	word-break: break-all;
}

/* "Signing as ..." notice for prefilled forms */

.cfta-asyou {
	margin: 0 0 var(--cfta-gap);
	padding: 0.6rem 0.75rem;
	font-size: 0.9375em;
	border: 1px solid var(--cfta-border);
	border-radius: var(--cfta-radius);
}

.cfta-asyou a {
	margin-left: 0.35rem;
}