@import url('/css/donation-common.css');
@import url('/css/preset-pills.css');
/* Stripe payment module styles — scoped to either the on-page module or any
   dynamically-injected widget containers. This group ensures the same look
   applies to #stripe-payment-module (page form) and widget containers such
   as elements whose id starts with "dw-stripe-payment-module", the
   legacy .dw-stripe-module wrapper, or the data-dw-stripe-id attribute. */
/* Container group used repeatedly below */
/* Note: keep this expanded (not a CSS variable) so older browsers apply it */
/* Group: target the main on-page module and known widget container patterns */
#stripe-payment-module, [id^="dw-stripe-payment-module"], .dw-stripe-module, [data-dw-stripe-id] {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #000;
}

#stripe-payment-module .stripe-card, [id^="dw-stripe-payment-module"] .stripe-card, .dw-stripe-module .stripe-card, [data-dw-stripe-id] .stripe-card {
  background: linear-gradient(180deg,#fffdfa 0%,#f7f3e7 100%);
  border: 3px solid rgba(181,155,24,0.14);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(7,10,10,0.04);
  display:flex;
  gap:10px;
  flex-direction:column;
  align-items:stretch;
}

/* Header */
#stripe-payment-module .stripe-card .header {
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
}
/* Make the title larger, heavier and inherit the module font stack for consistency */
#stripe-payment-module .stripe-card .title {
  font-family: inherit;
  font-weight: 900;
  font-size: 1.9rem;    /* larger for prominence */
  line-height: 1.08;
  letter-spacing: 0.02em;
  color: #020202;
}
/* Make the subtitle clearer and more readable */
#stripe-payment-module .stripe-card .subtitle {
  font-family: inherit;
  font-size: 1.25rem;
  color: #111;
  font-weight: 700;
  line-height: 1.28;
}

/* Preset pills styled like role selection (emoji/check look) */
/* layout: make pills equal width to accommodate amounts like $100 */
#stripe-payment-module .preset-row, [id^="dw-stripe-payment-module"] .preset-row, .dw-stripe-module .preset-row, [data-dw-stripe-id] .preset-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
#stripe-payment-module .donation-label, [id^="dw-stripe-payment-module"] .donation-label, .dw-stripe-module .donation-label, [data-dw-stripe-id] .donation-label { position:relative; cursor:pointer; }
#stripe-payment-module .donation-input, [id^="dw-stripe-payment-module"] .donation-input, .dw-stripe-module .donation-input, [data-dw-stripe-id] .donation-input {
  position:absolute;
  opacity:0;
  pointer-events:auto;
}
#stripe-payment-module .donation-visual, [id^="dw-stripe-payment-module"] .donation-visual, .dw-stripe-module .donation-visual, [data-dw-stripe-id] .donation-visual {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:80px; /* match form pills */
  height:44px;
  padding:8px 12px;
  border-radius:8px;
  background:#f8f9fa;
  color:#495057;
  font-weight:600;
  font-size:0.9rem;
  box-shadow:none;
  border:1px solid #e9ecef;
  transition: all 0.12s ease;
  position:relative;
  text-align:center;
}

/* check badge (match role section: red) */
#stripe-payment-module .donation-visual .check, [id^="dw-stripe-payment-module"] .donation-visual .check, .dw-stripe-module .donation-visual .check, [data-dw-stripe-id] .donation-visual .check {
  position:absolute;
  top:-8px;
  right:-8px;
  width:22px;
  height:22px;
  border-radius:999px;
  background:var(--brand-color); /* brand check background */
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.18);
  opacity:0;
  transform:scale(.8);
  transition: opacity .12s ease, transform .12s ease;
}

/* hover lift */
#stripe-payment-module .donation-label:hover .donation-visual, [id^="dw-stripe-payment-module"] .donation-label:hover .donation-visual, .dw-stripe-module .donation-label:hover .donation-visual, [data-dw-stripe-id] .donation-label:hover .donation-visual {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* selected state: match donation form (subtle black pill) */
#stripe-payment-module .donation-input:checked + .donation-visual, [id^="dw-stripe-payment-module"] .donation-input:checked + .donation-visual, .dw-stripe-module .donation-input:checked + .donation-visual, [data-dw-stripe-id] .donation-input:checked + .donation-visual {
  background: #000000;
  color: #ffffff;
  transform: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  border: 1px solid #000000;
}
#stripe-payment-module .donation-input:checked + .donation-visual .check, [id^="dw-stripe-payment-module"] .donation-input:checked + .donation-visual .check, .dw-stripe-module .donation-input:checked + .donation-visual .check, [data-dw-stripe-id] .donation-input:checked + .donation-visual .check {
  opacity:1;
  transform:scale(1);
}
/* Pill visuals are authored in donation-common.css (canonical single source).
   Removed local duplication here to avoid specificity conflicts.
   See /src/css/donation-common.css for pill visuals (.donation-visual, .amount-visual, .check). */

/* custom input */
#stripe-payment-module .custom-row, [id^="dw-stripe-payment-module"] .custom-row, .dw-stripe-module .custom-row, [data-dw-stripe-id] .custom-row { display:flex; justify-content:center; margin-top:8px; gap:8px; align-items:center; }
#stripe-payment-module .custom-input, [id^="dw-stripe-payment-module"] .custom-input, .dw-stripe-module .custom-input, [data-dw-stripe-id] .custom-input,
#stripe-payment-module [data-stripe-custom-amount], [id^="dw-stripe-payment-module"] [data-stripe-custom-amount], .dw-stripe-module [data-stripe-custom-amount], [data-dw-stripe-id] [data-stripe-custom-amount],
#stripe-payment-module #stripe-custom-amount, [id^="dw-stripe-payment-module"] #stripe-custom-amount, .dw-stripe-module #stripe-custom-amount, [data-dw-stripe-id] #stripe-custom-amount {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  max-width: 220px;
  background: var(--stripe-element-bg, #ffffff);
  color: inherit;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(2,6,23,0.04) inset;
  padding: 10px 12px;
  border-radius: 8px;
  /* ensure inputs inside payment modules are at least 16px to avoid iOS auto-zoom */
  font-size: 1rem;
  line-height: 1.25;
  text-align: left;
  box-sizing: border-box;
}

#stripe-payment-module .custom-input::placeholder, [id^="dw-stripe-payment-module"] .custom-input::placeholder, .dw-stripe-module .custom-input::placeholder, [data-dw-stripe-id] .custom-input::placeholder,
#stripe-payment-module [data-stripe-custom-amount]::placeholder, [id^="dw-stripe-payment-module"] [data-stripe-custom-amount]::placeholder, .dw-stripe-module [data-stripe-custom-amount]::placeholder, [data-dw-stripe-id] [data-stripe-custom-amount]::placeholder,
#stripe-payment-module #stripe-custom-amount::placeholder, [id^="dw-stripe-payment-module"] #stripe-custom-amount::placeholder, .dw-stripe-module #stripe-custom-amount::placeholder, [data-dw-stripe-id] #stripe-custom-amount::placeholder {
  color: rgba(0,0,0,0.45);
}

#stripe-payment-module .custom-input:focus, [id^="dw-stripe-payment-module"] .custom-input:focus, .dw-stripe-module .custom-input:focus, [data-dw-stripe-id] .custom-input:focus,
#stripe-payment-module [data-stripe-custom-amount]:focus, [id^="dw-stripe-payment-module"] [data-stripe-custom-amount]:focus, .dw-stripe-module [data-stripe-custom-amount]:focus, [data-dw-stripe-id] [data-stripe-custom-amount]:focus,
#stripe-payment-module #stripe-custom-amount:focus, [id^="dw-stripe-payment-module"] #stripe-custom-amount:focus, .dw-stripe-module #stripe-custom-amount:focus, [data-dw-stripe-id] #stripe-custom-amount:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.12);
}

#stripe-payment-module #payment-element, [id^="dw-stripe-payment-module"] #payment-element, .dw-stripe-module #payment-element, [data-dw-stripe-id] #payment-element { margin-top:8px; }
/* Dual-mounts wrapper used when dualElements option is enabled. The two
  mounts are stacked and toggled via the .stripe-theme--night class on the
  wrapper so swaps are atomic and iframe reinitialization is avoided. */
.payment-element-mounts { position: relative; margin-top: 8px; }
.payment-element-mounts .payment-element { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 220ms ease, visibility 220ms ease; }

/* For injected widget mounts inside the floating donation widget, ensure the
   payment-element is positioned relatively so internal scrolling works as
   expected on mobile devices. This rule intentionally overrides the absolute
   stacking used by in-page dual-mounts when inside .dw-stripe-module. */
.dw-stripe-module .payment-element-mounts .payment-element {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  width: 100% !important;
}
.payment-element-mounts .payment-element[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; }
.payment-element-mounts .payment-element[aria-hidden="false"] { opacity: 1; visibility: visible; pointer-events: auto; }
/* ensure a conservative min-height so the wrapper does not collapse while
  Stripe's iframe finishes painting. We avoid forcing a large default mounted
  height here so the host can naturally size the module; measurement JS may
  still set --stripe-mounted-height when available. */
.payment-element-mounts { /* size driven by --stripe-mounted-height when set, default 0 */
  min-height: var(--stripe-mounted-height, 0);
  /* allow the mount to shrink if the host does not supply a measurement */
  min-height: 0;
}

/* MOBILE / STABILITY FIXES
   - Ensure the payment element mount has stable sizing to avoid iframe relayouts
   - Enforce a base font-size >=16px to prevent iOS auto-zoom on inputs
   - Disable text-size-adjust so UA scaling doesn't reflow inputs
   - Promote the mount to its own compositing layer to reduce flicker
   - Reduce internal transitions (they can cause visible jitter during iframe updates)
*/
#stripe-payment-module .payment-element,
[id^="dw-stripe-payment-module"] .payment-element,
.dw-stripe-module .payment-element,
[data-dw-stripe-id] .payment-element {
  box-sizing: border-box; /* stable box sizing */
  min-height: 56px; /* conservative touch target and reserve for iframe */
  font-size: 18px !important; /* ensure >=16px to avoid iOS zoom; appearance overrides still apply internally */
  -webkit-text-size-adjust: 100%; /* prevent UA text autosizing */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0); /* create compositing layer to reduce repaint jank */
  backface-visibility: hidden;
  /* Keep transitions minimal inside the payment element to prevent jitter while iframe repaints */
  transition: none !important;
    /* Relax containment and allow internal scrolling so the Stripe iframe can
      be reached on small viewports. Avoid overflow:hidden which clips iframe
      internals; use auto with touch scrolling enabled. */
    /* Note: we keep a conservative min-height for touch targets, but allow
      the element to overflow and be scrolled when necessary. */
    contain: layout paint;
    isolation: isolate;
    overflow: auto; /* allow internal scroll when iframe content exceeds container */
    -webkit-overflow-scrolling: touch;
}

/* When a mount is visible, ensure the mount has a predictable height and does not collapse */
.payment-element-mounts .payment-element { min-height: 56px; }

/* Reduce transitions for descendant nodes inside the mounted container (defensive) */
.payment-element * { transition: none !important; }
/* No rigid default mounted-height is provided here to avoid forcing
   unnecessarily large reserves on small viewports. If measurement JS is
   available it may set --stripe-mounted-height on the mount; otherwise the
   mount will size naturally. */

/* Theme toggle class: when present, show night mount and hide stripe mount */
.payment-element-mounts.stripe-theme--night .mount--night[aria-hidden="false"] { opacity: 1; visibility: visible; }
.payment-element-mounts.stripe-theme--night .mount--stripe[aria-hidden="false"] { opacity: 0; visibility: hidden; pointer-events: none; }
/* CTA visuals are centralized in donation-common.css. Module CSS intentionally
   avoids re-defining .contribute-cta visuals to prevent cascade/specificity
   conflicts. See /src/css/donation-common.css for canonical rules. */
/* Contribute CTA visuals are centralized in donation-common.css.
   Leave module CSS focused on layout and container concerns only. */
#stripe-payment-module .stripe-note { font-size:0.82rem; color:#444; text-align:center; margin-top:6px; }

/* stripe-trust-badge styles are centralized in /js/stripe-trust-badge.js
   Do not duplicate styles here. */

/* responsive */
@media (max-width:480px) {
  #stripe-payment-module .donation-visual, [id^="dw-stripe-payment-module"] .donation-visual, .dw-stripe-module .donation-visual, [data-dw-stripe-id] .donation-visual { min-width:56px; height:48px; font-size:0.85rem; padding:6px 10px; }
  #stripe-payment-module .custom-input, [id^="dw-stripe-payment-module"] .custom-input, .dw-stripe-module .custom-input, [data-dw-stripe-id] .custom-input { width:110px; }
}

[id^="dw-stripe-payment-module"], .dw-stripe-module, [data-dw-stripe-id] {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden; /* prevent horizontal scrollbars */
}

.dw-stripe-module .stripe-card,
.dw-stripe-module .payment-element-mounts,
.dw-stripe-module .payment-element {
  min-width: 0; /* allow flex children to shrink */
  overflow: visible; /* do not introduce internal scrollbars */
}

/* Dark-mode overrides: ensure the module respects the unified theme manager
   These selectors mirror the project's convention using html.dark and
   html[data-theme="dark"] so they apply when the global theme is toggled. */
html.dark #stripe-payment-module,
html[data-theme="dark"] #stripe-payment-module,
#stripe-payment-module.dark,
#stripe-payment-module[data-theme="dark"],
html.dark [id^="dw-stripe-payment-module"],
html[data-theme="dark"] [id^="dw-stripe-payment-module"],
[id^="dw-stripe-payment-module"].dark,
[id^="dw-stripe-payment-module"][data-theme="dark"],
html.dark .dw-stripe-module,
html[data-theme="dark"] .dw-stripe-module,
.dw-stripe-module.dark,
.dw-stripe-module[data-theme="dark"],
[data-dw-stripe-id].dark,
[data-dw-stripe-id][data-theme="dark"] {
  color: var(--color-text, #ddd);
}

/* Also support module-scoped dark markers so embedded pledge modules can
   mirror unified theme state even when the root html.dark is not present.
   The JS will set .dark and data-theme="dark" on the container when needed. */
#stripe-payment-module.dark,
#stripe-payment-module[data-theme="dark"] {
  color: var(--color-text, #ddd);
}

html.dark #stripe-payment-module .stripe-card,
html[data-theme="dark"] #stripe-payment-module .stripe-card,
#stripe-payment-module.dark .stripe-card,
#stripe-payment-module[data-theme="dark"] .stripe-card,
html.dark [id^="dw-stripe-payment-module"] .stripe-card,
html[data-theme="dark"] [id^="dw-stripe-payment-module"] .stripe-card,
[id^="dw-stripe-payment-module"].dark .stripe-card,
[id^="dw-stripe-payment-module"][data-theme="dark"] .stripe-card,
html.dark .dw-stripe-module .stripe-card,
html[data-theme="dark"] .dw-stripe-module .stripe-card,
.dw-stripe-module.dark .stripe-card,
.dw-stripe-module[data-theme="dark"] .stripe-card,
[data-dw-stripe-id].dark .stripe-card,
[data-dw-stripe-id][data-theme="dark"] .stripe-card {
  /* Replace the cream/light gradient with a neutral dark surface */
  background: linear-gradient(180deg,#0b0b0b 0%,#0f0f14 100%);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
}

html.dark #stripe-payment-module .stripe-card .title,
html[data-theme="dark"] #stripe-payment-module .stripe-card .title,
#stripe-payment-module.dark .stripe-card .title,
#stripe-payment-module[data-theme="dark"] .stripe-card .title {
  color: var(--color-text, #fff);
}

html.dark #stripe-payment-module .stripe-card .subtitle,
html[data-theme="dark"] #stripe-payment-module .stripe-card .subtitle,
#stripe-payment-module.dark .stripe-card .subtitle,
#stripe-payment-module[data-theme="dark"] .stripe-card .subtitle {
  color: var(--color-text, #ddd);
}

html.dark #stripe-payment-module .donation-visual,
html[data-theme="dark"] #stripe-payment-module .donation-visual,
#stripe-payment-module.dark .donation-visual,
#stripe-payment-module[data-theme="dark"] .donation-visual,
html.dark [id^="dw-stripe-payment-module"] .donation-visual,
html[data-theme="dark"] [id^="dw-stripe-payment-module"] .donation-visual,
[id^="dw-stripe-payment-module"].dark .donation-visual,
[id^="dw-stripe-payment-module"][data-theme="dark"] .donation-visual,
html.dark .dw-stripe-module .donation-visual,
html[data-theme="dark"] .dw-stripe-module .donation-visual,
.dw-stripe-module.dark .donation-visual,
.dw-stripe-module[data-theme="dark"] .donation-visual,
[data-dw-stripe-id].dark .donation-visual,
[data-dw-stripe-id][data-theme="dark"] .donation-visual {
  /* Subtle, understated pill appearance in dark mode */
  background: #1f2937; /* darker, but not high contrast */
  color: var(--color-text, #fff);
  box-shadow: 0 4px 10px rgba(2,6,23,0.45); /* softened shadow */
  border: 1px solid rgba(255,255,255,0.04);
}

html.dark #stripe-payment-module .donation-input:checked + .donation-visual,
html[data-theme="dark"] #stripe-payment-module .donation-input:checked + .donation-visual,
#stripe-payment-module.dark .donation-input:checked + .donation-visual,
#stripe-payment-module[data-theme="dark"] .donation-input:checked + .donation-visual,
html.dark [id^="dw-stripe-payment-module"] .donation-input:checked + .donation-visual,
html[data-theme="dark"] [id^="dw-stripe-payment-module"] .donation-input:checked + .donation-visual,
[id^="dw-stripe-payment-module"].dark .donation-input:checked + .donation-visual,
[id^="dw-stripe-payment-module"][data-theme="dark"] .donation-input:checked + .donation-visual,
html.dark .dw-stripe-module .donation-input:checked + .donation-visual,
html[data-theme="dark"] .dw-stripe-module .donation-input:checked + .donation-visual,
.dw-stripe-module.dark .donation-input:checked + .donation-visual,
.dw-stripe-module[data-theme="dark"] .donation-input:checked + .donation-visual,
[data-dw-stripe-id].dark .donation-input:checked + .donation-visual,
[data-dw-stripe-id][data-theme="dark"] .donation-input:checked + .donation-visual {
  /* Subtle selected state: slightly lighter surface, low-contrast border */
  background: rgba(255,255,255,0.03);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.06);
}

html.dark #stripe-payment-module .custom-input,
html[data-theme="dark"] #stripe-payment-module .custom-input,
html.dark #stripe-payment-module [data-stripe-custom-amount],
html[data-theme="dark"] #stripe-payment-module [data-stripe-custom-amount],
#stripe-payment-module.dark .custom-input,
#stripe-payment-module[data-theme="dark"] .custom-input,
#stripe-payment-module.dark [data-stripe-custom-amount],
#stripe-payment-module[data-theme="dark"] [data-stripe-custom-amount],
html.dark [id^="dw-stripe-payment-module"] .custom-input,
html[data-theme="dark"] [id^="dw-stripe-payment-module"] .custom-input,
[id^="dw-stripe-payment-module"].dark .custom-input,
[id^="dw-stripe-payment-module"][data-theme="dark"] .custom-input,
html.dark .dw-stripe-module .custom-input,
html[data-theme="dark"] .dw-stripe-module .custom-input,
.dw-stripe-module.dark .custom-input,
.dw-stripe-module[data-theme="dark"] .custom-input,
[data-dw-stripe-id].dark .custom-input,
[data-dw-stripe-id][data-theme="dark"] .custom-input,
html.dark [id^="dw-stripe-payment-module"] [data-stripe-custom-amount],
html[data-theme="dark"] [id^="dw-stripe-payment-module"] [data-stripe-custom-amount],
[id^="dw-stripe-payment-module"].dark [data-stripe-custom-amount],
[id^="dw-stripe-payment-module"][data-theme="dark"] [data-stripe-custom-amount],
html.dark .dw-stripe-module [data-stripe-custom-amount],
html[data-theme="dark"] .dw-stripe-module [data-stripe-custom-amount],
.dw-stripe-module.dark [data-stripe-custom-amount],
.dw-stripe-module[data-theme="dark"] [data-stripe-custom-amount],
[data-dw-stripe-id].dark [data-stripe-custom-amount],
[data-dw-stripe-id][data-theme="dark"] [data-stripe-custom-amount] {
  background: var(--stripe-element-bg, #0b0b0f);
  color: var(--color-text, #ddd);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: none;
}

html.dark #stripe-payment-module .custom-input::placeholder,
html[data-theme="dark"] #stripe-payment-module .custom-input::placeholder,
html.dark #stripe-payment-module #stripe-custom-amount::placeholder,
html[data-theme="dark"] #stripe-payment-module #stripe-custom-amount::placeholder,
#stripe-payment-module.dark .custom-input::placeholder,
#stripe-payment-module[data-theme="dark"] .custom-input::placeholder,
#stripe-payment-module.dark #stripe-custom-amount::placeholder,
#stripe-payment-module[data-theme="dark"] #stripe-custom-amount::placeholder,
html.dark [id^="dw-stripe-payment-module"] .custom-input::placeholder,
html[data-theme="dark"] [id^="dw-stripe-payment-module"] .custom-input::placeholder,
[id^="dw-stripe-payment-module"].dark .custom-input::placeholder,
[id^="dw-stripe-payment-module"][data-theme="dark"] .custom-input::placeholder,
html.dark .dw-stripe-module .custom-input::placeholder,
html[data-theme="dark"] .dw-stripe-module .custom-input::placeholder,
.dw-stripe-module.dark .custom-input::placeholder,
.dw-stripe-module[data-theme="dark"] .custom-input::placeholder,
[data-dw-stripe-id].dark .custom-input::placeholder,
[data-dw-stripe-id][data-theme="dark"] .custom-input::placeholder,
html.dark [id^="dw-stripe-payment-module"] #stripe-custom-amount::placeholder,
html[data-theme="dark"] [id^="dw-stripe-payment-module"] #stripe-custom-amount::placeholder,
[id^="dw-stripe-payment-module"].dark #stripe-custom-amount::placeholder,
[id^="dw-stripe-payment-module"][data-theme="dark"] #stripe-custom-amount::placeholder,
html.dark .dw-stripe-module #stripe-custom-amount::placeholder,
html[data-theme="dark"] .dw-stripe-module #stripe-custom-amount::placeholder,
.dw-stripe-module.dark #stripe-custom-amount::placeholder,
.dw-stripe-module[data-theme="dark"] #stripe-custom-amount::placeholder,
[data-dw-stripe-id].dark #stripe-custom-amount::placeholder,
[data-dw-stripe-id][data-theme="dark"] #stripe-custom-amount::placeholder {
  color: rgba(255,255,255,0.35);
}

html.dark #stripe-payment-module .contribute-cta,
html[data-theme="dark"] #stripe-payment-module .contribute-cta,
#stripe-payment-module.dark .contribute-cta,
#stripe-payment-module[data-theme="dark"] .contribute-cta {
  /* Understated CTA in dark: subtle surface, slight border, no heavy contrast */
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  color: var(--color-text, #fff);
  box-shadow: none;
  padding: 12px 20px; /* slightly reduced padding for balance */
}

/* Status and notes */
html.dark #stripe-payment-module .stripe-note,
html[data-theme="dark"] #stripe-payment-module .stripe-note,
html.dark #stripe-payment-module .stripe-payment-status,
html[data-theme="dark"] #stripe-payment-module .stripe-payment-status,
#stripe-payment-module.dark .stripe-note,
#stripe-payment-module[data-theme="dark"] .stripe-note,
#stripe-payment-module.dark .stripe-payment-status,
#stripe-payment-module[data-theme="dark"] .stripe-payment-status {
  color: var(--color-text, #ddd);
}

/* Utility class applied by JS when Stripe native night appearance should be emulated */
.stripe-native-dark {
  /* hosts can add widget-scoped rules against this class to emulate Stripe's native dark visuals.
     Keep minimal to avoid empty-ruleset lint warnings. */
  --stripe-native-dark: 1;
}

/* When toggling theme, temporarily suppress transitions inside the module so
   host inputs and Stripe iframe swap without staggered animations that cause
   visible jitter. JS will add/remove this class for a short duration around
   the theme swap. */
#stripe-payment-module.stripe-theme--switching,
[id^="dw-stripe-payment-module"].stripe-theme--switching,
.dw-stripe-module.stripe-theme--switching,
[data-dw-stripe-id].stripe-theme--switching {
  /* Reduce repaint jitter by disabling most transitions inside the module */
  transition: none !important;
}
.stripe-theme--switching .donation-visual,
.stripe-theme--switching .custom-input,
.stripe-theme--switching .stripe-card,
.stripe-theme--switching .payment-element,
.stripe-theme--switching .payment-element * {
  transition: none !important;
}
.payment-element-mounts.stripe-theme--switching .payment-element { transition: none !important; }