/* stripe-trust-badge styles are centralized in /js/stripe-trust-badge.js
   This CSS file intentionally does NOT duplicate those styles. */

/* Ensure visibility in dark theme when global theme class is applied */
/* Badge color is intentionally forced to emerald and should not change with theme. */

/* Donation widget root */
@import url('/css/donation-common.css');
/* donation-common.css is the single authoritative source for pill and CTA visuals */
/* Place the floating donation root in the right control gutter so it sits
   below the pledge (flame) toggle. Use pointer-events none on the root but
   allow the tab to be interactive. This mirrors the control-gutter layout. */
#donation-widget-root {
  position: fixed;
  top: 1.25rem;
  /* Offset from the viewport edge plus the control gutter so the panel clears the gutter.
     Use the CSS variable exposed in theme-system.njk with sensible fallbacks. */
  right: calc(env(safe-area-inset-right, 0px) + var(--control-gutter-width, 4rem));
  z-index: 1200;
  pointer-events: none;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
}


/* Panel (anchored container approach) */
.donation-widget-container {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
/* Panel now opens leftward from the tab so it doesn't clip on the right edge.
   We set transform-origin accordingly and shift positioning to anchor from the
   right edge of the tab. */
.donation-widget-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0; /* anchor to the right side of the tab */
  width: 340px;
  max-width: calc(100vw - 2rem);
  box-sizing: border-box;
  background: var(--site-bg);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 18px 48px rgba(2,6,23,0.16);
  transform-origin: top right; /* animate from right so it expands leftward */
  transition: opacity 0.16s ease, transform 0.16s ease;
  opacity: 0;
  transform: translateY(-6px) scale(0.99);
  pointer-events: none;
  color: var(--site-text);
  border: 1px solid rgba(0,0,0,0.04);
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  overflow-x: hidden; /* Prevent horizontal scroll */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* Prevent scroll chaining */
  isolation: isolate;
  contain: layout;
}
.donation-widget-panel[aria-hidden="false"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Floating tab visuals were intentionally removed so the donation toggle
  inherits the canonical .theme-toggle / control-gutter styles used across
  the site. Any widget-specific behavior should still use the existing
  structural ids/classes (e.g. #donation-widget-root) while visuals come
  from the shared control styles. */

/* Inner Layout */
.donation-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.donation-panel-close { background: transparent; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--site-text); }

/* Single-source close styling: defer visuals to the canonical .theme-toggle class.
   - When inserted into the theme-toggle portal the control should carry
     .theme-toggle and inherit visuals automatically.
   - When moved into the panel (fullscreen) we position it via fixed coords
     written by JS into --dw-close-left and --dw-close-top. This keeps CSS
     minimal and avoids duplication. */
.donation-close--portal-attached { display: inline-flex; align-items: center; justify-content: center; width: var(--theme-toggle-size, 3rem); height: var(--theme-toggle-size, 3rem); margin: 0; }

@media (max-width: 640px) { .donation-close--portal-attached { width: 2.75rem; height: 2.75rem; } }
@media (max-width: 480px) { .donation-close--portal-attached { width: 2.5rem; height: 2.5rem; } }



.donation-lead {
  margin: 0 0 8px 0;
  font-size: var(--font-size-base);
  color: var(--site-text);
  opacity: 0.85;
}

/* Stripe trust microcopy placeholder used both in shadow-hosted tab and injected panel */
.stripe-trust-placeholder {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  color: var(--site-text);
}

/* Ensure floating Stripe module gets the extra top spacing above preset pills.
   High-specificity selector to win over other module-level selectors and
   prevent inline-style-like precedence issues. */
#dw-stripe-payment-module.preset-row.donation-amounts,
#dw-stripe-payment-module .preset-row.donation-amounts,
.dw-stripe-module .preset-row.donation-amounts {
  margin-top: 16px !important;
}

/* Amount Buttons - deterministic grid so buttons keep fixed size and wrapping never stretches panel */
.donation-amounts {
  /* Compact wrapping flex layout to reduce vertical space usage
     and avoid forcing a vertical scrollbar on small viewports. */
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* slightly tighter gap to allow more pills per row */
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Buttons remain fixed-size and cannot grow */
.donation-amount {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  position: relative;
}
.donation-amount .amount-visual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px; /* reduced min width for tighter fit */
  height: 40px; /* reduced height for compactness */
  padding: 4px 8px; /* reduced inner padding */
  border-radius: 10px;
  background: #fff;
  color: #000;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform .12s cubic-bezier(.2,.9,.3,1), box-shadow .12s, background .1s;
  font-size: 0.95rem; /* slightly smaller type to fit */
  position: relative;
}
.donation-amount:hover .amount-visual {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.10);
}
.donation-visual {
  /* mirror stripe-payment pills but more compact for floating widget */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px; /* narrower fixed width to reduce panel height */
  max-width: none;
  height: 40px;
  padding: 4px 8px; /* reduced horizontal padding */
  border-radius: 10px;
  /* Use canonical CTA vars for light mode */
  background: var(--donation-cta-bg, #f3e8d9);
  color: var(--donation-cta-color, #060606);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid var(--donation-cta-border, #e6d3b8);
  transition: transform .12s cubic-bezier(.2,.9,.3,1), box-shadow .12s, background .1s;
  font-size: 0.95rem;
  position: relative;
  text-align: center;
}

/* Stripe-native dark theme helper class applied to the floating widget root
   JS toggles this class when unifiedThemeManager reports dark mode. This keeps
   host inputs and pill visuals visually consistent with Stripe's 'night' appearance. */
#dw-stripe-payment-module.stripe-native-dark, #donation-widget-root .stripe-native-dark {
  --stripe-host-bg: #0b1220; /* dark panel background */
  --stripe-host-text: #e6eef8; /* primary text on dark */
  --stripe-host-muted: rgba(230,238,248,0.75); /* muted placeholder */
  --stripe-host-border: rgba(255,255,255,0.06);
}

/* COMPREHENSIVE DARK MODE: All dark mode contexts */
#dw-stripe-payment-module.stripe-native-dark .donation-visual,
#donation-widget-root .stripe-native-dark .donation-visual,
html.dark .donation-visual,
html[data-theme="dark"] .donation-visual,
.dark .donation-visual,
.donation-modal-panel.dark .donation-visual {
  background: #000 !important; /* black bg for dark mode */
  color: #fff !important; /* white text for dark mode */
  border: 1px solid var(--donation-cta-border-dark, #374151) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.36);
}

#dw-stripe-payment-module.stripe-native-dark #stripe-custom-amount,
#donation-widget-root .stripe-native-dark #stripe-custom-amount {
  background: var(--stripe-host-bg);
  color: var(--stripe-host-text);
  border-color: var(--stripe-host-border);
}

#dw-stripe-payment-module.stripe-native-dark #stripe-custom-amount::placeholder,
#donation-widget-root .stripe-native-dark #stripe-custom-amount::placeholder {
  color: var(--stripe-host-muted);
}

/* widget-specific override to keep pill sizing local to the widget */
#donation-widget-root .donation-visual {
  width: 92px !important;
  max-width: none !important;
}

/* Make the 'Custom' preset span the full width of the grid so it sits centered
   and visually aligned with Image 2. This selector targets the label used in
   injected markup: label[data-stripe-amount="custom"] */
/* Do not force Custom to span the full row. Custom should behave like
   other pills and be centered via the flex row. Previously this forced
   a grid span which conflicts with the centered rows approach. */
/* label[data-stripe-amount="custom"],
   label[data-stripe-amount="custom"] .donation-visual {
     grid-column: 1 / -1;
     justify-self: center;
     max-width: 180px;
   } */

/* Ensure the custom input field (if present) also keeps balanced spacing */
.custom-row {
  margin-top: 16px;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
}

/* Selected state when using radio inputs inside injected dw module */
.donation-input:checked + .donation-visual {
  /* Light mode: use CTA vars for checked pills */
  background: var(--donation-cta-bg, #f3e8d9);
  color: var(--donation-cta-color, #060606);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
  border: 1px solid var(--donation-cta-border, #e6d3b8);
}

/* Check badge for both legacy and injected visuals */
.donation-visual .check,
.amount-visual .check {
  position:absolute;
  top:-6px;
  right:-6px;
  width:20px;
  height:20px;
  border-radius:999px;
  background: var(--brand-color, #8e14ff);
  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;
}

.donation-amount[aria-pressed="true"] .amount-visual,
.donation-input:checked + .donation-visual {
  background: var(--donation-cta-bg, #f3e8d9);
  color: var(--donation-cta-color, #060606);
}

.donation-amount[aria-pressed="true"] .amount-visual .check,
.donation-input:checked + .donation-visual .check {
  opacity:1;
  transform:scale(1);
}
.donation-amount[aria-pressed="true"] .amount-visual {
  background: #000000;
  color: #ffffff;
/* Remove any blue focus or outline that originates from Stripe or browsers */
#donation-widget-root .donation-input:focus + .donation-visual,
#donation-widget-root .donation-visual:focus,
#donation-widget-root .donation-label:focus {
  outline: none !important;
  box-shadow: none !important;
}

  transform: scale(1.02);
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
  border: 1px solid #000000;
}

/* amount visual */
.amount-visual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-weight: 700;
  position: relative;
  padding: 0 4px; /* tighten inner horizontal padding */
  line-height: 1;
  font-size: var(--font-size-base);
}

/* checked badge */
.amount-visual .check {
  position:absolute;
  top:-6px;
  right:-6px;
  width:20px;
  height:20px;
  border-radius:999px;
  background: var(--brand-color, #8e14ff);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
  opacity:0;
  transform:scale(.8);
  transition:opacity .12s ease, transform .12s ease;
}
.donation-amount[aria-pressed="true"] .amount-visual .check {
  opacity:1;
  transform:scale(1);
}

/* 'Other' input spans full row so it cannot stretch columns */
.donation-other {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  align-items: center;
}
.donation-other input[type="number"] {
  width: 110px;
  max-width: 40vw;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  background: transparent;
  color: var(--site-text);
  box-sizing: border-box;
  min-width: 0;
}

/* 'Other' input */
.donation-other {
  display: flex;
  gap: 8px;
  align-items: center;
}
.donation-other input[type="number"] {
  width: 110px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  background: transparent;
  color: var(--site-text);
}

/* Make the custom text input visually match Stripe Elements (inset rounded field) */
.custom-input,
#stripe-custom-amount,
.donation-other input[type="number"] {
  -webkit-appearance: none;
  appearance: none;
  background: var(--stripe-element-bg, #ffffff);
  color: var(--site-text);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 2px rgba(2,6,23,0.04) inset;
  padding: 0;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.25;
  width: 100%;
  max-width: 220px;
  box-sizing: border-box;
}

.custom-input::placeholder,
[data-stripe-custom-amount]::placeholder,
#stripe-custom-amount::placeholder {
  color: rgba(0,0,0,0.45);
}

/* Focus state similar to Stripe Elements focus ring */
.custom-input:focus,
[data-stripe-custom-amount]:focus,
.donation-other input[type="number"]:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.12);
  border-color: rgba(59,130,246,0.9);
}

/* Dark mode: adapt the element to dark theme - ENHANCED SPECIFICITY */
html.dark .custom-input,
html[data-theme="dark"] .custom-input,
html.dark [data-stripe-custom-amount],
html[data-theme="dark"] [data-stripe-custom-amount],
html.dark #stripe-custom-amount,
html[data-theme="dark"] #stripe-custom-amount,
/* Additional selectors for donation modal and other contexts */
.dark .custom-input,
.dark [data-stripe-custom-amount],
.dark #stripe-custom-amount,
/* Container-scoped dark mode (for floating widget) */
#donation-widget-root.stripe-native-dark .custom-input,
#donation-widget-root.stripe-native-dark [data-stripe-custom-amount],
#donation-widget-root.stripe-native-dark #stripe-custom-amount,
/* Donation modal specific dark mode */
.donation-modal-panel.dark .custom-input,
.donation-modal-panel.dark [data-stripe-custom-amount],
.donation-modal-panel.dark #stripe-custom-amount {
  background: #0b0b0b !important;
  color: #e6e6e6 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.6) inset !important;
}

/* Dark mode placeholders */
html.dark .custom-input::placeholder,
html[data-theme="dark"] .custom-input::placeholder,
html.dark [data-stripe-custom-amount]::placeholder,
html[data-theme="dark"] [data-stripe-custom-amount]::placeholder,
html.dark #stripe-custom-amount::placeholder,
html[data-theme="dark"] #stripe-custom-amount::placeholder,
.dark .custom-input::placeholder,
.dark [data-stripe-custom-amount]::placeholder,
.dark #stripe-custom-amount::placeholder,
#donation-widget-root.stripe-native-dark .custom-input::placeholder,
#donation-widget-root.stripe-native-dark [data-stripe-custom-amount]::placeholder,
#donation-widget-root.stripe-native-dark #stripe-custom-amount::placeholder {
  color: rgba(255,255,255,0.5) !important;
}

/* Keep the input visually consistent when used inside the floating widget */
#donation-widget-root .custom-input,
#donation-widget-root [data-stripe-custom-amount],
#donation-widget-root #stripe-custom-amount {
  max-width: 180px;
}

/* Actions */
.donation-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}
.donate-pledge-link {
  background: var(--site-bg);
  border: 1px solid rgba(0,0,0,0.06);
  color: var(--site-text);
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-base);
}
.donate-pledge-link.cta-strong,
.donate-pledge-link[data-cta="strong"] {
  background: #111827; /* solid dark background for link-styled CTAs */
  color: #ffffff;
  border-color: rgba(0,0,0,0.2);
  box-shadow: 0 8px 26px rgba(2,6,23,0.18);
  transition: transform 160ms cubic-bezier(.2,.9,.3,1), box-shadow 160ms ease, background 160ms ease;
}

html.dark .contribute-cta.professional,
html[data-theme="dark"] .contribute-cta.professional,
html.dark #stripeContributeButton,
html[data-theme="dark"] #stripeContributeButton,
.donation-widget-root .stripe-native-dark .contribute-cta.professional,
.donation-widget-root .stripe-native-dark #stripeContributeButton {
  /* Use black background and white text for Stripe-contribute in dark mode */
  background: #000000;
  color: #ffffff;
  border-color: var(--donation-cta-border-dark, #374151);
  box-shadow: 0 8px 26px rgba(2,6,23,0.18);
  transition: transform 160ms cubic-bezier(.2,.9,.3,1), box-shadow 160ms ease, background 160ms ease;
}

.donate-pledge-link.cta-strong:hover,
.donate-pledge-link.cta-strong:focus,
.contribute-cta.professional:hover,
.contribute-cta.professional:focus,
#stripeContributeButton:hover,
#stripeContributeButton:focus {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(2,6,23,0.22);
}

.donate-pledge-link.cta-strong:active,
.contribute-cta.professional:active,
#stripeContributeButton:active {
  transform: translateY(1px) scale(0.995);
  box-shadow: 0 8px 20px rgba(2,6,23,0.14);
}

/* Accessible focus ring for CTA */
.donate-pledge-link.cta-strong:focus-visible,
.contribute-cta.professional:focus-visible,
#stripeContributeButton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.14), 0 18px 48px rgba(2,6,23,0.22);
}

@media (prefers-reduced-motion: reduce) {
  .donate-pledge-link.cta-strong,
  .donate-pledge-link.cta-strong:hover,
  .donate-pledge-link.cta-strong:active,
  .contribute-cta.professional,
  .contribute-cta.professional:hover,
  .contribute-cta.professional:active,
  #stripeContributeButton,
  #stripeContributeButton:hover,
  #stripeContributeButton:active {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Focus states */
.donation-amount:focus-visible,
.donate-pledge-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.14);
}

/* Provide slightly reduced bottom padding to lower vertical space usage
   while still respecting safe-area insets. */
.donation-widget-panel {
  padding: 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

/* Fullscreen fallback for small or short viewports
   Ensures the panel never deforms on narrow widths or very short heights */
@media (max-width: 520px), (max-height: 700px) {
  .donation-widget-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: none;
    margin: 0;
    border-radius: 0;
    padding: 1rem;
    transform-origin: center;
    overflow-y: auto;
  }

  /* ensure the root sits at the viewport origin for the overlay */
  #donation-widget-root {
    left: 0;
    top: 0;
  }
}
/* Dark theme */
/* donation-specific dark-mode tab styles removed so the toggle inherits
   the canonical .theme-toggle / control-gutter dark styles */
html.dark .donation-widget-panel {
  /* Use a solid background in dark mode to avoid transparency issues over dark pages */
  background: var(--site-bg, #0b0b0b);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 48px rgba(0,0,0,0.6);
}
/* In dark mode, ensure the tab-trust pill has slightly increased contrast */
html.dark .tab-trust, html[data-theme="dark"] .tab-trust {
  background: rgba(255,255,255,0.03);
  color: var(--site-text);
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
}
html.dark .donation-amount {
  background: #0f0f10;
  border: 1px solid rgba(255,255,255,0.04);
  color: #eaeaea;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}
html.dark .donation-amount[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--brand-color, #8e14ff), rgba(153,27,27,0.6));
  color: #fff;
  box-shadow: 0 18px 48px rgba(142,20,255,0.32);
}

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Stripe status note inside donation widget */
.stripe-note {
  color: var(--site-text);
  font-size: 0.9rem;
  text-align: center;
}
.stripe-error {
  color: var(--accent-color, var(--brand-color, #8e14ff)) !important;
}

/* Tab-specific svg/animation and pseudo-element rules removed so the
   control uses the shared .theme-toggle / control-gutter animations. */

@keyframes dw-ripple {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.6); }
  60% { opacity: 0.36; transform: translate(-50%, -50%) scale(1.5); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
}

/* Keyframes: single-focus surge (modest) */
@keyframes dw-svg-surge {
  0% { transform: translateY(0) rotate(0deg) scale(1); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
  30% { transform: translateY(-6px) rotate(-2.2deg) scale(1.04); filter: drop-shadow(0 8px 14px rgba(0,0,0,0.12)); }
  60% { transform: translateY(4px) rotate(1.6deg) scale(0.995); filter: drop-shadow(0 6px 10px rgba(0,0,0,0.10)); }
  100% { transform: translateY(0) rotate(0deg) scale(1); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
}

/* Respect user's reduced-motion preference - handled globally for control toggles */
@media (prefers-reduced-motion: reduce) {
  /* rely on site-wide reduced-motion rules for control toggles */
}

/* Tab trust pill (appears adjacent to floating tab) */
.tab-trust {
  display: none;
  position: absolute;
  left: 72px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--site-bg);
  color: var(--site-text);
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(2,6,23,0.08);
  font-size: 0.9rem;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.theme-toggle:focus + .tab-trust,
.theme-toggle:hover + .tab-trust,
#donation-widget-root:hover .tab-trust { display: inline-flex; }