/* ==================================================================
   Donation flow + acknowledgement

   Deliberately no new visual system: the existing tokens only, the same
   8px card radius, the same cool-charcoal headings. This is a page of the
   same website, not a payment product bolted onto it.

   Spacing uses the real scale (1,2,3,4,6,8,12,16,20,24). There is no
   --sp-5, --sp-7 or --sp-10, and referencing one silently drops the whole
   declaration - which is how a summary card once ended up with 0 padding.
   ================================================================== */

.field__error {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-100);
  color: var(--c-error);
  font-weight: 600;
}

.give__optional {
  color: var(--c-text-muted);
  font-weight: 400;
}

.give__note {
  font-size: var(--fs-100);
  color: var(--c-text-soft);
  line-height: 1.55;
  margin-top: var(--sp-4);
  max-width: 60ch;
}

.give__heading {
  font-size: var(--fs-400);
  margin-bottom: var(--sp-3);
}

/* The three facts a donor checks before paying, kept together above the fold */
.give__summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  padding: var(--sp-6);
  margin-bottom: var(--sp-8);
  background: var(--c-surface-alt);
  border: var(--card-border);
  border-radius: var(--r-card);
}

.give__label {
  display: block;
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-text-soft);
  margin-bottom: var(--sp-1);
}

.give__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-6);
  align-items: start;
}

/* The QR is capped rather than stretched: beyond about 280px it only wastes
   space, and a phone camera reads it perfectly well at this size. */
.give__qr {
  max-width: 280px;
  margin: 0 auto var(--sp-4);
  padding: var(--sp-4);
  background: #fff;
  border: var(--card-border);
  border-radius: var(--r-card);
}

.give__qr svg { display: block; width: 100%; height: auto; }

.give__detail {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-200);
}

.give__detail--spaced { margin-top: var(--sp-8); }
.give__detail dt { color: var(--c-text-soft); }
.give__detail dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.give__detail code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--c-surface-alt);
  padding: 0 var(--sp-1);
  border-radius: var(--r-sm);
}

.give__reference { margin-top: var(--sp-12); max-width: 62ch; }
.give__panel { max-width: 64ch; }

/* ------------------------------------------------------------------
   Acknowledgement — screen, then paper
   ------------------------------------------------------------------ */

.ack__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
}

.ack {
  max-width: 78ch;
  margin-inline: auto;
  padding: var(--sp-12);
  background: var(--c-surface-raised);
  border: var(--card-border);
  border-radius: var(--r-card);
}

.ack__head { text-align: center; margin-bottom: var(--sp-8); }
.ack__logo { height: 64px; width: auto; margin-bottom: var(--sp-3); }
.ack__org { font-size: var(--fs-500); margin: 0 0 var(--sp-2); }
.ack__addr { font-size: var(--fs-100); color: var(--c-text-soft); margin: 0; white-space: pre-line; }

.ack__title {
  font-size: var(--fs-300);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: var(--sp-3) 0;
  margin: 0 0 var(--sp-8);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.ack__table { width: 100%; border-collapse: collapse; }
.ack__table th,
.ack__table td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-border);
}
.ack__table th { width: 34%; font-weight: 400; color: var(--c-text-soft); }

.ack__thanks { margin-top: var(--sp-8); }
.ack__foot {
  margin-top: var(--sp-12);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-100);
  color: var(--c-text-soft);
}

/* Print is the real output here: donors are asked to save this as a PDF, so
   the chrome goes and the sheet fills the page. */
@media print {
  .site-header, .site-footer, .ack__actions, .lightbox { display: none !important; }
  .section { padding: 0 !important; }
  .ack {
    max-width: none;
    border: 0;
    padding: 0;
    box-shadow: none;
  }
  a[href]::after { content: none !important; }
}

/* The fund pages' donate call to action, where the demonstration wizard was */
.give__cta { max-width: 62ch; margin-inline: auto; text-align: center; }
.give__cta-title { font-size: var(--fs-500); margin-bottom: var(--sp-3); }
.give__cta-action { margin-top: var(--sp-6); margin-bottom: 0; }

/* The Wider Order page: a callout that must not be skimmed past, and a plain
   list of services. Public equivalents of the admin panel classes - the admin
   stylesheet is not loaded here, so borrowing from it would have rendered
   both of these completely unstyled. */
.give__callout {
  background: var(--c-surface-alt);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-6);
  margin: var(--sp-6) 0;
  line-height: 1.6;
}

.give__list {
  list-style: none;
  margin: var(--sp-3) 0;
  padding: 0;
  font-size: var(--fs-100);
}

.give__list li {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-border);
}

.give__list li:last-child { border-bottom: 0; }

/* ============================================================
   Donation form — the chosen cause, shown as well as named.
   ============================================================ */

.give__layout {
  display: grid;
  gap: var(--sp-8);
  align-items: start;

  /* minmax(0, 1fr), NOT the implicit auto column.

     A grid column sized auto is at least as wide as its content's min-content
     size, and a grid item's default min-width:auto refuses to shrink below it
     either - so ONE wide thing anywhere inside this form sets the width of
     the whole page. The amount chips are exactly that: they sit on one
     non-wrapping scrolling row, whose min-content width is the sum of every
     chip, and on a 369px phone that pushed the column to about 480px and gave
     the entire page a horizontal scrollbar.

     A scroll container is supposed to contribute nothing here, and it does
     when it is itself a flex or grid item - the automatic minimum size of one
     is zero. The chip row is a plain block several levels down, so that rule
     never applies to it and the min-content size propagates all the way up.
     These two declarations are what stop it. */
  grid-template-columns: minmax(0, 1fr);
}

/* Both items, so neither can be the one that widens the page. */
.give__form,
.give__chosen { min-width: 0; }

/* The form leads; the chosen-cause panel sits beside it on a wide screen and
   above it on a narrow one, which is the order a donor reads in. */
@media (min-width: 900px) {
  .give__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: var(--sp-16);
  }

  .give__form { order: 1; }
  .give__chosen { order: 2; position: sticky; top: var(--sp-8); }
}

.give__form { max-width: 56ch; }

.give__chosen {
  border: var(--card-border);
  border-radius: var(--r-card);
  background: var(--c-surface-raised);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* One panel per fund, all but the chosen one carrying [hidden].

   This rule is defensive rather than decorative. Nothing here sets display on
   .give__chosen today, so the attribute's own UA rule does the work - but
   these panels are grid children, and a later rule giving them a display
   value would beat [hidden] and silently show all six stacked down the side
   of the form. That failure would read as a layout bug rather than as the
   specificity one it is. */
.give__chosen[hidden] { display: none; }

.give__chosen-media {
  aspect-ratio: 4 / 3;
  background: var(--c-surface-alt);
}

.give__chosen-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.give__chosen-body { padding: var(--sp-6); }

.give__chosen-name {
  font-family: var(--font-serif);
  font-size: var(--fs-400);
  color: var(--c-heading);
  margin: 0 0 var(--sp-2);
  line-height: var(--lh-tight);
}

.give__chosen-note {
  font-size: var(--fs-100);
  color: var(--c-text-soft);
  margin: 0 0 var(--sp-2);
}

.give__chosen-note:last-child { margin-bottom: 0; }

/* Consent checkbox: the label wraps the control so the whole line is a
   target, and 44px keeps it thumb-reachable. */
.give__check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: 44px;
  cursor: pointer;
}

.give__check input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: none;
}

.field--check { margin-bottom: var(--sp-6); }

/* The bank's own uploaded QR - a fallback, and very possibly a photograph
   or a whole-screen screenshot rather than a clean square code (this
   ashram's own upload is a 720x1280 portrait). app.css's `.give__qr img`
   forces a 220x220 box with no object-fit, which is fine for nothing but
   a square: anything else gets stretched to fit it and a distorted
   payment code is the one image on this site that must never be forced.
   This file loads after app.css and wins on equal specificity, so it is
   what actually reaches the page. */
.give__qr img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
}