/* Be The Change - dark gradient theme for BTCPay public pages (crowdfund + checkout).
   Upload in: Store settings -> General -> Branding -> Custom CSS.
   Always uses BTCPay's dark palette (ignores light/dark/auto) on a pure black background. */

/* 1. BTCPay's own dark-theme variables, applied in every mode */
:root {
  --btcpay-neutral-50: #0d1117;
  --btcpay-neutral-100: var(--btcpay-neutral-dark-900);
  --btcpay-neutral-200: var(--btcpay-neutral-dark-800);
  --btcpay-neutral-300: var(--btcpay-neutral-dark-700);
  --btcpay-neutral-400: var(--btcpay-neutral-dark-600);
  --btcpay-neutral-500: var(--btcpay-neutral-dark-500);
  --btcpay-neutral-600: var(--btcpay-neutral-dark-400);
  --btcpay-neutral-700: var(--btcpay-neutral-dark-300);
  --btcpay-neutral-800: var(--btcpay-neutral-dark-200);
  --btcpay-neutral-900: var(--btcpay-neutral-dark-100);
  --btcpay-bg-dark: var(--btcpay-neutral-50);
  --btcpay-bg-tile: var(--btcpay-bg-dark);
  --btcpay-body-bg-light: var(--btcpay-neutral-50);
  --btcpay-body-bg-hover: var(--btcpay-neutral-50);
  --btcpay-body-bg-rgb: 22, 27, 34;
  --btcpay-body-text: var(--btcpay-white);
  --btcpay-body-text-muted: var(--btcpay-neutral-600);
  --btcpay-body-text-warning-rgb: 255, 192, 67;
  --btcpay-body-text-rgb: 255, 255, 255;
  --btcpay-body-link-accent: var(--btcpay-primary-accent);
  --btcpay-body-link-accent-rgb: var(--btcpay-primary-accent-rgb);
  --btcpay-form-bg: var(--btcpay-bg-dark);
  --btcpay-form-text: var(--btcpay-neutral-800);
  --btcpay-form-text-label: var(--btcpay-neutral-900);
  --btcpay-form-border: var(--btcpay-neutral-200);
  --btcpay-header-bg: var(--btcpay-bg-dark);
  --btcpay-nav-link: var(--btcpay-neutral-500);
  --btcpay-nav-link-active: var(--btcpay-white);
  --btcpay-footer-link-accent: var(--btcpay-neutral-800);
  --btcpay-pre-bg: var(--btcpay-bg-dark);
  --btcpay-primary-accent: rgb(var(--btcpay-primary-accent-rgb));
  --btcpay-primary-accent-rgb: 30, 122, 68;
  --btcpay-secondary: transparent;
  --btcpay-secondary-text-active: var(--btcpay-primary);
  --btcpay-secondary-rgb: 22, 27, 34;
  --btcpay-warning-text: var(--btcpay-neutral-100);
  --btcpay-warning-text-hover: var(--btcpay-neutral-100);
  --btcpay-warning-text-active: var(--btcpay-neutral-100);
  --btcpay-warning-dim-text: var(--btcpay-neutral-200);
  --btcpay-light-dim-bg: var(--btcpay-neutral-50);
  --btcpay-light-shadow: rgba(66, 70, 73, 0.33);
  --btcpay-light-rgb: 33, 38, 45;
  --btcpay-dark-accent: var(--btcpay-neutral-600);
  --btcpay-dark-dim-bg: var(--btcpay-white);
  --btcpay-dark-shadow: rgba(211, 212, 213, 0.33);
  --btcpay-dark-rgb: 201, 209, 217;
}

/* 2. Pure black background + near-black cards */
:root {
  --btcpay-body-bg-rgb: 5, 7, 11;
  --btcpay-body-bg: #05070b;
  --btcpay-wizard-bg: #000000;
  --btcpay-footer-bg: #000000;
  --btcpay-bg-tile: #111111;
  --btcpay-body-bg-light: #111111;
  --btcpay-body-bg-medium: #1a1a1a;
  --btcpay-body-bg-hover: #1a1a1a;
  --btcpay-header-bg: #000000;
  --btcpay-form-bg: #111111;
  --btcpay-body-border-light: #262626;
  color-scheme: dark;
}


/* 3. Soft gradient background (navy left, warm olive top-right, deep green bottom-right) */
html { background-color: #05070b !important; }
body { background: transparent !important; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 0% 25%, rgba(30, 55, 105, 0.55), transparent 70%),
    radial-gradient(ellipse 55% 45% at 95% 0%, rgba(110, 85, 25, 0.40), transparent 70%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(25, 70, 45, 0.35), transparent 70%),
    radial-gradient(ellipse 60% 50% at 10% 100%, rgba(20, 35, 75, 0.45), transparent 70%),
    #05070b;
}

/* 4. Let the black backgrounds of the photos melt into the gradient */
#crowdfund-main-image,
#crowdfund-body-description img {
  mix-blend-mode: lighten;
}

/* 5. Slightly see-through cards so the gradient shows through */
.tile, .card { background-color: rgba(255, 255, 255, 0.04) !important; }
.modal-content { background-color: #0b0f17 !important; }

/* 6. Goal badge (replaces BTCPay's teal "bg-info" badge) - soft orange pill */
#crowdfund-header-target .badge,
#crowdfund-header-target .badge.bg-info {
  background: rgba(247, 147, 26, 0.12) !important;
  background-color: rgba(247, 147, 26, 0.12) !important;
  color: #F7931A !important;
  border: 1px solid rgba(247, 147, 26, 0.35) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}
#crowdfund-header-target .h5 { color: var(--btcpay-body-text-muted) !important; }

/* Alternative A - orange outline:
#crowdfund-header-target .badge { background: transparent !important; color: #F7931A !important; border: 1.5px solid #F7931A !important; border-radius: 999px !important; font-weight: 600 !important; }
   Alternative B - solid orange:
#crowdfund-header-target .badge { background: #F7931A !important; color: #0b0f17 !important; border-radius: 999px !important; font-weight: 700 !important; }
*/