/*!
 * GiveSpring Donor Form — visual system.
 *
 * Three direction tokens (ink / paper / moss), full component
 * vocabulary, mobile breakpoint at 880px. Every selector scopes
 * under `.givespring-donor-form` so theme styles don't bleed in,
 * and so the form doesn't bleed back into the theme's other
 * elements.
 *
 * Theme inheritance: when the active theme exposes
 * `--wp--preset--font-family--*` custom properties (most modern block
 * themes do), the form picks them up. Falls back to our Inter +
 * Source Serif stack otherwise.
 *
 * @package GiveSpring
 */

/* === Tokens — base (ink direction is the default) === */
.givespring-donor-form {
	/* surfaces */
	--gs-bg:           #fafaf7;
	--gs-surface:      #ffffff;
	--gs-surface-soft: #f7f8fb;
	--gs-control-bg:   #ffffff;
	--gs-text:         #0e1116;
	--gs-text-dim:     #4a5160;
	--gs-text-faint:   #8b92a1;
	--gs-line:         #e6e4dd;
	--gs-line-soft:    #efede6;
	/* accent + semantic */
	--gs-accent:       #1d2a55;
	--gs-accent-hover: #15203f;
	--gs-accent-soft:  #eef0f7;
	--gs-accent-ink:   #ffffff;
	--gs-success:      #0f7a4a;
	--gs-success-soft: #e5f2ec;
	--gs-danger:       #b4321f;
	--gs-danger-soft:  #f8e5e1;
	--gs-danger-line:  #edb4aa;
	--gs-urgent:       #b4321f;
	/* shape */
	--gs-radius:       8px;
	--gs-radius-lg:    8px;
	--gs-radius-sm:    6px;
	--gs-shadow-card:  0 18px 44px rgba( 14, 17, 22, 0.08 ), 0 1px 2px rgba( 14, 17, 22, 0.08 );
	--gs-shadow-field: 0 1px 1px rgba( 14, 17, 22, 0.03 );
	/* type */
	--gs-sans:         var( --wp--preset--font-family--inter, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif );
	--gs-serif:        var( --wp--preset--font-family--source-serif-4, "Source Serif 4", "Source Serif Pro", Georgia, serif );
	--gs-mono:         "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	/* spacing density (overridden per density) */
	--gs-pad-card:     28px;
	--gs-gap-block:    20px;
	--gs-layout-max:     1440px;
	--gs-form-col-min:   440px;
	--gs-form-col-max:   640px;
	--gs-form-solo-min:  600px;
	--gs-form-solo-max:  780px;

	width: 100%;
	max-width: 100%;
	background: transparent;
	color: var( --gs-text );
	font-family: var( --gs-sans );
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* === Direction overrides ===
 * Selectors target the data-direction attribute so the same wrapper
 * markup adapts. Per-campaign override (Phase 8) sets the attr in
 * Form_Renderer; for now Slice 5.11 surfaces a global picker.
 */
.givespring-donor-form[data-direction="paper"] {
	--gs-bg:           #f5f1e8;
	--gs-surface:      #fbf8f1;
	--gs-surface-soft: #f6efe2;
	--gs-control-bg:   #fffdf8;
	--gs-text:         #1a1612;
	--gs-text-dim:     #5a5147;
	--gs-text-faint:   #9b9081;
	--gs-line:         #e2dbc9;
	--gs-line-soft:    #ebe5d5;
	--gs-accent:       #7a2c1f;
	--gs-accent-hover: #5e2117;
	--gs-accent-soft:  #f0e5dd;
	--gs-accent-ink:   #fbf8f1;
	--gs-success:      #3f6b2e;
	--gs-success-soft: #e7eedb;
	--gs-danger:       #9b2918;
	--gs-danger-soft:  #f3dcd2;
	--gs-danger-line:  #dfa99c;
	--gs-urgent:       #9b2918;
	--gs-radius:       6px;
	--gs-radius-lg:    6px;
	--gs-radius-sm:    4px;
	--gs-serif:        var( --wp--preset--font-family--source-serif-4, "Source Serif 4", "Source Serif Pro", "Cambria", Georgia, serif );
}

.givespring-donor-form[data-direction="moss"] {
	--gs-bg:           #f4f4f0;
	--gs-surface:      #ffffff;
	--gs-surface-soft: #f3f6ef;
	--gs-control-bg:   #ffffff;
	--gs-text:         #11150f;
	--gs-text-dim:     #4d5447;
	--gs-text-faint:   #8a9082;
	--gs-line:         #e1e2d9;
	--gs-line-soft:    #ebece3;
	--gs-accent:       #2f4a2e;
	--gs-accent-hover: #243a23;
	--gs-accent-soft:  #e8ede5;
	--gs-accent-ink:   #ffffff;
	--gs-success:      #2f4a2e;
	--gs-success-soft: #e3ebe1;
	--gs-danger:       #a63422;
	--gs-danger-soft:  #f5dcd6;
	--gs-danger-line:  #e7aea4;
	--gs-urgent:       #a63422;
	--gs-radius:       8px;
	--gs-radius-lg:    8px;
	--gs-radius-sm:    8px;
	--gs-serif:        var( --wp--preset--font-family--fraunces, "Fraunces", "Source Serif 4", Georgia, serif );
}

/* === Density overrides === */
.givespring-donor-form[data-density="compact"] {
	--gs-pad-card:  20px;
	--gs-gap-block: 14px;
	font-size: 14px;
}
.givespring-donor-form[data-density="comfy"] {
	--gs-pad-card:  36px;
	--gs-gap-block: 28px;
	font-size: 16px;
}

/* === Two-column layout (story + form) === */
/* Scoped box-sizing reset. The form is theme-independent by design,
 * so it must NOT depend on the theme shipping a global
 * `* { box-sizing: border-box }`. Without this, every
 * `width: 100%` input/select/textarea adds its padding + border ON
 * TOP of 100%, overflowing (“bleeding”) past the card edge on themes
 * that use the CSS default `content-box`. */
.givespring-donor-form,
.givespring-donor-form *,
.givespring-donor-form *::before,
.givespring-donor-form *::after {
	box-sizing: border-box;
}

/* Establish a containment context so the two-column → single-column
 * collapse responds to the FORM's own width, not the viewport. A
 * narrow theme single-post content column on a wide desktop screen
 * would otherwise never trip the viewport @media below, leaving the
 * 420px form column overflowing + the story column squished. */
.givespring-donor-form {
	container: givespring-donor-form / inline-size;
}

.givespring-donor-form .gs-main {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( min( 100%, 380px ), clamp( var( --gs-form-col-min ), 42%, var( --gs-form-col-max ) ) );
	gap: clamp( 28px, 4%, 56px );
	width: 100%;
	max-width: min( var( --gs-layout-max ), 100% );
	margin: 0 auto;
	padding: clamp( 28px, 3%, 44px ) clamp( 18px, 3%, 32px ) clamp( 56px, 5%, 80px );
	align-items: start;
}

/* Container-query collapse — mirrors the viewport @media at the
 * bottom of the file but keyed to the form's own inline size, so it
 * fires inside narrow theme containers too. The legacy @media is
 * kept as a graceful fallback for engines without container-query
 * support. */
@container givespring-donor-form ( max-width: 880px ) {
	.givespring-donor-form .gs-main {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 24px 18px 60px;
	}
	.givespring-donor-form .gs-form-col {
		position: static;
		max-height: none;
		order: 2;
	}
	.givespring-donor-form .gs-story-col {
		order: 1;
	}
}

/* Phase 35 single-step: the whole form (gift + inline Payment Element
 * + summary + Donate) renders in this column at once, so it is
 * routinely TALLER than the viewport. The old two-step form showed
 * one short card at a time and fit under `max-height: 100vh`, with
 * `position: sticky` pinning it beside a long story. With the tall
 * single-step form that clamp made the column's box shorter than its
 * content (no overflow scroll), so the theme footer flowed up into
 * the overflow band and painted over — and intercepted clicks on —
 * the Donate button (the "unclickable button" report; it worked on
 * mobile only because the ≤880px container query already resets
 * this to static). The form must flow normally and let the page
 * scroll: no height clamp, no sticky. */
.givespring-donor-form .gs-form-col {
	position: static;
	width: 100%;
	min-width: 0;
}

.givespring-donor-form .gs-story-col {
	min-width: 0;
}

/* === Cards === */
.givespring-donor-form .gs-form-card,
.givespring-donor-form .gs-story-card {
	background: var( --gs-surface );
	border: 1px solid var( --gs-line );
	border-radius: var( --gs-radius-lg );
	padding: clamp( 22px, 5%, var( --gs-pad-card ) );
	box-shadow: var( --gs-shadow-card );
	min-width: 0;
}

.givespring-donor-form .gs-form-card {
	display: flex;
	flex-direction: column;
	gap: var( --gs-gap-block );
}

/* `renderConfirmation()` sets the `hidden` attribute on the form card
 * once the donation confirms. The UA `[hidden] { display: none }`
 * rule (specificity 0,0,1) loses to the `.gs-form-card { display:
 * flex }` rule above (0,2,0), so without this the gift fields stayed
 * visible *below* the thank-you screen. Re-assert hidden with
 * sufficient specificity. */
.givespring-donor-form .gs-form-card[hidden] {
	display: none;
}

/* Phase 36 — public TEST-mode marker. Unobtrusive but unmistakable
 * so staff testing on a live URL can tell at a glance and a
 * misconfigured live site is obvious. Scoped like everything else
 * so it can't bleed into the theme. */
.givespring-donor-form .gs-test-mode-flag {
	margin: 0 0 4px;
	padding: 8px 12px;
	border: 1px dashed #b45309;
	border-radius: 8px;
	background: #fffbeb;
	color: #92400e;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-align: center;
}

/* === Checkout progress === */
.givespring-donor-form .gs-checkout-steps {
	margin: -2px 0 0;
}
.givespring-donor-form .gs-checkout-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 8px;
}
.givespring-donor-form .gs-checkout-steps__item {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid var( --gs-line-soft );
	border-radius: var( --gs-radius-sm );
	background: var( --gs-surface-soft );
	color: var( --gs-text-faint );
	font-size: 12px;
	font-weight: 600;
}
.givespring-donor-form .gs-checkout-steps__item--current {
	border-color: var( --gs-accent );
	background: var( --gs-accent-soft );
	color: var( --gs-text );
}
.givespring-donor-form .gs-checkout-steps__item--complete {
	color: var( --gs-success );
}
.givespring-donor-form .gs-checkout-steps__number {
	display: inline-grid;
	place-items: center;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var( --gs-control-bg );
	color: inherit;
	border: 1px solid currentColor;
	font-family: var( --gs-mono );
	font-size: 11px;
	line-height: 1;
}
.givespring-donor-form .gs-checkout-steps__label {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* === Headings === */
.givespring-donor-form .gs-org {
	font-family: var( --gs-mono );
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --gs-text-faint );
	margin: 0 0 8px;
}
.givespring-donor-form .gs-headline {
	font-family: var( --gs-serif );
	font-weight: 500;
	font-size: 32px;
	line-height: 1.2;
	color: var( --gs-text );
	margin: 0 0 16px;
	letter-spacing: -0.01em;
}
.givespring-donor-form .gs-body {
	font-size: 16px;
	line-height: 1.55;
	color: var( --gs-text-dim );
	margin: 0 0 24px;
}

/* === Impact ladder === */
.givespring-donor-form .gs-impact-ladder {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var( --gs-line-soft );
}
.givespring-donor-form .gs-impact-ladder__row {
	display: flex;
	gap: 16px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid var( --gs-line-soft );
}
.givespring-donor-form .gs-impact-ladder__amount {
	font-family: var( --gs-serif );
	font-size: 18px;
	font-weight: 500;
	color: var( --gs-text );
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
	min-width: 70px;
}
.givespring-donor-form .gs-impact-ladder__label {
	color: var( --gs-text-dim );
	line-height: 1.45;
}

/* === No-story layout (standalone forms / campaigns without a body) === */
.givespring-donor-form[data-gs-has-story="false"] .gs-main {
	grid-template-columns: minmax( 0, min( 100%, clamp( var( --gs-form-solo-min ), 72%, var( --gs-form-solo-max ) ) ) );
	justify-content: center;
}

/* === Goal strip === */
.givespring-donor-form .gs-goal-strip {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-bottom: 16px;
	border-bottom: 1px solid var( --gs-line-soft );
	margin-bottom: 4px;
}
.givespring-donor-form .gs-goal-strip__top {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	flex-wrap: wrap;
}
.givespring-donor-form .gs-goal-strip__raised {
	flex: 1;
	min-width: 200px;
}
.givespring-donor-form .gs-goal-strip__amount {
	font-family: var( --gs-serif );
	font-size: 32px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var( --gs-text );
}
.givespring-donor-form .gs-goal-strip__caption {
	font-size: 12px;
	color: var( --gs-text-faint );
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
}
.givespring-donor-form .gs-goal-strip__urgency {
	text-align: right;
	padding-left: 14px;
	border-left: 1px solid var( --gs-line-soft );
	flex-shrink: 0;
	white-space: nowrap;
}
.givespring-donor-form .gs-goal-strip__days {
	font-family: var( --gs-serif );
	font-size: 26px;
	font-weight: 500;
	color: var( --gs-text );
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.givespring-donor-form .gs-goal-strip__days small {
	font-family: var( --gs-sans );
	font-size: 12px;
	font-weight: 500;
	color: var( --gs-text-dim );
	margin-left: 4px;
}
.givespring-donor-form .gs-goal-strip__days--urgent,
.givespring-donor-form .gs-goal-strip__days--urgent small {
	color: var( --gs-urgent );
}
.givespring-donor-form .gs-goal-strip__deadline {
	font-family: var( --gs-mono );
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --gs-text-faint );
	margin-top: 4px;
}
.givespring-donor-form .gs-goal-strip__progress {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: var( --gs-line-soft );
	overflow: hidden;
}
.givespring-donor-form .gs-goal-strip__progress-bar {
	position: absolute;
	inset: 0;
	width: var( --gs-progress, 0% );
	background: var( --gs-accent );
	border-radius: 999px;
	transition: width 600ms cubic-bezier( 0.2, 0.8, 0.2, 1 );
}
.givespring-donor-form .gs-goal-strip__match {
	font-size: 12px;
	color: var( --gs-text-dim );
	display: flex;
	align-items: center;
	gap: 8px;
}
.givespring-donor-form .gs-goal-strip__match-bar {
	flex: 1;
	height: 4px;
	border-radius: 999px;
	background: var( --gs-line-soft );
	overflow: hidden;
	position: relative;
}
.givespring-donor-form .gs-goal-strip__match-fill {
	position: absolute;
	inset: 0;
	width: var( --gs-match-progress, 0% );
	background: var( --gs-accent );
	opacity: 0.6;
}

/* === Per-cause progress bars (Phase 7) === */
/*
 * One per cause with goal tracking enabled. The wrapper sits below
 * the cause <select>; donor-form.js (Slice 7.7) reads the form's
 * data-closed-causes attribute to add `--closed` decoration to
 * options + this list. Reuses the goal-strip vocabulary so visual
 * weight matches the campaign-level goal bar.
 */
.givespring-donor-form .gs-cause-progress-list {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.givespring-donor-form .gs-cause-progress {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	color: var( --gs-text-dim );
}
.givespring-donor-form .gs-cause-progress__label {
	font-variant-numeric: tabular-nums;
}
.givespring-donor-form .gs-cause-progress__bar {
	position: relative;
	height: 4px;
	border-radius: 999px;
	background: var( --gs-line-soft );
	overflow: hidden;
}
.givespring-donor-form .gs-cause-progress__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	width: var( --gs-cause-progress, 0% );
	background: var( --gs-accent );
	border-radius: 999px;
	transition: width 600ms cubic-bezier( 0.2, 0.8, 0.2, 1 );
}
.givespring-donor-form .gs-cause-progress--closed .gs-cause-progress__label {
	font-weight: 600;
}

/* === Closed-cause picker decoration (Phase 7.7) === */
/*
 * The cause <option> for a closed cause carries
 * `data-gs-cause-closed="true"` (Slice 7.6). donor-form.js leaves
 * those options selectable so the donor's pick triggers the
 * mode-aware reaction (alternatives card / off-campaign navigation
 * / hide); the visual hint here is opacity dimming so the donor
 * sees the cause is fully funded before clicking.
 */
.givespring-donor-form select[data-gs-cause] option[data-gs-cause-closed="true"] {
	color: var( --gs-text-dim );
}

/*
 * Inline alternatives card surfaced when the donor picks a
 * `redirect_to_cause` closed option. donor-form.js inserts the
 * card directly after the cause picker's `.gs-form-field` label.
 * Buttons inherit the form's primary-action visual weight so the
 * donor's next action is unambiguous.
 */
.givespring-donor-form .gs-alt-causes {
	margin-top: 8px;
	padding: 12px 14px;
	background: var( --gs-surface-soft );
	border: 1px solid var( --gs-line-soft );
	border-radius: 8px;
}
.givespring-donor-form .gs-alt-causes[hidden] {
	display: none;
}
.givespring-donor-form .gs-alt-causes__heading {
	margin: 0 0 8px;
	font-size: 13px;
	color: var( --gs-text );
	font-weight: 600;
}
.givespring-donor-form .gs-alt-causes__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.givespring-donor-form .gs-alt-causes__btn {
	font: inherit;
	font-size: 13px;
	padding: 6px 12px;
	background: var( --gs-surface );
	border: 1px solid var( --gs-line );
	border-radius: 999px;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease;
}
.givespring-donor-form .gs-alt-causes__btn:hover,
.givespring-donor-form .gs-alt-causes__btn:focus {
	background: var( --gs-accent-soft, var( --gs-line-soft ) );
	border-color: var( --gs-accent );
	outline: none;
}
.givespring-donor-form .gs-alt-causes__note {
	margin: 0;
	font-size: 12px;
	color: var( --gs-text-dim );
	font-style: italic;
}

/* === Cadence block (Phase 6) === */
/*
 * "How often?" chip group; renders only when at least one recurring
 * cadence is configured. Wrapper carries `data-gs-cadence="…"` once
 * a chip is clicked so theme + per-direction CSS can target the
 * recurring state if they want to show / hide explainer copy.
 */
.givespring-donor-form .gs-cadence-block {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 0;
	padding: 0;
	margin: 0;
	min-inline-size: 0;
}
/* Segmented-control behavior: N equal columns regardless of viewport
 * width, where N is the number of enabled cadences (set as an inline
 * `--gs-cadence-count` custom property by Cadence_Card_Renderer). The
 * old `auto-fit minmax(116px, 1fr)` rule wrapped the 3rd cadence on
 * narrow mobile because three 116px buttons + gap exceed the
 * available width; the new rule never wraps below 4 cadences. */
.givespring-donor-form .gs-cadence-grid {
	display: grid;
	grid-template-columns: repeat( var( --gs-cadence-count, 3 ), minmax( 0, 1fr ) );
	gap: 8px;
}
/* At very narrow widths, drop the segmented label font slightly so
 * "One-time" / "Annually" don't truncate at 320px viewports. */
@media (max-width: 360px) {
	.givespring-donor-form .gs-cadence-grid .gs-pill {
		font-size: 14px;
		padding-inline: 8px;
	}
}

/* === Amount block === */
.givespring-donor-form .gs-amount-block {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 0;
	padding: 0;
	margin: 0;
	min-inline-size: 0;
}
.givespring-donor-form .gs-amount-block legend {
	padding: 0;
	margin: 0;
}
.givespring-donor-form .gs-amount-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 112px ), 1fr ) );
	gap: 8px;
	min-width: 0;
}
.givespring-donor-form .gs-pill {
	appearance: none;
	border: 1px solid var( --gs-line );
	background: var( --gs-control-bg );
	color: var( --gs-text );
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	min-height: 44px;
	padding: 10px 14px;
	border-radius: var( --gs-radius );
	cursor: pointer;
	box-shadow: var( --gs-shadow-field );
	transition: background 120ms, border-color 120ms, color 120ms, box-shadow 120ms;
	text-align: center;
	white-space: nowrap;
}
.givespring-donor-form .gs-pill:hover {
	border-color: var( --gs-text-faint );
	box-shadow: 0 1px 2px rgba( 14, 17, 22, 0.08 );
}
.givespring-donor-form .gs-pill[aria-pressed="true"],
.givespring-donor-form .gs-pill--active {
	background: var( --gs-accent );
	border-color: var( --gs-accent );
	color: var( --gs-accent-ink );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.12 );
}
.givespring-donor-form .gs-amount-block__custom {
	margin-top: 2px;
}
.givespring-donor-form .gs-amount-input {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 500;
	border: 1px solid var( --gs-line );
	border-radius: var( --gs-radius );
	background: var( --gs-control-bg );
	color: var( --gs-text );
	font-variant-numeric: tabular-nums;
	box-shadow: var( --gs-shadow-field );
	transition: border-color 120ms, box-shadow 120ms;
}
.givespring-donor-form .gs-amount-input:focus {
	outline: 0;
	border-color: var( --gs-accent );
	box-shadow: 0 0 0 3px var( --gs-accent-soft );
}

/* === Form fields === */
.givespring-donor-form .gs-form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	margin: 0;
}
.givespring-donor-form fieldset.gs-form-field {
	border: 0;
	padding: 0;
	margin: 0;
	min-inline-size: 0;
}
.givespring-donor-form .gs-form-field__label {
	font-size: 13px;
	font-weight: 600;
	color: var( --gs-text );
}
.givespring-donor-form .gs-form-field__hint {
	font-size: 12px;
	color: var( --gs-text-faint );
	line-height: 1.5;
}
.givespring-donor-form .gs-form-field__error {
	font-size: 12px;
	color: var( --gs-danger );
	font-weight: 500;
}
/* Phase 33 #2 — inline per-field validation message. Hidden until
 * the client UX gate populates it; the top banner stays reserved
 * for server/payment errors. */
.givespring-donor-form .gs-field-error {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.45;
	font-weight: 500;
	color: var( --gs-danger );
}
.givespring-donor-form .gs-field-error[hidden] {
	display: none;
}
.givespring-donor-form [aria-invalid="true"] {
	border-color: var( --gs-danger );
}
.givespring-donor-form [aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px var( --gs-danger-soft );
}
.givespring-donor-form .gs-form-field input,
.givespring-donor-form .gs-form-field select,
.givespring-donor-form .gs-form-field textarea {
	appearance: none;
	width: 100%;
	min-width: 0;
	min-height: 46px;
	padding: 11px 14px;
	font-family: inherit;
	font-size: 15px;
	color: var( --gs-text );
	background-color: var( --gs-control-bg );
	border: 1px solid var( --gs-line );
	border-radius: var( --gs-radius );
	box-shadow: var( --gs-shadow-field );
	transition: border-color 120ms, box-shadow 120ms;
}
.givespring-donor-form .gs-form-field select {
	padding-right: 38px;
	background-image:
		linear-gradient( 45deg, transparent 50%, var( --gs-text-faint ) 50% ),
		linear-gradient( 135deg, var( --gs-text-faint ) 50%, transparent 50% );
	background-position:
		calc( 100% - 18px ) 50%,
		calc( 100% - 13px ) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}
.givespring-donor-form .gs-form-field input:focus,
.givespring-donor-form .gs-form-field select:focus,
.givespring-donor-form .gs-form-field textarea:focus {
	outline: 0;
	border-color: var( --gs-accent );
	box-shadow: 0 0 0 3px var( --gs-accent-soft );
}
.givespring-donor-form .gs-email-field {
	width: 100%;
}
.givespring-donor-form .gs-name-row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 12px;
	min-width: 0;
}

@container givespring-donor-form ( max-width: 620px ) {
	.givespring-donor-form .gs-name-row {
		grid-template-columns: 1fr;
	}
}

@container givespring-donor-form ( max-width: 420px ) {
	.givespring-donor-form .gs-main {
		padding-inline: 14px;
	}
	.givespring-donor-form .gs-form-card,
	.givespring-donor-form .gs-story-card {
		padding: 18px;
	}
	/* Amount presets keep the 2-col mobile layout (6+ presets that
	 * legitimately want to wrap). Cadence intentionally NOT included
	 * here — see the var-driven .gs-cadence-grid rule above; the
	 * cadence row stays a segmented N-col control at every width to
	 * prevent the "Annually" orphan wrap on 3-cadence configs. */
	.givespring-donor-form .gs-amount-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* === Cover-fee toggle === */
.givespring-donor-form .gs-cover-fee {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px;
	background: var( --gs-surface-soft );
	border: 1px solid var( --gs-line-soft );
	border-radius: var( --gs-radius );
	font-size: 13px;
	color: var( --gs-text );
	line-height: 1.5;
	min-width: 0;
	margin: 0;
	transition: background 120ms, border-color 120ms;
}
.givespring-donor-form .gs-cover-fee--plain {
	background: transparent;
	border-color: transparent;
	padding: 0 2px;
}
.givespring-donor-form .gs-cover-fee input[type="checkbox"] {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: var( --gs-accent );
}
.givespring-donor-form .gs-cover-fee__copy {
	flex: 1;
	min-width: 0;
}
.givespring-donor-form .gs-cover-fee__net {
	font-size: 12px;
	color: var( --gs-text-dim );
	margin-top: 2px;
}

/* === Tribute disclosure === */
.givespring-donor-form .gs-tribute__toggle {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var( --gs-accent );
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.givespring-donor-form .gs-tribute__body {
	margin-top: 12px;
	padding: 16px;
	background: var( --gs-surface-soft );
	border: 1px dashed var( --gs-line );
	border-radius: var( --gs-radius );
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}
.givespring-donor-form .gs-tribute[hidden] .gs-tribute__body {
	display: none;
}

/* === Trust row === */
/* Phase 33 #6 — readable, restrained trust row (no chip grid). */
.givespring-donor-form .gs-trust-row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 14px;
	font-size: 12px;
	color: var( --gs-text-faint );
}
.givespring-donor-form .gs-trust-row__item {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}
.givespring-donor-form .gs-trust-row__item + .gs-trust-row__item::before {
	content: "·";
	margin-right: 14px;
	color: var( --gs-line );
}

/* === Honeypot — visually hidden but reachable to bots that fill every input === */
.givespring-donor-form .gs-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* === Phase 33 #5 — impact feedback === */
.givespring-donor-form .gs-impact-note {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-left: 3px solid var( --gs-accent );
	background: var( --gs-accent-soft );
	border-radius: var( --gs-radius-sm );
	font-size: 13px;
	line-height: 1.45;
	color: var( --gs-text );
}
.givespring-donor-form .gs-impact-note[hidden] {
	display: none;
}

/* === Phase 33 #4 — donation summary === */
.givespring-donor-form .gs-summary {
	border: 1px solid var( --gs-line );
	border-radius: var( --gs-radius );
	background: var( --gs-surface-soft );
	padding: 14px 16px;
	margin: 0 0 4px;
}
.givespring-donor-form .gs-summary[hidden] {
	display: none;
}
.givespring-donor-form .gs-summary__title {
	font-family: var( --gs-mono );
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --gs-text-faint );
	margin: 0 0 10px;
}
.givespring-donor-form .gs-summary__rows {
	margin: 0;
	display: grid;
	gap: 6px;
}
.givespring-donor-form .gs-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
}
.givespring-donor-form .gs-summary__row[hidden] {
	display: none;
}
.givespring-donor-form .gs-summary__row dt {
	color: var( --gs-text-dim );
	margin: 0;
}
.givespring-donor-form .gs-summary__row dd {
	margin: 0;
	font-weight: 500;
	color: var( --gs-text );
	font-variant-numeric: tabular-nums;
	text-align: right;
}
.givespring-donor-form .gs-summary__row--total {
	margin-top: 4px;
	padding-top: 10px;
	border-top: 1px solid var( --gs-line );
	font-size: 15px;
}
.givespring-donor-form .gs-summary__row--total dt,
.givespring-donor-form .gs-summary__row--total dd {
	font-weight: 600;
	color: var( --gs-text );
}
.givespring-donor-form .gs-summary__currency {
	color: var( --gs-text-faint );
	font-weight: 500;
	font-size: 12px;
}
/* Wide containers: keep the summary calmly attached to the action
 * without creating a sticky hitbox above the payment button. */
@container givespring-donor-form ( min-width: 720px ) {
	.givespring-donor-form .gs-summary {
		margin-bottom: 8px;
	}
}

/* === Give button === */
.givespring-donor-form .gs-give-button {
	appearance: none;
	position: relative;
	z-index: 2;
	width: 100%;
	min-height: 52px;
	padding: 14px 24px;
	background: var( --gs-accent );
	color: var( --gs-accent-ink );
	border: 0;
	border-radius: var( --gs-radius );
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 10px 22px rgba( 29, 42, 85, 0.18 );
	transition: background 120ms, box-shadow 120ms, transform 60ms;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.givespring-donor-form .gs-give-button:hover {
	background: var( --gs-accent-hover );
	box-shadow: 0 12px 26px rgba( 29, 42, 85, 0.22 );
}
.givespring-donor-form .gs-give-button:active {
	transform: translateY( 1px );
}
.givespring-donor-form .gs-give-button:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var( --gs-accent-soft );
}
.givespring-donor-form .gs-give-button[aria-busy="true"] {
	opacity: 0.7;
	cursor: progress;
}
.givespring-donor-form .gs-button-loader {
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: gs-spin 600ms linear infinite;
}
@keyframes gs-spin { to { transform: rotate( 360deg ); } }
/* Phase 33 #6 — consistent busy + disabled treatment. Busy shows a
 * spinner alongside the label (no JS-injected node needed); the
 * global prefers-reduced-motion guard freezes the spin. */
.givespring-donor-form .gs-give-button:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	box-shadow: none;
}
.givespring-donor-form .gs-give-button--busy::after {
	content: "";
	width: 15px;
	height: 15px;
	margin-left: 10px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: gs-spin 600ms linear infinite;
}

/* === Status banners (errors, info) === */
.givespring-donor-form .gs-banner {
	padding: 12px 14px;
	border-radius: var( --gs-radius );
	font-size: 13px;
	line-height: 1.5;
	font-weight: 500;
}
.givespring-donor-form .gs-banner--error {
	background: var( --gs-danger-soft );
	color: var( --gs-danger );
	border: 1px solid var( --gs-danger-line );
}
.givespring-donor-form .gs-banner--info {
	background: var( --gs-accent-soft );
	color: var( --gs-text );
	border: 1px solid var( --gs-line );
}

/* === Stripe Payment Element container — Stripe styles its own iframe; we just give it room === */
.givespring-donor-form .gs-payment-step {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 4px;
}
.givespring-donor-form .gs-payment-step[hidden] {
	display: none;
}
/* Phase 33 #6 — calm reveal when create-intent succeeds. Animates
 * the element AS it becomes displayed (no JS change, no layout
 * jump — it's already in flow once shown; only opacity + a small
 * rise move). The global prefers-reduced-motion guard below
 * neutralizes the keyframes to ~0ms. */
.givespring-donor-form .gs-payment-step:not( [hidden] ) {
	animation: gs-payment-reveal 220ms ease-out both;
}
@keyframes gs-payment-reveal {
	from { opacity: 0; transform: translateY( 6px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}
.givespring-donor-form .gs-payment-step__header {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.givespring-donor-form .gs-payment-step__title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var( --gs-text );
}
.givespring-donor-form .gs-payment-step__copy {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var( --gs-text-faint );
}
.givespring-donor-form .gs-payment-element {
	min-height: 56px;
}

/* === Confirmation screen === */
.givespring-donor-form .gs-confirmation-screen {
	text-align: center;
	padding: 48px 32px;
	max-width: 520px;
	margin: 0 auto;
}
.givespring-donor-form .gs-confirmation-screen .gs-check {
	width: 64px;
	height: 64px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background: var( --gs-success-soft );
	color: var( --gs-success );
	display: flex;
	align-items: center;
	justify-content: center;
	animation: gs-check-pop 320ms cubic-bezier( 0.2, 0.8, 0.2, 1 );
}
@keyframes gs-check-pop {
	0%   { transform: scale( 0.5 ); opacity: 0; }
	60%  { transform: scale( 1.08 ); opacity: 1; }
	100% { transform: scale( 1 ); }
}
.givespring-donor-form .gs-confirmation-screen__title {
	font-family: var( --gs-serif );
	font-weight: 500;
	font-size: 26px;
	color: var( --gs-text );
	margin: 0 0 12px;
	letter-spacing: -0.01em;
}
.givespring-donor-form .gs-confirmation-screen__receipt {
	color: var( --gs-text-dim );
	line-height: 1.6;
	margin: 0 0 18px;
}
.givespring-donor-form .gs-confirmation-screen__magic-link {
	color: var( --gs-text-faint );
	font-size: 13px;
	line-height: 1.5;
	margin: 0 0 18px;
	padding: 12px 14px;
	background: var( --gs-line-soft );
	border-radius: var( --gs-radius );
}
.givespring-donor-form .gs-confirmation-screen__tribute {
	margin: 0 0 24px;
	font-size: 14px;
	color: var( --gs-text-dim );
}
.givespring-donor-form .gs-confirmation-screen__tribute-verb {
	font-family: var( --gs-mono );
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --gs-text-faint );
	margin-right: 6px;
}
.givespring-donor-form .gs-confirmation-screen__tribute-name {
	font-family: var( --gs-serif );
	font-size: 18px;
	color: var( --gs-text );
}
.givespring-donor-form .gs-confirmation-screen__share {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 18px 0;
	border-top: 1px solid var( --gs-line-soft );
	border-bottom: 1px solid var( --gs-line-soft );
	margin: 24px 0;
}
.givespring-donor-form .gs-confirmation-screen__share-label {
	font-family: var( --gs-mono );
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --gs-text-faint );
}
.givespring-donor-form .gs-confirmation-screen__share-link {
	color: var( --gs-accent );
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
}
.givespring-donor-form .gs-confirmation-screen__share-link:hover,
.givespring-donor-form .gs-confirmation-screen__share-link:focus {
	text-decoration: underline;
}
.givespring-donor-form .gs-confirmation-screen__again {
	margin: 0;
	font-size: 14px;
}
.givespring-donor-form .gs-confirmation-screen__again a {
	color: var( --gs-text-dim );
	text-decoration: underline;
}

/* === Mobile breakpoint — single column === */
@media ( max-width: 880px ) {
	.givespring-donor-form .gs-main {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 24px 18px 60px;
	}
	.givespring-donor-form .gs-form-col {
		position: static;
		max-height: none;
		order: 2;
	}
	.givespring-donor-form .gs-story-col {
		order: 1;
	}
	.givespring-donor-form .gs-name-row {
		grid-template-columns: 1fr;
	}
}

/* === Slice-5.1 scaffold placeholder === */
.givespring-donor-form__scaffold {
	padding: 40px 32px;
	text-align: center;
	color: var( --gs-text-faint );
	font-style: italic;
	border: 1px dashed var( --gs-line );
	border-radius: var( --gs-radius-lg );
	background: var( --gs-surface );
}

/* === Reduced motion (Phase 18 #3 a11y polish) === */
/*
 * Honors `prefers-reduced-motion: reduce` per WCAG 2.2 AA SC 2.3.3.
 * Disables the cause-progress + goal-strip width transitions, the
 * cadence/amount chip hover transitions, the spinner animation,
 * and the confirmation check-pop celebration. Mirrors the donor
 * portal CSS pattern (Slice 9.10).
 */
@media ( prefers-reduced-motion: reduce ) {
	.givespring-donor-form *,
	.givespring-donor-form *::before,
	.givespring-donor-form *::after,
	.gs-donor-embed,
	.gs-donor-embed *,
	.gs-donor-embed *::before,
	.gs-donor-embed *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* === Phase 34 #1 — modal/popup embed ===
 * The modal chrome lives OUTSIDE `.givespring-donor-form` (it wraps
 * it), so it carries its own `.gs-donor-embed` scope — still
 * form-owned, still no theme bleed. The form inside keeps its own
 * scope + container-query sizing. The reduced-motion guard above
 * was extended to cover this scope too. */
.gs-donor-embed {
	box-sizing: border-box;
}
.gs-donor-embed .gs-modal-trigger {
	appearance: none;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 12px 24px;
	border: 0;
	border-radius: 8px;
	background: #1f3a5f;
	color: #fff;
}
.gs-donor-embed .gs-modal-trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.gs-modal[hidden] {
	display: none;
}
.gs-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp( 16px, 5vh, 64px ) 16px;
	overflow-y: auto;
}
.gs-modal__overlay {
	position: fixed;
	inset: 0;
	background: rgba( 14, 17, 22, 0.55 );
}
.gs-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 560px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba( 14, 17, 22, 0.28 );
	padding: clamp( 20px, 4vw, 36px );
	animation: gs-modal-in 160ms ease-out both;
}
@keyframes gs-modal-in {
	from { opacity: 0; transform: translateY( 12px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}
.gs-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	appearance: none;
	border: 0;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #4a5160;
	padding: 6px;
}
.gs-modal__close:focus-visible {
	outline: 2px solid #1f3a5f;
	outline-offset: 2px;
}
/* Inside a modal the form is already in a narrow panel — drop its
 * own outer card chrome so it doesn't double-frame. */
.gs-modal__body .givespring-donor-form .gs-form-card {
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* === Forced-colors / Windows High Contrast (Phase 18 #3) === */
/*
 * Cede color choices to the OS palette so Windows High Contrast
 * users see system-driven foreground / background / focus colors.
 * Mirrors the donor portal pattern.
 */
@media ( forced-colors: active ) {
	.givespring-donor-form .gs-give-button,
	.givespring-donor-form .gs-amount-grid [role="radio"],
	.givespring-donor-form .gs-cadence-grid [role="radio"] {
		border: 1px solid CanvasText;
	}
	.givespring-donor-form .gs-give-button:focus-visible,
	.givespring-donor-form .gs-amount-input:focus,
	.givespring-donor-form .gs-form-field input:focus,
	.givespring-donor-form .gs-form-field select:focus,
	.givespring-donor-form .gs-form-field textarea:focus {
		outline: 2px solid Highlight;
		outline-offset: 2px;
	}
	.givespring-donor-form .gs-cause-picker__option[aria-selected="true"],
	.givespring-donor-form .gs-cause-picker__option[data-active] {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}
}

/* === Rich cause picker (Phase 34.2) === */
/*
 * Progressive-enhancement layer over the native `cause_id` select.
 * The select stays in the DOM (submit + no-JS fallback); when
 * cause-picker.js enhances, it is visually removed but still
 * submittable.
 */
.givespring-donor-form .gs-cause-select--enhanced {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* hidden until JS reveals it — no flash of a non-functional widget */
.givespring-donor-form .gs-cause-picker[hidden] {
	display: none;
}

.givespring-donor-form .gs-cause-picker__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var( --gs-border, #d6d3cb );
	border-radius: 8px;
	overflow: hidden;
}

.givespring-donor-form .gs-cause-picker__list:focus-visible {
	outline: 2px solid var( --gs-accent, #2f6f4f );
	outline-offset: 2px;
}

.givespring-donor-form .gs-cause-picker__option {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.75rem;
	align-items: center;
	padding: 0.75rem;
	cursor: pointer;
	border-top: 1px solid var( --gs-border, #d6d3cb );
}

.givespring-donor-form .gs-cause-picker__option:first-child {
	border-top: 0;
}

.givespring-donor-form .gs-cause-picker__option:not( :has( .gs-cause-picker__thumb ) ) {
	grid-template-columns: 1fr;
}

.givespring-donor-form .gs-cause-picker__option[data-active] {
	background: var( --gs-surface-active, #eef4f0 );
}

.givespring-donor-form .gs-cause-picker__option[aria-selected="true"] {
	background: var( --gs-accent-soft, #e3efe8 );
	box-shadow: inset 3px 0 0 0 var( --gs-accent, #2f6f4f );
}

.givespring-donor-form .gs-cause-picker__option[data-gs-cause-closed="true"] {
	opacity: 0.55;
}

.givespring-donor-form .gs-cause-picker__thumb {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.givespring-donor-form .gs-cause-picker__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.givespring-donor-form .gs-cause-picker__name {
	font-weight: 600;
}

.givespring-donor-form .gs-cause-picker__desc {
	font-size: 0.85em;
	color: var( --gs-muted, #6b6b6b );
}