/* ==========================================================================
   Wildsforge support tag: floating "Buy me a coffee" pill with an
   explanatory popover. Shared by every page; markup is injected by donate.js.

   Uses the page's design tokens (--surface, --border, --muted, --text) with
   fallbacks. Pages can set --donate-offset to lift the tag above their own
   fixed UI (e.g. the calculator's mobile summary bar).
   ========================================================================== */
.donate {
  position: fixed;
  right: 20px;
  bottom: calc(var(--donate-offset, 20px) + env(safe-area-inset-bottom, 0px));
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.5s;
}
.donate.is-visible { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }

/* Pages lock body scroll while a modal (e.g. a bottom sheet) is open; stay out of the way */
body.is-locked .donate { display: none; }

/* Own button reset so the tag looks the same whatever the page's button styles are */
.donate button {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.donate__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #ffd54a;
  color: #2a2a22;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.donate__tag:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3); }
.donate__tag:active { transform: scale(0.96); }

.donate__cup { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.donate__steam { animation: donate-steam 2.6s ease-in-out infinite; }
.donate__steam:nth-of-type(4) { animation-delay: 0.5s; }
.donate__steam:nth-of-type(5) { animation-delay: 1s; }
.donate__label--short { display: none; }

.donate__panel {
  width: 290px;
  max-width: calc(100vw - 24px);
  padding: 14px;
  border: 1px solid var(--border, #ddd6c4);
  border-radius: 14px;
  background: var(--surface, #fffdf8);
  color: var(--text, #2a2a22);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  animation: donate-rise 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.donate__panel[hidden] { display: none; }
.donate__panel h2 { margin: 0 0 6px; font-size: 16px; }
.donate__panel p { margin: 0 0 12px; font-size: 14px; }
.donate__actions { display: flex; align-items: center; gap: 10px; }

.donate__cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 12px;
  background: #ffd54a;
  color: #2a2a22;
  font-weight: 700;
  text-decoration: none;
}
.donate__cta:hover { filter: brightness(0.95); }
.donate__later {
  min-height: 36px;
  padding: 8px 6px;
  background: transparent;
  color: var(--muted, #5f5c4f);
  font-weight: 500;
}

@keyframes donate-steam {
  0%   { opacity: 0; transform: translateY(2px); }
  40%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-3px); }
}
@keyframes donate-rise { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  .donate, .donate * { animation: none !important; transition: none !important; }
}

/* Mobile: smaller tag reading "Support" */
@media (max-width: 820px) {
  .donate { right: 12px; bottom: calc(var(--donate-offset, 12px) + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .donate__tag { min-height: 36px; padding: 6px 12px; gap: 6px; font-size: 13px; }
  .donate__cup { width: 18px; height: 18px; }
  .donate__label--long { display: none; }
  .donate__label--short { display: inline; }
}