/* ════════════════════════════════════════════════════════════
   BUFO DONATIONS — front-end styles v1.1.0
   ════════════════════════════════════════════════════════════

   Why this file exists
   --------------------
   The shortcodes ([bufo_donate_button], [bufo_donors_top],
   [bufo_donors_recent]) emitted `.co-donate` and `.fo-board` markup but
   the plugin shipped no front-end CSS at all — the only stylesheet was
   admin.css. The rules lived inline inside the theme's
   page-financiar-op.php, so the shortcodes rendered as unstyled markup
   anywhere else they were used, and the plugin could not be moved to
   another site or template without silently breaking.

   The rules now travel with the plugin that produces the markup. Colours
   read from the Broken UFO design tokens where present and fall back to
   the same literals otherwise, so the plugin still looks right if the
   theme is not active.

   Contrast has been corrected along the way: helper and note text sat at
   20–35% white over near-black (roughly 1.7–2.9:1, below the 4.5:1 WCAG
   AA floor) and is now legible.
   ════════════════════════════════════════════════════════════ */

.co-donate,
.fo-board,
.fo-boards {
  --bd-green: var(--bufo-green, #22c55e);
  --bd-green-rgb: var(--bufo-green-rgb, 34, 197, 94);
  --bd-gold: var(--bufo-amber, #fbbf24);
  --bd-gold-rgb: var(--bufo-amber-rgb, 251, 191, 36);
  --bd-mono: var(--bufo-mono, ui-monospace, SFMono-Regular, Menlo, monospace);

  --bd-text: rgba(255, 255, 255, .92);
  --bd-muted: rgba(255, 255, 255, .70);
  --bd-faint: rgba(255, 255, 255, .58);
}

/* ══ Donate widget ═══════════════════════════════════════════ */

.co-donate__frame {
  border-radius: 16px;
  border: 1px solid rgba(var(--bd-green-rgb), .18);
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(var(--bd-green-rgb), .08), transparent 55%),
    linear-gradient(180deg, rgba(5, 8, 10, .95), rgba(2, 4, 6, .98));
  overflow: hidden;
}

.co-donate__head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(var(--bd-green-rgb), .10);
  background: linear-gradient(180deg, rgba(var(--bd-green-rgb), .04), transparent 80%);
}
.co-donate__dot {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--bd-green);
  box-shadow: 0 0 8px rgba(var(--bd-green-rgb), .5);
}
.co-donate__label {
  flex: 1;
  font-family: var(--bd-mono);
  font-size: 10px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--bufo-green-bright, #4ade80);
}
.co-donate__badge {
  font-family: var(--bd-mono);
  font-size: 9px; font-weight: 700; letter-spacing: .10em;
  padding: 2px 8px; border-radius: 99px;
  border: 1px solid rgba(var(--bd-green-rgb), .28);
  color: var(--bufo-green-bright, #4ade80);
  background: rgba(var(--bd-green-rgb), .08);
}

.co-donate__body { padding: 24px 20px; }
.co-donate__desc { font-size: 13px; color: var(--bd-muted); line-height: 1.6; margin: 0 0 20px; }

/* ── Amount tiers ── */
.co-donate__tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
@media (max-width: 420px) { .co-donate__tiers { grid-template-columns: repeat(2, 1fr); } }

.co-donate__tier {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  border-radius: 10px;
  padding: 14px 8px;
  font-family: var(--bd-mono);
  font-size: 16px; font-weight: 800;
  color: var(--bd-text);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
  text-align: center;
}
.co-donate__tier:hover { border-color: rgba(var(--bd-green-rgb), .40); background: rgba(var(--bd-green-rgb), .07); color: var(--bufo-green-bright, #4ade80); }
.co-donate__tier:focus-visible { outline: 2px solid var(--bd-green); outline-offset: 2px; }

/* `aria-pressed` is the source of truth; the class only carries styling
   for browsers mid-transition. Both are matched so neither can drift. */
.co-donate__tier.is-selected,
.co-donate__tier[aria-pressed="true"] {
  border-color: rgba(var(--bd-green-rgb), .60);
  background: rgba(var(--bd-green-rgb), .14);
  color: var(--bufo-green-bright, #4ade80);
  box-shadow: 0 0 16px -4px rgba(var(--bd-green-rgb), .20);
}

.co-donate__tier--popular { position: relative; }
.co-donate__tier--popular::after {
  content: '★';
  position: absolute; top: -6px; right: -4px;
  font-size: 10px;
  color: var(--bd-gold);
}

/* ── Custom amount + message ── */
.co-donate__custom { margin-bottom: 20px; }
.co-donate__msgWrap { margin-bottom: 16px; }

.co-donate__customLabel {
  display: block;
  font-family: var(--bd-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--bd-muted);
  margin-bottom: 8px;
}

.co-donate__customWrap {
  display: flex; align-items: center;
  border: 1px solid rgba(var(--bd-green-rgb), .16);
  border-radius: 10px;
  background: rgba(0, 0, 0, .40);
  overflow: hidden;
  transition: border-color .18s;
}
.co-donate__customWrap:focus-within { border-color: rgba(var(--bd-green-rgb), .50); }

.co-donate__currency {
  padding: 0 12px;
  font-family: var(--bd-mono);
  font-size: 16px; font-weight: 700;
  color: var(--bufo-green-bright, #4ade80);
}

.co-donate__customInput {
  flex: 1;
  padding: 12px 12px 12px 0;
  background: transparent; border: none; outline: none;
  font-family: var(--bd-mono);
  font-size: 16px; font-weight: 700;
  color: var(--bd-text);
}

.co-donate__msgInput {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(var(--bd-green-rgb), .16);
  border-radius: 8px;
  background: rgba(0, 0, 0, .40);
  font-family: var(--bd-mono);
  font-size: 12px;
  color: var(--bd-text);
  outline: none;
  transition: border-color .18s;
  box-sizing: border-box;
}
.co-donate__msgInput:focus { border-color: rgba(var(--bd-green-rgb), .50); }

.co-donate__customInput::placeholder,
.co-donate__msgInput::placeholder { color: var(--bd-faint); }

/* ── Submit ── */
.co-donate__submit {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 14px 24px;
  border-radius: 12px;
  border: 1px solid rgba(var(--bd-green-rgb), .35);
  background: linear-gradient(135deg, rgba(var(--bd-green-rgb), .18), rgba(var(--bd-green-rgb), .08));
  font-family: var(--bd-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--bufo-green-bright, #4ade80);
  cursor: pointer;
  transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.co-donate__submit:hover {
  background: linear-gradient(135deg, rgba(var(--bd-green-rgb), .95), rgba(var(--bd-green-rgb), .78));
  color: rgba(5, 8, 10, .98);
  box-shadow: 0 0 30px -6px rgba(var(--bd-green-rgb), .28);
  transform: translateY(-1px);
}
.co-donate__submit:focus-visible { outline: 2px solid var(--bd-green); outline-offset: 3px; }

.co-donate__note { font-size: 11.5px; color: var(--bd-faint); text-align: center; margin-top: 14px; line-height: 1.5; }

/* ══ Donor boards ════════════════════════════════════════════ */

.fo-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 0 auto; }
@media (max-width: 768px) { .fo-boards { grid-template-columns: 1fr; } }

.fo-board {
  border-radius: 16px;
  border: 1px solid rgba(var(--bd-green-rgb), .12);
  background:
    radial-gradient(500px 300px at 10% 0%, rgba(var(--bd-green-rgb), .05), transparent 55%),
    linear-gradient(180deg, rgba(5, 8, 10, .92), rgba(2, 4, 6, .96));
  overflow: hidden;
}

.fo-board__head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(var(--bd-green-rgb), .08);
  background: linear-gradient(180deg, rgba(var(--bd-green-rgb), .03), transparent 80%);
}
.fo-board__dot { width: 6px; height: 6px; border-radius: 99px; background: var(--bd-green); box-shadow: 0 0 8px rgba(var(--bd-green-rgb), .5); }
.fo-board__dot--gold { background: var(--bd-gold); box-shadow: 0 0 8px rgba(var(--bd-gold-rgb), .5); }

.fo-board__title {
  flex: 1;
  font-family: var(--bd-mono);
  font-size: 10px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--bufo-green-bright, #4ade80);
}
.fo-board__badge {
  font-family: var(--bd-mono);
  font-size: 9px; font-weight: 700; letter-spacing: .10em;
  padding: 2px 8px; border-radius: 99px;
  border: 1px solid rgba(var(--bd-green-rgb), .26);
  color: var(--bufo-green-bright, #4ade80);
  background: rgba(var(--bd-green-rgb), .07);
}
.fo-board__badge--gold { border-color: rgba(var(--bd-gold-rgb), .30); color: var(--bd-gold); background: rgba(var(--bd-gold-rgb), .08); }

.fo-board__body { padding: 6px 0; }
.fo-board__empty { padding: 24px 18px; text-align: center; font-size: 13px; color: var(--bd-muted); }

/* ── Donor row ── */
.fo-donor {
  display: grid;
  grid-template-columns: 32px 28px 1fr auto;
  gap: 8px; align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  transition: background .16s;
}
.fo-donor:last-child { border-bottom: none; }
.fo-donor:hover { background: rgba(var(--bd-green-rgb), .04); }
.fo-donor--recent { grid-template-columns: 48px 28px 1fr auto; }

.fo-donor--gold {
  background: linear-gradient(90deg, rgba(var(--bd-gold-rgb), .05), transparent 60%);
  border-left: 3px solid rgba(var(--bd-gold-rgb), .45);
}
.fo-donor--gold:hover { background: linear-gradient(90deg, rgba(var(--bd-gold-rgb), .09), transparent 60%); }

.fo-donor__rank { font-family: var(--bd-mono); font-size: 11px; font-weight: 800; color: var(--bd-faint); text-align: center; }
.fo-donor--gold .fo-donor__rank { color: var(--bd-gold); }
.fo-donor__avatar { font-size: 16px; text-align: center; line-height: 1; }
.fo-donor__time { font-family: var(--bd-mono); font-size: 9.5px; color: var(--bd-faint); text-align: center; }

.fo-donor__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fo-donor__name { font-family: var(--bd-mono); font-size: 12px; font-weight: 700; color: var(--bd-text); letter-spacing: .04em; }
.fo-donor--gold .fo-donor__name { color: var(--bd-gold); }
.fo-donor__msg {
  font-size: 11.5px; color: var(--bd-muted);
  font-style: italic; line-height: 1.4;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.fo-donor__amount { font-family: var(--bd-mono); font-size: 14px; font-weight: 800; color: var(--bufo-green-bright, #4ade80); white-space: nowrap; }
.fo-donor--gold .fo-donor__amount { color: var(--bd-gold); font-size: 16px; }

/* ── Inline total ── */
.bufo-don-total { font-family: var(--bd-mono); font-weight: 800; color: var(--bufo-green-bright, #4ade80); }
.bufo-don-count { font-family: var(--bd-mono); font-size: .9em; color: var(--bd-muted); }

/* ── Degradations ── */
@media (prefers-reduced-motion: reduce) {
  .co-donate__tier, .co-donate__submit, .fo-donor, .co-donate__customWrap, .co-donate__msgInput { transition: none; }
  .co-donate__submit:hover { transform: none; }
}

@media (forced-colors: active) {
  .co-donate__frame, .fo-board, .co-donate__tier, .co-donate__customWrap { border: 1px solid CanvasText; }
  .co-donate__submit { border: 1px solid ButtonText; }
}