/* ===================================================================
   Donate page (Variation A — Stripe vibe) — page-specific styles.
   Foundation in /portal/css/{tokens,base,components}.css.
   =================================================================== */

body { background: var(--white); }

/* ── Portal back-bar ──────────────────────────────────────────────
   Slim sticky header so donors can always get back to the portal home
   (the donate flow otherwise has no site nav, esp. on mobile). */
.portal-backbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: block;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.8) blur(8px);
  -webkit-backdrop-filter: saturate(1.8) blur(8px);
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
.portal-backbar .pbb-inner {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  min-height: 44px;
}
.portal-backbar .pbb-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.portal-backbar .pbb-ico {
  width: 18px;
  height: 18px;
  color: var(--blue-600, #2563eb);
  flex: none;
}
.portal-backbar .pbb-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700, #374151);
}
.portal-backbar .pbb-brand {
  font-family: var(--font-display, system-ui);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.3px;
  color: var(--brand-navy, #0f172a);
}
.portal-backbar .pbb-dot { color: var(--blue-600, #2563eb); }
.portal-backbar:hover .pbb-label { color: var(--blue-600, #2563eb); }

/* Spacer keeps the last form content (T&C checkbox) clear of the fixed
   sticky bottom-bar. The bar itself adds `--safe-bottom` to its own
   padding, so on notched phones (iPhone X+) it grows taller — the spacer
   must grow with it or the checkbox hides behind the bar. */
#app { min-height: 100vh; padding-bottom: calc(220px + var(--safe-bottom)); }

/* ── State containers ─────────────────────────────────────────── */
.state-loading, .state-form, .state-error, .state-bit-waiting {
  max-width: 480px;
  margin-inline: auto;
  position: relative;
}

/* ── Synagogue header ────────────────────────────────────────── */
.syn-header {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-base) var(--sp-lg) var(--sp-lg);
  border-bottom: var(--border-subtle);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.04), transparent);
}
.syn-crest {
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--blue-600), var(--brand-navy));
  border: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
}
.syn-crest img { width: 100%; height: 100%; object-fit: cover; }
.syn-meta { flex: 1; min-width: 0; }
.syn-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.2px;
  font-family: var(--font-display, inherit);
}
.syn-sub {
  font-size: var(--fs-caption);
  /* Bumped from gray-500 → gray-600 so the city/subtitle reads clearly
     against the light-blue tinted header background. */
  color: var(--gray-600);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-base);
  border: var(--border-card);
  background: var(--white);
  color: var(--gray-500);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-normal) var(--ease);
}
.btn-icon:hover { background: var(--gray-50); color: var(--gray-700); }
/* Language toggle reuses the icon-button chrome but holds a short text
   label ("EN" / "עב") instead of a glyph. */
.lang-toggle {
  width: auto;
  min-width: 36px;
  padding-inline: 8px;
  font-family: var(--font-display, inherit);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

/* ── Mobile value-prop strip (D1) ────────────────────────────── */
/* Surfaces the trust/value message on phones, where the desktop
   .donate-context column is hidden. Removed at ≥1024px (see below). */
.m-hero {
  padding: var(--sp-md) var(--sp-lg);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.05), transparent);
  border-bottom: var(--border-subtle);
}
.m-hero-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gray-800);
  margin: 0 0 var(--sp-sm);
  letter-spacing: -0.1px;
}
.m-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.m-hero-points span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gray-600);
}
.m-hero-points i {
  width: 13px;
  height: 13px;
  color: var(--blue-600);
  flex-shrink: 0;
}

/* ── Shabbat / Match banners (Wave 8B) ───────────────────────── */
.shabbat-banner {
  margin: var(--sp-base) var(--sp-lg) 0;
  padding: var(--sp-md) var(--sp-base);
  background: linear-gradient(135deg, #1e293b, #0F172A);
  color: var(--white);
  border-radius: var(--r-lg);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
}
.shabbat-banner-t {
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 14px;
}
.shabbat-banner-s {
  font-size: 12px;
  opacity: 0.85;
  line-height: 1.55;
}

.match-banner {
  position: relative;
  margin: var(--sp-base) var(--sp-lg) 0;
  /* Logical inline-start gutter so the reserved 56px follows the icon
     (positioned with inset-inline-start) in RTL — physical left padding
     overlapped the Hebrew headline. */
  padding: 16px;
  padding-inline-start: 56px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border: 1.5px solid #F59E0B;
  color: #78350F;
  border-radius: 14px;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  display: block;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.18);
  overflow: hidden;
}
.match-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,0.55), transparent 50%),
    radial-gradient(80% 80% at 100% 100%, rgba(180, 83, 9, 0.10), transparent 60%);
  pointer-events: none;
}
.match-banner > i {
  position: absolute;
  inset-inline-start: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px !important;
  height: 28px !important;
  color: #D97706 !important;
  filter: drop-shadow(0 2px 4px rgba(180, 83, 9, 0.3));
}
.match-banner > div { position: relative; }
.match-banner-t {
  font-weight: 800;
  margin-bottom: 4px;
  font-size: 16px;
  color: #78350F;
  letter-spacing: -0.3px;
}
.match-banner-s {
  font-size: 12.5px;
  color: #B45309;
  line-height: 1.55;
}

/* ── Invite banner ────────────────────────────────────────────── */
.invite-banner {
  margin: var(--sp-base) var(--sp-lg) 0;
  padding: var(--sp-md) var(--sp-base);
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  border-radius: var(--r-lg);
  color: var(--blue-700);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}

/* ── Block (form section) ────────────────────────────────────── */
.block {
  padding: var(--sp-lg) var(--sp-lg);
  border-bottom: var(--border-subtle);
}
.block-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-600);
  letter-spacing: 0.1px;
  margin: 0 0 var(--sp-md);
}

/* ── Big amount display (above slider) ───────────────────────── */
.amount-display {
  display: flex;
  align-items: baseline;
  gap: var(--sp-xs);
  justify-content: center;
  font-feature-settings: 'tnum';
  /* ₪ and the number live in separate flex children, so their order is
     flex-controlled (browser-consistent). isolate guards against the
     surrounding RTL run leaking in if the markup ever collapses to one
     text node — the Safari "180 ₪" bidi flip. */
  unicode-bidi: isolate;
}
.amount-value {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--gray-900);
  line-height: 1;
  font-family: var(--font-display);
}
.amount-unit {
  font-size: 24px;
  font-weight: 600;
  color: var(--gray-400);
}

/* The slider primitive renders its own .amount-value too. We hide
   the primitive's internal display since our outer one is bigger. */
.amount-slider .amount-display { display: none; }
.amount-slider .amount-chips { justify-content: center; }

/* ── Social proof badge (Wave 5) ──────────────────────────────── */
.social-proof {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-top: 6px;
  background: var(--gray-50);
  border-radius: var(--r-pill);
  font-size: 11px;
  color: var(--gray-600);
  font-weight: 500;
}
.social-proof-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}
.social-proof strong { color: var(--gray-900); font-weight: 700; }

/* ── Returning donor hint (Wave 5) ────────────────────────────── */
.donor-hint {
  margin-top: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  background: linear-gradient(135deg, #FEF3C7, var(--white));
  border: 1px solid #FDE68A;
  border-radius: var(--r-base);
  font-size: var(--fs-body-sm);
  color: #92400E;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.donor-hint i { color: #B45309; flex-shrink: 0; }
.donor-hint strong { color: #78350F; }

/* ── Recurring inline preview ─────────────────────────────────── */
.recurring-preview {
  margin-top: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--teal-50);
  border-radius: var(--r-base);
  font-size: var(--fs-body-sm);
  color: var(--teal-700);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

/* ── Smart recurring upsell ──────────────────────────────────── */
.recurring-upsell {
  margin-top: var(--sp-md);
  padding: var(--sp-md);
  background: linear-gradient(135deg, var(--teal-50, #E0F2F1), var(--white));
  border: 1px solid var(--teal-200, #B2DFDB);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.recurring-upsell-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-base);
  background: var(--teal-500, #00897B);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.recurring-upsell-meta { flex: 1; min-width: 0; }
.recurring-upsell-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
}
.recurring-upsell-sub {
  font-size: 11px;
  color: var(--gray-600);
  margin-top: 2px;
  font-feature-settings: 'tnum';
}
.recurring-upsell-cta {
  padding: 8px 14px;
  background: var(--teal-700, #00695C);
  color: var(--white);
  border: 0;
  border-radius: var(--r-base);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  transition: background var(--dur-normal) var(--ease);
}
.recurring-upsell-cta:hover { background: var(--teal-500, #00897B); }
.recurring-upsell-dismiss {
  background: transparent;
  border: 0;
  color: var(--gray-400);
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recurring-upsell-dismiss:hover { color: var(--gray-600); }

/* ── Fund picker (radio row variant tighter than .radio-row) ──── */
.fund-row {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-base);
  border-radius: var(--r-lg);
  background: transparent;
  border: var(--border-subtle);
  cursor: pointer;
  transition: all var(--dur-normal) var(--ease);
}
.fund-row:hover { background: var(--gray-50); }
.fund-row.selected {
  background: var(--blue-50);
  border-color: var(--blue-200);
}
.fund-row .fund-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-base);
  background: var(--gray-50);
  color: var(--gray-500);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--dur-normal) var(--ease);
}
.fund-row.selected .fund-icon {
  background: var(--blue-100);
  color: var(--blue-700);
}
.fund-row .fund-meta { flex: 1; min-width: 0; }
.fund-row .fund-title { font-size: 14px; font-weight: 600; color: var(--gray-900); }
.fund-row .fund-hint  { font-size: var(--fs-caption); color: var(--gray-500); margin-top: 1px; }
.fund-row .fund-radio {
  width: 20px; height: 20px;
  border-radius: var(--r-pill);
  border: 2px solid var(--gray-300);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-normal) var(--ease);
}
.fund-row.selected .fund-radio { border-color: var(--blue-600); }
.fund-row.selected .fund-radio::after {
  content: '';
  width: 10px; height: 10px;
  border-radius: var(--r-pill);
  background: var(--blue-600);
}

/* ── Fund goal thermometer ────────────────────────────────────── */
.fund-progress { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.fund-progress[hidden] { display: none; }
.fund-progress-bar {
  height: 6px;
  background: var(--gray-200);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.fund-progress-fill {
  height: 100%;
  width: 0;
  background: var(--blue-600);
  border-radius: var(--r-pill);
  transition: width .5s var(--ease);
}
.fund-progress.reached .fund-progress-fill { background: var(--success); }
.fund-progress-meta {
  font-size: var(--fs-caption);
  color: var(--gray-500);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.fund-progress-raised { font-weight: 600; color: var(--gray-700); }
.fund-progress-line { font-size: var(--fs-caption); color: var(--gray-500); }

/* ── Toggle row + Switch ──────────────────────────────────────── */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md) 0;
  width: 100%;
  text-align: right;
}
.toggle-row-button { background: none; cursor: pointer; }
.toggle-meta .toggle-title { font-size: 14px; font-weight: 600; color: var(--gray-900); }
.toggle-meta .toggle-hint  { font-size: var(--fs-caption); color: var(--gray-500); margin-top: 1px; }
.switch {
  width: 46px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--gray-200);
  position: relative;
  transition: background var(--dur-normal) var(--ease);
  flex-shrink: 0;
  cursor: pointer;
  border: 0;
}
.switch[aria-checked="true"] { background: var(--blue-600); }
.switch-thumb {
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: inset-inline-start var(--dur-normal) var(--ease);
}
.switch[aria-checked="true"] .switch-thumb { inset-inline-start: 21px; }

.divider { height: 1px; background: var(--gray-100); }

#dedication-toggle[aria-expanded="true"] #dedication-chevron {
  transform: rotate(-90deg);
}
.dedication-panel {
  padding-bottom: var(--sp-sm);
}

/* ── Optional-field hint on donor labels ─────────────────────── */
.optional-mark {
  /* gray-400 (#6b7c93) fell short of WCAG AA on small text against
     white; gray-600 reads clearly on mobile. */
  color: var(--gray-600);
  font-weight: 400;
  font-size: 0.85em;
  margin-inline-start: 4px;
}

/* Phone/email "either one" hint (1307 UX review #1 — name is required,
   but phone/email now form an OR group instead of phone being mandatory).
   Same visual treatment as .optional-mark, kept as its own class so the
   generic .optional-mark translation pass doesn't overwrite this copy. */
.contact-mark {
  color: var(--gray-600);
  font-weight: 400;
  font-size: 0.85em;
  margin-inline-start: 4px;
}

/* ── T&C block ───────────────────────────────────────────────── */
.tc-block { padding-block: var(--sp-base); }

/* Inline T&C consent inside the sticky .bottom-bar, sitting just above the
   pay button. Compact so the pinned bar stays short on mobile; RTL-safe via
   logical properties. */
.tc-inline {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-sm);
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--gray-600);
  cursor: pointer;
}
.tc-inline input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--blue-600);
}
.tc-inline a { color: var(--blue-600); text-decoration: underline; }

/* ── Donate submit button — richer than the generic .btn-primary ── */
#submit-btn.btn-primary {
  background: linear-gradient(135deg, var(--blue-600), var(--brand-navy, #1E3A8A));
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-weight: 800;
  letter-spacing: -0.1px;
}
#submit-btn.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--blue-700), #0F2F73);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.42),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}
#submit-btn.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.32);
}

/* ── Sticky bottom bar ───────────────────────────────────────── */
.bottom-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  padding: var(--sp-md) var(--sp-base) calc(var(--sp-base) + var(--safe-bottom));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: var(--border-subtle);
  z-index: 10;
  max-width: 480px;
  margin-inline: auto;
}

/* ── Bottom-bar amount + fund echo ───────────────────────────────
   Always-visible "what you'll pay" row inside the pinned bar, so the
   amount + chosen fund stay visible on small phones after they scroll
   off the top. RTL-safe (logical props; ₪ sits before the number). */
.bottom-echo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px var(--sp-xs);
  margin-bottom: var(--sp-sm);
  font-size: var(--fs-body-sm);
  line-height: 1.3;
}
.bottom-echo-label {
  color: var(--gray-500);
  font-weight: 600;
  font-size: var(--fs-caption);
}
.bottom-echo-amount {
  font-weight: 800;
  color: var(--gray-900, #0F172A);
  font-feature-settings: 'tnum';
  letter-spacing: -0.2px;
}
.bottom-echo-unit { margin-inline-end: 1px; }
.bottom-echo-period { font-weight: 600; color: var(--gray-500); font-size: var(--fs-caption); }
.bottom-echo-sep { color: var(--gray-300); }
.bottom-echo-fund {
  color: var(--gray-600);
  font-weight: 600;
  min-width: 0;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Payment brand marks (Visa / Mastercard / Isracard / Bit) ──────
   Muted, decorative reassurance above the pay button. Inline SVG only
   (CSP img-src 'self' — no external logos). */
.pay-brands {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-sm);
  opacity: 0.78;
}
.pay-brand {
  width: 36px;
  height: 24px;
  flex-shrink: 0;
  filter: grayscale(0.18);
}

/* SMS-receipt opt-in shown under the phone field for card donors with no email.
   RTL-safe (flex + gap, no directional props). */
.sms-receipt-optin {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: var(--fs-caption);
  color: var(--gray-700);
  cursor: pointer;
}
.sms-receipt-optin input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--blue-600);
}

/* Inline reason note shown directly above the pay button when Bit is filtered
   out (recurring / over the per-transaction cap). Amber to draw the eye on
   mobile without alarming. RTL-safe (centered, no directional props). */
.pay-tab-note {
  font-size: 11.5px;
  line-height: 1.45;
  color: #B45309;
  text-align: center;
  padding: 0 4px;
  margin-bottom: var(--sp-sm);
}

/* Payment tabs (CC / Bit segmented) */
.pay-tab {
  flex: 1;
  height: 44px;
  padding: var(--sp-sm);
  border-radius: var(--r-base);
  border: var(--border-card);
  background: var(--white);
  color: var(--gray-600);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  cursor: pointer;
  transition: all var(--dur-normal) var(--ease);
}
.pay-tab:hover { background: var(--gray-50); }
.pay-tab[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--blue-600), var(--brand-navy, #1E3A8A));
  border: 1.5px solid var(--brand-navy, #1E3A8A);
  color: var(--white);
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.30);
  font-weight: 700;
}
.pay-tab[aria-pressed="true"] i { color: var(--white); }

.method-empty {
  background: var(--warning-light);
  border: 1px solid var(--warning);
  border-radius: var(--r-base);
  padding: var(--sp-md) var(--sp-base);
  color: var(--warning-dark);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
}

.bottom-disclaimer {
  text-align: center;
  font-size: var(--fs-micro);
  color: var(--gray-400);
  margin-top: var(--sp-xs);
  margin-bottom: 0;
}

/* ── Legal / consent block (UX 1007 #1) ──────────────────────────
   Consent line + disclaimers moved OUT of the pinned .bottom-bar into the
   normal scrolling flow just above it, so the fixed bar stays short on
   small phones (amount echo + method tabs + pay button only). */
.legal-block {
  padding: var(--sp-sm) var(--sp-base) 0;
}
.legal-block .tc-inline { margin-bottom: var(--sp-xs); }

/* Short viewports (UX 1007 #1): the brand-marks row is pure decoration —
   drop it whenever vertical space is scarce (short landscape phones,
   small handsets) so the pinned bar never crowds out the form. */
@media (max-height: 700px) {
  .pay-brands { display: none; }
}

/* ── Very small phones (≤380px) (#5) ─────────────────────────────
   The sticky bottom bar stacks an echo row, method tabs, brand marks,
   the pay button and several disclaimer lines — a lot of vertical chrome
   on narrow handsets (≤360px). Trim the decorative parts so the pay
   button is never clipped. RTL-safe (logical/symmetric props only). */
@media (max-width: 380px) {
  .bottom-bar {
    padding: var(--sp-sm) var(--sp-sm) calc(var(--sp-xs) + var(--safe-bottom));
  }
  /* Brand marks are pure reassurance — drop them first to reclaim height. */
  .pay-brands { display: none; }
  .bottom-echo { margin-bottom: var(--sp-xs); }
  .pay-tab { height: 40px; }
  .bottom-disclaimer {
    line-height: 1.2;
    margin-top: 2px;
    font-size: 10.5px;
  }
  /* Condense the two disclaimer paragraphs into a single essential line:
     keep the "what happens next" method line, drop the redundant
     processing/all-shuls tail + the secondary "secure payment" reassurance
     (already implied by the method line) so the pay button is never clipped. */
  #disclaimer-1-tail,
  #disclaimer-1 br,
  #disclaimer-2 { display: none; }
  /* Smaller inline consent type on the tightest handsets. */
  .tc-inline {
    font-size: 10.5px;
    line-height: 1.3;
  }
}

/* ── Bit waiting state ────────────────────────────────────────── */
.bit-spinner {
  width: 80px;
  height: 80px;
  border-radius: var(--r-pill);
  background: var(--blue-50);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  animation: bit-pulse 1.5s ease-in-out infinite;
}
@keyframes bit-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: 0.85; }
}

/* ── Pelecard iframe modal ───────────────────────────────────── */
.iframe-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iframe-container {
  background: var(--white);
  border-radius: var(--r-2xl);
  width: calc(100% - 32px);
  max-width: 480px;
  /* Hug the Pelecard hosted form's natural height (~520px — see the proven
     mount in update-card.html) instead of towering 90dvh/720px. On a tall
     desktop viewport the old fixed 720px left a large empty white area below
     the short form (the bug Gal reported). min() still yields the viewport
     height on short phones, where the hosted page scrolls INTERNALLY (the
     iframe fills 100% of the container) so the pay button is never clipped —
     preserving the fix from commit 4771590b. */
  height: 560px;            /* fallback for browsers without dvh */
  height: min(560px, 90dvh);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Trust framing header strip inside the Pelecard modal — donors are handing
   over card details in an unfamiliar embedded frame, so a lock icon +
   "secure payment" line reassures before the hosted form even paints. */
.iframe-trust-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 10px 16px;
  padding-inline-end: 44px; /* clears the absolutely-positioned close button */
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--gray-700);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
}
/* The Pelecard iframe fills the remaining container height below the trust
   strip; its hosted page scrolls internally, so the flex layout is the only
   thing that bounds it. */
#iframe-mount { flex: 1; min-height: 0; }
.iframe-container iframe { width: 100%; height: 100%; border: 0; display: block; }
.iframe-close {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}

/* ── Donate shell + context (desktop hidden by default) ──────── */
.donate-shell { display: contents; }
.donate-context, .donate-summary { display: none; }

/* ── Tablet polish (480px–1023px): float the bottom bar nicely ─ */
@media (min-width: 720px) and (max-width: 1023.98px) {
  #app { padding-bottom: calc(140px + var(--safe-bottom)); }
  .syn-header { padding: var(--sp-xl) var(--sp-xl) var(--sp-xl); }
  .block { padding: var(--sp-xl); }
  .bottom-bar { max-width: 480px; bottom: var(--sp-lg); border-radius: var(--r-xl); border: var(--border-card); box-shadow: var(--shadow-lg); }
}

/* ── Desktop split layout (≥1024px) — 2-col (context + form) ──── */
@media (min-width: 1024px) {
  body { background: var(--gray-50); }
  /* Desktop shows the .donate-context column — hide the mobile strip. */
  .m-hero { display: none; }
  #app {
    padding: 48px 32px 64px;
    max-width: none;
    min-height: 100vh;
  }
  .state-form {
    max-width: 1100px;
    margin-inline: auto;
  }
  .donate-shell {
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 40px;
    align-items: start;
  }

  /* Left context column */
  .donate-context {
    display: block;
    position: sticky;
    top: 32px;
  }
  .ctx-hero {
    height: 220px;
    border-radius: var(--r-2xl);
    overflow: hidden;
    position: relative;
    background:
      radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,0.18), transparent 50%),
      linear-gradient(135deg, var(--blue-700), var(--brand-navy));
  }
  .ctx-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 18px);
    opacity: 0.6;
  }
  .ctx-hero-overlay {
    position: absolute;
    inset: 0;
    padding: var(--sp-xl);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--white);
  }
  .ctx-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    width: fit-content;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 11px;
    font-weight: 600;
    margin-bottom: var(--sp-sm);
  }
  .ctx-hero-dot {
    width: 6px; height: 6px;
    border-radius: var(--r-pill);
    background: #4ade80;
    box-shadow: 0 0 6px #4ade80;
  }
  .ctx-hero-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    /* base.css has a global `h2 { color: var(--gray-900) }` that wins
       over the overlay's inherited white — without an explicit override
       the syn name renders BLACK on the blue ctx-hero. !important so the
       global rule can't sneak back in via the cascade after a refactor. */
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.4);
    font-family: var(--font-display);
  }
  .ctx-hero-sub {
    font-size: 14px;
    color: #fff;
    opacity: 0.96;
    margin-top: var(--sp-xs);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  }
  /* Soft dark scrim at the bottom so the syn name + subtitle stay
     legible even when the shul picks a light accent color (yellow,
     pink, pastel). The overlay is layered above. */
  .ctx-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(15, 23, 42, 0.6) 100%);
    pointer-events: none;
  }
  .ctx-hero-overlay { z-index: 1; }

  .ctx-section {
    padding-block: var(--sp-xl);
    border-bottom: var(--border-subtle);
  }
  .ctx-section:last-of-type {
    border-bottom: 0;
  }

  /* "איך זה עובד" — 3-step list */
  .how-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
  }
  .how-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-base);
  }
  .how-num {
    width: 32px;
    height: 32px;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--blue-600), var(--brand-navy));
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  }
  .how-meta { flex: 1; min-width: 0; padding-top: 4px; }
  .how-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.3;
  }
  .how-sub {
    font-size: var(--fs-caption);
    color: var(--gray-500);
    margin-top: 2px;
    line-height: 1.5;
  }

  /* FAQ — collapsible <details> */
  .ctx-faq {
    border-top: var(--border-subtle);
    padding: var(--sp-sm) 0;
  }
  .ctx-faq:first-of-type { border-top: 0; padding-top: 0; }
  .ctx-faq summary {
    cursor: pointer;
    list-style: none;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gray-800);
    padding: 6px 0;
    position: relative;
    padding-inline-start: 22px;
    user-select: none;
  }
  .ctx-faq summary::-webkit-details-marker { display: none; }
  .ctx-faq summary::before {
    content: '+';
    position: absolute;
    inset-inline-start: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 13px;
    font-weight: 700;
    transition: transform var(--dur-normal) var(--ease), background var(--dur-normal) var(--ease);
  }
  .ctx-faq[open] summary::before {
    content: '−';
    background: var(--blue-600);
    color: var(--white);
    transform: rotate(180deg);
  }
  .ctx-faq summary:hover { color: var(--gray-900); }
  .ctx-faq p {
    font-size: 12.5px;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 6px 0 8px 22px;
  }

  .ctx-help {
    padding: var(--sp-md) var(--sp-base);
    margin-top: var(--sp-base);
    border-radius: var(--r-lg);
    background: var(--white);
    border: var(--border-card);
    color: var(--gray-600);
    font-size: var(--fs-body-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-sm);
  }
  .ctx-help i { flex-shrink: 0; color: var(--gray-500); margin-top: 2px; }

  /* Right form card */
  .donate-card {
    background: var(--white);
    border: var(--border-card);
    border-radius: var(--r-2xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    overflow: hidden;
  }
  .donate-card .syn-header {
    padding: var(--sp-lg) var(--sp-xl);
  }
  .donate-card .invite-banner {
    margin: var(--sp-base) var(--sp-xl) 0;
  }
  .donate-card .block {
    padding: var(--sp-lg) var(--sp-xl);
  }
  .donate-card .block:last-of-type {
    border-bottom: 0;
  }

  /* Inline bottom-bar (no longer fixed on desktop) */
  .donate-card .bottom-bar {
    position: static;
    inset-inline: auto;
    bottom: auto;
    max-width: none;
    margin-inline: 0;
    background: var(--gray-50);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: var(--border-subtle);
    padding: var(--sp-base) var(--sp-xl) var(--sp-lg);
    z-index: auto;
    border-radius: 0;
  }
  .donate-card .bottom-bar .bottom-disclaimer { margin-top: var(--sp-sm); }
  /* Legal block sits between the form and the (inline, non-fixed) bar —
     match the card's horizontal rhythm. */
  .donate-card .legal-block { padding: var(--sp-sm) var(--sp-xl) 0; }
}

/* ── Wide desktop (≥1280px): 3-col layout (context | form | summary) ── */
@media (min-width: 1280px) {
  .state-form { max-width: 1320px; }
  .donate-shell {
    grid-template-columns: 280px 1fr 320px;
    gap: 36px;
  }
  .donate-summary {
    display: block;
    position: sticky;
    top: 32px;
  }
}

/* ── Summary panel (right rail, ≥1280px) ─────────────────────── */
.ds-card {
  background: var(--white);
  border: var(--border-card);
  border-radius: var(--r-2xl);
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.ds-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-600);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin-bottom: 14px;
}
.ds-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-feature-settings: 'tnum';
  unicode-bidi: isolate;
}
.ds-amount-unit {
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-600);
}
#ds-amount-value {
  font-size: 40px;
  font-weight: 900;
  color: var(--gray-900);
  letter-spacing: -1.2px;
  line-height: 1;
}
.ds-amount-period {
  font-size: 14px;
  color: var(--gray-500);
  margin-inline-start: 6px;
}
.ds-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 13px;
  border-bottom: 1px dashed var(--gray-200);
}
.ds-row:last-of-type { border-bottom: 0; }
.ds-row-label { color: var(--gray-500); font-weight: 500; flex-shrink: 0; }
.ds-row-value {
  color: var(--gray-900);
  font-weight: 600;
  text-align: end;
  word-break: break-word;
}
.ds-divider {
  height: 1px;
  background: var(--gray-100);
  margin: 14px -8px;
}

/* Summary panel breakdown (donate v2) */
.ds-breakdown {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  font-feature-settings: 'tnum';
}
.ds-bd-row {
  display: flex;
  justify-content: space-between;
  color: var(--gray-700);
}
.ds-bd-row.ds-bd-total {
  border-top: 1px solid var(--gray-100);
  padding-top: 6px;
  margin-top: 2px;
  color: var(--gray-900);
  font-weight: 800;
  font-size: 13.5px;
}
.ds-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 12px;
}
.ds-benefits li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  color: var(--gray-700);
}
.ds-benefits li i {
  color: var(--success, #10b981);
  margin-top: 3px;
  flex-shrink: 0;
}
.ds-benefits li div { display: flex; flex-direction: column; gap: 2px; }
.ds-benefits li strong {
  font-weight: 700;
  color: var(--gray-900);
  font-size: 12.5px;
}
.ds-benefits li span {
  font-size: 11px;
  color: var(--gray-500);
}
.ds-trust-badges {
  display: flex;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-100);
}
.ds-trust-badges span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--gray-500);
  padding: 4px 8px;
  background: var(--gray-50);
  border-radius: var(--r-pill);
}
.ds-trust-badges i { color: var(--gray-400); }

/* Keep mobile-first base; honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bit-spinner { animation: none; }
}

/* ── Manual amount input (donate v2) ─────────────────────────────── */
.amount-display .amount-value {
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 120ms ease;
  /* Persistent "tap to type" affordance — the :hover/:focus outline below
     never fires on touch, so the number alone looked un-editable on phones.
     A dotted underline marks it as an editable field at all times. */
  text-decoration: underline dotted var(--blue-400, #60A5FA);
  text-underline-offset: 8px;
  text-decoration-thickness: 2px;
}
/* Small pencil glyph trailing the number (inline-end = RTL-correct: sits to
   the LEFT of the Hebrew-context number, mirrors automatically in LTR). */
.amount-display .amount-value::after {
  content: '✎';
  font-size: 0.32em;
  font-weight: 600;
  color: var(--blue-500, #3B82F6);
  vertical-align: super;
  margin-inline-start: 0.18em;
  /* Pencil is a hint, not part of the value — never selected/copied. */
  -webkit-user-select: none;
  user-select: none;
}
.amount-display .amount-value:hover,
.amount-display .amount-value:focus-visible {
  background: var(--blue-50);
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
  text-decoration-color: var(--blue-600);
}
.amount-manual {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.amount-manual.hidden { display: none; }
.amount-manual-unit {
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-600);
}
.amount-manual-input {
  width: 160px;
  padding: 12px 14px;
  font-size: 22px;
  font-weight: 700;
  font-family: inherit;
  text-align: center;
  border: 2px solid var(--blue-600);
  border-radius: 10px;
  background: var(--white);
  font-feature-settings: 'tnum';
  -moz-appearance: textfield;
}
.amount-manual-input::-webkit-outer-spin-button,
.amount-manual-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.amount-manual-input:focus { outline: none; }
.amount-manual-done {
  padding: 10px 16px;
  background: var(--blue-600);
  color: var(--white);
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.amount-manual-toggle-row { text-align: center; margin-top: 8px; }
.amount-manual-toggle {
  background: none;
  border: 0;
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.amount-manual-toggle:hover { color: var(--blue-700); }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Preset amount chips above the slider. Inline style on .amount-presets
   handles layout; this only handles the chip look + active state. */
.preset-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--gray-200, #E5E7EB);
  background: #fff;
  color: var(--gray-700, #374151);
  cursor: pointer;
  transition: background var(--dur-fast, 150ms) var(--ease, ease),
              border-color var(--dur-fast, 150ms) var(--ease, ease),
              color var(--dur-fast, 150ms) var(--ease, ease);
  min-height: 38px;
  font-variant-numeric: tabular-nums;
}
.preset-btn:hover { border-color: var(--blue-400, #60A5FA); color: var(--blue-700, #1D4ED8); }
.preset-btn:focus-visible {
  outline: 2px solid var(--blue-500, #3B82F6);
  outline-offset: 2px;
}
.preset-btn.active {
  background: var(--blue-50, #EFF6FF);
  border-color: var(--blue-600, #2563EB);
  color: var(--blue-700, #1D4ED8);
}
/* Preset chips row container (#1). RTL-safe: flex wraps + centers, mirrors
   automatically. Hidden when empty (no presets fit the shul's range). */
.amount-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.amount-presets:empty { display: none; }

/* Collapsed amount state (#amount-confirmed-row): shown when the donor already
   picked an amount in the shul-page modal (?amount=). Hides the full picker so
   they don't choose twice; the "שנה" link removes .collapsed to restore it.
   RTL-safe (flex + gap + space-between, no directional props). */
.amount-confirmed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--gray-50, #F8FAFC);
  border: 1px solid var(--gray-200, #E2E8F0);
  border-radius: 12px;
}
#amount-confirmed-text {
  font-size: 16px;
  font-weight: 800;
  color: var(--gray-900);
}
.amount-confirmed-edit {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-600, #2563EB);
  text-decoration: underline;
  padding: 4px;
  flex-shrink: 0;
}
.amount-section.collapsed #amount-suggested-label,
.amount-section.collapsed #amount-display-row,
.amount-section.collapsed #amount-presets,
.amount-section.collapsed #amount-manual,
.amount-section.collapsed #amount-slider-mount,
.amount-section.collapsed .amount-manual-toggle-row { display: none; }

/* Anchored "recommended" cue above the amount (#2). Muted + centered so it
   reads as context, not a heading. */
.amount-suggested-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500, #6B7280);
  letter-spacing: 0.2px;
  margin-bottom: 2px;
}
.amount-suggested-label.hidden { display: none; }

/* §46 honesty note (UX 1007 #2) — calm inline line under the amount block,
   shown by syncSec46Note() only when the chosen amount ≥ ₪500. Muted gray
   (informational, not a warning). RTL-safe (flex + gap). */
.sec46-note {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: var(--sp-sm);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--gray-500);
}
.sec46-note i { margin-top: 2px; }
.sec46-note.hidden { display: none; }

/* Submit-button spinner — visible while form is mid-submit. */
.submit-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: submit-spin 700ms linear infinite;
  margin-inline-end: 6px;
}
#submit-btn[data-loading="true"] .submit-spinner { display: inline-block; }
#submit-btn[data-loading="true"] [data-lucide] { display: none; }
@keyframes submit-spin { to { transform: rotate(360deg); } }

/* Event-context banner — shown above the fund list when the donate
   link carried `?eventId=` and the event has donations enabled. */
.event-banner {
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
  border: 1px solid #FCD34D;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.event-banner__pill {
  display: inline-block;
  background: #92400E;
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
}
.event-banner__title {
  font-size: 15px;
  font-weight: 700;
  color: #78350F;
  line-height: 1.35;
}
.event-banner__meta {
  font-size: 11.5px;
  color: #B45309;
  margin-top: 3px;
}