@import url("/zz/fonts.css");
/*
 * Donation forms (components/donate/GiftForm.tsx) and their checkout pop-up (GiftCheckout.tsx).
 * The gift card: serif title, One-time / Monthly switch, amount tiles, soft fields, the fee as a toggle card and a
 * "Donate $X →" button, with a side picture (the donate page, the cause pages); the compact form is the same without
 * the picture (a form inside a post). The checkout: the foundation's mark and the form's title, the donor's details,
 * the card, the options, the terms and the total beside the Donate button; a bottom sheet on phones.
 * Site colours: the logo's blue #006DB8 (buttons and chosen options in its gradient), green #8BC53F; Source Serif 4
 * titles, Poppins buttons, Roboto text.
 */
.zzg, .zzg-co {
  --b: #006db8; --b-d: #005592; --ink: #101828; --navy: #0b1b36; --t: #344054; --m: #667085; --line: #e4e7ec; --g: #8bc53f;
  --grad: linear-gradient(135deg, #0b7ac4 0%, #006db8 50%, #005592 100%);
  --ring: 0 0 0 4px rgb(0 109 184 / 0.12);
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}
.zzg *, .zzg *::before, .zzg *::after, .zzg-co *, .zzg-co *::before, .zzg-co *::after { box-sizing: border-box; }

/* ================= the card ================= */
.zzg {
  position: relative; display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); overflow: hidden;
  border-radius: 32px; background: #fff; color: #1f2a37; font: 400 16px/1.5 "Roboto", system-ui, sans-serif; text-align: left;
  box-shadow: 0 0 0 1px rgb(0 85 146 / 0.06), 0 1px 2px rgb(0 85 146 / 0.06), 0 4px 8px -2px rgb(0 85 146 / 0.06), 0 24px 48px -12px rgb(0 85 146 / 0.18), 0 48px 96px -24px rgb(0 109 184 / 0.14);
}
.zzg--compact { grid-template-columns: minmax(0, 1fr); border-radius: 24px; }
.zzg__main { display: flex; flex-direction: column; min-width: 0; padding: 56px 56px 44px; }
.zzg--compact .zzg__main { padding: 36px 36px 30px; }

/* goal (compact form in a post) */
.zzg__goal { margin: 0 0 26px; }
.zzg__goal p { margin: 0 0 10px; font: 400 15px/1.4 "Roboto", sans-serif; color: var(--m); }
.zzg__goal strong { font: 600 20px/1 "Poppins", sans-serif; color: var(--ink); }
.zzg__goal-bar { height: 10px; overflow: hidden; border-radius: 999px; background: #edf1f5; }
.zzg__goal-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8bc53f, #6aa52c); }

/* header: title + frequency switch */
.zzg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 0 0 32px; }
.zzg__intro { flex: 1 1 auto; min-width: 0; }
.zzg .zzg__title { margin: 0; font: 700 44px/1.06 var(--serif); letter-spacing: -0.02em; color: var(--navy); text-transform: none; }
.zzg--compact .zzg__title { font-size: 32px; }
.zzg .zzg__sub { margin: 10px 0 0; font: 400 17px/1.45 "Roboto", sans-serif; color: #5d6b7e; }
.zzg__freq { display: inline-flex; flex-shrink: 0; margin-top: 4px; padding: 5px; border-radius: 999px; background: #f2f4f7; box-shadow: inset 0 0 0 1px #e6e9ee; }
.zzg__freq button {
  margin: 0; padding: 12px 26px; border: 0; border-radius: 999px; background: transparent; color: #475467; cursor: pointer;
  font: 500 15px/1 "Poppins", sans-serif; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.zzg__freq button:hover { color: var(--ink); }
.zzg__freq button.is-on { background: var(--grad); color: #fff; box-shadow: 0 8px 16px -8px rgb(0 85 146 / 0.6); }
.zzg__freq button:focus-visible { outline: 2px solid var(--b); outline-offset: 2px; }

/* amount tiles */
.zzg__tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0 0 26px; }
.zzg__tiles button {
  width: 100%; height: 76px; margin: 0; padding: 0 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); cursor: pointer;
  font: 600 22px/1 "Poppins", sans-serif; letter-spacing: -0.01em; white-space: nowrap;
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 4px 10px -4px rgb(16 24 40 / 0.08);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.zzg__tiles button:hover { border-color: #b9cce3; color: var(--b); transform: translateY(-1px); }
.zzg__tiles button:focus-visible { outline: 2px solid var(--b); outline-offset: 2px; }
.zzg__tiles button.is-on { border-color: transparent; background: var(--grad); color: #fff; box-shadow: 0 14px 26px -14px rgb(0 85 146 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.14); }
.zzg__tiles .zzg__other { font-size: 19px; }
.zzg--compact .zzg__tiles button { height: 64px; font-size: 20px; }
.zzg--compact .zzg__tiles .zzg__other { font-size: 17px; }

/* fields */
.zzg__field { margin: 0 0 24px; }
.zzg__field--fund { margin-bottom: 28px; }
.zzg__label { display: block; margin: 0 0 8px; font: 500 14.5px/1.3 "Roboto", sans-serif; color: #475467; }
.zzg__amount {
  display: flex; align-items: center; height: 64px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #f5f7fa;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.zzg__amount:focus-within { border-color: var(--b); background: #fff; box-shadow: var(--ring); }
.zzg__amount.is-invalid { border-color: #f04438; background: #fff; }
.zzg__amount span { padding: 0 6px 0 22px; color: #98a2b3; font: 500 21px/1 "Poppins", sans-serif; }
.zzg__amount input {
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 18px 0 10px; border: 0; background: transparent; color: var(--ink);
  font: 600 22px/1 "Poppins", sans-serif; box-shadow: none; outline: none;
}
.zzg__amount input[readonly] { cursor: default; }
.zzg__error { margin: 8px 0 0; font: 400 14px/1.4 "Roboto", sans-serif; color: #b42318; }
.zzg__select {
  width: 100%; height: 64px; margin: 0; padding: 0 48px 0 22px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); cursor: pointer;
  font: 400 17px/1 "Roboto", sans-serif; box-shadow: 0 1px 2px rgb(16 24 40 / 0.04); -webkit-appearance: none; appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475467' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 20px center / 20px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.zzg__select:hover { border-color: #b9cce3; }
.zzg__select:focus { outline: none; border-color: var(--b); box-shadow: var(--ring); }

/* fund picker (components/donate/GiftSelect.tsx): the list is placed on the page, outside .zzg, so colours are literal */
.zzg-dd { position: relative; }
.zzg-dd__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 64px; margin: 0; padding: 0 20px 0 22px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); cursor: pointer; text-align: left;
  font: 400 17px/1.2 "Roboto", sans-serif; box-shadow: 0 1px 2px rgb(16 24 40 / 0.04); transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.zzg-dd__trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zzg-dd__trigger:hover { border-color: #b9cce3; }
.zzg-dd.is-open .zzg-dd__trigger, .zzg-dd__trigger:focus-visible { outline: none; border-color: var(--b); box-shadow: var(--ring); }
.zzg-dd__trigger svg { width: 20px; height: 20px; flex-shrink: 0; color: #475467; transition: transform 0.2s ease; }
.zzg-dd.is-open .zzg-dd__trigger svg { transform: rotate(180deg); }
.zzg-dd__list {
  position: fixed; z-index: 1000; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #e4e7ec; border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgb(16 24 40 / 0.25), 0 2px 6px rgb(16 24 40 / 0.06); animation: zzg-dd-in 0.14s ease-out; overscroll-behavior: contain;
}
@keyframes zzg-dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.zzg-dd__list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 11px 12px; border-radius: 10px;
  font: 400 15px/1.3 "Roboto", sans-serif; color: #1f2a37; cursor: pointer; list-style: none;
}
.zzg-dd__list li::before { display: none; }
.zzg-dd__list li.is-active { background: #f2f7fc; color: #006db8; }
.zzg-dd__list li svg { width: 16px; height: 16px; flex-shrink: 0; color: #006db8; opacity: 0; }
.zzg-dd__list li[aria-selected="true"] { font-weight: 500; color: #006db8; }
.zzg-dd__list li[aria-selected="true"] svg { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .zzg-dd__list { animation: none; } .zzg-dd__trigger svg { transition: none; } }

/* the fee option: a card with a switch */
.zzg__opt {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "text switch" "hint switch"; align-items: center; column-gap: 16px; row-gap: 3px;
  margin: 0 0 28px; padding: 22px 24px; cursor: pointer;
  border: 1px solid #edf0f3; border-radius: 16px; background: #fafbfc; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.zzg__opt.is-on { border-color: #a6d36b; background: #f7fbf1; box-shadow: 0 0 0 3px rgb(139 197 63 / 0.15); }
.zzg__opt-text { grid-area: text; font: 500 16px/1.4 "Roboto", sans-serif; color: var(--ink); }
.zzg__opt .zzg__switch { grid-area: switch; }
.zzg__switch {
  -webkit-appearance: none; appearance: none; position: relative; flex-shrink: 0; width: 50px; height: 30px; margin: 0; border: 0; border-radius: 999px;
  background: #d9dee5; cursor: pointer; transition: background 0.2s ease;
}
.zzg__switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgb(16 24 40 / 0.25); transition: transform 0.2s ease;
}
.zzg__switch:checked { background: var(--g); }
.zzg__switch:checked::after { transform: translateX(20px); }
.zzg__switch:focus-visible { outline: 3px solid rgb(0 109 184 / 0.25); outline-offset: 2px; }

/* the button and the trust line */
.zzg__go {
  display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 70px; margin: 0; padding: 12px 28px; border: 0;
  border-radius: 999px; background: var(--grad); color: #fff; cursor: pointer; font: 600 20px/1.25 "Poppins", sans-serif; text-align: center;
  box-shadow: 0 18px 32px -16px rgb(0 85 146 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.14); transition: box-shadow 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}
.zzg__go svg { flex-shrink: 0; transition: transform 0.2s ease; }
.zzg__go:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 22px 36px -16px rgb(0 85 146 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.14); }
.zzg__go:hover svg { transform: translateX(4px); }
.zzg__go:active { transform: none; filter: brightness(0.96); }
.zzg__go:focus-visible { outline: 3px solid rgb(0 109 184 / 0.35); outline-offset: 3px; }
.zzg--compact .zzg__go { min-height: 62px; font-size: 18px; }
/* the card's button: one line, "Donate $X →" centred on its height */
.zzg--card .zzg__go { display: block; height: 70px; min-height: 0; padding: 0 28px; line-height: 70px; word-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zzg--card .zzg__go svg { display: inline-block; margin-left: 14px; vertical-align: -4px; }
.zzg__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 20px 0 0; padding: 0; font: 400 14px/1.4 "Roboto", sans-serif; color: var(--m); }
.zzg__foot span { display: inline-flex; align-items: center; white-space: nowrap; }
.zzg__foot span + span::before { content: ""; width: 1px; height: 14px; margin: 0 16px; background: #d0d5dd; }

/* the side picture */
.zzg__side { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100%; overflow: hidden; background: #f3efe5; }
.zzg__side img { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center bottom; }
/* a light wash at the top so the heading reads on any picture chosen in the CMS (the default has its own soft gradient) */
.zzg__side--photo::before {
  content: ""; position: absolute; inset: 0 0 40% 0; z-index: -1;
  background: linear-gradient(180deg, rgb(250 247 241 / 0.95) 0%, rgb(250 247 241 / 0.78) 50%, rgb(250 247 241 / 0) 100%);
}
.zzg__side-text { padding: 116px 9% 0 17%; }
.zzg .zzg__side-title { margin: 0; font: 700 40px/1.1 var(--serif); letter-spacing: -0.02em; color: var(--navy); }
.zzg .zzg__side-lead { max-width: 300px; margin: 14px 0 0; font: 400 17px/1.55 "Roboto", sans-serif; color: #5b6576; text-wrap: pretty; }

@media (max-width: 1100px) {
  .zzg__main { padding: 48px 40px 40px; }
  .zzg .zzg__title { font-size: 38px; }
  .zzg__tiles button { height: 68px; font-size: 20px; }
  .zzg__tiles .zzg__other { font-size: 17px; }
  .zzg__side-text { padding: 96px 8% 0 14%; }
  .zzg .zzg__side-title { font-size: 32px; }
  .zzg .zzg__side-lead { font-size: 16px; }
}
@media (max-width: 900px) {
  .zzg { grid-template-columns: minmax(0, 1fr); }
  .zzg__side { display: none; }
  .zzg__main { padding: 36px 28px 30px; }
  .zzg__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 600px) {
  .zzg { border-radius: 24px; }
  .zzg__main, .zzg--compact .zzg__main { padding: 28px 20px 24px; }
  .zzg__head { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 24px; }
  .zzg__freq { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0; }
  .zzg .zzg__title { font-size: 32px; }
  .zzg--compact .zzg__title { font-size: 28px; }
  .zzg .zzg__sub { font-size: 15.5px; }
  .zzg__tiles { gap: 10px; margin-bottom: 20px; }
  .zzg__tiles button, .zzg--compact .zzg__tiles button { height: 58px; font-size: 18px; }
  .zzg__tiles .zzg__other, .zzg--compact .zzg__tiles .zzg__other { font-size: 15px; }
  .zzg__amount, .zzg__select, .zzg-dd__trigger { height: 58px; }
  .zzg__opt { padding: 18px; }
  .zzg__opt-text { font-size: 15px; }
  .zzg__go, .zzg--compact .zzg__go { min-height: 62px; font-size: 18px; }
  .zzg--card .zzg__go { height: 62px; line-height: 62px; }
  .zzg__foot { flex-direction: column; align-items: center; gap: 2px; font-size: 13px; }
  .zzg__foot span + span::before { display: none; }
}

/* ================= strip (the home page, under the slides): the heading left, the form in one wide block ================= */
.zzg--strip { grid-template-columns: minmax(0, 1fr); border-radius: 30px; }
.zzg--strip .zzg__main {
  display: grid; grid-template-columns: minmax(0, 330px) repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 18px; padding: 40px;
  grid-template-areas: "head tiles tiles" "head fund opt" "head amount go" "head foot foot"; align-items: end;
}
.zzg--strip .zzg__head { grid-area: head; flex-direction: column; justify-content: flex-start; align-self: start; gap: 20px; margin: 0; }
.zzg--strip .zzg__title { font-size: 36px; }
.zzg--strip .zzg__tiles { grid-area: tiles; margin: 0; }
.zzg--strip .zzg__tiles button { height: 56px; font-size: 19px; }
.zzg--strip .zzg__tiles .zzg__other { font-size: 16px; }
.zzg--strip .zzg__field { grid-area: amount; margin: 0; }
.zzg--strip .zzg__field--fund { grid-area: fund; }
/* the fee card fills the same height as the fund's label and dropdown beside it (its usual bottom margin would lift it) */
.zzg--strip .zzg__opt { grid-area: opt; align-self: stretch; margin: 0; }
.zzg--strip:not(:has(.zzg__field--fund)) .zzg__opt { grid-column: 2 / 4; }
.zzg--strip .zzg__go { grid-area: go; align-self: end; min-height: 62px; font-size: 18px; }
.zzg--strip .zzg__foot { grid-area: foot; margin: 0; }
@media (max-width: 1100px) {
  .zzg--strip .zzg__main { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "head head" "tiles tiles" "fund opt" "amount go" "foot foot"; }
  .zzg--strip:not(:has(.zzg__field--fund)) .zzg__opt { grid-column: 1 / 3; }
  .zzg--strip .zzg__head { flex-direction: row; align-items: flex-start; }
}
@media (max-width: 600px) {
  .zzg--strip .zzg__main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "tiles" "amount" "fund" "opt" "go" "foot"; padding: 28px 20px 24px; }
  .zzg--strip:not(:has(.zzg__field--fund)) .zzg__opt { grid-column: auto; }
  .zzg--strip .zzg__head { flex-direction: column; align-items: stretch; gap: 16px; }
  .zzg--strip .zzg__title { font-size: 28px; }
}

/* ================= checkout pop-up ================= */
html.zzg-lock { overflow: hidden; }
.zzg-co {
  width: calc(100% - 32px); max-width: 760px; max-height: calc(100dvh - 64px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain;
  border: 0; border-radius: 20px; background: #fff; color: #1f2a37; font: 400 15px/1.5 "Roboto", system-ui, sans-serif;
  box-shadow: 0 30px 70px -18px rgb(11 23 41 / 0.5), 0 1px 3px rgb(11 23 41 / 0.08);
}
.zzg-co[open] { animation: zzg-in 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
.zzg-co::backdrop { background: rgb(11 23 41 / 0.62); }
@keyframes zzg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.zzg-co__form { margin: 0; }

.zzg-co__head {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 72px 24px 40px;
  border-bottom: 1px solid #e3edf7;
  background: radial-gradient(420px 180px at 100% 0%, rgb(139 197 63 / 0.14), transparent 70%), linear-gradient(180deg, #eef6fd 0%, #f7fbfe 100%);
}
.zzg-co__brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.zzg-co__brand img {
  flex-shrink: 0; width: 56px; height: 56px; padding: 8px; border-radius: 16px; object-fit: contain; background: #fff;
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.06), 0 0 0 1px #dbe8f4;
}
.zzg-co .zzg-co__kicker { margin: 0; font: 600 11.5px/1.2 "Poppins", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--b); }
.zzg-co .zzg-co__title { margin: 6px 0 0; font: 600 26px/1.1 "Roboto Condensed", sans-serif; letter-spacing: 0; color: var(--b); text-transform: none; }
.zzg-co__close {
  position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: #fff; color: #475467; cursor: pointer; box-shadow: 0 1px 2px rgb(16 24 40 / 0.06), 0 0 0 1px var(--line); transition: color 0.15s ease, box-shadow 0.15s ease;
}
.zzg-co__close:hover { color: var(--ink); box-shadow: 0 1px 2px rgb(16 24 40 / 0.06), 0 0 0 1px #d0d5dd; }
.zzg-co__close:focus-visible { outline: 3px solid rgb(0 109 184 / 0.3); outline-offset: 2px; }
.zzg-co__close:disabled { opacity: 0.5; cursor: default; }

.zzg-co__body { padding: 26px 40px 32px; }
.zzg-co__notice { margin: 0 0 16px; padding: 10px 12px; border: 1px solid #fecdca; border-radius: 10px; background: #fef3f2; color: #b42318; font: 400 13.5px/1.45 "Roboto", sans-serif; }

.zzg-co__group { min-width: 0; margin: 0 0 10px; padding: 0; border: 0; }
.zzg-co__group legend { display: block; margin: 0 0 12px; padding: 0; font: 600 13px/1 "Roboto Condensed", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--b); }
.zzg-co__grid { display: grid; column-gap: 14px; }
.zzg-co__grid--you { grid-template-columns: 1fr 1fr 1.4fr; }
.zzg-co__grid--card { grid-template-columns: 2fr 1fr 1fr; }
.zzg-co__field--name { grid-column: 1 / -1; }
.zzg-co__field { min-width: 0; margin: 0 0 12px; }
.zzg-co__label { display: block; margin: 0 0 6px; font: 500 13px/1.3 "Roboto", sans-serif; color: var(--t); }
.zzg-co__req { color: #d92d20; }
.zzg-co__input {
  display: block; width: 100%; height: 46px; margin: 0; padding: 0 14px; border: 1px solid #d0d5dd; border-radius: 10px; background: #fff; color: var(--ink);
  font: 400 15px/44px "Roboto", system-ui, sans-serif; box-shadow: 0 1px 2px rgb(16 24 40 / 0.04); transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.zzg-co__input::placeholder { color: #98a2b3; opacity: 1; }
.zzg-co__input:focus, .zzg-co__stripe.StripeElement--focus { outline: none; border-color: var(--b); box-shadow: var(--ring); }
.zzg-co__stripe { padding-top: 12px; padding-bottom: 12px; line-height: 20px; }
.zzg-co__stripe.is-invalid, .zzg-co__stripe.StripeElement--invalid { border-color: #f04438; }

/* fee + monthly options */
.zzg-co__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 16px; }
.zzg-co__opt {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "text switch" "hint switch"; align-items: center; column-gap: 16px; row-gap: 3px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; box-shadow: 0 1px 2px rgb(16 24 40 / 0.04);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.zzg-co__opt.is-on { border-color: #a6d36b; background: #f7fbf1; box-shadow: 0 0 0 3px rgb(139 197 63 / 0.15); }
.zzg-co__opt-text { grid-area: text; font: 500 14px/1.35 "Roboto", sans-serif; color: #1f2a37; }
.zzg-co__opt-hint { grid-area: hint; font: 400 12.5px/1.4 "Roboto", sans-serif; color: var(--m); }
.zzg-co__opt .zzg__switch { grid-area: switch; width: 40px; height: 22px; }
.zzg-co__opt .zzg__switch::after { top: 2px; left: 2px; width: 18px; height: 18px; }
.zzg-co__opt .zzg__switch:checked::after { transform: translateX(18px); }

/* terms */
.zzg-co__terms { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; }
.zzg-co__terms label { display: inline-flex; align-items: center; gap: 10px; font: 400 14px/1.4 "Roboto", sans-serif; color: var(--t); cursor: pointer; }
.zzg-co__terms input {
  -webkit-appearance: none; appearance: none; flex-shrink: 0; width: 18px; height: 18px; margin: 0; border: 1.5px solid #98a2b3; border-radius: 5px; background: #fff; cursor: pointer;
}
.zzg-co__terms input:checked {
  border-color: var(--b);
  background: var(--b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.zzg-co__terms input:focus-visible { outline: 3px solid rgb(0 109 184 / 0.25); outline-offset: 2px; }
.zzg-co__terms-toggle {
  margin: 0 0 0 auto; padding: 0; border: 0; background: none; color: var(--b); cursor: pointer;
  font: 400 13px/1 "Roboto", sans-serif; text-decoration: underline; text-underline-offset: 3px;
}
.zzg-co__terms-text {
  width: 100%; max-height: 160px; overflow: auto; padding: 12px 14px; border: 1px solid #eaecf0; border-radius: 10px; background: #f9fafb;
  font: 400 13px/1.6 "Roboto", sans-serif; color: #475467;
}
.zzg-co__terms-text p { margin: 0 0 8px; }
.zzg-co__terms-text p:last-child { margin: 0; }
.zzg-co__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* total + button */
.zzg-co__pay { display: grid; grid-template-columns: 1fr 300px; align-items: center; gap: 28px; padding: 20px 22px; border: 1px solid #e3edf7; border-radius: 16px; background: #f5f9fd; }
.zzg-co__lines { margin: 0; }
.zzg-co__lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; font: 400 14px/1.4 "Roboto", sans-serif; color: #475467; }
.zzg-co__lines dt, .zzg-co__lines dd { margin: 0; }
.zzg-co__lines dd { color: #1f2a37; font-variant-numeric: tabular-nums; }
.zzg-co__lines .zzg-co__total { align-items: baseline; margin-top: 6px; padding-top: 10px; border-top: 1px dashed #c9d9ea; }
.zzg-co__total dt { font: 600 15px/1.2 "Roboto", sans-serif; color: var(--ink); }
.zzg-co__total dt span { font-weight: 400; font-size: 13px; color: var(--m); }
.zzg-co__total dd { font: 700 26px/1 "Roboto Condensed", sans-serif; color: var(--b); }
.zzg-co__submit {
  width: 100%; min-height: 50px; margin: 0; padding: 10px 22px; border: 0; border-radius: 50px; background: var(--b); color: #fff; cursor: pointer;
  font: 600 15.5px/1.3 "Poppins", sans-serif; font-variant-numeric: tabular-nums; word-spacing: 1px;
  box-shadow: 0 1px 2px rgb(0 85 146 / 0.2), inset 0 -1px 0 rgb(0 0 0 / 0.08); transition: background 0.2s ease;
}
.zzg-co__submit:hover { background: #005a99; }
.zzg-co__submit:active { background: var(--b-d); }
.zzg-co__submit:focus-visible { outline: 3px solid rgb(0 109 184 / 0.3); outline-offset: 2px; }
.zzg-co__submit:disabled { cursor: progress; opacity: 0.85; }
.zzg-co__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 12px 0 0; font: 400 12px/1.4 "Roboto", sans-serif; color: var(--m); }
.zzg-co__foot span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.zzg-co__foot svg { flex-shrink: 0; width: 13px; height: 13px; color: #8a94a6; }

/* tablets */
@media (max-width: 779px) {
  .zzg-co { max-width: 560px; }
  .zzg-co__head { padding: 24px 64px 22px 24px; }
  .zzg-co__body { padding: 22px 24px 24px; }
  .zzg-co__grid--you { grid-template-columns: 1fr 1fr; }
  .zzg-co__field--email { grid-column: 1 / -1; }
  .zzg-co__grid--card { grid-template-columns: 1fr 1fr; }
  .zzg-co__field--number { grid-column: 1 / -1; }
  .zzg-co__opts { grid-template-columns: 1fr; gap: 10px; }
  .zzg-co__pay { grid-template-columns: 1fr; gap: 16px; }
}
/* phones: a bottom sheet */
@media (max-width: 600px) {
  .zzg-co { width: 100%; max-width: none; max-height: calc(100dvh - 12px); margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .zzg-co[open] { animation-name: zzg-up; }
  @keyframes zzg-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .zzg-co__head { padding: 20px 60px 20px 18px; }
  .zzg-co__brand img { width: 46px; height: 46px; border-radius: 13px; }
  .zzg-co .zzg-co__title { font-size: 22px; }
  .zzg-co__body { padding: 20px 18px 22px; }
  .zzg-co__pay { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .zzg *, .zzg-co, .zzg-co * { transition: none !important; animation: none !important; }
}

/* how to pay: card (Stripe) or PayPal (components/donate/GiftCheckout.tsx) */
.zzg-co__methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.zzg-co__methods button {
  display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 14px;
  background: #fff; color: var(--ink); font: 600 15.5px/1.2 "Poppins", sans-serif; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.zzg-co__methods button svg { width: 22px; height: 22px; flex: none; }
.zzg-co__methods button:hover { border-color: #b9cce3; }
.zzg-co__methods button.is-on { border-color: var(--b); background: #f3f8fd; box-shadow: var(--ring); }
.zzg-co__methods button:focus-visible { outline: none; box-shadow: var(--ring); }
.zzg-co__venmo { margin-left: 2px; font: 500 12.5px/1 "Roboto", sans-serif; color: var(--m); }
.zzg-co__paypal { min-height: 56px; }
.zzg-co__paypal-note { margin: 8px 0 0; font: 400 14px/1.4 "Roboto", sans-serif; color: var(--m); text-align: center; }
.zzg-co__group[hidden] { display: none; }