/**
 * Volunteer Florida donation form.
 *
 * Every brand-dependent value is a custom property in the block below —
 * VF Blue, VF Lime and VF Kelly, supplied directly by the organisation.
 */

.vfd-form {
	/*
	 * Volunteer Florida brand tokens — the organisation's own official
	 * values (supplied directly by VF), not sampled guesses:
	 * #0a436a is VF Blue, #71bf49 is VF Lime, #099874 is VF Kelly.
	 *
	 * Everything brand-dependent lives in this block. Restyling the form for
	 * a different look should mean editing here and nowhere else.
	 */
	--vfd-color-accent: #0a436a;
	--vfd-color-accent-hover: #082f4a;
	--vfd-color-accent-soft: rgba(10, 67, 106, 0.06);
	--vfd-color-lime: #71bf49;
	--vfd-color-lime-hover: #5da438;
	--vfd-color-kelly: #099874;
	--vfd-color-text: #333333;
	--vfd-color-muted: #6b7280;
	--vfd-color-border: #dadada;
	--vfd-color-border-focus: var(--vfd-color-accent);
	/* All the "boxes" a donor fills in or clicks — text inputs, selects,
	   the Braintree card containers — are outlined in this at rest, per
	   VF's request to bring the brand blue into the field chrome itself
	   rather than a neutral grey. */
	--vfd-color-box-border: var(--vfd-color-accent);
	--vfd-color-surface: #ffffff;
	--vfd-color-error: #b3261e;
	--vfd-color-error-bg: #fdeceb;
	--vfd-color-success-bg: #eef7f3;

	--vfd-radius: 3px;
	--vfd-gap: 10px;
	--vfd-field-height: 46px;

	/*
	 * Montserrat is registered by the shortcode and loaded only on pages that
	 * contain a donation form. Secure Braintree inputs cannot load web fonts,
	 * so they use the system fallback declared in donate.js.
	 */
	--vfd-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--vfd-font-heading: var(--vfd-font);

	--vfd-max-width: 560px;

	font-family: var(--vfd-font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--vfd-color-text);

	/*
	 * Centre the form container within whatever column it is dropped into.
	 *
	 * This centres the box, not its contents — text stays left-aligned,
	 * which is what a form needs to stay readable. Without the auto margins
	 * a constrained max-width simply pins the form to the left edge of a
	 * wide Elementor container.
	 */
	max-width: var(--vfd-max-width);
	margin-left: auto;
	margin-right: auto;
}

/* Opt out per placement: [vf_donate fund="…" align="left"] */
.vfd-form--left {
	margin-left: 0;
	margin-right: auto;
}

.vfd-form--right {
	margin-left: auto;
	margin-right: 0;
}

/*
 * Full-page split.
 *
 * Mobile is a normal stacked column. The 100vw breakout, Elementor padding
 * wipe, and fixed photo are desktop-only — applying them at phone widths
 * makes the form wider than the screen (Chrome device mode looks fine until
 * Elementor CSS loads and the 50% - 50vw math runs against a boxed column).
 */
.vfd-form--split {
	--vfd-sticky-offset: 0px;
	--vfd-photo-width: 45vw;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"media"
		"stage";
	background: var(--vfd-color-surface);
	max-width: 100%;
	width: 100%;
	min-width: 0;
	overflow-x: clip;
}

.vfd-form--split .vfd-form__stage {
	grid-area: stage;
	min-width: 0;
	width: 100%;
	margin: 0;
	padding: 1.5rem 1.75rem 2.5rem;
	box-sizing: border-box;
}

.vfd-form--split .vfd-form__media {
	grid-area: media;
	position: relative;
	min-height: 220px;
	max-height: 42vh;
	background: var(--vfd-color-accent);
	overflow: hidden;
}

.vfd-form--split .vfd-form__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.vfd-form.vfd-form--split .vfd-amounts .vfd-legend {
	text-align: left;
}

.vfd-form--split .vfd-form-logo {
	display: block;
	max-height: 88px;
	width: auto;
	margin: 0 auto 1.5rem;
}

.vfd-form--split .vfd-form-headline,
.vfd-form--split .vfd-form-introduction {
	text-align: left;
	margin-left: 0;
	margin-right: 0;
	overflow-wrap: anywhere;
}

.vfd-form--split .vfd-form-headline {
	font-size: 1.75rem;
}

.vfd-form--split .vfd-amount,
.vfd-form--split .vfd-method__btn {
	min-width: 0;
}

@media (min-width: 861px) {
	.vfd-form--split {
		width: 100vw;
		max-width: none;
		min-height: 100dvh;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
		grid-template-areas: "stage media";
		overflow-x: visible;
	}

	.elementor-section:has(.vfd-form--split),
	.elementor-container:has(.vfd-form--split),
	.elementor-column:has(.vfd-form--split),
	.elementor-widget-wrap:has(.vfd-form--split),
	.e-con:has(.vfd-form--split),
	.elementor-widget:has(.vfd-form--split),
	.elementor-widget:has(.vfd-form--split) .elementor-widget-container,
	.elementor-shortcode:has(.vfd-form--split) {
		max-width: none !important;
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.vfd-form--split .vfd-form__stage {
		min-height: 100dvh;
		padding: 1.5rem clamp(3.5rem, 10%, 6rem) 2.5rem;
	}

	.vfd-form--split .vfd-form-logo {
		max-height: 112px;
		margin-left: 0;
		margin-right: auto;
		margin-bottom: 1.75rem;
	}

	.vfd-form--split .vfd-form-headline {
		max-width: none;
		font-size: 2.5rem;
	}

	.vfd-form--split .vfd-form__media {
		min-height: 0;
		max-height: none;
	}

	.vfd-form--split .vfd-form__media img {
		position: fixed;
		inset: auto;
		top: var(--vfd-sticky-offset);
		right: 0;
		bottom: auto;
		left: auto;
		width: var(--vfd-photo-width, 45vw);
		height: calc(100dvh - var(--vfd-sticky-offset));
		z-index: 2;
	}
}

.vfd-form *,
.vfd-form *::before,
.vfd-form *::after {
	box-sizing: border-box;
}

/*
 * The [hidden] attribute is enforced by a user-agent stylesheet rule
 * (display: none), which loses to ANY author rule that sets display — a
 * flex or grid declaration on the same element silently defeats it, and
 * setting `.hidden = true` in JavaScript then appears to do nothing at all.
 *
 * The form, the thank-you panel and the error message all toggle via
 * [hidden], so this rule is load-bearing. Do not remove it, and be careful
 * adding `display` to any element that gets hidden.
 */
.vfd-form [hidden] {
	display: none !important;
}

/* ---------- Payment method toggle ---------- */

/*
 * "How would you like to give?" — a switch between the card flow and each
 * express method's own button, styled after the segmented payment-method
 * rows on other orgs' donation pages. Each button stays [hidden] until its
 * method has actually finished loading (see payment-methods.js);
 * a donor must never be offered a choice that isn't real yet.
 *
 * Selected state is a border/tint change rather than a solid colour fill
 * with inverted text. PayPal, Google Pay and Venmo render their own
 * official marks at full colour inside these buttons (see .vfd-method__logo
 * below) — forcing a brand mark to white-on-blue the way the old solid-fill
 * treatment did would misrepresent it. Border+tint reads as "selected"
 * equally well for the plain-text Card button and for a full-colour logo.
 */
/*
 * The heading and the button row are one group, hidden and revealed
 * together — payment-methods.js unhides the group, so a donor never sees
 * "Choose payment method" sitting above a single Card button.
 */
.vfd-method-group {
	margin-bottom: 16px;
}

/* margin-top stated because themes routinely put one on every <p>. */
.vfd-form .vfd-method__legend {
	margin-top: 0;
}

.vfd-method {
	display: flex;
	gap: 8px;
}

.vfd-form .vfd-method__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	height: 44px;
	padding: 0 6px;
	font-size: 15px;
	font-weight: 500;
	font-family: var(--vfd-font);
	color: var(--vfd-color-text);
	background: var(--vfd-color-surface);
	border: 2px solid var(--vfd-color-border);
	border-radius: var(--vfd-radius);
	/* Scoped and stated in full, for the same theme-bleed reason as the
	   amount buttons above — the theme was capitalising "Card" into "CARD". */
	text-transform: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.vfd-form .vfd-method__btn:hover,
.vfd-form .vfd-method__btn:focus {
	border-color: var(--vfd-color-accent);
}

.vfd-form .vfd-method__btn.is-selected,
.vfd-form .vfd-method__btn.is-selected:hover,
.vfd-form .vfd-method__btn.is-selected:focus {
	border-color: var(--vfd-color-accent);
	background: var(--vfd-color-accent-soft);
}

/* The one button with no logo of its own — its selected state is a text
   colour change since there's no mark whose own colours must stay intact. */
.vfd-form .vfd-method__btn[data-vfd='method-card'].is-selected {
	color: var(--vfd-color-accent);
}

.vfd-form .vfd-method__btn:focus-visible {
	outline: 2px solid var(--vfd-color-accent);
	outline-offset: 2px;
}

/*
 * Official payment-network marks, not a generic icon set — PayPal, Google
 * Pay and Venmo each publish brand assets specifically for indicating their
 * method is accepted. Drawn as data-URI SVGs for the same theme-proofing
 * reason as the rest of this file's icons, using each network's real brand
 * colours rather than VF's, because the mark needs to stay recognisable as
 * theirs.
 */
.vfd-method__logo {
	display: block;
	height: 22px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/*
 * Each variant below carries its own width, matched to its mark's own
 * aspect ratio, rather than one shared box — a G-icon-plus-word mark and a
 * plain wordmark are not the same shape, and forcing them into an identical
 * box is what made both read as off-centre before: `contain` scales the
 * whole viewBox down to fit, so a viewBox with guessed-too-wide empty space
 * past the actual glyphs comes out hugging one edge with dead space beside
 * it. Every viewBox below is trimmed to the glyphs' real extent instead,
 * and the text marks are centred on their own viewBox (text-anchor:middle)
 * so that even an imperfect width guess stays symmetric rather than
 * lopsided.
 */
.vfd-method__logo--paypal {
	width: 60px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 24'%3e%3ctext x='37' y='18' text-anchor='middle' font-family='Arial, Helvetica, sans-serif' font-size='19' font-weight='700' font-style='italic'%3e%3ctspan fill='%23003087'%3ePay%3c/tspan%3e%3ctspan fill='%23009cde'%3ePal%3c/tspan%3e%3c/text%3e%3c/svg%3e");
}

.vfd-method__logo--venmo {
	width: 54px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 24'%3e%3ctext x='33' y='18' text-anchor='middle' font-family='Arial, Helvetica, sans-serif' font-size='19' font-weight='700' font-style='italic' fill='%233d95ce'%3evenmo%3c/text%3e%3c/svg%3e");
}

/*
 * Same construction as Google Pay: a path for the mark, then the word.
 * U+F8FF cannot be the logo here. It has to be written as &#xF8FF;, and the
 * raw # in that character reference ends the data URI in Safari, so the
 * background never paints and the method button is an empty white box. A
 * path has nothing but the fill colour to encode, and that is %23 like
 * every other mark in this file. This is only the method-row mark. The
 * checkout button keeps Apple's own -apple-pay-button appearance.
 */
.vfd-method__logo--apple-pay {
	width: 53px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 24'%3e%3cg transform='translate(1,3) scale(0.75)'%3e%3cpath fill='%23000' d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701'/%3e%3c/g%3e%3ctext x='22' y='18' font-family='Arial, Helvetica, sans-serif' font-size='17' font-weight='500' fill='%23000'%3ePay%3c/text%3e%3c/svg%3e");
}

.vfd-method__logo--google-pay {
	width: 58px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24'%3e%3cg transform='translate(0,3)'%3e%3cpath fill='%234285F4' d='M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z'/%3e%3cpath fill='%2334A853' d='M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z'/%3e%3cpath fill='%23FBBC05' d='M3.964 10.707c-.18-.54-.282-1.117-.282-1.707s.102-1.167.282-1.707V4.961H.957C.347 6.175 0 7.55 0 9s.348 2.825.957 4.039l3.007-2.332z'/%3e%3cpath fill='%23EA4335' d='M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.961L3.964 7.293C4.672 5.166 6.656 3.58 9 3.58z'/%3e%3c/g%3e%3ctext x='24' y='18' font-family='Arial, Helvetica, sans-serif' font-size='17' font-weight='500' fill='%235f6368'%3ePay%3c/text%3e%3c/svg%3e");
}

/* ---------- Express checkout ---------- */

/*
 * The three express containers sit in the card submit button's own slot in
 * form.php, and only one of the four is ever visible at a time. No bottom
 * margin, so whichever call to action is showing lands in exactly the same
 * place — .vfd-secure-note supplies the space beneath it either way.
 */
.vfd-express {
	margin-bottom: 0;
}

/*
 * PayPal renders its own button inside an iframe and controls its entire
 * appearance — brand rules do not permit restyling it, and the familiar
 * look is the point. Only the surrounding space is ours.
 */
.vfd-express__button {
	min-height: 46px;
}

/* ---------- Express checkout: Google Pay ---------- */

/*
 * Same contract as .vfd-express above: Google's own createButton() renders
 * a self-contained, brand-controlled button into this container. Only the
 * surrounding space is ours.
 */
.vfd-google-pay {
	margin-bottom: 0;
}

.vfd-google-pay__button {
	min-height: 46px;
}

/* ---------- Express checkout: Venmo ---------- */

.vfd-venmo {
	margin-bottom: 0;
}

/*
 * Unlike PayPal and Google Pay, Venmo has no pre-built branded button — this
 * is ours to design, in Venmo's own blue rather than VF's brand colours,
 * for the same reason the PayPal button is left in its own brand colours:
 * a payment button donors already recognise is more trustworthy than one
 * reskinned to match the page around it.
 */
.vfd-form .vfd-venmo-btn {
	width: 100%;
	min-height: 46px;
	font-size: 16px;
	font-weight: 500;
	font-family: var(--vfd-font);
	color: #fff;
	background: #008cff;
	border: 0;
	border-radius: var(--vfd-radius);
	cursor: pointer;
	transition: background 0.15s ease;
}

.vfd-form .vfd-venmo-btn:hover,
.vfd-form .vfd-venmo-btn:focus {
	background: #0074d1;
}

.vfd-form .vfd-venmo-btn:focus-visible {
	outline: 2px solid #008cff;
	outline-offset: 2px;
}

/* ---------- Express checkout: Apple Pay ---------- */

.vfd-apple-pay {
	margin-bottom: 0;
}

/*
 * Apple supplies the button as a WebKit appearance value rather than as
 * markup or an image, so the whole thing — logo, wording, sizing, dark mode
 * — is drawn by the browser and is not ours to restyle. Apple's Human
 * Interface Guidelines require exactly that.
 *
 * -apple-pay-button-type: donate is one of Apple's own supported types and
 * renders "Donate with  Pay", which is the correct wording here.
 *
 * The fallback below only ever shows on a browser that supports Apple Pay
 * but not this appearance value — the button is never revealed anywhere
 * else — so it stays deliberately plain rather than imitating Apple's mark.
 */
.vfd-form .vfd-apple-pay-btn {
	display: block;
	width: 100%;
	min-height: 46px;
	background: #000;
	border: 0;
	border-radius: var(--vfd-radius);
	cursor: pointer;
}

@supports (-webkit-appearance: -apple-pay-button) {
	.vfd-form .vfd-apple-pay-btn {
		-webkit-appearance: -apple-pay-button;
		-apple-pay-button-type: donate;
		-apple-pay-button-style: black;
		background: none;
		border-radius: 0;
	}
}

.vfd-form .vfd-apple-pay-btn:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

/* ---------- Card field readiness ---------- */

/*
 * The card containers exist in the HTML from first paint; Braintree drops an
 * iframe into each one a moment later. Until then they carry a low-contrast
 * sheen so they read as "loading" without a spinner, a status message, or
 * any suggestion that the form is not ready to use.
 *
 * Deliberately understated. A payment form that visibly assembles itself
 * looks improvised, which is the opposite of what a donor needs to feel.
 */
.vfd-hosted-field.is-pending {
	background-image: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(10, 67, 106, 0.05) 50%,
		rgba(0, 0, 0, 0) 100%
	);
	background-size: 200% 100%;
	animation: vfd-shimmer 1.4s ease-in-out infinite;
}

@keyframes vfd-shimmer {
	from {
		background-position: 200% 0;
	}
	to {
		background-position: -200% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vfd-hosted-field.is-pending {
		animation: none;
		background-image: none;
	}
}

.vfd-hosted-field.is-failed {
	border-color: var(--vfd-color-error);
	background-color: var(--vfd-color-error-bg);
}

/* ---------- Structure ---------- */

.vfd-form fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 16px;
}

/* Scoped and stated in full, for the same theme-bleed reason as the buttons. */
.vfd-form .vfd-legend {
	font-family: var(--vfd-font-heading);
	font-size: 18px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--vfd-color-accent);
	margin-bottom: 10px;
	padding: 0;
	float: none;
	width: auto;
}

.vfd-form .vfd-field label {
	color: var(--vfd-color-text);
}

/*
 * The amount legend is centred because the block beneath it is centred —
 * the preset buttons and the custom-amount field sit in the middle of the
 * form. The remaining legends stay left-aligned with the fields they label.
 *
 * width:100% is required: a <legend> shrink-wraps its text, so text-align
 * alone has nothing to centre within.
 */
.vfd-form .vfd-amounts .vfd-legend {
	width: 100%;
	text-align: center;
}

.vfd-form-introduction {
	margin: 0 auto 16px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--vfd-color-text);
	max-width: 52ch;
	text-align: center;
}

.vfd-form-headline {
	margin: 0 auto 12px;
	max-width: 20em;
	font-family: var(--vfd-font-heading);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--vfd-color-accent);
	text-align: center;
}

.vfd-form-headline--left,
.vfd-form-introduction--left {
	margin-left: 0;
	margin-right: auto;
	text-align: left;
}

.vfd-form--split .vfd-form-introduction {
	max-width: none;
}

.vfd-form-introduction p {
	margin: 0 0 8px;
}

.vfd-form-introduction p:last-child {
	margin-bottom: 0;
}

.vfd-row {
	display: flex;
	gap: var(--vfd-gap);
	flex-wrap: wrap;
}

.vfd-row .vfd-field {
	flex: 1 1 140px;
	min-width: 0;
}

.vfd-field {
	margin-bottom: var(--vfd-gap);
}

.vfd-field label {
	display: block;
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 4px;
}

.vfd-hint {
	font-size: 13px;
	color: var(--vfd-color-muted);
	margin: 4px 0 0;
}

/* ---------- Inputs ---------- */

.vfd-form input[type='text'],
.vfd-form input[type='email'] {
	width: 100%;
	height: var(--vfd-field-height);
	padding: 0 12px;
	font-size: 16px; /* 16px prevents iOS zooming the page on focus. */
	font-family: inherit;
	color: var(--vfd-color-text);
	background: var(--vfd-color-surface);
	border: 2px solid var(--vfd-color-box-border);
	border-radius: var(--vfd-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vfd-form select {
	width: 100%;
	height: var(--vfd-field-height);
	padding: 0 34px 0 12px;
	font-size: 16px;
	font-family: inherit;
	color: var(--vfd-color-text);
	background-color: var(--vfd-color-surface);
	border: 2px solid var(--vfd-color-box-border);
	border-radius: var(--vfd-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;

	/* Inline SVG chevron so the control matches the text inputs across
	   browsers instead of inheriting each platform's native select. */
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
}

/*
 * Focus keeps the same white fill as at rest.
 *
 * Themes routinely restyle input:focus, and the previous rule set only the
 * border and shadow — leaving the background to whatever the theme wanted,
 * which on this one made the field turn transparent mid-typing. Anything a
 * theme might claim has to be restated here.
 */
.vfd-form input[type='text']:focus,
.vfd-form input[type='email']:focus,
.vfd-form select:focus {
	outline: none;
	background-color: var(--vfd-color-surface);
	color: var(--vfd-color-text);
	border-color: var(--vfd-color-border-focus);
	box-shadow: 0 0 0 3px rgba(10, 67, 106, 0.15);
}

/*
 * Browser autofill paints its own background — pale yellow in Chrome, blue
 * in some others — which looks broken next to the fields beside it. There is
 * no way to set the background directly on an autofilled input, so the
 * standard workaround is an inset shadow large enough to cover the field.
 */
.vfd-form input:-webkit-autofill,
.vfd-form input:-webkit-autofill:hover,
.vfd-form input:-webkit-autofill:focus,
.vfd-form select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--vfd-color-surface) inset;
	box-shadow: 0 0 0 1000px var(--vfd-color-surface) inset;
	-webkit-text-fill-color: var(--vfd-color-text);
}

.vfd-form input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--vfd-color-surface) inset, 0 0 0 3px rgba(10, 67, 106, 0.15);
	box-shadow: 0 0 0 1000px var(--vfd-color-surface) inset, 0 0 0 3px rgba(10, 67, 106, 0.15);
}

.vfd-optional {
	font-weight: 400;
	color: var(--vfd-color-muted);
}

/*
 * City takes the slack; state and ZIP stay near their natural width but are
 * all allowed to grow, so that when the row wraps on a narrow screen the
 * field that lands alone fills the line instead of stranding at its basis
 * width against the left edge.
 */
.vfd-field--city {
	flex: 3 1 180px;
}

.vfd-field--state {
	flex: 2 1 130px;
}

.vfd-field--zip {
	flex: 1 1 110px;
}

/*
 * Braintree injects an iframe into each of these. The container must carry
 * the visual styling and a fixed height, because the iframe's own content is
 * cross-origin and cannot be styled from here — only through the `styles`
 * object passed to hostedFields.create().
 */
.vfd-hosted-field {
	height: var(--vfd-field-height);
	padding: 0 12px;
	background: var(--vfd-color-surface);
	border: 2px solid var(--vfd-color-box-border);
	border-radius: var(--vfd-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vfd-hosted-field iframe {
	height: 100% !important;
	width: 100% !important;
}

.vfd-hosted-field.braintree-hosted-fields-focused {
	border-color: var(--vfd-color-border-focus);
	box-shadow: 0 0 0 3px rgba(10, 67, 106, 0.15);
}

/*
 * Two invalid states, on purpose.
 *
 * Braintree adds braintree-hosted-fields-invalid itself as the donor types.
 * `is-invalid` is ours, applied after a failed tokenize, because Braintree
 * does not re-flag fields at submit time — without it a donor gets an error
 * naming a field with nothing on screen pointing at it.
 */
.vfd-hosted-field.braintree-hosted-fields-invalid,
.vfd-hosted-field.is-invalid {
	border-color: var(--vfd-color-error);
}

.vfd-hosted-field.is-invalid {
	box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}

/*
 * Per-field correction advice, shown under the offending input after a
 * failed submit. The label turns red alongside it so the eye lands on the
 * right field before reading anything.
 */
.vfd-form .vfd-field.is-invalid label {
	color: var(--vfd-color-error);
}

.vfd-field-error {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 500;
	color: var(--vfd-color-error);
}

/* ---------- Card network badges ---------- */

/*
 * Which cards are accepted, shown next to the Card Number label rather than
 * overlaid on the field itself — that field is a cross-origin Braintree
 * iframe (see vfd-hosted-field above), so nothing on this page can be drawn
 * on top of the digits the donor is typing.
 *
 * Drawn as small data-URI SVGs rather than logo image files, for the same
 * theme-proofing reason as the lock icon and select chevron elsewhere in
 * this file, and simplified rather than reproducing each network's exact
 * mark — this is a "cards we accept" indicator, not a licensed logo use.
 */
.vfd-card-number-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.vfd-card-badges {
	display: flex;
	gap: 4px;
}

.vfd-card-badge {
	display: block;
	width: 30px;
	height: 19px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.vfd-card-badge--visa {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 24'%3e%3crect width='38' height='24' rx='3' fill='%23fff'/%3e%3crect x='0.5' y='0.5' width='37' height='23' rx='2.5' fill='none' stroke='%23d8d8d8'/%3e%3ctext x='19' y='16' font-family='Arial, Helvetica, sans-serif' font-size='10' font-weight='700' font-style='italic' fill='%231a1f71' text-anchor='middle'%3eVISA%3c/text%3e%3c/svg%3e");
}

.vfd-card-badge--mastercard {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 24'%3e%3crect width='38' height='24' rx='3' fill='%23fff'/%3e%3crect x='0.5' y='0.5' width='37' height='23' rx='2.5' fill='none' stroke='%23d8d8d8'/%3e%3ccircle cx='15' cy='12' r='7' fill='%23eb001b'/%3e%3ccircle cx='23' cy='12' r='7' fill='%23f79e1b' fill-opacity='0.8'/%3e%3c/svg%3e");
}

.vfd-card-badge--amex {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 24'%3e%3crect width='38' height='24' rx='3' fill='%23006fcf'/%3e%3ctext x='19' y='16' font-family='Arial, Helvetica, sans-serif' font-size='9' font-weight='700' fill='%23fff' text-anchor='middle'%3eAMEX%3c/text%3e%3c/svg%3e");
}

.vfd-card-badge--discover {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 24'%3e%3crect width='38' height='24' rx='3' fill='%23fff'/%3e%3crect x='0.5' y='0.5' width='37' height='23' rx='2.5' fill='none' stroke='%23d8d8d8'/%3e%3ccircle cx='29' cy='12' r='5' fill='%23ff6000'/%3e%3ctext x='4' y='16' font-family='Arial, Helvetica, sans-serif' font-size='9' font-weight='700' fill='%23231f20'%3eDISC%3c/text%3e%3c/svg%3e");
}

/* ---------- Amounts ---------- */

/*
 * Flex rather than grid, specifically so a partial final row centres.
 *
 * With five preset amounts and three columns, a grid leaves two buttons
 * stranded against the left edge. Here the buttons grow to fill a complete
 * row but are capped at a third of the width, so an incomplete row keeps
 * the same button size and centres instead of stretching — which reads as
 * intentional at every breakpoint rather than only at the ones we tested.
 */
.vfd-amount-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: var(--vfd-gap);
}

/*
 * Scoped under .vfd-form and stated in full.
 *
 * These are real <button> elements, so the active theme's button rules
 * apply to them. Volunteer Florida's theme colours button text and borders
 * — which is where the unexpected pink came from. Anything a theme might
 * claim has to be declared here, at a specificity that outranks it.
 */
.vfd-form .vfd-amount {
	flex: 1 1 calc(33.333% - 7px);
	max-width: calc(33.333% - 7px);
	min-width: 92px;
	height: var(--vfd-field-height);
	padding: 0 8px;
	font-size: 19px;
	font-weight: 500;
	font-family: var(--vfd-font);
	/*
	 * Green outline and blue amount — these are the only genuinely
	 * clickable things above the fold, and the colour pop is deliberate:
	 * green marks them as choices distinct from the blue-bordered fields
	 * everywhere else in the form, and the larger blue numeral is
	 * what a donor's eye should land on first.
	 */
	color: var(--vfd-color-accent);
	background: var(--vfd-color-surface);
	border: 2.5px solid var(--vfd-color-lime);
	border-radius: var(--vfd-radius);
	box-shadow: none;
	text-transform: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* Two per row once three no longer fit comfortably. */
@media (max-width: 430px) {
	.vfd-form .vfd-amount {
		flex-basis: calc(50% - 5px);
		max-width: calc(50% - 5px);
	}
}

/*
 * Hover, focus and active states are declared explicitly and scoped under
 * .vfd-form rather than relying on inheritance.
 *
 * These are real <button> elements, so the active theme's own button rules
 * apply to them — Volunteer Florida's theme tints button hover a colour that
 * has nothing to do with this form. Setting only border-color here left the
 * theme's background to win. Every visual property that a theme might claim
 * is therefore stated outright, at a specificity that beats a typical
 * theme or Elementor selector.
 */
.vfd-form .vfd-amount:hover,
.vfd-form .vfd-amount:focus {
	background: rgba(113, 191, 73, 0.08);
	border-color: var(--vfd-color-lime-hover);
	color: var(--vfd-color-accent-hover);
}

.vfd-form .vfd-amount.is-selected,
.vfd-form .vfd-amount.is-selected:hover,
.vfd-form .vfd-amount.is-selected:focus {
	background: var(--vfd-color-lime);
	border-color: var(--vfd-color-lime);
	color: var(--vfd-color-accent);
}

.vfd-form .vfd-amount:focus-visible {
	outline: 2px solid var(--vfd-color-accent);
	outline-offset: 2px;
}

.vfd-currency-input {
	position: relative;
}

.vfd-currency-symbol {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--vfd-color-muted);
	pointer-events: none;
}

.vfd-currency-input input {
	padding-left: 26px !important;
}

.vfd-form .vfd-field--custom label {
	font-size: 17px;
	font-style: italic;
	font-weight: 400;
}

/* ---------- Honeypot ---------- */

/*
 * Moved off-screen rather than display:none — some bots skip fields that are
 * explicitly hidden, and this needs to look fillable to a naive parser while
 * being unreachable for anyone using the page, including screen reader users
 * (the wrapper carries aria-hidden and the input is tabindex="-1").
 */
.vfd-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Messages ---------- */

.vfd-message {
	padding: 12px 14px;
	margin-bottom: var(--vfd-gap);
	background: var(--vfd-color-error-bg);
	border-left: 3px solid var(--vfd-color-error);
	border-radius: 0 var(--vfd-radius) var(--vfd-radius) 0;
	color: var(--vfd-color-error);
	font-size: 15px;
}

.vfd-error {
	padding: 12px 14px;
	background: var(--vfd-color-error-bg);
	border-left: 3px solid var(--vfd-color-error);
	color: var(--vfd-color-error);
	font-size: 15px;
}

/* ---------- Submit ---------- */

.vfd-form .vfd-submit {
	width: 100%;
	min-height: 52px;
	font-size: 17px;
	font-weight: 500;
	font-family: var(--vfd-font-heading);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
	background: var(--vfd-color-accent);
	border: 0;
	border-radius: var(--vfd-radius);
	cursor: pointer;
	transition: background 0.15s ease;
}

/* Stated explicitly for the same reason as the amount buttons — the theme
   has its own opinion about what a button does on hover. */
.vfd-form .vfd-submit:hover:not(:disabled),
.vfd-form .vfd-submit:focus:not(:disabled) {
	background: var(--vfd-color-accent-hover);
	color: #fff;
}

.vfd-form .vfd-submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.vfd-form .vfd-submit:focus-visible {
	outline: 2px solid var(--vfd-color-accent);
	outline-offset: 2px;
}

.vfd-form .vfd-form-disclosures {
	margin: 28px 0 0;
	font-size: 11px;
	line-height: 1.55;
	color: var(--vfd-color-muted);
	text-align: left;
}

.vfd-form .vfd-form-disclosures p {
	margin: 0 0 10px;
}

.vfd-form .vfd-form-disclosures p:last-child {
	margin-bottom: 0;
}

.vfd-form .vfd-form-disclosures a {
	color: inherit;
	text-decoration: underline;
}

/*
 * The lock is drawn as a background image on a pseudo-element.
 *
 * An earlier version used an inline <svg>, which rendered at the wrong size
 * and broke the layout. A data URI cannot be targeted by any selector, so no
 * theme rule about `svg` — sizing, display, fill — can reach it. Same
 * approach as the select chevron above, for the same reason.
 */
.vfd-form .vfd-secure-note::before {
	content: '';
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 6px;
	vertical-align: -2px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23099874'%3e%3cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v3H9V6a3 3 0 0 1 3-3z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
}

/* ---------- Thank you ---------- */

.vfd-thanks {
	padding: 28px 24px;
	background: var(--vfd-color-success-bg);
	border-radius: var(--vfd-radius);
	text-align: center;
}

.vfd-thanks__heading {
	font-family: var(--vfd-font-heading);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0 0 10px;
	font-size: 22px;
	color: var(--vfd-color-accent);
}

.vfd-thanks__body {
	margin: 0 0 8px;
	font-size: 16px;
}

.vfd-thanks__receipt {
	margin: 0;
	font-size: 14px;
	color: var(--vfd-color-muted);
}

/*
 * Scoped under .vfd-form and stated in full, same as the other controls.
 * This is a real link, so the theme's link color would otherwise win.
 */
.vfd-form .vfd-thanks__download {
	margin: 14px 0 0;
	font-size: 15px;
}

.vfd-form .vfd-thanks__download a {
	color: var(--vfd-color-accent);
	font-weight: 600;
	text-decoration: underline;
	background: transparent;
}

.vfd-form .vfd-thanks__download a:hover,
.vfd-form .vfd-thanks__download a:focus {
	color: var(--vfd-color-accent-hover);
	text-decoration: underline;
	background: transparent;
}