/* donation-common.css
   Authoritative shared styles for donation UI (pledge modal and donation widget)
   Single source of truth for CTAs, pills, and pledge visuals.
*/

@import url('/css/phone-input.css');

html.dark .pledge-form,
html[data-theme="dark"] .pledge-form {
  /* Use a simple, flat dark surface in dark mode with a subtle light-gray / purple outline
     (remove previous gradients and decorative overlays). This keeps parity with the
     light-mode visual language but without gradients.) */
  background: #0b0b0d; /* solid dark surface */
  border: 1px solid rgba(142,20,255,0.06); /* subtle purple-tinted outline */
  box-shadow: 0 10px 30px rgba(0,0,0,0.6); /* modest elevation without glossy highlights */
  color: #efece6;
}

.pledge-form::before,
.pledge-form::after {
  /* Remove decorative gradient overlays for a flat, non-gradient design.
     Keep pseudo-elements present for layout parity but make them inert. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: transparent !important;
  mix-blend-mode: normal;
  opacity: 0 !important;
  transform: none;
  transition: none !important;
}

.pledge-form h3,
.pledge-form label,
.pledge-form input,
.pledge-form textarea,
.pledge-form select { color: inherit !important; }

.pledge-form input[type="text"],
.pledge-form input[type="email"],
.pledge-form input[type="date"],
.pledge-form textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid rgba(0,0,0,0.08) !important;
  padding: 0.5rem 0 !important;
  color: inherit !important;
  box-shadow: inset 0 -6px 8px rgba(255,255,255,0.03), inset 0 6px 10px rgba(0,0,0,0.06);
}

html.dark .pledge-form input[type="text"],
html.dark .pledge-form input[type="email"],
html.dark .pledge-form input[type="date"],
html[data-theme="dark"] .pledge-form input[type="text"],
html[data-theme="dark"] .pledge-form input[type="email"],
html[data-theme="dark"] .pledge-form input[type="date"],
html.dark .pledge-form textarea,
html[data-theme="dark"] .pledge-form textarea {
  border-bottom-color: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.96) !important;
}

.pledge-form ::placeholder { color: rgba(0,0,0,0.38) !important; }
html.dark .pledge-form ::placeholder, html[data-theme="dark"] .pledge-form ::placeholder { color: rgba(255,255,255,0.36) !important; }

/* Disabled / pre-filled date inputs: visually muted and non-interactive */
.pledge-form input[type="date"][readonly],
.pledge-form input[type="date"][aria-readonly="true"] {
  opacity: 0.56 !important;
  color: inherit !important;
  cursor: default !important;
  pointer-events: none !important;
}

html.dark .pledge-form input[type="date"][readonly],
html[data-theme="dark"] .pledge-form input[type="date"][readonly],
html.dark .pledge-form input[type="date"][aria-readonly="true"],
html[data-theme="dark"] .pledge-form input[type="date"][aria-readonly="true"] {
  opacity: 0.56 !important;
  color: rgba(255,255,255,0.72) !important;
  pointer-events: none !important;
}

/* CTA: gem inset button - canonical */
.pledge-form #pledgeButton {
  display: block !important;
  width: 100% !important;
  padding: 1rem !important;
  border-radius: 0.8rem !important;
  font-weight: 900 !important;
  border: none !important;
  color: inherit !important;
  position: relative;
  overflow: visible;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: transform 160ms ease, box-shadow 200ms ease !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.36), inset 0 -6px 18px rgba(0,0,0,0.36) !important;
}

:root .pledge-form #pledgeButton {
  /* Light-mode primary CTA: purple gradient to match modal CTA */
  background: linear-gradient(180deg, rgba(142,20,255,0.96), rgba(120,10,230,0.96)) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.12) !important;
  border: 1px solid rgba(142,20,255,0.12) !important;
  box-shadow: 0 12px 34px rgba(80,30,130,0.12), inset 0 6px 18px rgba(255,255,255,0.05) !important;
}

html.dark .pledge-form #pledgeButton, html[data-theme="dark"] .pledge-form #pledgeButton {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), linear-gradient(180deg, #111214 0%, #000000 100%) !important;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.72), inset 0 8px 28px rgba(255,255,255,0.02) !important;
}

.pledge-form #pledgeButton:hover {
  transform: translateY(-2px) scale(1.0) !important;
}

:root .pledge-form #pledgeButton:hover {
  background: linear-gradient(180deg, rgba(120,10,230,0.98), rgba(100,4,200,0.98)) !important;
  box-shadow: 0 14px 40px rgba(80,30,130,0.16), inset 0 6px 18px rgba(0,0,0,0.08) !important;
  color: #ffffff !important;
}

html.dark .pledge-form #pledgeButton:hover, html[data-theme="dark"] .pledge-form #pledgeButton:hover {
  background: linear-gradient(180deg, #000000 0%, #050505 100%) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,0.8), inset 0 6px 18px rgba(255,255,255,0.02) !important;
  color: #fff !important;
}

/* Ensure the pledge CTA shows the canonical brand focus ring when keyboard-focused.
   This rule is added here (the authoritative donation styles) so it wins over
   base box-shadow declarations that intentionally use !important for visuals. */
.pledge-form #pledgeButton:focus-visible,
:root .pledge-form #pledgeButton:focus-visible,
html.dark .pledge-form #pledgeButton:focus-visible,
html[data-theme="dark"] .pledge-form #pledgeButton:focus-visible {
  outline: none !important;
  box-shadow: var(--brand-focus-ring) !important;
}

/* ---- Donation pills & CTA (shared canonical) ---- */
/* Reuse donation-base rules but centralize in this file for pledge+widget */
.donation-visual, .amount-visual {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 96px !important;
  height: 48px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  /* Match canonical contribute CTA in light mode */
  background: var(--donation-cta-bg, #f3e8d9) !important;
  color: var(--donation-cta-color, #060606) !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(2,6,23,0.12) !important;
  border: 1px solid var(--donation-cta-border, #e6d3b8) !important;
  transition: transform .16s cubic-bezier(.2,.9,.3,1), box-shadow .16s, background .12s !important;
  font-size: var(--font-size-base) !important;
  position: relative !important;
  text-align: center !important;
}

/* PayPal preset sizing and wrapper - ensure PayPal renders at the same
   dimensions as other preset pills and plays nicely with iframe SDKs. */
.donation-label--paypal {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 96px !important;
  height: 48px !important;
  position: relative !important;
  overflow: visible !important;
}

.paypal-button-container {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Override PayPal SDK iframe sizing to match our preset pills */
.paypal-button-container iframe {
  border-radius: 12px !important;
  width: 96px !important;
  height: 48px !important;
}

.donation-input:checked + .donation-visual, .donation-amount[aria-pressed="true"] .amount-visual {
  /* In light mode, checked pills match canonical CTA visuals */
  background: var(--donation-cta-bg, #f3e8d9) !important;
  color: var(--donation-cta-color, #060606) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.28) !important;
  border: 1px solid var(--donation-cta-border, #e6d3b8) !important;
}

/* Force dark-mode checked visuals to black/white and use the dark border
   This high-specificity block ensures it overrides other theme files. */
html.dark .donation-input:checked + .donation-visual,
html[data-theme="dark"] .donation-input:checked + .donation-visual,
html.dark .donation-amount[aria-pressed="true"] .amount-visual,
html[data-theme="dark"] .donation-amount[aria-pressed="true"] .amount-visual,
#donation-widget-root .stripe-native-dark .donation-input:checked + .donation-visual,
#donation-widget-root .stripe-native-dark .donation-amount[aria-pressed="true"] .amount-visual,
#dw-stripe-payment-module.stripe-native-dark .donation-input:checked + .donation-visual,
#dw-stripe-payment-module.stripe-native-dark .donation-amount[aria-pressed="true"] .amount-visual,
.dw-stripe-module.dark .donation-input:checked + .donation-visual,
.dw-stripe-module.dark .donation-amount[aria-pressed="true"] .amount-visual {
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid var(--donation-cta-border-dark, #374151) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.72) !important;
}

.donation-visual .check, .amount-visual .check {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: var(--brand-color) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18) !important;
  opacity: 0 !important;
  transform: scale(.8) !important;
  transition: opacity .12s ease, transform .12s ease !important;
}

.donation-input:checked + .donation-visual .check, .donation-amount[aria-pressed="true"] .amount-visual .check { opacity:1 !important; transform:scale(1) !important; }

/* Contribute CTA: canonical look used by both widget and form */
.contribute-cta {
  display: inline-block !important;
  width: 100% !important;
  padding: 12px 16px !important;
  margin-top: 8px !important;
  min-height: 48px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  text-align: center !important;
  background: #f3e8d9 !important;
  color: #060606 !important;
  border: 1px solid #e6d3b8 !important;
  box-shadow: 0 6px 18px rgba(2,6,23,0.12) !important;
}

.contribute-cta.professional { background:#000000 !important; color:#f9fafb !important; border:1px solid var(--donation-cta-border-dark, #374151) !important; }
.contribute-cta svg { width:14px !important; height:14px !important; flex:0 0 14px !important; display:inline-block !important; vertical-align:middle !important; margin-right:8px !important; fill:currentColor !important; }
.contribute-cta:hover { background:#374151 !important; border-color:#4b5563 !important; }
.contribute-cta:focus { outline: none !important; box-shadow: var(--brand-focus-ring) !important; }

html.dark .contribute-cta, html[data-theme="dark"] .contribute-cta { background:#000000 !important; color:#f9fafb !important; border:1px solid var(--donation-cta-border-dark, #374151) !important; }

/* Ensure module-hosted CTAs cannot override canonical visuals */
#stripe-payment-module .contribute-cta,
[id^="dw-stripe-payment-module"] .contribute-cta,
.dw-stripe-module .contribute-cta,
[data-dw-stripe-id] .contribute-cta {
  background: var(--donation-cta-bg, #f3e8d9) !important;
  color: var(--donation-cta-color, #060606) !important;
  border: 1px solid var(--donation-cta-border, #e6d3b8) !important;
  box-shadow: 0 6px 18px rgba(2,6,23,0.12) !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
}

/* Dark-mode high specificity parity */
html.dark #stripe-payment-module .contribute-cta,
html[data-theme="dark"] #stripe-payment-module .contribute-cta,
[id^="dw-stripe-payment-module"].dark .contribute-cta,
[id^="dw-stripe-payment-module"][data-theme="dark"] .contribute-cta {
  /* Use black background and white text in dark mode to match request */
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid var(--donation-cta-border-dark, #374151) !important;
  box-shadow: none !important;
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .pledge-form::before, .pledge-form::after { transition: none !important; }
  .contribute-cta { transition: none !important; transform: none !important; box-shadow: none !important; }
}