/*
 * Donation Box 2026 — styles for the two Divi donation modules:
 *   - Tam_Mod_DonationBoxFullRow        (.tam_donationbox) — hero + amount buttons + FundBar
 *   - Tam_Mod_DonationProgressBar_FullWidth (.tam_donation_bar) — sticky full-width progress bar
 *
 * Ported from donationbox/index.html. Shared visuals (CSS variables, the
 * "Donate now" button, the fund amounts) live under .tam_donation so both
 * modules stay consistent; module-specific layout is scoped under
 * .tam_donationbox / .tam_donation_bar. All id-based selectors from the
 * standalone demo are rendered as classes here so multiple instances can
 * coexist on a page.
 */

/* ---------- shared base ---------- */
.tam_donation,
.tam_donation_bar {
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --slate-200: #d9d1dc;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --bg: #0b1120;
  --btn: #e0c479;

  background: var(--bg);
  color: var(--slate-200);
  font-family: "Fira Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.tam_donation * { box-sizing: border-box; }

/* ---- "Donate now" button (shared by box + sticky bar) ---- */
.tam_donation .donate-now {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.6rem 0.5rem;
  border: 1px solid #000;
  background: var(--btn);
  color: #1a1a1a;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.tam_donation .donate-now:hover { filter: brightness(0.9); color: #000; }
.tam_donation .donate-now:active { transform: scale(0.98); }

.tam_donation .donate-now-input {
  appearance: none;
  -moz-appearance: textfield;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid #fef9c3;
  color: #1a1a1a;
  font-size: 1.05rem;
  font-weight: 700;
  width: 5.5ch;
  padding: 0;
  margin: 0 0.6rem;
  margin-bottom: -2.5px;
  outline: none;
  text-align: center;
}
.tam_donation .donate-now-input:focus { border-bottom-color: #fff; }
.tam_donation .donate-now-input::-webkit-outer-spin-button,
.tam_donation .donate-now-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tam_donation .donate-now-word { pointer-events: none; }
.tam_donation .donate-now-currency {
  pointer-events: none;
  margin-left: -1.15rem;
  margin-right: 0.75rem;
}

/* Animated ellipsis — hidden until .donating is toggled on the button. */
.tam_donation .donate-now-dots { display: none; margin-left: 0.05em; }
.tam_donation .donate-now.donating .donate-now-dots { display: inline-flex; }
.tam_donation .donate-now.donating .donate-now-word { display: inline; }
.tam_donation .donate-now-dots span {
  animation: tam-donationbox-dotPulse 1.4s infinite;
  opacity: 0;
}
.tam_donation .donate-now-dots span:nth-child(2) { animation-delay: 0.2s; }
.tam_donation .donate-now-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes tam-donationbox-dotPulse {
  0%, 60%, 100% { opacity: 0; }
  30% { opacity: 1; }
}

/* ---- Fund amounts (shared: full FundBar + sticky bar compact view) ---- */
.tam_donation .fundbar-amounts {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.tam_donation .fundbar-current {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--emerald-400);
}
.tam_donation .fundbar-goal {
  font-size: 0.875rem;
  color: var(--slate-200);
}

/* ---------- DonationBox (.tam_donationbox) ---------- */
.tam_donationbox .layout {
  display: flex;
  flex-direction: row;
  gap: 0;
  padding: 0;
  max-width: 1100px;
  margin: 0 auto;
}
.tam_donationbox .pane {
  flex: 1 1 50%;
  min-width: 0;
  max-width: 30rem;
}
/* On wide screens let the hero pane grow to fill the available width while the
   donate pane stays at least 320px (capped at 30rem). Scoped to >=721px so the
   mobile column layout below is untouched. */
@media (min-width: 721px) {
  .tam_donationbox .pane.hero { flex: 1 1 auto; max-width: none; }
  .tam_donationbox .pane.donate { flex: 0 0 auto; min-width: 320px; max-width: 30rem; }
}
.tam_donationbox .card {
  border-radius: 0;
  padding: 0.75rem;
  flex: 1;
}

@media (max-width: 720px) {
  .tam_donationbox .hero .eyebrow { font-size: 0.6rem; }
  .tam_donationbox .hero h1 { font-size: clamp(22px, 6vw, 31px); }
  .tam_donationbox .donate-btn { font-size: 0.8rem; padding: 0.4rem 0.35rem; }
  .tam_donationbox .layout { flex-direction: column; }
  .tam_donationbox .pane { flex-basis: 100%; max-width: none; }
  /* -- slim FundBar on mobile -- */
  .tam_donationbox .fundbar { padding: 0.4rem 0.5rem 0.3rem; }
  .tam_donationbox .fundbar-header { margin-bottom: 0.15rem; }
  .tam_donationbox .fundbar-title { font-size: 0.75rem; }
  .tam_donationbox .fundbar-count { font-size: 0.65rem; }
  .tam_donationbox .fundbar-amounts { margin-bottom: 0.15rem; }
  .tam_donationbox .fundbar-current { font-size: 1rem; }
  .tam_donationbox .fundbar-goal { font-size: 0.7rem; }
  .tam_donationbox .fundbar-track { height: 0.4rem; }
  .tam_donationbox .fundbar-milestones { height: 0; overflow: hidden; }
  .tam_donationbox .fundbar-footer { font-size: 0.75rem; }
}

/* hero / donate box */
.tam_donationbox .hero .eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--emerald-400);
  margin: 0 0 0.2rem;
}
.tam_donationbox .hero h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(31px, 3vw, 44px);
  font-family: "Economica", Georgia, serif;
  font-weight: 700;
  color: var(--slate-200);
  line-height: 1.2;
}
.tam_donationbox .hero .hero-lede {
  margin: 0 0 0.75rem;
  font-size: 18px;
  line-height: 1.5;
  color: var(--slate-200);
}
.tam_donationbox .donate-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.tam_donationbox .donate-btn {
  appearance: none;
  border: 1px solid var(--slate-700);
  background: var(--btn);
  color: #1a1a1a;
  flex: 1 1 auto;
  padding: 0.45rem 0.4rem;
  border-radius: 0;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.05s;
}
.tam_donationbox .donate-btn:hover { filter: brightness(0.9); color: #000; }
.tam_donationbox .donate-btn:active { transform: scale(0.97); }

/* full FundBar (right pane of the box) */
.tam_donationbox .fundbar-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tam_donationbox .fundbar { padding: 0.75rem 0.75rem 0.5rem; width: 100%; }
.tam_donationbox .fundbar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.tam_donationbox .fundbar-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-200);
}
.tam_donationbox .fundbar-count {
  font-size: 0.75rem;
  color: var(--slate-200);
}
.tam_donationbox .fundbar-track {
  position: relative;
  height: 0.75rem;
  width: 100%;
  overflow: hidden;
  border-radius: 0;
  background: rgba(51, 65, 85, 0.6);
}
.tam_donationbox .fundbar-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  border-radius: 0;
  background: linear-gradient(to right, var(--emerald-500), var(--emerald-400));
  transition: width 0.5s ease;
}
.tam_donationbox .fundbar-milestones {
  position: relative;
  margin-top: 0.25rem;
  height: 3.5rem;
  width: 100%;
}
.tam_donationbox .fundbar-milestone {
  position: absolute;
  display: flex;
  flex-direction: column;
}
.tam_donationbox .fundbar-milestone.center { align-items: center; }
.tam_donationbox .fundbar-milestone.left { align-items: flex-start; }
.tam_donationbox .fundbar-milestone.right { align-items: flex-end; }
.tam_donationbox .fundbar-tick {
  height: 0.75rem;
  width: 0.125rem;
  border-radius: 0;
  background: var(--slate-600);
}
.tam_donationbox .fundbar-tick.reached { background: var(--emerald-400); }
.tam_donationbox .fundbar-label {
  margin-top: 0.25rem;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1.1;
  color: var(--slate-200);
  font-weight: 500;
}
.tam_donationbox .fundbar-value {
  white-space: nowrap;
  font-size: 10px;
  color: var(--slate-200);
  font-weight: 500;
}
.tam_donationbox .fundbar-milestone.reached .fundbar-label,
.tam_donationbox .fundbar-milestone.reached .fundbar-value { color: #fde047; }
.tam_donationbox .fundbar-footer {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fde047;
  text-align: center;
}
.tam_donationbox .fundbar-loading { font-size: 0.875rem; color: var(--slate-200); }
.tam_donationbox .fundbar-error { font-size: 0.875rem; color: #fb7185; }

/* ---------- Donation Progress Bar (.tam_donation_bar) ---------- */
/* Bottom-sticky full-width bar using a fixed-position stack system.
   Hidden at the top of the page; slides up and sticks to the bottom once
   the user scrolls past the top. */
.tam_donation_bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  width: 100%;
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.25s ease, visibility 0.25s;
}
.tam_donation_bar.is-stuck {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}
.tam_donation_bar .tam-donation-bar__layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  max-height: 55px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.275rem 0.55rem;
}
.tam_donation_bar .tam-donation-bar__fundbar {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0;
}
.tam_donation_bar .fundbar-amounts {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0;
  white-space: nowrap;
}
.tam_donation_bar .fundbar-current { font-size: 1.0625rem; }
.tam_donation_bar .fundbar-goal { font-size: 0.8125rem; color: var(--slate-200); }
.tam_donation_bar .tam-donation-bar__track {
  flex: 1 1 auto;
  display: block;
  position: relative;
  height: 3px;
  min-width: 3rem;
  background: rgba(63, 170, 152, 0.25);
  background: color-mix(in srgb, var(--progress, #3FAA98) 25%, transparent);
}
.tam_donation_bar .tam-donation-bar__progress {
  display: block;
  position: relative;
  height: 100%;
  width: 0;
  background: var(--progress, #3FAA98);
  transition: width 0.5s ease;
}
.tam_donation_bar .tam-donation-bar__progress::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(100%, -50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--progress, #3FAA98);
}

/* compact "Donate now" button sized to fit the bar */
.tam_donation_bar .donate-now {
  font-size: 0.975rem;
  padding: 0.33rem 0.5rem;
  width: auto;
  white-space: nowrap;
  margin-top: 0;
  flex: none;
}
.tam_donation_bar .donate-now-input {
  width: 4ch;
  font-size: 0.975rem;
  margin: 0 0.3rem;
  margin-bottom: -2.5px;
}
.tam_donation_bar .donate-now-currency {
  margin-left: -0.45rem;
  margin-right: 0.4rem;
  font-size: 0.975rem;
  color: inherit;
}

@media (max-width: 720px) {
  .tam_donation_bar .tam-donation-bar__layout { max-height: 45px; padding: 0.2rem 0.4rem; }
  .tam_donation_bar .donate-now { font-size: 0.875rem; padding: 0.275rem 0.4rem; }
  .tam_donation_bar .donate-now-input { width: 3.5ch; font-size: 0.875rem; }
  .tam_donation_bar .fundbar-current { font-size: 0.9375rem; }
  .tam_donation_bar .fundbar-goal { font-size: 0.75rem; }
  .tam_donation_bar .donate-now-currency { color: inherit; }
  .tam_donation_bar .tam-donation-bar__track { min-width: 1.5rem; }
}