/* ==========================================================================
   Wildsforge cookie consent banner (markup injected by consent.js).

   Uses the page's design tokens with fallbacks. Pages with their own fixed
   bottom UI can set --consent-offset to sit above it (the calculator's
   mobile summary bar). Accept and Reject are styled identically on purpose:
   UK guidance expects rejecting to be as easy as accepting.
   ========================================================================== */
.consent {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--consent-offset, 12px) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 16px;
  border: 1px solid var(--border, #ddd6c4);
  border-radius: 14px;
  background: var(--surface, #fffdf8);
  color: var(--text, #2a2a22);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.22);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  animation: consent-rise 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.consent[hidden] { display: none; }

.consent__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.consent__text { flex: 1 1 320px; margin: 0; }
.consent__text a { color: var(--accent, #3f7a3a); }
.consent__actions { display: flex; gap: 10px; }

.consent__btn {
  min-width: 96px;
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--accent, #3f7a3a);
  border-radius: 12px;
  background: var(--accent, #3f7a3a);
  color: var(--accent-text, #ffffff);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.consent__btn:hover { filter: brightness(1.08); }
.consent__btn:active { transform: scale(0.97); }

/* Keep other floating UI out of the way while the banner is up */
html.consent-open .donate { display: none; }
body.is-locked .consent { display: none; }

/* Footer "Cookie settings" control: a button that looks like the footer links */
.prose .link-button { color: var(--accent, #3f7a3a); }
.link-button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

@keyframes consent-rise { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
  .consent { animation: none; }
}

@media (max-width: 560px) {
  .consent__actions { width: 100%; }
  .consent__btn { flex: 1; }
}