/* ==========================================================================
   Donate page (page-donate.php). Builds on css/looc-ui.css.
   ========================================================================== */

.looc-donate-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; }
@media (max-width: 1000px) { .looc-donate-grid { grid-template-columns: 1fr; } .looc-donate-card { order: -1; } }

/* ---------- Give today card ---------- */
.looc-donate-card { position: sticky; top: calc(var(--looc-nav-h) + 20px); }
@media (max-width: 1000px) { .looc-donate-card { position: static; } }
.looc-donate-card__art { aspect-ratio: 16 / 9; background: var(--looc-navy-600); }
.looc-donate-card__art img { width: 100%; height: 100% !important; object-fit: cover; }
.looc-donate-card__body { padding: 22px; }
.looc-donate-card__title { font-size: 26px !important; margin: 6px 0 16px !important; }
.looc-donate-card__brands { display: flex; gap: 10px; justify-content: center; margin-top: 14px; font-size: 26px; color: var(--looc-muted); }
.looc-donate-card__note { font-size: 13px; color: var(--looc-muted); margin: 12px 0 0; text-align: center; }

/* ---------- Editor text ---------- */
.looc-donate-prose > p:first-child, .looc-donate-prose > form:first-child { margin-top: 0; }
.looc-donate-prose h2 { font-size: clamp(24px, 3vw, 30px); }

/* ---------- Ways to give (built from the editor's list) ---------- */
.looc-donate-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 18px 0 24px; }
.looc-donate-way { border: 1px solid var(--looc-line); border-radius: 12px; padding: 16px; background: var(--looc-surface); }
.looc-donate-way__label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--looc-gold); font-weight: 700; margin-bottom: 4px; }
.looc-donate-way__details { font-size: 15px; color: var(--looc-body); overflow-wrap: anywhere; }

/* ---------- Donor tiers (built from the editor's headings + lists) ---------- */
.looc-donate-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 8px 0 24px; }
.looc-donate-tier { border: 1px solid var(--looc-line); border-top: 3px solid var(--looc-gold); border-radius: 12px; padding: 18px; background: var(--looc-surface); }
.looc-donate-tier__name { font-size: 20px !important; margin: 0 !important; }
.looc-donate-tier__amount { color: var(--looc-gold-soft); font-weight: 700; font-size: 14px; margin: 2px 0 10px; }
.looc-donate-tier__list { margin: 0; padding-left: 18px; color: var(--looc-body); font-size: 14.5px; display: grid; gap: 4px; }

/* ---------- On The Stage donations widget (Donate page "Donations Widget" field) ---------- */
/* Full-width band above the ways to give: the widget picks its layout from the viewport width, so it needs room.
   It is themed navy + gold to match the site (its own CSS variables only; we don't control its markup).
   The same variables reach its My Cart / Checkout screens, so those are themed too. */
.looc-donate-give__panel {
  max-width: 760px; /* the widget caps itself at ~650px */
  min-height: 420px;
  margin: 0 auto;
  padding: clamp(8px, 2vw, 24px);
  border-radius: var(--looc-radius-lg);
  border: 1px solid var(--looc-line-2);
  border-top: 3px solid var(--looc-gold);
  background: linear-gradient(180deg, var(--looc-navy-700), var(--looc-navy-800));
  box-shadow: var(--looc-shadow);
  color: var(--looc-body);
}
.looc-donate-give .looc-section-head { justify-content: center; text-align: center; }
.looc-donate-give .looc-donate-card__note { margin-top: 16px; }
onthestage-widget[widget-style="donations"] {
  display: block;
  /* Surfaces: transparent on the page panel, solid navy for its full-screen cart/checkout screens */
  --onstage-widget-container-background: transparent;
  --onstage-background-color: transparent;
  --onstage-modal-content-bg-color: #0e1645;
  --onstage-dialog-bg-color: #0e1645;
  --onstage-header-nav-bg-color: #060a22;
  --onstage-header-nav-text-color: #ffffff;
  --onstage-header-nav-icon-color: #f7c26a;
  /* Text */
  --onstage-font-family: 'Raleway', sans-serif;
  --onstage-text-color: #dfe3f5;
  --onstage-text-secondary-color: #b4bcdc;
  --onstage-text-disabled-color: #8a93ba;
  --onstage-icon-color: #dfe3f5;
  --onstage-font-color-primary: #f7c26a;
  --onstage-donation-message-color: #dfe3f5;
  --onstage-allow-marketing-text-color: #dfe3f5;
  --onstage-input-label-color: #b4bcdc;
  --onstage-empty-cart-text-color: #dfe3f5;
  --onstage-tos-copy-text-color: #b4bcdc;
  --onstage-checkout-review-text-color: #b4bcdc;
  --onstage-footer-text-color: #b4bcdc;
  --onstage-footer-legal-text-color: #b4bcdc;
  --onstage-trash-icon-color: #b4bcdc;
  /* Links and accents */
  --onstage-link-color: #f7c26a;
  --onstage-tos-links-color: #f7c26a;
  --onstage-footer-link-color: #f7c26a;
  --onstage-continue-shopping-color: #f7c26a;
  --onstage-widget-home-my-cart-btn-color: #f7c26a;
  --onstage-widget-home-login-btn-color: #f7c26a;
  --onstage-cart-badge-bg-color: #fc9f13;
  --onstage-primary-1-main: #fc9f13;
  --onstage-primary-1-contrast: #1a1300;
  --onstage-primary-2-main: #fc9f13;
  --onstage-primary-3-main: #f7c26a;
  /* Buttons: gold pills like the site's, outlined amounts */
  --onstage-button-bg-primary: #fc9f13;
  --onstage-button-bg-primary-hover: #ffb240;
  --onstage-button-hover-opacity: 1;
  --onstage-button-font-primary: #1a1300;
  --onstage-button-border-primary: 1px solid #fc9f13;
  --onstage-button-bg-secondary: transparent;
  --onstage-button-font-secondary: #f7c26a;
  --onstage-button-border-secondary: rgba(247, 194, 106, 0.6);
  --onstage-button-bg-disabled: rgba(255, 255, 255, 0.08);
  --onstage-button-font-disabled: rgba(255, 255, 255, 0.4);
  --onstage-button-border-radius: 999px;
  /* Lines, inputs, amount toggle */
  --onstage-border-color: rgba(255, 255, 255, 0.14);
  --onstage-input-border-color: rgba(255, 255, 255, 0.22);
  --onstage-active-border-color: #fc9f13;
  --onstage-donation-term-bg-color: rgba(255, 255, 255, 0.06);
  --onstage-counter-bg-color: transparent;
  --onstage-counter-font-color: #ffffff;
  --onstage-border-radius: 12px;
}

/* Keep the image box's shape regardless of the uploaded image's proportions */
.looc-donate-card__art { position: relative; overflow: hidden; }
.looc-donate-card__art > img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }