/* Visual pass — brand-aligned, not yet Savannah/Hafsa-approved final design.
   PAAU brand: primary orange #FF6A00, Rally yellow #FCDC2A, dark #231F20.

   Accent orange and dark text now read from Elementor's Global Colors
   (--e-global-color-primary / --e-global-color-text) with the brand hex
   above as the fallback value — see the README's "Elementor global color
   tokens" section for why, and for what this does and doesn't cover.

   Correction (0.39.18), plugin-wide, canonical note — every other file's
   own color comment just points back here: this was --e-global-color-
   accent, not -primary, from the very first round this plugin read
   Elementor's Global Colors at all. A DevTools screenshot of the live
   site's computed styles showed the real brand orange, #FF6A00, actually
   lives on Elementor's "Primary" global color slot — "Accent" was never
   set to anything on this site's Elementor kit, so every var(--e-global-
   color-accent, #EF7C00) in this entire plugin had silently been resolving
   to its own hardcoded #EF7C00 fallback the whole time, never once
   actually reading Elementor's Global Colors panel the way every comment
   near it claimed. Renamed to --e-global-color-primary and the fallback
   updated to #FF6A00 everywhere across every stylesheet in this plugin
   (donation-form.css, donate-widget.css, checkout.css, thankyou.css,
   appeal-updates.css, appeal-fundraisers.css, blocks.css, and the
   hardcoded — no variable at all — oranges in admin-settings.css), so the
   variable and the fallback finally agree instead of the fallback quietly
   being the only value that ever rendered.

   Correction (0.36.1): font-family used to be hardcoded on the line below
   (a plain system-font stack) instead of reading from Elementor's Global
   Fonts — missed against a standing instruction to wire this plugin's
   styling to Elementor's tokens across the whole plugin, same category of
   miss as the Appeal Updates title (see that file's own correction note).
   Set once here, at each of this file's independent DOM roots
   (.paau-appeal-box/.paau-fundraiser-box, .paau-donation-widget/
   .paau-fundraiser-submission-form, and .paau-cart-drawer — the cart
   drawer is injected separately via wp_footer, not nested under either of
   the other two, so it needs its own explicit declaration rather than
   relying on inheritance from a shared ancestor that doesn't exist),
   descendants inherit it normally rather than every individual selector
   needing its own repeated font-family line — font-family cascades in
   plain CSS, unlike color, so this is both correct and the smaller diff.
   Real heading tags (<h3> titles specifically) get an explicit override to
   Elementor's "primary" font slot instead of the inherited "text" one —
   see each title rule below. The old hardcoded stack is kept as this
   variable's fallback value, not discarded, so nothing changes visually
   on a page where the Elementor variable isn't defined. */

.paau-appeal-box,
.paau-fundraiser-box {
	width: 100%;
	max-width: 480px;
	box-sizing: border-box;
	padding: 28px 24px 24px;
	background: #ffffff !important;
	border: 1px solid #ececec !important;
	border-top: 4px solid var(--e-global-color-primary, #FF6A00) !important;
	border-radius: 18px;
	box-shadow: 0 2px 4px rgba(35, 31, 32, 0.04), 0 14px 34px rgba(35, 31, 32, 0.09);
	font-family: var(--e-global-typography-text-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Calibri, Roboto, sans-serif) !important;
}

.paau-donation-widget,
.paau-fundraiser-submission-form {
	width: 100%;
	max-width: 480px;
	box-sizing: border-box;
	font-family: var(--e-global-typography-text-font-family, inherit) !important;
}

/* font-family deliberately left off .paau-appeal-title/.paau-fundraiser-
   title/.paau-cart-drawer-header h3 below (0.40.35) — all three are real
   heading tags; same 0.39.2 finding as class-donate-widget.php's own
   headings and every other real heading fixed this same round (see
   appeal-fundraisers.css's own comment for the confirmed reasoning:
   PAAU's actual heading font is set via Site Settings → Typography, not
   Elementor's Global Fonts kit, and this !important override was
   silently blocking it from ever reaching these tags). Color is
   unaffected throughout — Global Colors does work via that custom
   property; this was specifically a fonts-on-headings issue. */
.paau-appeal-title {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-appeal-description {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.5;
	color: #4a4a4a !important;
}

.paau-donation-type-switch {
	display: flex !important;
	gap: 4px;
	margin-bottom: 18px;
	background: #f5f5f5 !important;
	border-radius: 10px;
	padding: 4px;
}

.paau-donation-type-switch label {
	flex: 1 !important;
	text-align: center;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #6b6b6b !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.paau-donation-type-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.paau-donation-type-switch label:has(input:checked) {
	background: #ffffff !important;
	color: var(--e-global-color-text, #231F20) !important;
	box-shadow: 0 1px 2px rgba(35, 31, 32, 0.12);
}

.paau-donation-form,
.paau-recurring-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px;
}

/* Heading above the amount grid (0.40.16) — direct ask: the form needed
   hierarchy, starting with something above the amounts naming what
   they're for. Plain <p>, not an <h*> tag, deliberately — this form gets
   embedded via shortcode into pages that own their own heading outline
   (H1/H2/H3 from the page content), and this text isn't meant to compete
   in that outline, just read as a bold label the way "Frequency" and
   "Quantity" already do elsewhere on this form. */
.paau-amount-heading {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-donation-amounts {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

/* flex-direction: column (0.40.16) — direct correction: value/label were
   sitting side-by-side and reading as cramped/random, not as a clear
   number with a caption beneath it. .paau-amount-value and
   .paau-amount-label were already `display: block` each, but that only
   governs their own internal content flow — as flex ITEMS of this
   row-direction container, they were still laid out side-by-side
   regardless of their own display value. .paau-amount-custom (the
   dashed "Other" row, immediately below) explicitly overrides back to
   row, since its icon-plus-input layout is intentionally horizontal, not
   a value/caption pair. */
.paau-amount-option {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px;
	border: 1.5px solid #e2e2e2 !important;
	border-radius: 12px;
	padding: 14px 12px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: var(--e-global-color-text, #231F20) !important;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.paau-amount-option:hover {
	border-color: var(--e-global-color-primary, #FF6A00) !important;
}

.paau-amount-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.paau-amount-option:has(input:checked) {
	border-color: var(--e-global-color-primary, #FF6A00) !important;
	background: #FFF4E8 !important;
	color: var(--e-global-color-primary, #FF6A00) !important;
}

/* Fallback for the rare browser without :has() support — JS toggles this
   class on change, see donation-form.js */
.paau-amount-option.is-selected {
	border-color: var(--e-global-color-primary, #FF6A00) !important;
	background: #FFF4E8 !important;
	color: var(--e-global-color-primary, #FF6A00) !important;
}

/* Back to matching .paau-amount-option's own border/radius (0.40.22) —
   direct correction to 0.40.21: "it should look more like the amount
   buttons, same border etc." That round went too far the other way —
   removing the box entirely read as inconsistent with the preset buttons
   sitting right above it, not just less prominent. This isn't a full
   revert to the pre-0.40.21 look though: still one single border (not
   that version's outer-dashed + inner-solid double box) and still no
   "Other" label — just the same plain solid border/radius/selected-fill
   every preset button already uses, so it reads as "another row in the
   same set of amount controls" rather than either a competing card or an
   invisible plain input. */
.paau-amount-custom {
	grid-column: span 2;
	flex-direction: row !important;
	justify-content: flex-start !important;
	align-items: center !important;
	gap: 8px;
	padding: 14px 16px;
}

.paau-amount-custom-field {
	display: flex !important;
	align-items: center !important;
	gap: 4px;
	flex: 1 !important;
	min-width: 0;
}

.paau-amount-custom-prefix {
	font-size: 16px;
	font-weight: 700;
	color: #9a9a9a !important;
	transition: color 0.15s ease;
}

.paau-amount-custom input[type="number"] {
	flex: 1 !important;
	border: none !important;
	outline: none;
	font-size: 16px;
	font-weight: 700;
	color: var(--e-global-color-text, #231F20) !important;
	background: transparent !important;
	min-width: 0;
}

/* Selected state — mirrors .paau-amount-option:has(input:checked) /
   .is-selected above exactly (border + fill + text color), but keyed off
   the field actually having a value (:placeholder-shown is absent once
   text is typed) since a number input has no :checked state of its own. */
.paau-amount-custom.is-selected,
.paau-amount-custom:has(input:not(:placeholder-shown)) {
	border-color: var(--e-global-color-primary, #FF6A00) !important;
	background: #FFF4E8 !important;
}

.paau-amount-custom.is-selected .paau-amount-custom-prefix,
.paau-amount-custom:has(input:not(:placeholder-shown)) .paau-amount-custom-prefix {
	color: var(--e-global-color-primary, #FF6A00) !important;
}

.paau-fixed-amount-badge {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 2px;
	padding: 18px;
	background: #FFF4E8 !important;
	border: 1.5px solid #f7dcb8 !important;
	border-radius: 14px;
	text-align: center;
}

.paau-fixed-amount-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #c77f2e !important;
}

.paau-fixed-amount-value {
	font-size: 34px;
	font-weight: 800;
	color: var(--e-global-color-primary, #FF6A00) !important;
	line-height: 1.15;
}

/* [hidden] beats the base display:flex !important (0.40.37) — direct
   report: "partial contribution seems glitched, open by default." Root
   cause, confirmed against the actual CSS, not guessed: the base rule
   below sets `display: flex !important`, unconditionally — the browser's
   own native `[hidden] { display: none; }` UA-stylesheet rule has neither
   this selector's specificity nor its !important, so it never stood a
   chance of actually hiding this panel. The panel rendered open on every
   page load regardless of the `hidden` attribute genuinely being present
   in the markup (render_fixed_price_panel()) — this was never a JS bug,
   donation-form.js's own `.prop('hidden', false)` toggle was doing the
   right thing the whole time, on an element that was already visible
   before it ever ran. */
/* Dashed pill, not a plain text link (0.40.37) — direct ask: "make the
   button to trigger it more obvious." Matches .paau-dedication-chip's
   own dashed-pill treatment exactly (same file) rather than inventing a
   new "secondary optional action" style — this form already has one
   established visual language for "here's another thing you can choose
   to do," so this reuses it instead of introducing a second, different
   one. A real <button> now, not an <a href="#"> — no actual navigation
   target, so a button is the more honest element for a JS-triggered
   reveal. .is-hidden (not jQuery's .hide()) is what actually hides this
   after it's clicked — see donation-form.js's own comment on why. */
.paau-show-partial {
	display: flex !important;
	width: 100% !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 4px 0 0;
	padding: 10px 16px;
	background: #fafafa !important;
	border: 1.5px dashed #d2d2d2 !important;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--e-global-color-primary, #FF6A00) !important;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.paau-show-partial:hover {
	border-color: var(--e-global-color-primary, #FF6A00) !important;
	background: #FFF9F2 !important;
}

.paau-show-partial.is-hidden {
	display: none !important;
}

.paau-partial-panel[hidden] {
	display: none !important;
}

.paau-partial-panel {
	margin-top: 12px;
	padding: 14px;
	background: #fafafa !important;
	border: 1px dashed #d9d9d9 !important;
	border-radius: 10px;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px;
}

.paau-partial-panel input[type="number"] {
	padding: 10px 12px;
	border: 1.5px solid #e2e2e2 !important;
	border-radius: 8px;
	font-size: 15px;
	color: var(--e-global-color-text, #231F20) !important;
	background: #ffffff !important;
}

.paau-partial-note {
	font-size: 12px;
	line-height: 1.4;
	color: #767676 !important;
	margin: 0;
}

.paau-dedication {
	position: relative;
}

.paau-dedication-chip {
	display: flex !important;
	width: 100% !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 8px;
	background: #fafafa !important;
	border: 1.5px dashed #d2d2d2 !important;
	border-radius: 12px;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 600;
	color: #6b6b6b !important;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.paau-dedication-chip svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.paau-dedication-chip:hover {
	border-color: var(--e-global-color-primary, #FF6A00) !important;
	color: var(--e-global-color-primary, #FF6A00) !important;
	background: #FFF9F2 !important;
}

.paau-dedication-input-wrap {
	display: none !important;
	width: 100% !important;
	align-items: center !important;
	gap: 8px;
	background: #ffffff !important;
	border: 1.5px solid var(--e-global-color-primary, #FF6A00) !important;
	border-radius: 12px;
	padding: 4px 6px 4px 16px;
	box-shadow: 0 2px 8px rgba(239, 124, 0, 0.1);
	box-sizing: border-box;
}

.paau-dedication.is-open .paau-dedication-chip {
	display: none !important;
}

.paau-dedication.is-open .paau-dedication-input-wrap {
	display: flex !important;
	animation: paau-dedication-pop 0.18s ease;
}

@keyframes paau-dedication-pop {
	from { opacity: 0; transform: scale(0.96); }
	to { opacity: 1; transform: scale(1); }
}

.paau-dedication-input-wrap svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--e-global-color-primary, #FF6A00) !important;
}

.paau-dedication-input {
	flex: 1 !important;
	min-width: 0;
	border: none !important;
	outline: none;
	padding: 8px 0;
	font-size: 14px;
	color: var(--e-global-color-text, #231F20) !important;
	background: transparent !important;
}

.paau-dedication-clear {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	background: #f5f5f5 !important;
	border: none !important;
	border-radius: 50%;
	font-size: 14px;
	line-height: 1;
	color: #6b6b6b !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.paau-dedication-clear:hover {
	background: #ececec !important;
}

.paau-frequency-select,
.paau-date-select {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #4a4a4a !important;
}

.paau-frequency-select select,
.paau-date-select select,
.paau-date-select input[type="date"] {
	padding: 10px 12px;
	border: 1.5px solid #e2e2e2 !important;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 400;
	color: var(--e-global-color-text, #231F20) !important;
	background: #ffffff !important;
}

.paau-donation-buttons {
	display: flex !important;
	align-items: stretch !important;
	gap: 10px;
}

/* width: auto (0.40.42) — cancels .paau-donation-submit's own base
   `width: 100%` (added same round, see that rule's own comment) within
   this specific flex row: flex-basis: auto (part of `flex: 1 1 auto`
   just below) falls back to reading the width property when one's set,
   and this row already has its own working sizing via flex-grow/shrink
   against the fixed-width Add to cart icon beside it — restoring width:
   auto here keeps that exact behaviour unambiguous rather than relying
   on flex-shrink math to reconcile a 100%-wide basis down to the right
   size, which would likely still work but isn't worth leaving implicit. */
.paau-donation-buttons .paau-donation-submit {
	flex: 1 1 auto !important;
	width: auto !important;
}

/* Compact icon-only "Add to cart" (0.40.16) — direct ask: "just a picture
   of the cart and a + button," so Donate now reads as the obvious primary
   action and this becomes a small secondary affordance beside it, not an
   equal-weight competing button. A fixed square rather than shrinking to
   fit the icon, so it lines up cleanly with Donate now's height. The
   label text stays in the markup (.paau-add-to-cart-label) rather than
   being removed — visually hidden here via the clip technique below, but
   still read by screen readers, and the button also carries a real
   aria-label (set server-side, render_standard_panel()) so the accessible
   name doesn't depend on the hidden span working correctly on its own.
   :not(.paau-donation-buy-now) — the buy_now variant (Donate Widget's
   "Checkout" hand-off) reuses this same class for its AJAX/styling hook
   but needs to stay a full text button; see its own ruleset below. */
.paau-donation-add-to-cart:not(.paau-donation-buy-now) {
	flex: 0 0 56px !important;
	width: 56px;
	height: 56px;
	box-sizing: border-box;
	position: relative;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0;
	line-height: 1;
	background: transparent !important;
	color: var(--e-global-color-primary, #FF6A00) !important;
	border: 1.5px solid var(--e-global-color-primary, #FF6A00) !important;
	border-radius: 999px;
	padding: 0 !important;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* buy_now keeps the original ghost text-button layout this whole class
   used to have, before the icon-only compacting above was scoped away
   from it — donate-widget.css's own overrides (background/color fill,
   width) build on top of this rather than replacing it. */
.paau-donation-add-to-cart.paau-donation-buy-now {
	flex: 0 0 30% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px;
	line-height: 1;
	background: transparent !important;
	color: var(--e-global-color-primary, #FF6A00) !important;
	border: 1.5px solid var(--e-global-color-primary, #FF6A00) !important;
	border-radius: 999px;
	padding: 15px 10px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.paau-donation-add-to-cart svg {
	display: block !important;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.paau-donation-add-to-cart:not(.paau-donation-buy-now) svg {
	width: 22px;
	height: 22px;
}

/* Visually hidden, not removed from the DOM — see the rule comment above
   .paau-donation-add-to-cart:not(.paau-donation-buy-now) for why. Standard
   clip-based hiding pattern (matches WordPress core's own
   .screen-reader-text technique) rather than display:none, which some
   screen readers skip entirely. */
.paau-add-to-cart-label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.paau-add-to-cart-plus {
	position: absolute;
	bottom: -3px;
	right: -3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--e-global-color-primary, #FF6A00) !important;
	color: #ffffff !important;
	font-size: 12px;
	font-weight: 800;
	line-height: 17px;
	text-align: center;
	border: 2px solid #ffffff !important;
	pointer-events: none;
}

.paau-donation-add-to-cart:hover:not(:disabled) {
	background: #FFF4E8 !important;
	border-color: #E85F00 !important;
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(239, 124, 0, 0.12);
}

.paau-donation-add-to-cart:hover:not(:disabled) svg {
	transform: scale(1.1);
}

.paau-donation-add-to-cart:active:not(:disabled) {
	transform: translateY(1px);
}

.paau-donation-add-to-cart:disabled {
	opacity: 0.55;
	cursor: default;
}

/* Success state after adding to cart (0.39.23) — direct ask: "after
   something is added to cart we need a state change on the add to cart
   button to indicate success." Fills the ghost button solid instead of
   introducing a new color for this — the exact same solid-orange/white
   treatment .paau-donation-buy-now already uses elsewhere on this widget
   (donate-widget.css), so "added" reads as this site's own established
   "confirmed" look rather than a generic green success color grafted on.
   The class itself is added/removed by donation-form.js's
   showAddToCartSuccess(), which also swaps the button's inner markup to
   a checkmark + "Added!" for the same duration — this rule only needs to
   handle the color/fill side of that swap. pointer-events: none for the
   duration — mostly to stop the hover fill/lift below from fighting this
   state's own colors if the pointer is still over the button when it
   flips, not a real double-submit guard (the button already re-enables
   via :disabled the normal way regardless of this class). */
.paau-donation-add-to-cart.is-added {
	background: var(--e-global-color-primary, #FF6A00) !important;
	border-color: var(--e-global-color-primary, #FF6A00) !important;
	color: #ffffff !important;
	pointer-events: none;
}

.paau-donation-add-to-cart:focus-visible,
.paau-donation-submit:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(239, 124, 0, 0.35);
}

/* height: 56px (0.40.16) — direct ask: both buttons in the row needed
   more height. Explicit height + border-box, rather than just adding
   padding, so this lines up exactly with the compact Add to cart
   button's own explicit 56px height (donation-form.css, same round) —
   two buttons in a flex row with matching heights read as one deliberate
   row, mismatched heights read as misaligned. */
/* width: 100% + min-height, not height (0.40.42) — direct report: "the
   Text is wider than the button itself on some mobile devices," on the
   Recurring panel's own "Continue to set up recurring giving" button.
   Root cause: unlike every other .paau-donation-submit usage (Standard's
   "Donate now", Fixed price's "Sponsor now"), which all sit inside
   .paau-donation-buttons and inherit that flex row's own `flex: 1 1
   auto` sizing, this one button — and .paau-partial-submit
   ("Contribute"), same latent gap, just never long enough in practice to
   show it — renders standalone, with nothing constraining its width at
   all. inline-flex with no width shrinks to fit its own content
   regardless of the parent container's width, so a long label on a
   narrow phone simply doesn't fit and overflows past the button's own
   rounded-pill edges. width: 100% here fixes both standalone cases at
   once, and is safe for the .paau-donation-buttons context too — a flex
   item's `flex-basis` (part of `flex: 1 1 auto`, set separately for that
   context) takes precedence over `width` per the flexbox spec, so this
   doesn't change that row's existing layout. min-height (not a fixed
   height) is the other half of the fix — even at full container width,
   an unusually long label could still need to wrap onto a second line on
   the narrowest phones, and a FIXED 56px height would have silently
   clipped that second line rather than growing to fit it. */
.paau-donation-submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	width: 100%;
	min-height: 56px;
	box-sizing: border-box;
	line-height: 1.3;
	white-space: normal;
	text-align: center;
	background: var(--e-global-color-primary, #FF6A00) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 999px;
	padding: 14px 26px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 14px rgba(239, 124, 0, 0.32);
}

.paau-donation-submit svg {
	display: block !important;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.paau-donation-submit:hover:not(:disabled) {
	background: #E85F00 !important;
	color: #ffffff !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 20px rgba(239, 124, 0, 0.42);
	transform: translateY(-1px);
}

.paau-donation-submit:hover:not(:disabled) svg {
	transform: translateX(3px);
}

.paau-donation-submit:active:not(:disabled) {
	transform: translateY(1px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 8px rgba(239, 124, 0, 0.3);
}

.paau-donation-submit:disabled {
	opacity: 0.55;
	cursor: default;
	box-shadow: none;
}

/* Reassurance line under the CTA row (0.40.16) — direct ask, one of a few
   copy options discussed; "secure checkout" only makes sense right next
   to the actual on-site checkout, so this is rendered only alongside a
   real "Donate now"/"Sponsor now" submit button (render_standard_panel()/
   render_fixed_price_panel() gate it on that), not in flows that hand the
   donor off to Pennygive or omit the submit button entirely (Quick
   Donate, the Donate Widget's basket-first panel). */
.paau-donation-reassurance {
	margin: 6px 0 0;
	font-size: 11px;
	font-weight: 500;
	color: #9a9a9a !important;
	text-align: center;
}

.paau-partial-submit {
	background: var(--e-global-color-text, #231F20) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.paau-partial-submit:hover:not(:disabled) {
	background: #3a3536 !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 16px rgba(35, 31, 32, 0.28);
}

.paau-donation-error {
	margin: 0;
	padding: 10px 12px;
	background: #fdecea !important;
	border-left: 3px solid #c0392b !important;
	border-radius: 6px;
	color: #a3271c !important;
	font-size: 13px;
	font-weight: 500;
}

/* Same left-border callout shape as .paau-donation-error above, in the
   brand orange instead of red — informational, not an error state, but
   still worth a visually distinct callout rather than blending in as
   regular body copy. Margin-bottom, not the error's plain margin: 0 —
   this always sits above other form content (amount grid, frequency
   picker, etc.), where the error only ever appears alone after a failed
   submit. */
.paau-appeal-closed-notice {
	margin: 0 0 16px;
	padding: 10px 12px;
	background: #FFF4E8 !important;
	border-left: 3px solid var(--e-global-color-primary, #FF6A00) !important;
	border-radius: 6px;
	color: var(--e-global-color-text, #231F20) !important;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

.paau-appeal-banner {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 10px;
	margin-bottom: 16px;
}

.paau-fundraiser-banner img {
	width: 100%;
	border-radius: 10px;
	margin-bottom: 16px;
}

/* #FFF4E8/orange, not the old #FCDC2A yellow (0.40.33) — direct
   correction: "the chip shouldn't be yellow." Matches the Zakat-eligible
   treatment already used everywhere else in this plugin
   (.paau-browse-card-badge, .paau-donation-type-card.is-selected) — this
   was the one place that never got harmonised with that. Only ever used
   for .paau-badge-zakat (confirmed — .paau-badge has no other call site
   in this codebase), so recoloring it here can't affect anything else. */
.paau-badge {
	display: inline-block !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 5px 12px;
	border-radius: 999px;
	background: #FFF4E8 !important;
	color: var(--e-global-color-primary, #FF6A00) !important;
	margin: 0 6px 14px 0;
}

.paau-appeal-progress {
	background: #f0f0f0 !important;
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
	margin-bottom: 6px;
}

.paau-appeal-progress-bar {
	background: var(--e-global-color-primary, #FF6A00) !important;
	height: 100%;
	border-radius: 999px;
	transition: width 0.3s ease;
}

.paau-appeal-progress-label {
	font-size: 13px;
	font-weight: 600;
	color: #6b6b6b !important;
	margin: 0 0 18px;
}

.paau-fundraiser-title,
.paau-fundraiser-content {
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-fundraiser-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 8px;
}

.paau-fundraiser-content {
	font-size: 15px;
	line-height: 1.5;
	color: #4a4a4a !important;
	margin-bottom: 16px;
}

.paau-fundraiser-submission-form {
	padding: 24px;
	background: #ffffff !important;
	border: 1px solid #ececec !important;
	border-radius: 18px;
	box-shadow: 0 2px 4px rgba(35, 31, 32, 0.04), 0 14px 34px rgba(35, 31, 32, 0.09);
}

.paau-fundraiser-submission-form label {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #4a4a4a !important;
	margin-bottom: 14px;
}

.paau-fundraiser-submission-form input,
.paau-fundraiser-submission-form textarea,
.paau-fundraiser-submission-form select {
	padding: 11px 12px;
	border: 1.5px solid #e2e2e2 !important;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 400;
	color: var(--e-global-color-text, #231F20) !important;
	background: #ffffff !important;
	box-sizing: border-box;
	font-family: inherit;
}

.paau-fundraiser-submission-form input:focus,
.paau-fundraiser-submission-form textarea:focus,
.paau-fundraiser-submission-form select:focus,
.paau-partial-panel input:focus {
	outline: none;
	border-color: var(--e-global-color-primary, #FF6A00) !important;
}

/* The custom-amount input itself is borderless (see
   .paau-amount-custom input[type="number"] above) — its boundary is
   .paau-amount-custom's own bottom border, so focus needs to show there
   instead of on the input, which has nothing to visibly outline. */
.paau-amount-custom input:focus {
	outline: none;
}

.paau-amount-custom:has(input:focus) {
	border-bottom-color: var(--e-global-color-primary, #FF6A00) !important;
}

.paau-fundraiser-submission-form button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	line-height: 1;
	background: var(--e-global-color-primary, #FF6A00) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 999px;
	padding: 15px 22px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 14px rgba(239, 124, 0, 0.32);
}

.paau-fundraiser-submission-form button svg {
	display: block !important;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.paau-fundraiser-submission-form button:hover {
	background: #E85F00 !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 20px rgba(239, 124, 0, 0.42);
	transform: translateY(-1px);
}

.paau-fundraiser-submission-form button:hover svg {
	transform: translateX(3px);
}

.paau-fundraiser-submission-form button:active {
	transform: translateY(1px);
}

.paau-fundraiser-submission-form button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(239, 124, 0, 0.35);
}

.paau-fundraiser-account-note {
	font-size: 12px;
	color: #767676 !important;
	margin: -6px 0 14px;
}

.paau-fundraiser-success {
	padding: 18px;
	background: #FFF4E8 !important;
	border: 1px solid #FCDC2A !important;
	border-radius: 10px;
	color: var(--e-global-color-text, #231F20) !important;
	font-size: 14px;
	font-weight: 500;
}

/* -- Flyout cart drawer -------------------------------------------------- */

.paau-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	font-family: var(--e-global-typography-text-font-family, inherit) !important;
}

.paau-cart-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(35, 31, 32, 0.45) !important;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.paau-cart-drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(380px, 100%);
	background: #ffffff !important;
	box-shadow: -8px 0 24px rgba(35, 31, 32, 0.15);
	display: flex !important;
	flex-direction: column !important;
	transform: translateX(100%);
	transition: transform 0.22s ease;
}

.paau-cart-drawer.is-open .paau-cart-drawer-backdrop {
	opacity: 1;
}

.paau-cart-drawer.is-open .paau-cart-drawer-panel {
	transform: translateX(0);
}

.paau-cart-drawer-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 20px 24px;
	border-bottom: 1px solid #ececec !important;
}

.paau-cart-drawer-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-cart-drawer-close {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px;
	height: 32px;
	background: #f5f5f5 !important;
	border: none !important;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	color: #6b6b6b !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.paau-cart-drawer-close:hover {
	background: #ececec !important;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-cart-drawer-items {
	flex: 1 1 auto !important;
	overflow-y: auto;
	padding: 12px 24px;
}

.paau-cart-drawer-empty {
	color: #767676 !important;
	font-size: 14px;
	text-align: center;
	margin-top: 40px;
}

.paau-cart-drawer-item {
	display: flex !important;
	align-items: center !important;
	gap: 10px;
	padding: 14px 0;
	border-bottom: 1px solid #f0f0f0 !important;
}

.paau-cart-drawer-item-label {
	flex: 1 1 auto !important;
	font-size: 14px;
	font-weight: 600;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-cart-drawer-item-amount {
	font-size: 14px;
	font-weight: 600;
	color: #4a4a4a !important;
}

.paau-cart-drawer-remove {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	background: transparent !important;
	border: none !important;
	border-radius: 50%;
	font-size: 15px;
	line-height: 1;
	color: #a3271c !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.paau-cart-drawer-remove:hover {
	background: #fdecea !important;
}

.paau-cart-drawer-footer {
	padding: 20px 24px 24px;
	border-top: 1px solid #ececec !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px;
}

.paau-cart-drawer-subtotal {
	font-size: 15px;
	font-weight: 700;
	color: var(--e-global-color-text, #231F20) !important;
	margin-bottom: 4px;
}

/* display: flex, not block (0.40.24) — direct report: "the text is
   floating out of the button." Root cause, confirmed against the actual
   CSS: .paau-donation-submit centers its label + arrow icon via
   `display: inline-flex; align-items: center; justify-content: center;
   gap: 8px`. Overriding display to `block` here didn't just change how
   the button sizes — it dropped the flex context entirely, so the text
   and the icon (itself `display: block` per .paau-donation-submit svg)
   fell back to normal block/inline flow instead of being centered
   together, which is what read as the text "floating" loose inside the
   button rather than sitting centered with its icon. `flex` (not
   `inline-flex`) is enough on its own to also get the full-width fill
   this override originally wanted — .paau-cart-drawer-footer is
   flex-direction: column, and a flex child stretches to fill that
   column's width by default (align-self: stretch), no separate width
   rule needed. */
.paau-cart-drawer-checkout {
	display: flex !important;
	text-decoration: none;
}

.paau-cart-drawer-continue {
	background: none !important;
	border: none !important;
	font-size: 13px;
	font-weight: 600;
	color: #767676 !important;
	cursor: pointer;
	padding: 6px;
}

/* -- Cart drawer upsells (0.40.20) — direct ask: up to 2 admin-set cards
   at the bottom of the drawer. Sits below .paau-cart-drawer-footer, inside
   the same scrollable panel, with its own top border so it reads as a
   distinct "one more thing" section rather than part of the cart list
   itself. Static markup, server-rendered once from admin config — see
   render_cart_drawer()'s own comment for why this never needs re-rendering
   the way .paau-cart-drawer-items does. */
.paau-cart-drawer-upsells {
	padding: 14px 20px 20px;
	border-top: 1px solid #ececec !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 8px;
}

.paau-cart-drawer-upsells-heading {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 700;
	color: #9a9a9a !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.paau-cart-upsell {
	display: flex !important;
	align-items: center !important;
	gap: 10px;
	width: 100%;
	background: #fafafa !important;
	border: 1.5px solid #ececec !important;
	border-radius: 12px;
	padding: 8px 12px;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.paau-cart-upsell:hover:not(:disabled) {
	border-color: var(--e-global-color-primary, #FF6A00) !important;
	background: #FFF9F2 !important;
}

.paau-cart-upsell:disabled {
	opacity: 0.7;
	cursor: default;
}

/* Full self-contained styling here, not just size overrides — .paau-
   program-icon's own display/background/border-radius/img rules
   (donate-widget.css) are all scoped under a .paau-donate-widget ancestor
   that doesn't exist inside this plugin's own cart drawer, so none of
   them would otherwise apply to this reused span at all. */
.paau-cart-upsell-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	flex-shrink: 0;
	overflow: hidden;
	background: #FFF4E8 !important;
	border-radius: 8px !important;
}

.paau-cart-upsell-icon img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.paau-cart-upsell-icon svg {
	width: 55% !important;
	height: 55% !important;
	color: var(--e-global-color-primary, #FF6A00) !important;
}

.paau-cart-upsell-body {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0;
	flex: 1 1 auto !important;
}

.paau-cart-upsell-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--e-global-color-text, #231F20) !important;
	line-height: 1.3;
}

.paau-cart-upsell-appeal {
	font-size: 11px;
	font-weight: 500;
	color: #9a9a9a !important;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.paau-cart-upsell-amount {
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 800;
	color: var(--e-global-color-primary, #FF6A00) !important;
}

/* Success state (0.40.20) — same solid-fill "confirmed" treatment as
   .paau-donation-add-to-cart.is-added, so "added" reads consistently
   across the whole plugin rather than inventing a new color here. Unlike
   that button, the card's own title/appeal/amount text stays exactly as
   it was — only the card chrome changes — since Fouad's own upsell copy
   shouldn't be swapped out for a generic "Added!" label the way a plain
   icon button's contents can be. */
.paau-cart-upsell.is-added {
	background: var(--e-global-color-primary, #FF6A00) !important;
	border-color: var(--e-global-color-primary, #FF6A00) !important;
}

.paau-cart-upsell.is-added .paau-cart-upsell-title,
.paau-cart-upsell.is-added .paau-cart-upsell-amount {
	color: #ffffff !important;
}

.paau-cart-upsell.is-added .paau-cart-upsell-appeal {
	color: rgba(255, 255, 255, 0.75) !important;
}

/* -- Per-amount impact labels --------------------------------------------- */

.paau-amount-value {
	display: block !important;
	font-size: 22px;
	font-weight: 800;
}

.paau-amount-label {
	display: block !important;
	font-size: 11px;
	font-weight: 500;
	color: #767676 !important;
	line-height: 1.3;
}

.paau-amount-option:has(input:checked) .paau-amount-label {
	color: var(--e-global-color-primary, #FF6A00) !important;
}
.paau-amount-option.is-selected .paau-amount-label {
	color: var(--e-global-color-primary, #FF6A00) !important;
}

/* -- Zakat / Sadaqah choice ------------------------------------------------ */

.paau-donation-type-field {
	display: flex !important;
	gap: 10px;
	margin: 6px 0 10px;
}

.paau-donation-type-card {
	position: relative;
	flex: 1 !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	text-align: left;
	gap: 8px;
	padding: 7px 12px;
	border: 1.5px solid #e2e2e2 !important;
	border-radius: 12px;
	cursor: pointer;
	background: #ffffff !important;
	transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.paau-donation-type-card:hover {
	border-color: #f0b673 !important;
	transform: translateY(-1px);
}

.paau-donation-type-card input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.paau-donation-type-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #f2f2f2 !important;
	color: #9a9a9a !important;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.paau-donation-type-icon svg {
	width: 12px;
	height: 12px;
}

.paau-donation-type-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--e-global-color-text, #231F20) !important;
	transition: color 0.18s ease;
}

.paau-donation-type-check {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--e-global-color-primary, #FF6A00) !important;
	color: #ffffff !important;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.paau-donation-type-card.is-selected {
	border-color: var(--e-global-color-primary, #FF6A00) !important;
	background: #FFF4E8 !important;
	box-shadow: 0 3px 10px rgba(239, 124, 0, 0.16);
}

.paau-donation-type-card.is-selected .paau-donation-type-icon {
	background: var(--e-global-color-primary, #FF6A00) !important;
	color: #ffffff !important;
}

.paau-donation-type-card.is-selected .paau-donation-type-title {
	color: var(--e-global-color-primary, #FF6A00) !important;
}

.paau-donation-type-card.is-selected .paau-donation-type-check {
	opacity: 1;
	transform: scale(1);
}

/* -- Fixed price quantity stepper ------------------------------------------ */

.paau-quantity-selector {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin: 4px 0;
}

.paau-quantity-selector label {
	font-size: 14px;
	font-weight: 600;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-quantity-stepper {
	display: flex !important;
	align-items: center !important;
	border: 1.5px solid #e2e2e2 !important;
	border-radius: 8px;
	overflow: hidden;
}

.paau-quantity-stepper button {
	background: #f5f5f5 !important;
	border: none !important;
	width: 34px;
	height: 34px;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-quantity-stepper button:hover {
	background: var(--e-global-color-primary, #FF6A00) !important;
	color: #ffffff !important;
}

.paau-quantity-stepper input {
	width: 44px;
	height: 34px;
	border: none !important;
	border-left: 1.5px solid #e2e2e2 !important;
	border-right: 1.5px solid #e2e2e2 !important;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--e-global-color-text, #231F20) !important;
	background: #ffffff !important;
	-moz-appearance: textfield;
}

.paau-quantity-stepper input::-webkit-outer-spin-button,
.paau-quantity-stepper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* -- Quick Donate — compact hero widget ([paau_quick_donate], 0.38.0/0.38.1)
   Reuses every component class above (amount pills, submit button) via
   .paau-donation-widget/.paau-donation-form — these rules only retune
   layout for a hero placement. The Zakat/Sadaqah picker, "Give on behalf
   of someone" field, and "Add to cart" button are no longer part of this
   markup at all as of 0.38.1 (see class-donation-engine.php's
   render_standard_panel() $options — suppress_donation_type/
   suppress_on_behalf/suppress_add_to_cart) — nothing to hide here, they
   simply aren't rendered.

   Two layouts, chosen via the shortcode's layout="" attribute (default
   "vertical"): .paau-layout-vertical is a stacked card, for a narrower
   hero panel or mobile; .paau-layout-horizontal is a single inline row,
   for a slim full-width bar under/across a hero image. Both are the exact
   same markup — only these rules differ. */

.paau-quick-donate-widget {
	max-width: 480px;
}

.paau-quick-donate-widget .paau-donation-amounts {
	grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)) !important;
}

.paau-quick-donate-widget .paau-amount-custom {
	grid-column: 1 / -1;
}

.paau-quick-donate-widget .paau-donation-buttons {
	justify-content: stretch !important;
}

.paau-quick-donate-widget .paau-donation-submit {
	width: 100% !important;
	justify-content: center !important;
}

/* -- Horizontal layout: everything in one inline row on wide screens ----- */

.paau-quick-donate-widget.paau-layout-horizontal {
	max-width: 100%;
}

.paau-quick-donate-widget.paau-layout-horizontal .paau-donation-form {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 12px;
}

.paau-quick-donate-widget.paau-layout-horizontal .paau-donation-amounts {
	display: flex !important;
	flex: 1 1 auto !important;
	flex-wrap: wrap !important;
	gap: 8px;
}

.paau-quick-donate-widget.paau-layout-horizontal .paau-amount-option {
	flex: 0 0 auto !important;
	padding: 10px 18px;
}

.paau-quick-donate-widget.paau-layout-horizontal .paau-amount-custom {
	grid-column: auto;
	flex: 0 0 auto !important;
}

.paau-quick-donate-widget.paau-layout-horizontal .paau-donation-buttons {
	flex: 0 0 auto !important;
	justify-content: flex-start !important;
}

.paau-quick-donate-widget.paau-layout-horizontal .paau-donation-submit {
	width: auto !important;
	white-space: nowrap;
}

/* Below ~640px a single inline row stops being readable regardless of how
   much hero width is available — falls back to the same stacked layout as
   .paau-layout-vertical rather than staying cramped. */
@media (max-width: 640px) {
	.paau-quick-donate-widget.paau-layout-horizontal .paau-donation-form {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.paau-quick-donate-widget.paau-layout-horizontal .paau-donation-submit {
		width: 100% !important;
	}
}