/* Sticky donate bar — mobile only.
   Pinned bottom, quick-amount chips, always-visible donate path. */

.donate-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  display: none;
  background: linear-gradient(180deg, rgba(10, 20, 48, 0.97) 0%, #050c20 100%);
  border-top: 1px solid rgba(247, 231, 176, 0.4);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
  padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
  font-family: "Nunito", system-ui, sans-serif;
  animation: db-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (max-width: 740px) { .donate-bar { display: block; } }

.donate-bar-inner {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 540px;
  margin: 0 auto;
}
.donate-bar-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #f7e7b0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.donate-bar-label svg { width: 16px; height: 16px; }
.donate-bar-chips {
  display: flex;
  gap: 0.4rem;
  flex: 1;
  justify-content: flex-end;
}
.donate-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 0.55rem 0.75rem;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  border-radius: 999px;
  background: rgba(247, 231, 176, 0.08);
  color: #f7e7b0;
  border: 1px solid rgba(247, 231, 176, 0.4);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.donate-chip:hover,
.donate-chip:active { transform: translateY(-1px); background: rgba(247, 231, 176, 0.18); }
.donate-chip-primary {
  background: linear-gradient(135deg, #f7e7b0, #d4af52);
  color: #0a1430;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(212, 175, 82, 0.35);
}
.donate-chip-primary:hover,
.donate-chip-primary:active { box-shadow: 0 6px 18px rgba(212, 175, 82, 0.5); }
.donate-chip-other { font-size: 0.72rem; letter-spacing: 0.04em; }

/* Make sure page content isn't hidden behind the bar on mobile */
@media (max-width: 740px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

@keyframes db-in {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .donate-bar { animation: none; } }

/* Lift the cookie banner so it doesn't sit on top of the donate bar on mobile */
@media (max-width: 740px) {
  .cookie-banner { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}