/* appeals-detail.css — Single Appeal Detail Page
   Layout classes come from fundraisers-v2.css (enqueued alongside).
   Donation form classes from appeals-v3.css (enqueued alongside).
   This file: appeal-specific overrides and scoping fixes. */

/* ── Left article — subtitle ─────────────────────────────── */
.ha-appeal-detail-subtitle {
  font-size: 18px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: -12px 0 28px;
}

/* ── Sticky card — subtitle in card body ─────────────────── */
.ha-fundraiser-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: -4px 0 4px;
}

/* ── Donation form wrapper ───────────────────────────────── */
.ha-appeal-donate-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}

/* Let the detail card use the same floating region menu as archive cards. */
.ha-fundraiser-sidebar-wrap:has(.ha-appeal-donate-form .ha-country-select.open),
.ha-fundraiser-card:has(.ha-appeal-donate-form .ha-country-select.open) {
  overflow: visible;
  z-index: 30;
}
.ha-appeal-donate-form .ha-country-select.open,
.ha-appeal-donate-form .ha-country-select-menu {
  z-index: 30;
}

/* ── Amount buttons — scoped to detail form ─────────────── */
.ha-appeal-donate-form .ha-amount-btn {
  border: 2px solid var(--border);
  background: var(--white, #fff);
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: all var(--transition-fast);
  text-align: center;
  height: 44px;
  box-sizing: border-box;
}
.ha-appeal-donate-form .ha-amount-btn:hover {
  border-color: var(--green);
  color: var(--green);
}
.ha-appeal-donate-form .ha-amount-btn.selected {
  border-color: var(--green);
  background: var(--green);
  color: white;
  font-weight: 700;
}

/* ── Qty / amount totals — scoped to detail form ─────────── */
.ha-appeal-donate-form .ha-qty-total,
.ha-appeal-donate-form .ha-amount-total {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--pink);
  margin-bottom: 12px;
  font-family: 'Oakes Grotesk', 'Inter', sans-serif;
}

/* ── CTA main text node ──────────────────────────────────── */
.ha-donate-cta .ha-cta-main-text {
  font-size: 16px;
  font-weight: 700;
}

/* ── Hero banner height override ─────────────────────────── */
.ha-single-fundraiser-hero {
  height: 250px;
  min-height: 250px;
}

/* ── Card image — match appeals card style ───────────────── */
.ha-fundraiser-card .ha-fundraiser-image-wrap {
  margin: 0;
}
.ha-fundraiser-card .ha-fundraiser-image {
  height: 180px;
  aspect-ratio: unset;
  border-radius: 0;
  background-color: #ddd;
  transition: height 0.3s ease;
}