/*
 * embed-widget.css — GiveSpring Embeddable Donation Widget
 *
 * v1.2.0 — implements the visual design from the
 * `xF-WPvtdUm5Tq0tYygeKlg` handoff bundle (`Embed Widget.html` +
 * `embed/widget.jsx`). Tokens are extracted verbatim from the source
 * so changes here trace back to a deliberate design decision.
 *
 * The widget renders inside a host page alongside marketing copy; the
 * scoped `.gs-embed-widget` selector prefix isolates every rule from
 * the host theme. Token values live on `:root` of the wrapper so
 * `data-direction="ink|paper|moss"` can override individual ones
 * without rewriting whole rules.
 *
 * Direction defaults to "ink" (the design's locked near-black accent
 * on white). "paper" + "moss" land in v1.3+ for full theme parity
 * with the donor form; the variant blocks below are scaffolding.
 */

.gs-embed-widget {
	/* ── Tokens (locked from embed/widget.jsx) ───────────────────── */
	--gs-ew-surface:    #FFFFFF;
	--gs-ew-surface-alt:#F4F5F7;
	--gs-ew-sunken:     #EEEFF1;
	--gs-ew-text:       #1A1D24;
	--gs-ew-text-dim:   #4F5663;
	--gs-ew-text-faint: #9097A2;
	--gs-ew-line:       #DDDFE3;
	--gs-ew-line-soft:  #EBECEF;
	--gs-ew-accent:     #1A1D24;
	--gs-ew-accent-ink: #FFFFFF;
	--gs-ew-selected-bg: #22262D;
	--gs-ew-selected-fg: #FFFFFF;
	--gs-ew-selected-subline: #C7D8FF;
	--gs-ew-hover-bg:   #E8E9EC;
	--gs-ew-subline:    #2B6CB0;
	--gs-ew-error-bg:   #FEF2F2;
	--gs-ew-error-fg:   #991B1B;

	/* ── Per-element tokens (v1.7.30) ─────────────────────────────
	 *
	 * Each per-element variable defaults to the parent semantic
	 * token via `var(...)` fallback so an operator who only sets
	 * the Brand color in Settings → Theming gets a consistent
	 * cadence-active / amount-active / CTA color WITHOUT having
	 * to set those three tokens explicitly. When the operator DOES
	 * set a per-element token in Settings → Theming, the
	 * Theme_Tokens_Renderer's inline `<style>` emits it as an
	 * explicit value and that wins the cascade. */

	/* Cadence chip tokens */
	--gs-ew-cadence-bg:           var(--gs-ew-surface);
	--gs-ew-cadence-text:         var(--gs-ew-text-dim);
	--gs-ew-cadence-active-bg:    var(--gs-ew-accent);
	--gs-ew-cadence-active-text:  var(--gs-ew-accent-ink);

	/* Amount preset chip tokens */
	--gs-ew-amount-bg:            var(--gs-ew-surface);
	--gs-ew-amount-text:          var(--gs-ew-text);
	--gs-ew-amount-active-bg:     var(--gs-ew-accent);
	--gs-ew-amount-active-text:   var(--gs-ew-accent-ink);

	/* Donate CTA tokens */
	--gs-ew-cta-bg:               var(--gs-ew-accent);
	--gs-ew-cta-text:             var(--gs-ew-accent-ink);
	--gs-ew-cta-hover-bg:         #22262D;

	/* Input field tokens — bg + border. Text color inherits from
	 * the `--gs-ew-text` body token (no separate per-element
	 * override; field text rarely needs to break from body text). */
	--gs-ew-field-line:           var(--gs-ew-line);

	--gs-ew-sans:  "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--gs-ew-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
	--gs-ew-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

	--gs-ew-radius:    6px;
	--gs-ew-radius-lg: 10px;

	/* Cadence count for the segmented control — re-set inline per render. */
	--gs-ew-cadence-count: 3;
	--gs-ew-amount-columns: 3;

	/* ── Container ───────────────────────────────────────────────── */
	font-family: var(--gs-ew-sans);
	background: var(--gs-ew-surface);
	border: 1px solid var(--gs-ew-line);
	border-radius: var(--gs-ew-radius-lg);
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	/* v1.7.28 — explicit max-width:100% so a parent without an Elementor
	 * max_width override (e.g. the Gutenberg block, the shortcode, the
	 * Elementor widget pre-v1.7.28's default-less slider) still lets the
	 * widget fill its column. Pre-v1.7.28 the donation widget could
	 * render at its content-natural ~480px inside a wide Elementor
	 * column because Elementor's flex-column children don't stretch a
	 * block child automatically. */
	max-width: 100%;
	/* min-width: 0 so the widget can shrink BELOW its content-intrinsic
	 * size when its flex parent says so — otherwise the cause-trigger
	 * row (long names + endonyms) can force the column wider than the
	 * Elementor section it sits in. */
	min-width: 0;
	box-sizing: border-box;
	box-shadow: 0 1px 2px rgba(15, 18, 24, 0.04);
	color: var(--gs-ew-text);
	line-height: 1.4;
}

/* v1.7.28 — Elementor + flex-column hint. The Elementor widget wrapper
 * (`.elementor-widget-givespring-donation-widget > .elementor-widget-container`)
 * is, by default, a `display: block` element inside a flex column. In
 * Elementor 3.x, a flex-column DOESN'T stretch a block child to the
 * column's full width automatically. Forcing the wrapper to a block
 * with `width: 100%` is the canonical fix Elementor docs themselves
 * recommend for "widget content doesn't fill the column" reports.
 *
 * Scoped to the donation-widget Elementor widget so we never touch
 * other Elementor widgets on the page. */
.elementor-widget-givespring-donation-widget,
.elementor-widget-givespring-donation-widget > .elementor-widget-container {
	width: 100%;
}

/* v1.7.28 — container-query host. Declaring the widget as a CSS
 * container lets the cause-picker rows respond to the WIDGET's
 * actual width — not the viewport — which is the right unit when
 * the same widget can be dropped into a narrow sidebar OR a wide
 * full-width section on the same site.
 *
 * `inline-size` is the modern, well-supported (Chrome 105+, Safari
 * 16+, Firefox 110+) value for "watch width only". */
.gs-embed-widget {
	container-type: inline-size;
	container-name: gs-ew;
}

.gs-embed-widget *,
.gs-embed-widget *::before,
.gs-embed-widget *::after {
	box-sizing: border-box;
}

.gs-embed-widget button {
	/* v1.6.2 — Use the wrapper's font stack explicitly, NOT inherit.
	 * Themes that style `button { font-family: ... }` at high
	 * specificity were leaking through `inherit` and giving us
	 * the wrong glyph widths inside chip labels. */
	font-family: var(--gs-ew-sans);
}

/* v1.6.2 — defensive isolation against common theme bleed. Themes
 * (especially Elementor-heavy ones) ship `button` and `.elementor-button`
 * rules at high specificity / with `!important` that overwrite our chip
 * backgrounds, hover states, and borders. Lock the embed-widget chip
 * vocabulary with `!important` so the donor sees what the design
 * specifies regardless of host theme. The variables themselves remain
 * filterable via direction tokens (ink / paper / moss) — only the
 * chip-level cascade is forced. */
/* v1.7.30 — chip + CTA cascade re-routed through the per-element
 * tokens so the Settings → Theming page's per-state pickers can
 * override the chip / amount / CTA colors independently of the
 * brand-level tokens. The per-element vars default to the brand
 * tokens (see `.gs-embed-widget` token block above), so a site
 * that only sets brand_accent still gets a coherent active state. */
.gs-embed-widget__cadence-tab {
	background-color: var(--gs-ew-cadence-bg) !important;
	color: var(--gs-ew-cadence-text) !important;
	border: 1px solid var(--gs-ew-line) !important;
}
.gs-embed-widget__amount {
	background-color: var(--gs-ew-amount-bg) !important;
	color: var(--gs-ew-amount-text) !important;
	border: 1px solid var(--gs-ew-line) !important;
}
.gs-embed-widget__cadence-tab.is-active {
	background-color: var(--gs-ew-cadence-active-bg) !important;
	color: var(--gs-ew-cadence-active-text) !important;
	border-color: var(--gs-ew-cadence-active-bg) !important;
}
.gs-embed-widget__amount.is-active,
.gs-embed-widget__amount[aria-pressed="true"] {
	background-color: var(--gs-ew-amount-active-bg) !important;
	color: var(--gs-ew-amount-active-text) !important;
	border-color: var(--gs-ew-amount-active-bg) !important;
}
.gs-embed-widget__cadence-tab:hover,
.gs-embed-widget__amount:hover {
	background-color: var(--gs-ew-hover-bg) !important;
	color: var(--gs-ew-text) !important;
	border-color: var(--gs-ew-line) !important;
}
.gs-embed-widget__cadence-tab.is-active:hover {
	background-color: var(--gs-ew-cadence-active-bg) !important;
	color: var(--gs-ew-cadence-active-text) !important;
}
.gs-embed-widget__amount.is-active:hover,
.gs-embed-widget__amount[aria-pressed="true"]:hover {
	background-color: var(--gs-ew-amount-active-bg) !important;
	color: var(--gs-ew-amount-active-text) !important;
}
.gs-embed-widget__donate,
.gs-embed-widget__confirm {
	background-color: var(--gs-ew-cta-bg) !important;
	color: var(--gs-ew-cta-text) !important;
	border: 1px solid var(--gs-ew-cta-bg) !important;
}
.gs-embed-widget__donate:hover,
.gs-embed-widget__donate:focus-visible,
.gs-embed-widget__confirm:hover,
.gs-embed-widget__confirm:focus-visible {
	background-color: var(--gs-ew-cta-hover-bg) !important;
	border-color: var(--gs-ew-cta-hover-bg) !important;
}

/* v1.7.0 — style_mode="inherit" opts the wrapper back into theme
 * typography + button styles. Drops the !important locks the
 * branded mode put on the chip cascade and restores
 * `font-family: inherit` so the host theme's body font + button
 * styles flow through. Use only when the host theme has tasteful
 * button styles you actually want to inherit — this is the
 * "I trust my theme, give me theme bleed" mode. */
.gs-embed-widget[data-gs-style-mode="inherit"] button {
	font-family: inherit;
}
.gs-embed-widget[data-gs-style-mode="inherit"] .gs-embed-widget__cadence-tab,
.gs-embed-widget[data-gs-style-mode="inherit"] .gs-embed-widget__amount {
	background-color: revert !important;
	color: revert !important;
	border: revert !important;
}
.gs-embed-widget[data-gs-style-mode="inherit"] .gs-embed-widget__cadence-tab.is-active,
.gs-embed-widget[data-gs-style-mode="inherit"] .gs-embed-widget__amount.is-active,
.gs-embed-widget[data-gs-style-mode="inherit"] .gs-embed-widget__amount[aria-pressed="true"] {
	background-color: revert !important;
	color: revert !important;
	border-color: revert !important;
}
.gs-embed-widget[data-gs-style-mode="inherit"] .gs-embed-widget__cadence-tab:hover,
.gs-embed-widget[data-gs-style-mode="inherit"] .gs-embed-widget__amount:hover {
	background-color: revert !important;
	color: revert !important;
	border-color: revert !important;
}
.gs-embed-widget[data-gs-style-mode="inherit"] .gs-embed-widget__donate,
.gs-embed-widget[data-gs-style-mode="inherit"] .gs-embed-widget__confirm {
	background-color: revert !important;
	color: revert !important;
	border: revert !important;
}

/* ── Direction variants (placeholder; ink is default) ─────────── */
.gs-embed-widget[data-direction="paper"] {
	--gs-ew-accent: #6B2C2C;
}
.gs-embed-widget[data-direction="moss"] {
	--gs-ew-accent: #2F4A2C;
}

/* ── Title block ────────────────────────────────────────────────── */
.gs-embed-widget__title-block {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gs-embed-widget__title {
	margin: 0;
	font-family: var(--gs-ew-serif);
	font-weight: 600;
	color: var(--gs-ew-text);
	letter-spacing: -0.015em;
	line-height: 1.1;
}

.gs-embed-widget__title--simple {
	font-size: 24px;
	letter-spacing: -0.012em;
	line-height: 1.15;
}

.gs-embed-widget__title-block--causes .gs-embed-widget__title {
	font-size: 26px;
}

.gs-embed-widget__eyebrow {
	font-family: var(--gs-ew-serif);
	font-size: 18px;
	font-weight: 500;
	color: var(--gs-ew-text);
	letter-spacing: -0.005em;
}

/* ── Cadence tabs ────────────────────────────────────────────────── */
.gs-embed-widget__cadence-tabs {
	display: grid;
	/* v1.7.30.1 — `minmax(0, 1fr)` (not bare `1fr`) so columns can
	 * shrink below their content-natural width. Without it, long
	 * cadence labels ("Semi-annual" / "Annually") force the grid
	 * wider than the widget's content area on narrow mobile widths
	 * and push horizontal page overflow. The chip's existing
	 * `text-overflow: ellipsis` rule handles the truncation. */
	grid-template-columns: repeat(var(--gs-ew-cadence-count), minmax(0, 1fr));
	gap: 0;
	background: var(--gs-ew-surface-alt);
	border-radius: var(--gs-ew-radius);
	padding: 4px;
}

/* v1.3.4 — force 2-row layout for 5/6-cadence configs in ALL contexts,
 * not just narrow viewports. The embed widget is designed to drop into
 * narrow surfaces (Elementor Pro popups ~600px wide, sidebar widgets,
 * inline-next-to-narrative columns) where the viewport is still wide
 * but the *container* is narrow — so a CSS @media query keyed on
 * viewport width can't help. Forcing 2-row at ≥5 cadences keeps every
 * chip label readable regardless of container width.
 *
 * 1–3 cadences: 1 row, repeat(N, 1fr) — the default rule above.
 * 4 cadences:   1 row at wide viewports, 2 rows at <640px (narrow
 *               viewports only — 4 chips usually fit a popup).
 * 5–6 cadences: 2 rows of 3 chips, unconditional.
 *
 * Same reasoning as Form_Renderer's cadence grid for the donor form;
 * the embed widget gets the stricter rule because its host containers
 * trend narrow. */
.gs-embed-widget__cadence-tabs[data-cadence-count="5"],
.gs-embed-widget__cadence-tabs[data-cadence-count="6"] {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 640px) {
	.gs-embed-widget__cadence-tabs[data-cadence-count="4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* v1.7.30.1 — container-query column drop. When the widget itself
 * is narrow (regardless of viewport — covers narrow sidebar embeds
 * on a wide desktop, NOT just phones), force cadence + amount
 * grids to fewer columns. The container-query host is declared on
 * `.gs-embed-widget` (`container-type: inline-size`) above. */
@container gs-ew (max-width: 360px) {
	.gs-embed-widget__cadence-tabs[data-cadence-count="3"],
	.gs-embed-widget__cadence-tabs[data-cadence-count="4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.gs-embed-widget__cadence-tabs[data-cadence-count="5"],
	.gs-embed-widget__cadence-tabs[data-cadence-count="6"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gs-embed-widget__cadence-tab {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	cursor: pointer;
	background: transparent;
	color: var(--gs-ew-text-dim);
	/* v1.6.2 — tighter horizontal padding + 13px font so "Semi-annual"
	 * (the longest label) fits centered in a 6-cadence single-row at
	 * narrow popup widths instead of overflowing right. */
	padding: 11px 8px;
	border-radius: calc(var(--gs-ew-radius) - 1px);
	font-size: 13px;
	font-weight: 500;
	/* v1.7.30.2 — readable wrap instead of ellipsis-truncate. The
	 * pre-v1.7.30.2 chip used `white-space: nowrap; overflow: hidden;
	 * text-overflow: ellipsis;` — which on mobile collapsed "One
	 * time" → "On..." even in 3-column layouts where the cell was
	 * physically wide enough. Two-line wrap is acceptable for
	 * cadence labels (the segmented-control reads fine at 2 lines);
	 * truncation made the labels unreadable. min-width: 0 + word-
	 * break: break-word as defensive belt-and-suspenders for the
	 * rare overflow case (a localized cadence string that's too
	 * long to wrap cleanly). */
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
	transition: background 120ms ease, color 120ms ease;
}

.gs-embed-widget__cadence-tab.is-active {
	background: var(--gs-ew-surface);
	color: var(--gs-ew-text);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04),
		0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

.gs-embed-widget__cadence-tab:focus-visible {
	outline: 2px solid var(--gs-ew-accent);
	outline-offset: 2px;
}

/* ── Amount grid ─────────────────────────────────────────────────── */
.gs-embed-widget__amount-grid {
	display: grid;
	/* v1.7.30.1 — `minmax(0, 1fr)` lets the columns shrink below
	 * content-natural width. Pre-v1.7.30.1, an 8-preset campaign on
	 * a 320–390px viewport forced the 3-column grid wider than the
	 * widget itself, which pushed horizontal page overflow. */
	grid-template-columns: repeat(var(--gs-ew-amount-columns), minmax(0, 1fr));
	gap: 10px;
}

/* v1.7.30.1 — container-query column collapse. When the widget
 * itself is narrow, force the amount grid down to 2 columns so
 * the chips have room for "$3,000.00" without truncating. Triggers
 * at 400px because the chip MIN width (~120px at 14px / 6px-padding
 * with tabular-nums) × 3 + 2 gaps × 10px ≈ 380px — anything
 * smaller cramps the chips badly even at minmax(0, 1fr). */
@container gs-ew (max-width: 400px) {
	.gs-embed-widget__amount-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* At extreme narrow widths (under 280px — embedded inside a very
 * narrow sidebar / column) drop to a single column to keep the
 * amount labels readable. */
@container gs-ew (max-width: 280px) {
	.gs-embed-widget__amount-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.gs-embed-widget__amount {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background: var(--gs-ew-surface);
	border: 1px solid var(--gs-ew-line);
	border-radius: var(--gs-ew-radius);
	padding: 16px 8px;
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--gs-ew-text);
	transition: border-color 120ms ease, background 120ms ease;
	/* v1.7.30.1 — defensive minimum: even with minmax(0, 1fr) on
	 * the grid, the chip's own content can still resist shrinking.
	 * `min-width: 0` lets the grid cell collapse, and the
	 * `overflow: hidden` clip prevents a single-char overflow from
	 * pushing the surrounding card width. */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gs-embed-widget__amount.is-active {
	background: var(--gs-ew-surface-alt);
	border-color: var(--gs-ew-text);
}

.gs-embed-widget__amount:focus-visible {
	outline: 2px solid var(--gs-ew-accent);
	outline-offset: 2px;
}

/* ── Custom amount input ─────────────────────────────────────────── */
.gs-embed-widget__custom {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gs-embed-widget__custom-label {
	font-size: 12px;
	color: var(--gs-ew-text-dim);
	font-family: var(--gs-ew-sans);
}

.gs-embed-widget__custom-input-wrap {
	display: flex;
	align-items: stretch;
	/* v1.7.30 — route through --gs-ew-field-line so the Theming
	 * page's "Input field border" picker controls this surface. */
	border: 1px solid var(--gs-ew-field-line);
	border-radius: var(--gs-ew-radius);
	background: var(--gs-ew-surface);
	overflow: hidden;
	transition: border-color 120ms ease;
}

.gs-embed-widget__custom-input-wrap:focus-within {
	border-color: var(--gs-ew-text);
}

.gs-embed-widget__custom-prefix {
	padding: 12px 14px;
	background: var(--gs-ew-surface-alt);
	color: var(--gs-ew-text-dim);
	font-size: 14px;
	border-right: 1px solid var(--gs-ew-line);
	display: flex;
	align-items: center;
}

.gs-embed-widget__custom-input {
	flex: 1;
	padding: 12px 14px;
	border: 0;
	outline: none;
	background: transparent;
	font-family: var(--gs-ew-sans);
	font-size: 14px;
	color: var(--gs-ew-text);
	min-width: 0;
}

/* ── Donate button ───────────────────────────────────────────────── */
.gs-embed-widget__donate {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	cursor: pointer;
	font-family: var(--gs-ew-sans);
	background: var(--gs-ew-accent);
	color: var(--gs-ew-accent-ink);
	border-radius: var(--gs-ew-radius);
	padding: 16px 20px;
	font-size: 15px;
	font-weight: 600;
	width: 100%;
	transition: background 120ms ease, opacity 120ms ease;
}

.gs-embed-widget__donate:hover:not(:disabled) {
	background: #2A2D34;
}

.gs-embed-widget__donate:disabled {
	background: var(--gs-ew-sunken);
	color: var(--gs-ew-text-faint);
	cursor: not-allowed;
}

.gs-embed-widget__donate:focus-visible {
	outline: 2px solid var(--gs-ew-accent);
	outline-offset: 2px;
}

/* ── Cause picker ────────────────────────────────────────────────── */
.gs-embed-widget__cause-picker {
	position: relative;
}

.gs-embed-widget__cause-trigger {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--gs-ew-line);
	background: var(--gs-ew-surface);
	border-radius: var(--gs-ew-radius);
	padding: 12px 14px;
	font-family: var(--gs-ew-sans);
	cursor: pointer;
	text-align: left;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--gs-ew-text);
}

.gs-embed-widget__cause-picker.is-open .gs-embed-widget__cause-trigger {
	border-color: var(--gs-ew-text);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.gs-embed-widget__cause-label {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.gs-embed-widget__cause-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--gs-ew-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gs-embed-widget__cause-subline {
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--gs-ew-subline);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gs-embed-widget__cause-chevron {
	color: var(--gs-ew-text-dim);
	display: inline-flex;
	flex-shrink: 0;
	transition: transform 160ms ease;
}

.gs-embed-widget__cause-picker.is-open .gs-embed-widget__cause-chevron {
	transform: rotate(180deg);
}

.gs-embed-widget__cause-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--gs-ew-surface-alt);
	border: 1px solid var(--gs-ew-line);
	border-radius: var(--gs-ew-radius);
	max-height: 460px;
	overflow: auto;
	box-shadow:
		0 18px 50px -12px rgba(15, 18, 24, 0.20),
		0 4px 12px -4px rgba(15, 18, 24, 0.08);
	z-index: 10;
	margin: 0;
	padding: 0;
}

.gs-embed-widget__cause-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 18px 14px;
	border-bottom: 1px solid var(--gs-ew-line);
	background: var(--gs-ew-surface);
	position: sticky;
	top: 0;
	z-index: 2;
}

.gs-embed-widget__cause-search-icon {
	color: var(--gs-ew-text-faint);
	flex-shrink: 0;
}

.gs-embed-widget__cause-search-input {
	flex: 1;
	border: 0;
	outline: none;
	background: transparent;
	font-family: var(--gs-ew-sans);
	font-size: 13px;
	color: var(--gs-ew-text);
	min-width: 0;
	padding: 0;
}

.gs-embed-widget__cause-count {
	font-size: 11px;
	color: var(--gs-ew-text-faint);
	font-family: var(--gs-ew-mono);
}

.gs-embed-widget__cause-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gs-embed-widget__cause-row {
	cursor: pointer;
	background: transparent;
	color: var(--gs-ew-text);
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	transition: background 80ms ease;
}

.gs-embed-widget__cause-row:hover:not(.is-selected) {
	background: var(--gs-ew-hover-bg);
}

.gs-embed-widget__cause-row.is-selected {
	background: var(--gs-ew-selected-bg);
	color: var(--gs-ew-selected-fg);
}

.gs-embed-widget__cause-row-label {
	min-width: 0;
	flex: 1;
}

.gs-embed-widget__cause-row-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gs-embed-widget__cause-row-subline {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--gs-ew-subline);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gs-embed-widget__cause-row.is-selected .gs-embed-widget__cause-row-subline {
	color: var(--gs-ew-selected-subline);
}

/* v1.7.28 — full cause description.
 *
 * Hidden by default (narrow widget layouts show the subline only —
 * the existing one-line summary). The wide-layout container query
 * below promotes it to visible, multi-line, with proper line-height.
 *
 * Always stored in the DOM so the search filter (which matches
 * against `data-cause-description`) doesn't need to re-render. */
.gs-embed-widget__cause-row-description {
	display: none;
}

/* ── Wide layout (container ≥ 540px) ───────────────────────────────
 *
 * When the widget itself is at least 540px wide (NOT viewport — the
 * container query measures the widget), the cause picker rows
 * promote to a roomy two-column layout: larger thumbnail, a richer
 * text column with the FULL description (3-line clamped) instead
 * of the truncated subline.
 *
 * Why 540px: that's the width where the previous narrow layout
 * stops feeling cramped (one-line subline starts showing
 * obviously-truncated descriptions) and the wide layout starts
 * earning its keep (the thumbnail at 56px still fits in a single
 * row with the text). 720px is the "fully open" breakpoint where
 * we drop the line-clamp entirely. */
@container gs-ew (min-width: 540px) {
	.gs-embed-widget__cause-row {
		gap: 18px;
		padding: 14px 18px;
	}

	.gs-embed-widget__cause-thumb {
		width: 56px;
		height: 56px;
		border-radius: 6px;
		font-size: 11px;
	}

	.gs-embed-widget__cause-row-name {
		font-size: 15px;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	.gs-embed-widget__cause-row-subline {
		/* In the wide layout, the long description takes over the
		 * "summary" slot — the truncated one-line subline is now
		 * redundant. */
		display: none;
	}

	.gs-embed-widget__cause-row-description {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-top: 4px;
		font-size: 13px;
		line-height: 1.45;
		color: var(--gs-ew-text-dim);
	}

	.gs-embed-widget__cause-row.is-selected .gs-embed-widget__cause-row-description {
		color: var(--gs-ew-selected-subline);
	}

	/* The trigger button also benefits from breathing room when wide.
	 * The selected cause name no longer needs ellipsis truncation. */
	.gs-embed-widget__cause-trigger {
		padding: 14px 18px;
		gap: 18px;
	}

	.gs-embed-widget__cause-name {
		font-size: 15px;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	.gs-embed-widget__cause-subline {
		font-size: 13px;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		line-height: 1.4;
	}
}

@container gs-ew (min-width: 720px) {
	.gs-embed-widget__cause-row-description {
		/* "Fully open" — no line clamp; the donor can read the whole
		 * cause description without scrolling the dropdown. */
		-webkit-line-clamp: unset;
		line-clamp: unset;
		display: block;
	}

	.gs-embed-widget__cause-thumb {
		width: 72px;
		height: 72px;
	}
}

/* ── Cause thumbnail ────────────────────────────────────────────
 *
 * Two render modes:
 *   - Striped placeholder (no image set on the cause definition).
 *     The element's `data-tone` selects a gradient pair; the
 *     element's text node carries the cause code glyph.
 *   - Image (v1.7.28+: the cause's uploaded image URL surfaces as a
 *     CSS background-image on the SAME element). The stripe pattern
 *     stays underneath so a broken image URL gracefully degrades.
 *
 * The cover'd background-size + center-positioning means non-square
 * uploads still look right (the cause editor allows any image; we
 * don't crop server-side). */
.gs-embed-widget__cause-thumb {
	width: 38px;
	height: 38px;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--gs-ew-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	flex-shrink: 0;
	color: #1A1D24;
	background-color: #C8CBD0;
	background-image: repeating-linear-gradient(135deg, #C8CBD0 0 4px, #B5B9BF 4px 8px);
	background-size: 8px 8px;
	background-position: center;
	background-repeat: repeat;
	overflow: hidden;
}

.gs-embed-widget__cause-thumb.has-image {
	/* v1.7.28 — image takes over via inline `background-image: url(...)`
	 * style on the element; we just need to switch the layout.
	 *
	 * v1.7.28.4 — switched from `cover` to `contain`. With `cover`,
	 * non-square uploads got cropped to the thumbnail box and the
	 * subject (people, the school sign) was often outside the crop.
	 * `contain` fits the entire image; letterbox bars fill against
	 * `--gs-ew-surface-alt` so the bars blend with the dropdown
	 * surface instead of showing the stripe pattern through. */
	background-color: var(--gs-ew-surface-alt);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	color: transparent; /* hide the code glyph fallback */
}

.gs-embed-widget__cause-thumb[data-tone="warm"] {
	background: repeating-linear-gradient(135deg, #D9C9B3 0 4px, #C5B49C 4px 8px);
	color: #3F2A14;
}

.gs-embed-widget__cause-thumb[data-tone="cool"] {
	background: repeating-linear-gradient(135deg, #B0C0D0 0 4px, #9CADBF 4px 8px);
	color: #15243A;
}

.gs-embed-widget__cause-thumb[data-tone="moss"] {
	background: repeating-linear-gradient(135deg, #B7C2B0 0 4px, #A3B09B 4px 8px);
	color: #1B2A1A;
}

.gs-embed-widget__cause-thumb[data-tone="sand"] {
	background: repeating-linear-gradient(135deg, #D9CBB0 0 4px, #C2B294 4px 8px);
	color: #3D2E10;
}

.gs-embed-widget__cause-row.is-selected .gs-embed-widget__cause-thumb {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* ── Inline checkout (Path A: expand below the amount controls) ── */
/* v1.7.4 — `:not([hidden])` so the HTML `hidden` attribute on the
 * checkout wrapper actually works. Prior to v1.7.4 the bare
 * `.gs-embed-widget__checkout { display: flex }` rule out-specified
 * the browser UA's `[hidden] { display: none }` rule, so the
 * checkout was visible from page load instead of revealing on
 * Donate-click. Live install symptom: donors saw a confusing
 * empty form below the Donate button before clicking it. */
.gs-embed-widget__checkout:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 18px;
	border-top: 1px solid var(--gs-ew-line);
}
.gs-embed-widget__checkout[hidden] {
	display: none;
}

.gs-embed-widget__checkout-summary {
	background: var(--gs-ew-surface-alt);
	padding: 12px 14px;
	border-radius: var(--gs-ew-radius);
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.gs-embed-widget__checkout-summary-label {
	font-size: 12px;
	color: var(--gs-ew-text-dim);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.gs-embed-widget__checkout-summary-amount {
	font-size: 18px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--gs-ew-text);
}

.gs-embed-widget__checkout-summary-cadence {
	font-size: 13px;
	color: var(--gs-ew-text-dim);
}

.gs-embed-widget__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gs-embed-widget__field-label {
	font-size: 12px;
	color: var(--gs-ew-text-dim);
}

.gs-embed-widget__field-input {
	/* v1.7.30 — route the inline-checkout text inputs through the
	 * shared field tokens so the Theming page controls them. */
	border: 1px solid var(--gs-ew-field-line);
	border-radius: var(--gs-ew-radius);
	padding: 12px 14px;
	font-family: var(--gs-ew-sans);
	font-size: 14px;
	color: var(--gs-ew-text);
	background: var(--gs-ew-surface);
	outline: none;
	transition: border-color 120ms ease;
}

.gs-embed-widget__field-input:focus {
	border-color: var(--gs-ew-text);
}

.gs-embed-widget__payment-element {
	border: 1px solid var(--gs-ew-line);
	border-radius: var(--gs-ew-radius);
	padding: 12px 14px;
	background: var(--gs-ew-surface);
	min-height: 60px;
}

.gs-embed-widget__checkout-actions {
	display: flex;
	gap: 10px;
	align-items: center;
}

.gs-embed-widget__back {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	color: var(--gs-ew-text-dim);
	cursor: pointer;
	font-family: var(--gs-ew-sans);
	font-size: 14px;
	padding: 12px 14px;
	text-decoration: underline;
}

.gs-embed-widget__back:hover {
	color: var(--gs-ew-text);
}

.gs-embed-widget__confirm {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	cursor: pointer;
	font-family: var(--gs-ew-sans);
	background: var(--gs-ew-accent);
	color: var(--gs-ew-accent-ink);
	border-radius: var(--gs-ew-radius);
	padding: 14px 18px;
	font-size: 14px;
	font-weight: 600;
	flex: 1;
	transition: background 120ms ease;
}

.gs-embed-widget__confirm:disabled {
	background: var(--gs-ew-sunken);
	color: var(--gs-ew-text-faint);
	cursor: not-allowed;
}

.gs-embed-widget__error {
	background: var(--gs-ew-error-bg);
	color: var(--gs-ew-error-fg);
	padding: 10px 12px;
	border-radius: var(--gs-ew-radius);
	font-size: 13px;
}

/* ── Mobile breakpoint ──────────────────────────────────────────── */
@media (max-width: 480px) {
	.gs-embed-widget {
		padding: 20px;
		gap: 14px;
	}

	.gs-embed-widget__title--simple {
		font-size: 22px;
	}

	.gs-embed-widget__title-block--causes .gs-embed-widget__title {
		font-size: 22px;
	}

	/* v1.7.30.2 — REMOVED the `font-size` overrides on
	 * `.gs-embed-widget__amount` and `.gs-embed-widget__cadence-tab`
	 * here. They were competing with the Elementor Typography
	 * controls' mobile-responsive values and producing an
	 * unintuitive "I changed the font size in Elementor but the
	 * site still shows the default" experience on the frontend.
	 *
	 * The base font-size declared on each chip (15px amount,
	 * 13px cadence) in the unscoped rules above is the
	 * cross-viewport default. Elementor's typography control then
	 * overrides at any breakpoint the operator chooses, no
	 * specificity battle. Padding adjustments stay here because
	 * Elementor doesn't currently expose a per-chip padding
	 * control — those are GiveSpring-owned.
	 */
	.gs-embed-widget__amount {
		padding: 14px 6px;
	}

	.gs-embed-widget__cadence-tab {
		padding: 10px 8px;
	}
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.gs-embed-widget *,
	.gs-embed-widget *::before,
	.gs-embed-widget *::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
}