/* [paau_donate_widget] — the /donate page shop layout (0.39.21).

   Mirrors donation-form.css's brand-token conventions rather than the
   mockup's own --ink/--accent custom-property system: Elementor Global
   Colors (--e-global-color-primary / --e-global-color-text) with the PAAU
   brand hex as fallback, and !important on every color/background/
   border/display/flex declaration — this site's active theme (Hello
   Elementor) overrides those properties otherwise. Reuses donation-form.
   css's actual button/card/drawer-item rules by classname wherever this
   widget wraps that file's real markup (.paau-donation-form,
   .paau-donation-add-to-cart, .paau-amount-option, etc.) instead of
   restyling them here — this file only owns what's new: the accordion,
   cause cards, the configurator, the basket panel, and the mobile step
   flow.

   --e-global-color-primary, not -accent (0.39.18 correction, plugin-wide)
   — see donation-form.css's own correction note for the full reasoning:
   this was pointed at the wrong Elementor global-color slot since the
   very first round, silently rendering its own #EF7C00 fallback the
   entire time. Same fix applied here as everywhere else in the plugin.

   Typography deliberately does NOT use Elementor's Global Fonts custom
   properties (--e-global-typography-*-font-family) the way color does —
   confirmed in 0.39.2 that PAAU's headings are set via Elementor's Site
   Settings → Typography panel instead, which styles real heading tags
   (h1–h6) directly rather than writing a reusable CSS variable. Real
   heading tags in this file (.paau-donate-config-title's <h3>, the
   basket's <h2>) deliberately leave font-family unset so that CSS
   cascades through normally — see the comment on each. Non-heading text
   just inherits the widget root's own font-family below.

   Desktop layout is a single shared box, not three separate cards — see
   the comment on .paau-donate-grid below for why and how (0.39.2, direct
   revision after Fouad's first look at staging: "I wanted this all to
   sit in one box. The visual hierarchy needs to prioritise the centre
   panel."). The causes-column cramped-text question from the original
   mockup review is still open, not resolved by this pass — the column
   is narrower now than before, if anything, since width shifted toward
   the centre. */

/* width/max-width/margin promoted to !important (0.39.6) — this was the
   one rule in this whole file without it, an oversight against the file's
   own stated convention (see the top comment). Root-caused from a
   staging screenshot showing cause cards rendering roughly card-per-half-
   column-width, which only adds up if this element was rendering
   considerably wider than its intended 1200px cap despite the cap already
   being in the CSS — i.e. something with equal-or-higher priority was
   winning the cascade on this specific un-!important'd rule. Not
   confirmed against a live computed-style inspection (worth doing if
   cards still look oversized after this ships), but consistent with this
   exact site's documented pattern of Hello Elementor's own styles
   winning over anything this plugin doesn't explicitly protect. */
.paau-donate-widget {
	width: 100% !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
	font-family: var(--e-global-typography-text-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Calibri, Roboto, sans-serif) !important;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-donate-widget *,
.paau-donate-widget *::before,
.paau-donate-widget *::after {
	box-sizing: border-box;
}

/* :not() exclusions (0.39.12) — real root cause of "text from different
   boxes is overlapping", traced from the actual markup/CSS, not guessed.
   `.paau-donate-widget button` is a class+element selector — specificity
   (0,1,1) — which is HIGHER than a plain single-class selector like
   `.paau-donate-cause-card` (0,1,0). So even though the cause card sets
   its own background/border with !important, this reset's !important
   background:none/border:none WON — !important ties break on specificity,
   not source order — silently stripping the card's white background,
   grey border, and 14px padding. With no visible box or padding left,
   adjacent cards' title/description text sat flush against each other
   with nothing to show where one card ends and the next begins, reading
   as overlap. `.paau-donation-add-to-cart` has the exact same exposure
   (its own !important border, same single-class specificity) so it's
   excluded here too, even though it wasn't the reported symptom this
   round — same mechanism, same file, cheap to close now rather than
   waiting for it to surface as its own bug report. */
.paau-donate-widget button:not(.paau-donate-cause-card):not(.paau-donation-add-to-cart) {
	font-family: inherit;
	background: none !important;
	border: none !important;
	padding: 0;
	margin: 0;
	text-align: left;
}

/* -- Desktop / mobile visibility split ------------------------------------ */

/* .paau-donate-widget prefix (0.39.16) — this is the master desktop/mobile
   toggle for the entire widget, a single-class !important rule of exactly
   the kind that's repeatedly lost specificity fights on this site this
   session (button chrome, causes scroll, card/icon shape). If this one
   loses, the ENTIRE mobile layout — including a second full copy of the
   appeal title/description via render_config_head(), see the [hidden]
   fix above — renders visible at once, stacked on top of the real
   desktop layout, which is what actually produced the overlapping text.
   This is the most consequential rule in the file to leave unprotected,
   so it gets the same two-class specificity bump as everything else,
   both directions (desktop hidden on mobile too, for the same reason,
   even though only the mobile-leaking-into-desktop direction was
   reported). */
.paau-donate-widget .paau-donate-mobile {
	display: none !important;
}

@media (max-width: 640px) {
	.paau-donate-widget .paau-donate-desktop {
		display: none !important;
	}

	.paau-donate-widget .paau-donate-mobile {
		display: block !important;
	}
}

/* ============ DESKTOP / TABLET ============ */

/* One shared box (0.39.2 — was three separate floating cards; Fouad's
   direct call after the first staging look) rather than a grid of
   independent panels. The columns below carry no card chrome of their
   own any more — background/border/radius/shadow all live here, once,
   with a divider border between columns doing the job three separate
   card edges used to. Widths shifted from the mockup's near-even
   0.9:1.4:1 split to a deliberately more lopsided 0.85:1.55:0.9 so the
   centre configurator — the one thing every donor here actually has to
   act on — reads as the clear visual lead rather than one of three
   equal panels. */
/* No overflow: hidden here, deliberately — it's the standard trick to
   clip square child corners to a rounded parent, but it also breaks
   .paau-donate-col-basket's position: sticky below (an ancestor with
   any overflow other than visible becomes the nearest "scrolling
   container" sticky resolves against, which stops it tracking the
   page scroll at all). Not needed anyway: causes/basket have no
   background of their own to clip (the white shows straight through
   from here), and the one column that does — config — gets its own
   explicit corner-rounding directly, only where it actually sits at an
   outer edge (the stacked mobile layout below). */
/* height: 75vh + align-items: stretch (0.39.20) — direct ask: "why don't
   we fix the height of this widget to something like 75vh." Previously
   this grid had no height of its own — align-items: start let each
   column size to its own content and the whole box just grew with
   whatever the tallest column needed, relying on .paau-donate-causes's
   own internal 640px cap to keep any ONE column bounded. That stopped
   being enough once real content pushed multiple columns tall at once,
   and on some page layouts the widget could grow taller than whatever
   Elementor container it sits inside, clipped from OUTSIDE this plugin's
   own CSS with no way to scroll back to the clipped part — see the
   .paau-donate-col-causes/-config/-basket comment just below for how
   that's actually fixed, this rule just sets the shared budget all three
   columns work within. Bounding the whole widget to a fixed viewport-
   relative height sidesteps that regardless of what the true cause of
   any particular clipping was, rather than continuing to chase it.
   align-items switched from start to stretch so every column actually
   fills this fixed row height (needed for the per-column internal
   scrolling below to have a bounded box to scroll within at all — auto-
   height columns have nothing to overflow against). Reset back to
   auto-height/natural stacking at the ≤900px breakpoint below, where the
   grid collapses to one stacked column anyway and a per-column fixed
   height wouldn't do anything useful — the page's own scroll still
   handles that view, unchanged from before this round. */
.paau-donate-grid {
	display: grid !important;
	grid-template-columns: 0.85fr 1.55fr 0.9fr;
	background: #ffffff !important;
	border: 1px solid #ececec !important;
	border-radius: 20px;
	box-shadow: 0 2px 4px rgba(35, 31, 32, 0.04), 0 14px 34px rgba(35, 31, 32, 0.09);
	align-items: stretch !important;
	height: 75vh !important;
}

/* min-width: 0 (0.39.11) — the actual mechanism behind "still doing that
   funny business": a fr-sized grid track defaults to min-width: auto, a
   floor at its content's min-content size, not 0. Collapsed, the causes
   column's content (two short accordion labels) has a small min-content
   width, so the grid rendered at its intended 0.85:1.55:0.9 split. Opened
   against real Appeals, "All Appeals" content (the 2-column card grid,
   the search input) has a bigger min-content width than 0.85fr of 1200px
   actually allocates — so the causes TRACK was forced wider than its
   fr-share to fit that content, which is what shrank the configurator and
   basket columns beside it (visibly smaller amount buttons and Other
   field between the two screenshots — same fr split, less absolute room,
   because causes had already taken more than its share). min-width: 0
   removes that auto floor on all three tracks, so each stays at its
   intended fr-share regardless of content — content that doesn't fit
   wraps or scrolls internally instead (the causes column already scrolls
   past 640px, see .paau-donate-causes above; the two-column card grid
   wraps to narrower cards rather than forcing the column wider). */
/* min-height: 0 + overflow-y: auto added (0.39.20), same reasoning as
   min-width: 0 just above but for the other axis: now that .paau-donate-
   grid has a fixed height (75vh) and align-items: stretch, these three
   columns are grid items being stretched to fill that fixed row — but a
   grid item's automatic minimum size still defaults to its CONTENT's
   height unless min-height: 0 removes that floor, same as fr tracks
   defaulting to min-width: auto on the other axis. Without it, a column
   with enough content (a long Program list, a full basket) would still
   push the whole grid taller than 75vh rather than actually respecting
   it. overflow-y: auto is what turns that bounded height into an
   independent internal scrollbar per column, once it can't grow past
   its own share any more — causes, config, and basket now all scroll on
   their own, rather than only causes having its own separate cap the
   way .paau-donate-causes did before this round (that inner cap is
   removed just below — this column-level one replaces it). */
.paau-donate-col-causes,
.paau-donate-col-config,
.paau-donate-col-basket {
	padding: 28px;
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
}

/* Tighter than the shared 28px (0.39.17) — direct ask: "this panel is
   still clunky, perhaps change the padding so we have more room to play
   with." The causes column is the one doing the most work in the tightest
   space (a 2-column card grid), so it's the one that benefits most from
   giving a few pixels back to the cards rather than the column's own
   outer margin. */
.paau-donate-col-causes {
	padding: 18px;
	border-right: 1px solid #ececec !important;
}

/* The configurator's own accent bar — background swapped to white
   (0.40.36, direct ask: "middle section have a white background, and
   the basket has the UI Cream background" — reversed from before, where
   this column carried the cream tint and the basket was plain white).
   Not hardcoded here — simply no background override at all now, same
   as .paau-donate-col-causes just above, so it inherits .paau-donate-
   grid's own white (below) exactly like that column already does,
   rather than two separate rules asserting the same color. The orange
   top border stays; that's the "this is the main panel" cue, independent
   of which column is tinted. */
.paau-donate-col-config {
	border-top: 4px solid var(--e-global-color-primary, #FF6A00) !important;
	padding: 32px;
}

/* position: sticky removed (0.39.20) — it kept this column pinned to the
   top of the viewport as the PAGE scrolled past an auto-height widget.
   Now that the widget's own height is fixed (75vh, see .paau-donate-grid
   above) and this column scrolls internally within its own fixed slot
   instead, there's no page-scroll-past-the-widget case left for sticky
   to do anything useful in — the column's top edge doesn't move once the
   widget itself is on screen.
   background: #FEF6F0 (0.40.36) — the "UI Cream" tint, confirmed against
   the brand design system doc, swapped here from the configurator column
   per the direct ask above. */
.paau-donate-col-basket {
	background: #FEF6F0 !important;
	border-left: 1px solid #ececec !important;
}

@media (max-width: 900px) {
	/* Stacked single-column view — the 75vh/per-column-scroll model above
	   is deliberately reset back to the pre-0.39.20 auto-height/natural-
	   page-scroll behaviour here. A fixed height per "column" doesn't
	   mean anything useful once they're stacked vertically instead of
	   side by side (three independent 75vh boxes glued together would
	   just make the widget ~3x taller, the opposite of the ask), and this
	   breakpoint was never the one the "needs to be scrollable" complaint
	   was actually about — that was the true mobile view below 640px,
	   which gets its own fix further down. */
	.paau-donate-grid {
		grid-template-columns: 1fr;
		height: auto !important;
		align-items: start !important;
	}

	.paau-donate-col-causes,
	.paau-donate-col-config,
	.paau-donate-col-basket {
		min-height: auto;
		overflow-y: visible;
	}

	/* Visual stacked order is basket (order: -1, top) → causes → config
	   (last) — divider borders and config's own corner-rounding follow
	   that order, not DOM order. */

	.paau-donate-col-causes {
		border-right: none !important;
		border-bottom: 1px solid #ececec !important;
	}

	.paau-donate-col-config {
		border-radius: 0 0 19px 19px;
	}

	.paau-donate-col-basket {
		order: -1;
		border-left: none !important;
		border-bottom: 1px solid #ececec !important;
		position: static;
	}
}

/* -- Accordion (causes pane) ----------------------------------------------- */

/* No per-item card chrome any more (0.39.2) — .paau-donate-col-causes
   carries the shared box's background now, so a divider line between
   the two sections does the job the individual card borders used to.
   max-height + internal scroll (0.39.9) — direct correction: "the All
   Appeals accordion is still stretching the section when it opens." This
   grid's three columns are one shared box with align-items: start, sized
   to their tallest column — with no cap, opening "All Appeals" against a
   growing catalogue of Appeals (5 already, more coming per the "assign
   Program terms" open item) stretched the whole row to match, leaving the
   configurator and basket columns sitting in a mostly-empty tall box
   rather than the compact, roughly-equal-height "one box" from the
   earlier "I wanted this all to sit in one box" round. Scrolls internally
   instead — 640px is a rough match for the configurator column's own
   natural height (icon + title + amounts + Other field + toggle + button),
   not an exact measurement, so it may want a real tweak once seen live
   with actual content. !important added to both properties (0.39.12) —
   direct correction: "the appeals box needs to be scrollable," meaning it
   still wasn't, and neither had !important — same protection every other
   shape/layout property on this page has needed against this site. */
/* max-height/overflow-y removed from here (0.39.20) — this element used
   to be its own scroll boundary (640px, since 0.39.9/0.39.12). Now that
   the ANCESTOR each context actually needs to bound is the one doing the
   scrolling instead — .paau-donate-col-causes on desktop (part of the
   75vh three-column model, see .paau-donate-grid above) and
   .paau-donate-mobile-screen on mobile (below) — this element just needs
   to be a plain flex column of whatever height its content wants; it no
   longer needs, or should have, a scroll boundary of its own nested
   inside those. */
.paau-donate-causes {
	display: flex !important;
	flex-direction: column !important;
}

.paau-donate-accordion-item {
	overflow: hidden;
}

.paau-donate-accordion-item + .paau-donate-accordion-item {
	border-top: 1px solid #ececec !important;
	margin-top: 8px;
	padding-top: 8px;
}

/* Search-result category hiding (0.39.20) — a Program accordion-item with
   zero matching cards gets this class added by the search handler in
   donate-widget.js, so the list of category names itself stays short
   while searching instead of showing a pile of headings with nothing
   under them. Same !important-protected display:none pattern already
   established for hiding individual cards (.paau-donate-cause-card.is-
   hidden above). */
.paau-donate-accordion-item.is-hidden {
	display: none !important;
}

/* Explicit chrome-stripping added directly here in 0.39.13, rather than
   relying only on the generic .paau-donate-widget button reset further up
   this file — "All Appeals" was showing a dark oval ring/border around
   the whole button once opened, which that reset's border: none !important
   should already prevent. If something on this site is winning against
   that reset for this specific element (a theme default for buttons in
   general, applied with equal-or-higher weight), restating border/
   background/border-radius/outline directly on the two-class selector
   below is the most specific this plugin can reasonably get without
   knowing that rule's exact selector. */
.paau-donate-widget .paau-donate-accordion-header {
	display: flex !important;
	align-items: center !important;
	gap: 8px;
	width: 100%;
	padding: 16px 18px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	color: var(--e-global-color-text, #231F20) !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	outline: none;
}

/* Active/open state (0.39.21) — direct ask: "put a beige background
   (#FFFBF5) and orange text for the active state of the open accordion."
   An explicit hex Fouad gave directly for this specific purpose, not tied
   to whichever column happens to carry a tint — this used to also match
   the centre configurator column's own background, but that column is
   white now (0.40.36's column-tint swap), so this and that are simply two
   independent uses of the same value again, not "matching" each other
   the way this comment used to claim; left as its own explicitly-
   requested color regardless, since changing it wasn't part of that ask.
   Targets the header specifically (not the whole .paau-donate-accordion-
   item), since the beige is meant to mark the clickable heading row, not
   tint the cards in the body underneath it. color here also recolours the
   chevron icon for free — it's drawn with stroke="currentColor" (see
   icon_chevron_down() in class-donate-widget.php), no separate rule
   needed. The count bubble keeps its own neutral grey pill styling
   deliberately — changing that wasn't part of the ask, and grey still
   reads fine against beige. */
.paau-donate-widget .paau-donate-accordion-item.is-open > .paau-donate-accordion-header {
	background: #FFFBF5 !important;
	color: var(--e-global-color-primary, #FF6A00) !important;
}

.paau-donate-accordion-label {
	flex: 1 1 auto !important;
}

.paau-donate-accordion-count {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	background: #f5f5f5 !important;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: #6b6b6b !important;
}

.paau-donate-chev {
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.paau-donate-accordion-item.is-open .paau-donate-chev {
	transform: rotate(180deg);
}

.paau-donate-accordion-body {
	padding: 8px 16px 16px;
}

.paau-donate-empty-note {
	margin: 4px 2px 8px;
	font-size: 13px;
	color: #767676 !important;
}

/* Sits as the pane's first child now (0.40.36 — moved above Featured
   Appeals, see render_causes_pane()'s own comment), not after an
   accordion item any more — the adjacent-sibling divider rule this used
   to need (border-top separating it from Featured above) no longer
   applies with nothing above it to separate from. Base .paau-donate-
   search margin below already gives it sensible top spacing as the
   pane's own first element. */
.paau-donate-search {
	display: flex !important;
	align-items: center !important;
	gap: 8px;
	margin: 4px 2px 14px;
	padding: 9px 12px;
	background: #f5f5f5 !important;
	border-radius: 10px;
	color: #767676 !important;
}

.paau-donate-search svg {
	flex-shrink: 0;
}

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

.paau-donate-search-input::placeholder {
	color: #9a9a9a !important;
}

/* -- Cause cards ------------------------------------------------------------ */

/* align-items: stretch, reversing 0.39.19's own switch to start (0.40.7)
   — direct ask, this round: "I'd like cards to be equal height." 0.39.19's
   own switch to start was a direct correction too ("why so much space in
   the card") — not a mistake to undo lightly, so the fix here isn't just
   flipping this property back, which would reintroduce that exact
   complaint. What 0.39.19 was actually reacting to was WHERE the extra
   stretched height went: dead white space stranded below the title, doing
   nothing. .paau-donate-cause-title below now grows to fill that space
   and centers its text within it instead, so a shorter title reads as
   "generously centered" rather than "title pinned to the top with a gap
   underneath it" — same equal-height row, without the look 0.39.19
   changed this away from. */
.paau-donate-cause-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	align-items: stretch !important;
}

/* max-width caps the card independently of its grid track (0.39.6,
   defense-in-depth alongside the width fix above) — a 2-column 1fr grid
   has no natural ceiling on its own, so if the causes column is ever
   wider than the ~300px it's designed for (exactly what the width bug
   above caused), each card would otherwise scale up to fill half of
   whatever that width is instead of staying a sensible card size. Doesn't
   change anything at the intended column width — 220px only binds once a
   1fr track would otherwise exceed it. */
/* .paau-donate-widget prefix on this and every shape rule below it
   (0.39.13) — not just !important. "Even more circle now" after 0.39.12
   added !important to the icon's shape properties means something else on
   this site is *also* setting a competing border-radius with !important —
   most likely a generic circular-icon/avatar default from Hello Elementor,
   consistent with the border/background override behaviour already
   confirmed elsewhere in this codebase. Two !important declarations don't
   break their tie by which one "looks more important" — they break on
   specificity, then on whichever loaded later. Since I can't see Hello
   Elementor's own CSS to out-order it, the only fix that wins regardless
   of load order is higher specificity: `.paau-donate-widget` + the
   component class is two classes (0,2,0), comfortably above a generic
   single-class or bare-element theme rule. */
/* padding: 0 + overflow: hidden (0.39.17) — direct ask: "the padding on
   each appeal shouldn't apply around the images - they should go to the
   edge of their individual cards." The card used to pad every child
   (image, title, badge) equally by 14px; now nothing is padded here at
   the card level — the image sits flush against all three rounded edges
   (overflow: hidden clips it to this card's own 12px radius, see the
   thumb/icon rules below), and .paau-donate-cause-title carries its own
   padding instead, since it's the only child left that still needs any
   (the badge is already position: absolute, unaffected by this either
   way). */
.paau-donate-widget .paau-donate-cause-card {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	padding: 0 !important;
	overflow: hidden;
	max-width: 220px;
	min-width: 0;
	background: #ffffff !important;
	border: 1.5px solid #ececec !important;
	border-radius: 12px !important;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Hidden by the search filter below (0.39.12) — a real class instead of
   jQuery's .toggle(), which sets a plain inline `display:none` that loses
   outright to this card's own `display: flex !important` a few lines up
   (a stylesheet !important always beats a plain inline style, regardless
   of which "looks" more specific) — the actual reason typing into Search
   Appeals visibly did nothing. */
.paau-donate-cause-card.is-hidden {
	display: none !important;
}

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

/* Missing the fill (0.40.19) — direct report: "the background of the
   active tab... looks like an error." It was: .is-active only set
   border-color + a faint box-shadow ring, no background change at all —
   an outlier against this plugin's established selected-state pattern
   (.paau-amount-option.is-selected, .paau-donation-type-card.is-selected,
   both fill with #FFF4E8 alongside their border). .paau-amount-custom's
   own selected state used to match that pattern too, but lost its fill
   in 0.40.21 when the whole field dropped its card treatment for a plain
   underline — this comment's own claim about it is now stale, kept
   accurate here rather than left to mislead a future read. Filling the
   whole card (icon box included — .paau-program-icon already sits on
   this same #FFF4E8 for its own unrelated reason, so the card and icon
   box now blend into one continuous tint rather than showing a seam
   between them) makes "selected" read as broad and obvious, matching the
   rest of the plugin's convention instead of being its one exception. */
.paau-donate-cause-card.is-active {
	background: #FFF4E8 !important;
	border-color: var(--e-global-color-primary, #FF6A00) !important;
	box-shadow: 0 0 0 2px rgba(239, 124, 0, 0.16);
}

/* !important + .paau-donate-widget prefix throughout (0.39.13) — direct
   ask: "why are the images still contained rather than covering." Same
   gap as the card/icon fixes above, on the sibling rule that got missed:
   width/aspect-ratio/border-radius on the box, and — the actual visible
   cause — width/height/object-fit on the <img> itself had NONE of these
   protected. object-fit only crops when the element has a forced,
   definite height; a very common WordPress/theme responsive-image reset
   (`img { height: auto; max-width: 100% }`) is exactly the kind of rule
   this project has already confirmed this site's theme applies without
   asking permission, and it would silently turn `height: 100%` here into
   `auto` — at which point object-fit: cover has nothing to crop against,
   the photo renders at its own natural scaled size instead of filling the
   box, and the box's own #f5f5f5 background shows around it as the
   "contained" grey padding being seen. */
.paau-donate-widget .paau-donate-cause-thumb {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 16 / 10 !important;
	background: #f5f5f5 !important;
	border-radius: 8px !important;
	overflow: hidden;
}

.paau-donate-widget .paau-donate-cause-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Top corners only, matching the card's own 12px (0.39.17) — now that the
   card itself has no padding, this image sits flush against the card's
   top-left/top-right edges, so it needs to follow the CARD's radius there
   instead of its own smaller, all-four-corners 8px (which was tuned for
   when this box floated 14px in from the edge, before). More specific
   than the base .paau-donate-cause-thumb/-icon rules above so it only
   applies here — .paau-donate-config-icon's unrelated reuse of
   .paau-donate-cause-thumb (a small standalone icon, not flush with
   anything) keeps its own 8px on all corners untouched. */
.paau-donate-widget .paau-donate-cause-card .paau-donate-cause-thumb,
.paau-donate-widget .paau-donate-cause-card .paau-donate-cause-icon {
	border-radius: 12px 12px 0 0 !important;
}

/* Padding moved here from the card (0.39.17) — title is the only text
   content left in the card now that the description is gone, so it's the
   one place that still needs the old 14px breathing room.
   white-space/overflow-wrap made explicit + !important (0.39.19) — direct
   ask: "the titles still truncate instead of linebreak." Nothing in this
   plugin ever set white-space on this element at all, so — same pattern
   as every other unprotected property this theme has silently overridden
   this whole session — something in Hello Elementor's own default button
   styling (this title lives inside a <button>) was free to force
   single-line text with no competing rule to beat. .paau-donate-widget
   prefix added to the selector for the same specificity reason as the
   other hardened rules in this block. */
/* display: flex + align-items: center + flex: 1 1 auto (0.40.7) — this is
   what makes .paau-donate-cause-grid's switch back to align-items: stretch
   above look right instead of just relocating 0.39.19's "dead space"
   complaint: the title is the only flexible section in this card's own
   column layout (image is a fixed aspect-ratio box above it), so it's the
   one place stretched-in height can go. Growing it and centering its text
   vertically means a short one-line title on a stretched card reads as
   deliberately centered in its own row, not as a title glued to the top
   with blank space hanging underneath it. */
.paau-donate-widget .paau-donate-cause-title {
	display: flex !important;
	align-items: center !important;
	flex: 1 1 auto !important;
	padding: 10px 14px 14px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--e-global-color-text, #231F20) !important;
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Eyebrow-on-image (0.39.12) — direct ask: "Zakat eligible eyebrow can be
   on the image." Inset shrunk from 22px to 10px in 0.39.17 — that 22px
   was 14px of card padding + an 8px inset, and the card padding is gone
   now that the image sits flush against the card edge (see above), so
   the badge just needs its own flat 10px inset from the image's corner
   instead. */
.paau-donate-cause-badge {
	display: inline-flex !important;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	padding: 2px 7px;
	background: #FFF4E8 !important;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	color: var(--e-global-color-primary, #FF6A00) !important;
}

/* -- Program icon (0.39.8) — Featured Appeals cards + the site's cart item
   thumbnail (wherever that renders: this plugin's own #paau-cart-drawer
   fallback, or the theme's own cart drawer — Elementor's Menu Cart widget
   on this site, confirmed already honouring this plugin's own cart-item
   customisation via woocommerce_cart_item_name, which is why
   woocommerce_cart_item_thumbnail was used for this rather than something
   more fragile). A small, consistent icon per Program (Water, Emergency,
   Education, etc.) in place of a photo — see
   PAAU_D_Appeals_CPT::get_program_icon_url() and
   PAAU_D_Donation_Engine::render_program_icon_html() for where this comes
   from and how it falls back to a generic default (icon_gift()) when a
   Program has no icon set yet. !important throughout, same reasoning as
   the rest of this file — .paau-cart-item-icon in particular can render
   inside markup this plugin doesn't own or control the surrounding
   styles of. */
.paau-donate-widget .paau-program-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	overflow: hidden;
	background: #FFF4E8 !important;
	border-radius: 10px !important;
}

/* cover, not contain (0.39.11) — direct correction: "the appeal images
   should cover the image box, not be contained." What's actually being
   uploaded as a Program "icon" in practice is a real photo (see Fouad's
   own "Where Most Needed" card), not the small flat single-colour glyph
   the field's instructions originally assumed — contain + padding was
   letterboxing/inset-ing a real photo instead of filling the box the way
   every other Appeal photo on this page does (.paau-donate-cause-thumb
   img, same object-fit: cover treatment). No padding either now, for the
   same reason a cover'd photo elsewhere on this page has none.
   width/height/object-fit made !important in 0.39.13 — this rule was
   left unprotected the same way .paau-donate-cause-thumb img (just above)
   turned out to be, closed for the same reason at the same time. */
.paau-donate-widget .paau-program-icon img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Near-edge-to-edge (0.39.15) — direct ask: "the image in the left sidebar
   shouldn't have padding around it," referring to this generic gift-icon
   fallback (shown whenever a Program has no icon uploaded yet — the "Where
   Most Needed" Program still doesn't). 55% left a wide, obvious margin of
   the peach background showing on every side. Bumped to 88% — not a full
   100%, since the icon's own SVG paths already sit inset a little from its
   viewBox edge, and at literal 100% that plus this box's rounded corners
   would start clipping the glyph itself; 88% is close enough to read as
   "no padding" without cutting the icon off. !important + selector bump
   for the same reason as everything else in this block: an unprotected
   plain-class rule has kept losing to something on this site more than
   once already. */
.paau-donate-widget .paau-program-icon-default svg {
	width: 88% !important;
	height: 88% !important;
	color: var(--e-global-color-primary, #FF6A00) !important;
}

/* Same footprint as .paau-donate-cause-thumb (16:10, full card width) so
   Featured and All Appeals cards stay the same shape — only what's inside
   this box changes. */
/* !important on shape (0.39.12) — direct ask: "the box border radius is a
   circle." None of these three properties had !important, so on a Program
   with no icon set (the generic gift-icon fallback, .paau-program-icon-
   default) the box had nothing forcing its intended 16:10 rectangle —
   consistent with the border/background pattern already confirmed above
   to lose silently on this site without !important. Hardened the same
   way rather than left to guesswork. */
/* .paau-donate-widget prefix added in 0.39.13 alongside the sibling shape
   rules above — see that block's comment: !important alone can still lose
   to another !important rule of equal specificity, depending on load
   order, which is the most likely reason this got MORE circular after
   0.39.12 added !important here rather than less. */
.paau-donate-widget .paau-donate-cause-icon {
	width: 100% !important;
	aspect-ratio: 16 / 10 !important;
	border-radius: 8px !important;
}

.paau-cart-item-icon {
	width: 48px !important;
	height: 48px !important;
}

/* -- Configurator ------------------------------------------------------------ */

/* No card chrome here any more (0.39.2) — .paau-donate-col-config now
   carries the tint background and accent top-border for the whole
   column, this just spaces the head/panel apart. */
.paau-donate-configurator {
	display: flex !important;
	flex-direction: column !important;
}

.paau-donate-config-head {
	display: flex !important;
	align-items: center !important;
	gap: 16px;
	margin-bottom: 22px;
}

.paau-donate-config-icon {
	flex-shrink: 0;
	border-radius: 12px;
}

/* Regression I introduced in 0.39.13, now closed (0.39.15) — direct ask:
   "the image on the middle donation card is distorted." This element's
   markup (see render_standard_panel() in class-donation-engine.php)
   carries BOTH .paau-donate-config-icon (this small 64x64 square icon-
   beside-the-title treatment) AND .paau-donate-cause-thumb (the wide
   16:10 card-photo treatment) on the exact same <span> — reused rather
   than duplicated. Before 0.39.13, neither rule had !important, so plain
   source order settled it: .paau-donate-config-icon's own width/height/
   aspect-ratio (later in the file) quietly won over .paau-donate-cause-
   thumb's, correctly keeping this a small square icon here. 0.39.13 gave
   .paau-donate-cause-thumb's width and aspect-ratio both !important and a
   two-class selector to fix an UNRELATED bug on the card grid — which,
   here, made it start beating this rule instead: width forced to 100% of
   this flex row (now genuinely wide), while height stayed the untouched,
   unopposed 64px, since .paau-donate-cause-thumb never sets height at
   all. A ~450×64px box isn't literally stretched — object-fit: cover
   still crops correctly — but a crop that extreme reads exactly like the
   "distorted" banner in the screenshot. Fixed by moving width/height/
   aspect-ratio here onto a selector specific enough (three classes worth
   of specificity, via .paau-donate-widget + both classes together) to
   beat .paau-donate-cause-thumb's for this one shared element, without
   touching that rule's own !important — the standalone card-grid usage
   (Featured Appeals, All Appeals) still needs it exactly as-is. */
.paau-donate-widget .paau-donate-config-icon.paau-donate-cause-thumb {
	width: 64px !important;
	height: 64px !important;
	aspect-ratio: 1 / 1 !important;
}

/* A real <h3> — font-family deliberately left unset (0.39.2, was
   forcing var(--e-global-typography-primary-font-family, inherit)
   !important). PAAU's heading font isn't set via Elementor's Global
   Fonts kit (confirmed — Fouad sets it under Site Settings →
   Typography instead, which styles real heading tags directly, not
   via that custom property). Forcing "inherit" with !important here
   was overriding this exact tag with more specificity than Elementor's
   own typography CSS, silently blocking it from ever reaching this
   heading — removing the declaration lets it cascade through normally,
   same as any other <h3> on the site. Sized up from 18px so the centre
   panel's own title reads as the clear lead over the causes/basket
   column headings either way. */
.paau-donate-config-title {
	margin: 0 0 4px;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-donate-config-desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #767676 !important;
}

.paau-donate-panel-loading {
	padding: 24px 0;
	text-align: center;
	font-size: 14px;
	color: #767676 !important;
}

/* Bigger amount buttons in the centre configurator — Fouad's call: this
   is the panel that actually decides the gift, so the preset buttons
   should read as the visual lead over the causes/basket columns either
   side of them, not match their default size. Scoped to the widget only
   (not a donation-form.css change) since Appeal boxes, the Quick Donate
   widget, etc. keep the original sizing. No !important needed — none of
   the base .paau-donation-amounts/.paau-amount-option/.paau-amount-value
   declarations being overridden carry !important themselves, and this
   selector's extra class already outweighs .paau-amount-custom alone, so
   the "Other" field's padding scales up here too without a separate rule. */
.paau-donate-panel-mount .paau-donation-amounts {
	gap: 12px;
}

.paau-donate-panel-mount .paau-amount-option {
	padding: 20px 14px;
}

/* Bumped from 20px to 26px (0.40.16) — donation-form.css's own base
   .paau-amount-value moved from 16px to 22px in that same round (direct
   ask: "numbers should be larger" across all forms), which left this
   override sizing the widget's value SMALLER than the base it was meant
   to visually lead over. Widened the gap back out rather than dropping
   the override, since the base size change wasn't scoped with this
   widget's "visual lead" intent in mind. */
.paau-donate-panel-mount .paau-amount-value {
	font-size: 26px;
}

/* Keeps "Add to basket" a full text button in this widget, opting back
   out of the icon-only compacting donation-form.css's base
   .paau-donation-add-to-cart:not(.paau-donation-buy-now) rule now does by
   default (0.40.16 — direct ask, but scoped to the main donation form
   where Add to cart sits beside "Donate now"/"Sponsor now" as a genuine
   secondary action). Here it's paired with "Checkout" (mobile) or stands
   completely alone (desktop, see the "heavier" override below) — in
   either case a self-explanatory label matters more than compactness, so
   this widget deliberately keeps the pre-0.40.16 look rather than picking
   up the new default. Un-hides the label span and hides the "+" badge the
   base rule adds; the desktop-only override further below layers its own
   "heavier" sizing on top of this. */
.paau-donate-panel-mount .paau-donation-add-to-cart:not(.paau-donation-buy-now) {
	flex: 0 0 30% !important;
	width: auto;
	height: auto;
	padding: 15px 10px !important;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* clip-path: none added (0.40.44) — direct report: "the add to cart
   button was ruined in an update," screenshot showing the full-width
   ghost button rendering correctly (right shape, right border) but with
   no visible label text at all, just the bare icon. Root cause: this
   span also carries WordPress's own .screen-reader-text class (kept
   deliberately alongside .paau-add-to-cart-label — see render_standard_
   panel()'s own comment on that button markup), and WordPress core's
   current standard .screen-reader-text pattern hides content with BOTH
   `clip: rect(1px,1px,1px,1px)` AND `clip-path: inset(50%)` together —
   the modern property alongside the legacy one, for browsers that don't
   honour `clip` any more. This override only ever reset `clip`; it never
   touched `clip-path` at all. Since that's a completely separate CSS
   property, there was nothing here competing against the theme/core
   .screen-reader-text rule's own `clip-path` declaration for it, so it
   kept winning regardless of this override's otherwise-higher specificity
   on every OTHER property (specificity only decides a winner when two
   rules target the SAME property — it doesn't let a more specific rule
   "beat" a less specific one on a property the more specific rule never
   mentions). The label was still being clipped to a 0×0 box the whole
   time; nothing else in this chain was ever broken. */
.paau-donate-panel-mount .paau-donation-add-to-cart:not(.paau-donation-buy-now) .paau-add-to-cart-label {
	position: static !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	white-space: normal !important;
}

.paau-donate-panel-mount .paau-donation-add-to-cart:not(.paau-donation-buy-now) .paau-add-to-cart-plus {
	display: none !important;
}

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

/* render_standard_panel() is rendered here with suppress_submit +
   buy_now_label + add_to_cart_label — so .paau-donation-buttons ends up
   with the ghost button (relabelled "Add to basket" server-side, staying
   at donation-form.css's normal 30%-flex ghost width) AND the buy_now
   variant in the default submit button's place, not one instead of the
   other. That second button carries both .paau-donation-add-to-cart
   (styling/AJAX-class hook) and .paau-donation-buy-now (this widget's own
   modifier) — give it .paau-donation-submit's solid-fill/wide treatment
   instead of the ghost ~30% width, so "Checkout" reads as the primary
   action next to "Add to basket", matching the approved mockup.

   This same render_panel() call is used for BOTH the desktop configurator
   (.paau-donate-desktop) and the mobile "configure" step
   (.paau-donate-mobile) — one method, two mount points, per the file's
   established render-twice pattern, so the two buttons only get told apart
   by which ancestor wraps them, not by different PHP options. */
.paau-donate-panel-mount .paau-donation-buy-now {
	flex: 1 1 auto !important;
	background: var(--e-global-color-primary, #FF6A00) !important;
	color: #ffffff !important;
	border-color: var(--e-global-color-primary, #FF6A00) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 14px rgba(239, 124, 0, 0.32);
}

.paau-donate-panel-mount .paau-donation-buy-now:hover:not(:disabled) {
	background: #E85F00 !important;
	border-color: #E85F00 !important;
	color: #ffffff !important;
}

/* Desktop only shows "Add to basket" — direct correction: the second
   Checkout button here was redundant on desktop, since the basket column
   is permanently visible to its right with its own Checkout button
   already. Having both Add to basket AND Checkout together in the
   configurator is a mobile-only pattern, needed there because the basket
   isn't on screen during the "configure" step — it's a separate screen a
   tap away. Ghost button widens from its normal 30% flex to fill the row
   on its own once Checkout is gone from beside it. */
.paau-donate-desktop .paau-donate-panel-mount .paau-donation-buy-now {
	display: none !important;
}

/* Heavier + taller (0.39.11) — direct correction: "needs to be heavier
   on desktop... padding is all wrong, very skinny height." Now that
   Checkout is gone from the desktop configurator (see above), this is
   the one and only action there, so it should read with real weight, not
   like donation-form.css's original secondary/ghost sizing (padding:
   15px 10px, no !important on that padding — plausibly the actual cause
   of "very skinny": the same un-!important'd-property pattern that's
   bitten this plugin against Hello Elementor before). Widget-scoped only
   — the shared .paau-donation-add-to-cart in donation-form.css, and this
   same button on mobile (where it sits next to Checkout, not alone),
   keep their original sizing. */
.paau-donate-desktop .paau-donate-panel-mount .paau-donation-add-to-cart:not(.paau-donation-buy-now) {
	flex: 1 1 auto !important;
	padding: 20px 24px !important;
	border-width: 2px !important;
	font-size: 16px !important;
	font-weight: 800 !important;
}

/* -- Basket panel ------------------------------------------------------------ */

/* No card chrome here either (0.39.2) — .paau-donate-col-basket carries
   the shared box's background/divider now. */
.paau-donate-basket {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px;
}

.paau-donate-basket-head {
	display: flex !important;
	align-items: center !important;
	gap: 8px;
}

.paau-donate-basket-head svg {
	color: var(--e-global-color-primary, #FF6A00) !important;
	flex-shrink: 0;
}

/* Real <h2> — font-family left unset, same reasoning as
   .paau-donate-config-title above. Deliberately still smaller than that
   title (16px vs. 22px) now that both are unstyled real headings — the
   basket is secondary to the configurator, not a peer of it. */
.paau-donate-basket-head h2 {
	flex: 1 1 auto !important;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-donate-basket-count {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	background: var(--e-global-color-primary, #FF6A00) !important;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: #ffffff !important;
}

.paau-donate-basket-empty {
	margin: 8px 0;
	font-size: 13px;
	color: #767676 !important;
	text-align: center;
}

.paau-donate-basket-list {
	display: flex !important;
	flex-direction: column !important;
}

.paau-donate-basket-item {
	display: flex !important;
	align-items: center !important;
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid #f0f0f0 !important;
}

.paau-donate-basket-item:last-child {
	border-bottom: none !important;
}

.paau-donate-basket-item-body {
	flex: 1 1 auto !important;
	min-width: 0;
	display: flex !important;
	flex-direction: column !important;
	gap: 3px;
}

.paau-donate-basket-item-title {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--e-global-color-text, #231F20) !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.paau-donate-basket-item-meta {
	margin: 0;
	font-size: 11px;
	color: #9a9a9a !important;
}

.paau-donate-basket-item-amount {
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-donate-basket-item-remove {
	flex-shrink: 0;
}

.paau-donate-basket-subtotal {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding-top: 12px;
	border-top: 1px solid #ececec !important;
	font-size: 15px;
	font-weight: 700;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-donate-basket-checkout {
	display: block !important;
	text-align: center;
	text-decoration: none;
	background: var(--e-global-color-primary, #FF6A00) !important;
	color: #ffffff !important;
	border-radius: 999px;
	padding: 15px 22px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 14px rgba(239, 124, 0, 0.32);
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.paau-donate-basket-checkout:hover {
	background: #E85F00 !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

.paau-donate-basket-checkout[aria-disabled="true"] {
	pointer-events: none;
	opacity: 0.5;
	box-shadow: none;
	transform: none;
}

/* ============ MOBILE (≤640px) ============ */

/* height: 75vh + overflow-y: auto (0.39.20) — direct ask: "why don't we
   fix the height of this widget to something like 75vh," and this is the
   actual breakpoint the "sidebar is still not scrollable, the list cuts
   off" screenshot was reported at (a narrow single-column view is this
   mobile layout, not the ≤900px stacked-desktop one — see the note on
   that breakpoint above). Previously .paau-donate-causes carried its own
   640px cap inside here; that's removed now (see that rule's own
   comment) in favour of this screen itself being the one bounded,
   scrolling box, matching the desktop model. This also gives
   .paau-donate-mobile-bar's existing `position: sticky; bottom: 0;` a
   properly bounded, scrolling ancestor to stick within for the first
   time — previously its sticky context was effectively the whole page
   (since nothing here constrained height or set overflow), so it tracked
   the browser viewport rather than the bottom of this screen
   specifically; now it sticks to the bottom of the widget itself as the
   causes list scrolls inside it, which is what it always should have
   been.  */
.paau-donate-mobile-screen {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px;
	height: 75vh !important;
	overflow-y: auto !important;
}

/* Confirmed bug, not a guess (0.39.16) — direct correction for the "Where
   Most Needed" title/description rendering doubled and overlapping the
   basket column. render_config_head() is genuinely called twice per page
   (class-donate-widget.php) — once for the desktop pane, once for the
   mobile "configure" screen, the latter carrying the HTML `hidden`
   attribute so only one is ever meant to show. But the rule above sets
   `display: flex !important` on EVERY .paau-donate-mobile-screen
   unconditionally, with no exception for [hidden] — a plain HTML hidden
   attribute has no real weight against an author !important rule, so it
   was providing no protection at all. Whatever let .paau-donate-mobile
   itself become visible outside its intended ≤640px media query (the
   same single-class-vs-competing-!important exposure already found and
   fixed elsewhere in this file this session) meant BOTH mobile screens —
   including "configure", with its own full copy of the appeal title and
   description — rendered at once, stacked on top of the real desktop
   layout. This selector is specific enough ([hidden] counts as a second
   class for specificity) to beat the unconditional rule above regardless
   of what's happening to .paau-donate-mobile one level up. */
.paau-donate-mobile-screen[hidden] {
	display: none !important;
}

/* Renamed from .paau-donate-mobile-back + fully restyled (0.40.12) — direct
   ask: "let's have browse other causes as a full-width chip beneath the
   donation form instead." This was a small top-left text link styled as a
   "back" affordance, appropriate when browse was the screen a donor tapped
   OUT of to reach configure. Now that configure is the default landing
   screen (0.40.11), this button lives at the bottom of the form as the
   primary secondary-action instead, so it's restyled to match — same
   visual language as the existing "Give on behalf of someone" dedication
   chip (.paau-dedication-chip, donation-form.css) rather than inventing a
   new chip style: dashed border, cream/grey at rest, orange on hover. Full
   width with centered content here, vs. left-aligned content on that chip
   (0.40.15) — both are full-width rows, but this one sits alone beneath
   the form so centering suits it, while the dedication chip sits among
   left-aligned list rows (Zakat/Sadaqah cards) it needs to match. */
.paau-donate-mobile-browse-chip {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	width: 100%;
	background: #fafafa !important;
	border: 1.5px dashed #d2d2d2 !important;
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 13px;
	font-weight: 700;
	color: #6b6b6b !important;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.paau-donate-mobile-browse-chip svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

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

.paau-donate-mobile-configurator {
	background: #ffffff !important;
	border: 1px solid #ececec !important;
	border-top: 4px solid var(--e-global-color-primary, #FF6A00) !important;
	border-radius: 18px;
	padding: 22px;
	box-shadow: 0 2px 4px rgba(35, 31, 32, 0.04), 0 14px 34px rgba(35, 31, 32, 0.09);
}

/* The "Add to basket" + "Checkout" pair inside here already gets its
   primary/ghost treatment from the shared .paau-donate-panel-mount rules
   above — this configurator's own basket-bar-style Checkout is the fixed
   bar below instead, a shortcut for an already-loaded basket rather than
   whichever cause is on screen right now. */

/* z-index: 2 (0.40.11 fix) — this bar previously had no z-index at all
   (computed value: auto). .paau-donate-cause-badge ("Zakat eligible") has
   an explicit z-index: 1, and under normal CSS stacking rules a positioned
   element with an EXPLICIT z-index always paints above a sibling
   positioned element sitting at z-index: auto, regardless of which one
   comes later in the DOM — so as the causes list scrolled inside its own
   bounded box, a card's badge could render on top of this sticky bar
   wherever the two visually overlapped. One level above the badge is
   enough; nothing else in this widget's mobile view sets an explicit
   z-index higher than that. cursor: pointer + the tap-to-open-cart click
   handler are new this round too (donate-widget.js) — the whole bar is now
   an affordance, not just a static summary. */
.paau-donate-mobile-bar {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: flex !important;
	align-items: center !important;
	gap: 14px;
	margin: 0 -4px;
	padding: 12px 16px;
	background: #ffffff !important;
	border: 1px solid #ececec !important;
	border-radius: 16px;
	box-shadow: 0 -4px 20px rgba(35, 31, 32, 0.1);
	cursor: pointer;
}

.paau-donate-mobile-bar-info {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	min-width: 0;
}

/* Chevron flipped 180° (0.40.11) — icon_chevron_down() reused rather than
   adding a second near-identical up-pointing SVG helper just for this one
   spot. Purely a visual "there's more here, tap to view" cue; the actual
   click handling covers the whole bar, not just this icon. */
.paau-donate-mobile-bar-expand {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0;
	color: #a7a7a7 !important;
	transform: rotate(180deg);
}

.paau-donate-mobile-bar-expand svg {
	width: 14px;
	height: 14px;
}

.paau-donate-basket-count-label {
	font-size: 11px;
	font-weight: 600;
	color: #767676 !important;
}

.paau-donate-mobile-bar .paau-donate-basket-total {
	font-size: 15px;
	font-weight: 700;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-donate-mobile-bar .paau-donate-basket-checkout {
	flex-shrink: 0;
	width: auto;
	padding: 12px 20px;
	font-size: 14px;
}

/* -- Toast (mobile "Add to basket" confirmation) ---------------------------- */

.paau-donate-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 12px);
	padding: 10px 18px;
	background: var(--e-global-color-text, #231F20) !important;
	color: #ffffff !important;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 100001;
}

.paau-donate-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.paau-donate-chev,
	.paau-donate-cause-card,
	.paau-donate-basket-checkout,
	.paau-donate-toast {
		transition: none !important;
	}
}