/* ===========================================================
   Prairie Muslim Association — Donation Kiosk
   Brand: green #1f6e3f · gold #ecc940 · muted gold #c9a55c
          cream #faf6ec · dark forest #1a2a1f
   Fonts: Cormorant Garamond (display) · Cinzel (labels) · Inter (UI)
   =========================================================== */

:root {
  --green: #1f6e3f;
  --green-deep: #16542f;
  --green-dark: #0f3d22;
  --gold: #ecc940;
  --gold-muted: #c9a55c;
  --cream: #faf6ec;
  --cream-2: #fdf8ee;
  --ink: #1a2a1f;
  --ink-soft: #4a5a4f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Warm background with a faint dome halo for depth */
body {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(236, 201, 64, 0.10), transparent 55%),
    radial-gradient(90% 70% at 50% 115%, rgba(31, 110, 63, 0.08), transparent 60%),
    linear-gradient(180deg, var(--cream-2), var(--cream));
}

/* ---------- Screen switching ---------- */
/* height: 100vh on Android Chrome means the viewport as if the address bar
   were hidden, so the page is taller than what's actually visible and the
   bottom (the Facebook/Instagram QR row) gets cut off. dvh tracks the real
   visible height; the vh line stays as a fallback for older engines. */
.screen { display: none; height: 100vh; height: 100dvh; padding: clamp(24px, 4vh, 56px) clamp(24px, 5vw, 90px); }
.screen.active { display: flex; flex-direction: column; }
#screen-grid { position: relative; }

/* Top-corner "Tax Receipt" access (opens the QR without donating) */
.receipt-access {
  position: absolute;
  top: clamp(16px, 2.6vh, 30px);
  right: clamp(18px, 3.5vw, 56px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(9px, 1.3vh, 13px) clamp(14px, 1.6vw, 20px);
  border: 1.5px solid var(--gold-muted);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--green);
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: clamp(12px, 1.4vw, 16px);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(31, 61, 34, 0.10);
}
.receipt-access svg { width: 1.15em; height: 1.15em; color: var(--gold-muted); }
.receipt-access:active { transform: translateY(2px); }

/* Standalone receipt/profile screen QR */
.receipt-qr-lg {
  width: clamp(150px, 24vh, 240px);
  height: auto;
  background: #fff;
  border: 1px solid var(--gold-muted);
  border-radius: 12px;
  padding: 10px;
}

.receipt-wrap {
  margin: auto;
  width: min(96vw, 1180px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 22px);
}
.receipt-head { text-align: center; }
.receipt-cols {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.5vw, 40px);
  width: 100%;
}
.receipt-email {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 14px);
  max-width: 640px;
}
.email-label {
  text-align: center;
  font-family: 'Inter', sans-serif;
  color: var(--ink-soft);
  font-size: clamp(13px, 1.6vw, 18px);
}
.email-display {
  min-height: clamp(48px, 7vh, 66px);
  background: #fff;
  border: 1.5px solid var(--gold-muted);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0 16px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(20px, 2.6vw, 30px);
  color: var(--ink);
  word-break: break-all;
}
.caret {
  width: 2px;
  height: 1.1em;
  background: var(--green);
  animation: blink 1s step-start infinite;
  flex-shrink: 0;
}
@keyframes blink { 50% { opacity: 0; } }

.kbd { display: flex; flex-direction: column; gap: clamp(5px, 0.9vh, 9px); }
.kbd-row { display: flex; gap: clamp(4px, 0.7vw, 8px); justify-content: center; }
.kbd-key {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(201, 165, 92, 0.5);
  border-radius: 9px;
  background: linear-gradient(160deg, #fff, var(--cream));
  color: var(--green);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 1.8vw, 22px);
  padding: clamp(9px, 1.6vh, 15px) 0;
  cursor: pointer;
  box-shadow: 0 3px 7px rgba(31, 61, 34, 0.07);
}
.kbd-key:active { transform: translateY(2px); background: var(--green); color: var(--cream); }
.kbd-wide { flex: 2.6; font-size: clamp(11px, 1.35vw, 16px); }
.kbd-back { flex: 1.5; color: var(--gold-muted); }

.receipt-or {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--gold-muted);
  font-family: 'Cinzel', serif;
  font-size: clamp(12px, 1.4vw, 16px);
  align-self: stretch;
}
.receipt-or span {
  width: 1px;
  flex: 1;
  min-height: 30px;
  background: linear-gradient(180deg, transparent, var(--gold-muted));
}
.receipt-or span:last-child { background: linear-gradient(180deg, var(--gold-muted), transparent); }

.receipt-scan {
  flex: 0.9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scan-cap {
  font-family: 'Inter', sans-serif;
  color: var(--ink-soft);
  font-size: clamp(12px, 1.5vw, 16px);
}
.email-status {
  text-align: center;
  min-height: 1.4em;
  font-family: 'Inter', sans-serif;
  font-size: clamp(13px, 1.5vw, 17px);
  color: var(--ink-soft);
}
.email-status.ok { color: var(--green); font-weight: 600; }
.email-status.err { color: #b23b34; }

/* ---------- Header ---------- */
.head { text-align: center; flex-shrink: 0; }
.logo {
  width: clamp(96px, 12vh, 168px);
  height: auto;
  margin: 0 auto clamp(8px, 1.4vh, 18px);
  display: block;
}
.eyebrow {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--green);
  font-size: clamp(11px, 1.5vw, 17px);
  padding-left: 0.32em; /* optical centering for letter-spacing */
}
.head h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(26px, 4vw, 52px);
  line-height: 1.05;
  margin-top: 4px;
}
.subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-style: italic;
  color: var(--ink-soft);
  font-size: clamp(18px, 2.4vw, 30px);
}

/* Gold diamond divider */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gold-muted);
  margin: clamp(6px, 1.2vh, 14px) auto;
  font-size: clamp(12px, 1.4vw, 16px);
}
.divider span {
  display: block;
  height: 1px;
  width: clamp(40px, 8vw, 90px);
  background: linear-gradient(90deg, transparent, var(--gold-muted));
}
.divider span:last-child { background: linear-gradient(90deg, var(--gold-muted), transparent); }

/* ---------- Amount grid ---------- */
.grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(12px, 2vw, 26px);
  align-content: stretch;
  padding: clamp(12px, 2.2vh, 28px) 0;
  min-height: 0;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  color: var(--cream);
  /* Deep, dimensional green matching the header's fill — top sheen + a rich
     radial gradient (same #2b8150→#175733→#0a2414 as the Donation Hub hero). */
  background:
    radial-gradient(120% 90% at 50% -18%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 46%),
    radial-gradient(135% 130% at 50% 0%, #2b8150 0%, #175733 52%, #0a2414 100%);
  box-shadow:
    0 12px 28px rgba(10, 36, 20, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 -22px 44px rgba(0, 0, 0, 0.26) inset;
  overflow: hidden;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
/* Gold hairline frame echoing the logo's arches */
.tile::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(236, 201, 64, 0.45);
  border-radius: 14px;
  pointer-events: none;
}
.tile .amt {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: clamp(38px, 6.5vw, 82px);
  line-height: 1;
  font-feature-settings: "lnum" 1, "tnum" 1; /* uniform-height, tabular figures */
}
.cur {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: clamp(10px, 1.2vw, 14px);
  color: var(--gold);
  text-transform: uppercase;
  margin-top: 6px;
}
.tile:active {
  transform: translateY(5px) scale(0.99);
  box-shadow: 0 4px 12px rgba(15, 61, 34, 0.3);
}
.tile:active::before { border-color: var(--gold); }

/* Custom-amount tile — inverted (cream + gold) to read as a distinct action */
.tile-custom {
  background: linear-gradient(160deg, #ffffff, var(--cream));
  color: var(--green);
  box-shadow: 0 10px 22px rgba(201, 165, 92, 0.24), 0 2px 0 rgba(255, 255, 255, 0.6) inset;
}
.tile-custom::before { border-color: var(--gold-muted); }
.tile-custom .amt-custom {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: clamp(30px, 5vw, 62px);
  line-height: 1;
  color: var(--green);
}
.tile-custom .cur { color: var(--gold-muted); }
.tile-custom:active::before { border-color: var(--gold); }

/* ---------- Specific-fund band (Sadaqah / Zakat) ---------- */
.funds { flex-shrink: 0; margin-top: clamp(10px, 2vh, 22px); }
.funds-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-muted);
  font-size: clamp(11px, 1.4vw, 15px);
  margin-bottom: clamp(8px, 1.4vh, 14px);
}
.funds-label span {
  height: 1px;
  width: clamp(28px, 6vw, 70px);
  background: linear-gradient(90deg, transparent, var(--gold-muted));
}
.funds-label span:last-child { background: linear-gradient(90deg, var(--gold-muted), transparent); }
.funds-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(12px, 2vw, 26px);
}
.fund-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  color: var(--cream);
  background: linear-gradient(160deg, var(--green) 0%, var(--green-deep) 70%, var(--green-dark) 100%);
  box-shadow: 0 10px 22px rgba(15, 61, 34, 0.26);
  padding: clamp(16px, 3vh, 30px) 10px;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.fund-tile::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(236, 201, 64, 0.55);
  border-radius: 12px;
  pointer-events: none;
}
.fund-tile:active { transform: translateY(4px); box-shadow: 0 4px 12px rgba(15, 61, 34, 0.3); }
.fund-tile:active::before { border-color: var(--gold); }
.fund-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1;
}

/* ---------- Footer ---------- */
.foot {
  flex-shrink: 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: clamp(12px, 1.5vw, 17px);
  letter-spacing: 0.02em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.foot .sep { color: var(--gold-muted); }
.foot .tag { font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: clamp(14px, 1.7vw, 20px); }

/* ---------- Centered screens (pay / done / error) ---------- */
.center {
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.8vh, 20px);
  max-width: 780px;
}
.center h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(28px, 4.4vw, 54px);
  color: var(--ink);
}
.center .display { color: var(--green); }
.center .lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(19px, 2.6vw, 30px);
  color: var(--ink-soft);
}
.hint {
  font-family: 'Inter', sans-serif;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.9vw, 21px);
}
.pay-amount {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  color: var(--green);
  font-size: clamp(56px, 11vw, 128px);
  line-height: 1;
}

/* ---------- Buttons ---------- */
.btn {
  margin-top: clamp(12px, 2vh, 24px);
  border: none;
  border-radius: 14px;
  padding: clamp(14px, 1.8vh, 20px) clamp(32px, 5vw, 52px);
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: clamp(15px, 2vw, 22px);
  background: var(--green);
  color: var(--cream);
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 61, 34, 0.25);
}
.btn:active { transform: translateY(3px); }
.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1.5px solid var(--gold-muted);
  box-shadow: none;
}
.btn[disabled] {
  opacity: 0.4;
  box-shadow: none;
  cursor: default;
}

/* ---------- Custom-amount keypad ---------- */
.keypad-wrap {
  margin: auto;
  width: min(92vw, 540px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.keypad-amount {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  color: var(--green);
  font-size: clamp(56px, 12vh, 104px);
  line-height: 1.1;
  font-feature-settings: "lnum" 1, "tnum" 1;
  margin-top: 4px;
}
.keypad-hint {
  font-family: 'Inter', sans-serif;
  color: var(--ink-soft);
  font-size: clamp(13px, 1.7vw, 18px);
  margin-bottom: clamp(10px, 2vh, 20px);
}
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vh, 18px);
  width: 100%;
}
.key {
  border: 1px solid rgba(201, 165, 92, 0.5);
  border-radius: 16px;
  background: linear-gradient(160deg, #ffffff, var(--cream));
  color: var(--green);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: clamp(28px, 4.5vh, 46px);
  font-feature-settings: "lnum" 1, "tnum" 1;
  padding: clamp(12px, 2.4vh, 24px) 0;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(31, 61, 34, 0.08);
  transition: transform 0.06s ease, background 0.06s ease;
}
.key:active {
  transform: translateY(3px);
  background: var(--green);
  color: var(--cream);
}
.key-alt {
  font-family: 'Cinzel', serif;
  font-size: clamp(15px, 2.2vh, 24px);
  letter-spacing: 0.04em;
  color: var(--gold-muted);
  background: var(--cream-2);
}
.keypad-actions {
  display: flex;
  gap: 16px;
  width: 100%;
  margin-top: clamp(14px, 2.4vh, 26px);
}
.keypad-actions .btn { flex: 1; margin-top: 0; }

/* ---------- Status badges ---------- */
.badge {
  width: clamp(96px, 15vh, 156px);
  height: clamp(96px, 15vh, 156px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(52px, 8vh, 92px);
  font-weight: 700;
  color: var(--cream);
}
.badge-ok {
  background: radial-gradient(circle at 35% 30%, #2f9e5a, var(--green-deep));
  box-shadow: 0 0 0 8px rgba(31, 110, 63, 0.12), 0 12px 30px rgba(15, 61, 34, 0.3);
  color: var(--gold);
}
.badge-err {
  background: radial-gradient(circle at 35% 30%, #c9584f, #9a3a33);
  box-shadow: 0 0 0 8px rgba(154, 58, 51, 0.12);
}

/* ---------- Tax-receipt QR (success screen) ---------- */
.receipt-cta {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  margin-top: clamp(8px, 1.6vh, 18px);
  background: #ffffff;
  border: 1px solid var(--gold-muted);
  border-radius: 18px;
  padding: clamp(14px, 2.2vh, 22px) clamp(18px, 2.6vw, 30px);
  box-shadow: 0 8px 22px rgba(31, 61, 34, 0.10);
}
.receipt-qr {
  width: clamp(110px, 16vh, 184px);
  height: auto;
  display: block;
  border-radius: 8px;
}
.receipt-text { text-align: left; max-width: 360px; }
.receipt-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  color: var(--green);
  font-size: clamp(20px, 2.7vw, 32px);
  line-height: 1.1;
}
.receipt-sub {
  font-family: 'Inter', sans-serif;
  color: var(--ink-soft);
  font-size: clamp(13px, 1.6vw, 18px);
  margin-top: 6px;
}
.receipt-url {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.03em;
  color: var(--gold-muted);
  font-size: clamp(12px, 1.5vw, 16px);
  margin-top: 10px;
}

/* ---------- Arch spinner (dome-inspired) ---------- */
.arch-spinner {
  width: clamp(78px, 12vh, 116px);
  height: clamp(78px, 12vh, 116px);
  border: 7px solid rgba(31, 110, 63, 0.15);
  border-top-color: var(--green);
  border-right-color: var(--gold);
  border-radius: 50%;
  animation: spin 1.1s linear infinite;
  margin-bottom: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Landscape TVs: keep header tight so the grid stays generous */
@media (min-aspect-ratio: 16/10) and (max-height: 900px) {
  .logo { width: clamp(80px, 14vh, 130px); }
  .head h1 { font-size: clamp(24px, 3vw, 40px); }
}

/* ======================= ADMIN PANEL ======================= */
.btn-sm {
  margin-top: 10px;
  padding: 10px 22px;
  font-size: 15px;
  border-radius: 12px;
}
.admin-wrap {
  width: min(680px, 94vw);
  margin: 0 auto;
  padding: clamp(16px, 3vh, 32px) 0 48px;
  overflow-y: auto;
  max-height: 100vh;
  max-height: 100dvh;
}
.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.admin-head .display { font-size: clamp(28px, 5vw, 40px); color: var(--green); margin: 0; }
.admin-card {
  background: var(--cream-2);
  border: 1px solid rgba(201, 165, 92, 0.4);
  border-radius: 16px;
  padding: clamp(14px, 2.4vw, 22px);
  margin-bottom: 16px;
  box-shadow: 0 6px 16px rgba(15, 61, 34, 0.06);
}
.admin-card h3 {
  font-family: 'Cinzel', serif;
  color: var(--green-deep);
  font-size: 18px;
  margin: 0 0 8px;
}
.admin-card-head { display: flex; align-items: center; justify-content: space-between; }
.admin-card-head h3 { margin: 0; }
.admin-card-head .btn-sm { margin-top: 0; }
.admin-hint { color: var(--ink-soft); font-size: 14px; line-height: 1.4; margin: 6px 0; }
.admin-status { margin: 4px 0; }
.stat {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px dashed rgba(201, 165, 92, 0.35);
  font-size: 15px;
}
.stat:last-child { border-bottom: none; }
.stat span { color: var(--ink-soft); }
.stat b { color: var(--ink); font-weight: 600; word-break: break-all; text-align: right; }
.stat b.ok { color: var(--green); }
.stat b.bad { color: #b0304a; }

/* ---- Collections report ---- */
.range-tabs { display: flex; gap: 6px; }
.range-tabs .btn-sm { margin-top: 0; }
.btn.is-active {
  background: var(--green);
  color: var(--cream);
  border-color: var(--green);
}
.report-total {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 14px;
}
.report-total-amt {
  font-family: 'Cinzel', serif;
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 700;
  color: var(--green-deep);
  line-height: 1;
}
.report-total-sub { color: var(--ink-soft); font-size: 14px; }
.report-body { display: flex; flex-direction: column; }
.report-day { padding: 10px 0; border-bottom: 1px dashed rgba(201, 165, 92, 0.35); }
.report-day:last-child { border-bottom: none; }
.report-day-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.report-day-top b { color: var(--ink); font-size: 16px; font-weight: 700; }
.report-day-amt { color: var(--green); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.report-day-funds { color: var(--gold-muted); font-size: 12.5px; margin-top: 3px; }
.admin-input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 14px 16px;
  border: 1.5px solid var(--gold-muted);
  border-radius: 12px;
  font-size: 20px;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: #fff;
}
.pair-result { margin-top: 14px; text-align: center; }
.pair-code {
  font-family: 'Cinzel', serif;
  font-size: clamp(40px, 9vw, 68px);
  letter-spacing: 0.18em;
  color: var(--green);
  font-weight: 700;
  padding: 10px 0;
}
b.ok { color: var(--green); }

/* PIN modal */
.pin-modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(15, 61, 34, 0.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.pin-modal[hidden] { display: none; }
.pin-box {
  background: var(--cream);
  border-radius: 22px;
  padding: 26px 26px 20px;
  width: min(340px, 90vw);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.pin-title { font-family: 'Cinzel', serif; color: var(--green-deep); font-size: 18px; margin: 0 0 16px; }
.pin-dots { display: flex; justify-content: center; gap: 12px; margin-bottom: 18px; height: 16px; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gold-muted); }
.pin-dot.filled { background: var(--green); border-color: var(--green); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pin-key {
  padding: 16px 0;
  font-size: 24px;
  font-family: 'Inter', sans-serif;
  border: none;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(15, 61, 34, 0.1);
}
.pin-key:active { transform: translateY(2px); }
.pin-key.pin-ok { background: var(--green); color: var(--cream); }
.pin-key.pin-alt { background: var(--cream-2); }
.pin-error { color: #b0304a; font-size: 14px; min-height: 18px; margin: 12px 0 4px; }

/* ---------- Kiosk touch hardening ---------- */
/* Stop long-press callouts, image "copy/save", text selection, and drag —
   otherwise long-pressing the logo pops the browser's image menu on phones. */
html, body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: auto;
}
/* Real text fields still need selection/editing. */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* ================= DONATE HERE BANNER + PROGRAMS & EVENTS ================= */
.donate-banner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 1.5vw, 18px);
  margin-bottom: clamp(8px, 1.6vh, 20px);
  padding: clamp(8px, 1.2vh, 14px) clamp(12px, 1.6vw, 22px);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--green), var(--green-deep));
  border: 1.5px solid var(--gold);
  box-shadow: 0 8px 22px rgba(15, 61, 34, 0.22);
}
.dh-title {
  flex: 1;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--gold);
  font-size: clamp(22px, 3.4vw, 44px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.dh-cta { border: none; background: transparent; cursor: pointer; }
.bar-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(8px, 1.1vh, 12px) clamp(12px, 1.4vw, 18px);
  border: 1.5px solid rgba(236, 201, 64, 0.6);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--cream);
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: clamp(12px, 1.3vw, 16px);
  cursor: pointer;
}
.bar-btn svg { width: clamp(16px, 1.6vw, 20px); height: clamp(16px, 1.6vw, 20px); flex-shrink: 0; }
.bar-spacer { width: clamp(96px, 12vw, 168px); }

#screen-programs.active { display: flex; flex-direction: column; }
.programs-wrap { flex: 1; min-height: 0; overflow-y: auto; padding-top: clamp(6px, 1.4vh, 16px); }
.programs-head { text-align: center; margin-bottom: clamp(10px, 2vh, 22px); }
.programs-head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(28px, 4.4vw, 52px);
  margin-top: 2px;
}
.prog-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 34px); }
.prog-section { margin-bottom: clamp(14px, 2.2vh, 26px); }
.prog-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Cinzel', serif;
  color: var(--green-deep);
  font-size: clamp(16px, 1.9vw, 24px);
  font-weight: 600;
  margin-bottom: clamp(8px, 1.4vh, 16px);
}
.prog-title span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-muted)); }
.prog-title span:last-child { background: linear-gradient(90deg, var(--gold-muted), transparent); }
.prog-list { display: flex; flex-direction: column; gap: clamp(8px, 1.2vh, 14px); }
.prog-card {
  display: flex;
  gap: clamp(12px, 1.6vw, 20px);
  background: var(--cream-2);
  border: 1px solid rgba(201, 165, 92, 0.35);
  border-radius: 14px;
  padding: clamp(10px, 1.5vh, 16px) clamp(12px, 1.6vw, 20px);
}
.prog-when {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: clamp(88px, 10vw, 140px);
  border-right: 1px solid rgba(201, 165, 92, 0.35);
  padding-right: clamp(10px, 1.4vw, 18px);
}
.prog-date { font-family: 'Cinzel', serif; font-weight: 700; color: var(--green); font-size: clamp(14px, 1.5vw, 19px); }
.prog-time { color: var(--gold-muted); font-size: clamp(12px, 1.2vw, 15px); margin-top: 2px; }
.prog-body { display: flex; flex-direction: column; justify-content: center; }
.prog-name { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--ink); font-size: clamp(17px, 1.9vw, 24px); line-height: 1.15; }
.prog-desc { color: var(--ink-soft); font-size: clamp(13px, 1.3vw, 16px); margin-top: 3px; }
.prog-announce {
  background: rgba(236, 201, 64, 0.12);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
  padding: clamp(10px, 1.4vh, 15px) clamp(12px, 1.6vw, 20px);
  color: var(--ink);
  font-size: clamp(14px, 1.5vw, 19px);
  margin-bottom: 8px;
}
.prog-empty { color: var(--ink-soft); font-style: italic; padding: 8px 0; }

/* ================= SPLIT HOME (programs | donate CTA) ================= */
.banner-logo { height: clamp(32px, 4.6vh, 52px); width: auto; flex-shrink: 0; }
.split-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row-reverse; /* donation on the left, programs on the right */
  gap: clamp(16px, 2vw, 34px);
}
.split-info {
  flex: 1.05;
  min-width: 0;
  overflow-y: auto;
  padding-right: 6px;
}
.split-h {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(24px, 3vw, 40px);
  margin-bottom: clamp(10px, 1.6vh, 18px);
}
.split-donate {
  flex: 0.95;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.8vh, 22px);
  border: 2px solid var(--gold);
  border-radius: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(236, 201, 64, 0.14), transparent 60%),
    linear-gradient(160deg, var(--green), var(--green-deep));
  color: var(--cream);
  cursor: pointer;
  padding: clamp(20px, 3vh, 48px);
  box-shadow: 0 14px 34px rgba(15, 61, 34, 0.30);
}
.split-donate:active { transform: translateY(3px); }
.sd-eyebrow {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-muted);
  font-size: clamp(12px, 1.4vw, 18px);
}
.sd-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: var(--gold);
  font-size: clamp(40px, 6.4vw, 92px);
  letter-spacing: 0.06em;
  line-height: 1;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.30);
}
.sd-chips { display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 14px); justify-content: center; }
.sd-chips span {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 32px);
  padding: clamp(6px, 1vh, 12px) clamp(14px, 1.8vw, 28px);
  border: 1.5px solid rgba(236, 201, 64, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--cream);
}
.sd-chips .sd-custom { color: var(--gold); border-color: var(--gold); }
.sd-cta {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--cream);
  font-size: clamp(16px, 2vw, 28px);
  margin-top: 4px;
}

/* Donation panel inside the split home (real amount tiles, filled) */
.split-donate-panel {
  flex: 0.95;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 18px);
  padding: clamp(16px, 1.9vw, 30px);
  border: 1.5px solid rgba(201, 165, 92, 0.42);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 12px 30px rgba(15, 61, 34, 0.09);
}
.sd-head { text-align: center; flex-shrink: 0; }
.sd-head .eyebrow {
  font-family: 'Cinzel', serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--green); font-size: clamp(12px, 1.3vw, 16px); margin: 0 0 2px;
}
.sd-h {
  font-family: 'Cormorant Garamond', serif; font-weight: 700;
  color: var(--ink); font-size: clamp(34px, 4vw, 66px); line-height: 1.05; margin: 0;
}
.sd-sub { color: var(--ink-soft); font-size: clamp(13px, 1.4vw, 18px); margin: 4px 0 0; }
.grid-split { grid-template-columns: repeat(2, 1fr); padding: clamp(6px, 1.2vh, 14px) 0; }

/* ================= PORTRAIT (monitor rotated vertical) ================= */
@media (orientation: portrait) {
  /* Stack the two panels: donation on top, programs below. */
  .split-body { flex-direction: column; gap: clamp(18px, 2.6vh, 36px); }
  .split-donate-panel { flex: 0 0 auto; margin-top: auto; padding: clamp(20px, 3vw, 44px); gap: clamp(14px, 2vh, 26px); }
  .split-info { flex: 0 1 auto; overflow-y: auto; }
  .split-h { font-size: clamp(30px, 4.2vw, 54px); margin-bottom: clamp(14px, 2vh, 24px); }
  .sd-h { font-size: clamp(32px, 4.6vw, 58px); }
  .sd-sub { font-size: clamp(16px, 2vw, 24px); }
  /* Bigger tiles that fill the tall, wide donation panel. */
  .grid-split { grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(130px, 13vh, 210px); gap: clamp(14px, 2.2vw, 28px); flex: none; }
  /* Programs list breathes full-width below. */
  .prog-when { min-width: clamp(130px, 22vw, 210px); }
  .prog-card { padding: clamp(16px, 2vh, 26px) clamp(16px, 2.4vw, 30px); }
  .prog-name { font-size: clamp(19px, 2.6vw, 30px); }
  .prog-title { font-size: clamp(18px, 2.4vw, 28px); }
}

/* ================= DONATION-ONLY (programs toggled off) ================= */
.no-programs .split-info { display: none; }
.no-programs .split-donate-panel {
  flex: 1;
  margin-top: 0;
  justify-content: center;
  gap: clamp(10px, 1.8vh, 26px);
  background: transparent;
  border: none;
  box-shadow: none;
  /* Reserve room at the bottom for the absolute "Contact… Software Support"
     footer pill so the socials never overlap it. */
  padding-bottom: clamp(60px, 8vh, 104px);
}
.no-programs .grid-split {
  grid-template-columns: repeat(3, 1fr);
  flex: none;
  /* Trimmed to make room for the Monthly-Donor CTA without pushing the socials
     into the footer. */
  grid-auto-rows: clamp(120px, 12.5vh, 220px);
}

/* ================= HEADER: centered PMA logo (donation-only) ================= */
#screen-split { position: relative; }
.sd-logo {
  display: block;
  width: auto;
  height: clamp(110px, 15vh, 200px);
  margin: 0 auto clamp(10px, 1.6vh, 22px);
}
#screen-split:not(.no-programs) .sd-logo { display: none; } /* split mode uses the banner logo */
.no-programs .split-banner { display: none; }

/* Floating Tax Receipt for donation-only (replaces the one in the banner) */
.receipt-corner {
  position: absolute;
  top: clamp(16px, 2.4vh, 30px);
  right: clamp(18px, 3.2vw, 52px);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: clamp(16px, 2.4vh, 26px) clamp(24px, 3vw, 44px);
  border: 2px solid var(--green-deep);
  border-radius: 999px;
  background: linear-gradient(160deg, #f6e08a 0%, #ecc940 46%, #c59a2e 100%);
  color: var(--green-deep);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: clamp(20px, 2.6vw, 34px);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(31, 61, 34, 0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
.receipt-corner svg { width: clamp(26px, 2.8vw, 40px); height: clamp(26px, 2.8vw, 40px); }
#screen-split:not(.no-programs) .receipt-corner { display: none; }

/* Banner centered logo (used in split/programs mode) */
.banner-logo-wrap { flex: 1; display: flex; justify-content: center; }
.banner-logo-c { height: clamp(38px, 5.4vh, 60px); width: auto; }

/* ================= PAYMENT SCREEN down-arrow (Terminal is below) ================= */
.pay-arrow { color: var(--gold); margin-top: clamp(26px, 5vh, 64px); animation: payBounce 1.4s ease-in-out infinite; }
.pay-arrow svg { width: clamp(84px, 13vw, 160px); height: clamp(84px, 13vw, 160px); }
@keyframes payBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .pay-arrow { animation: none; } }

.admin-head-actions { display: flex; gap: 10px; align-items: center; }

/* ================= WELCOME (top) + FOLLOW US QR (bottom) ================= */
.welcome { text-align: center; margin: 0 0 clamp(4px, 1vh, 12px); line-height: 1.2; }
.welcome-ar { display: block; font-size: clamp(26px, 3.6vw, 50px); color: var(--gold-muted); font-weight: 600; margin-bottom: 2px; }
.welcome-en { display: block; font-family: 'Cormorant Garamond', serif; font-size: clamp(18px, 2.4vw, 34px); color: var(--green); font-weight: 600; }
#screen-split:not(.no-programs) .welcome { display: none; }

.socials { text-align: center; }
.socials-label {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--gold-muted); font-family: 'Cinzel', serif;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-size: clamp(11px, 1.3vw, 15px); margin: 0 0 clamp(8px, 1.4vh, 16px);
}
.socials-label span { flex: 1; max-width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-muted)); }
.socials-label span:last-child { background: linear-gradient(90deg, var(--gold-muted), transparent); }
.socials-row { display: flex; justify-content: center; gap: clamp(44px, 12vw, 140px); }
.social { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.social img {
  width: clamp(104px, 13vw, 168px); height: auto;
  border-radius: 10px; border: 1px solid rgba(201, 165, 92, 0.4);
  background: #fff; padding: 6px;
}
.social span { font-family: 'Cinzel', serif; font-weight: 600; color: var(--green); font-size: clamp(13px, 1.5vw, 18px); }
#screen-split:not(.no-programs) .socials { display: none; }

/* ================= "Support Your Masjid" attention pulse ================= */
/* "Support Your Masjid" — static (no animation) */
.sd-h { color: var(--green); }

/* ================= "Tap to Donate" animated prompt ================= */
.tap-prompt {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: clamp(9px, 1.3vh, 16px) clamp(24px, 3vw, 44px);
  /* Metallic gold — light top, deep bottom — instead of a flat fill. */
  background: linear-gradient(160deg, #f6e08a 0%, #ecc940 46%, #c59a2e 100%);
  color: var(--green-deep);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: clamp(19px, 2.6vw, 36px);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(236, 201, 64, 0.45), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  animation: tapPulse 1.3s ease-in-out infinite;
}
@keyframes tapPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 8px 22px rgba(236, 201, 64, 0.4); }
  50%      { transform: scale(1.06); box-shadow: 0 12px 34px rgba(236, 201, 64, 0.8); }
}
.tap-hand { display: inline-block; font-size: 1.25em; animation: tapHand 1.05s ease-in-out infinite; }
@keyframes tapHand { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .tap-prompt, .tap-hand { animation: none; } }

/* ================= Software-support footer (very bottom) ================= */
.support-footer {
  position: absolute;
  left: 50%;
  bottom: clamp(8px, 1.4vh, 20px);
  transform: translateX(-50%);
  padding: clamp(5px, 0.8vh, 9px) clamp(14px, 1.8vw, 22px);
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  background: var(--green);
  color: var(--gold);
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  font-size: clamp(11px, 1.15vw, 15px);
  letter-spacing: 0.02em;
  white-space: nowrap;
  z-index: 6;
}

/* ================= Tax-credit estimate (thank-you screen) ================= */
.tax-credit {
  margin-top: clamp(10px, 2vh, 22px);
  max-width: 820px;
  text-align: center;
  background: rgba(236, 201, 64, 0.18);
  border: 2px solid var(--gold);
  border-radius: 18px;
  padding: clamp(16px, 2.2vh, 30px) clamp(20px, 2.8vw, 42px);
  box-shadow: 0 10px 28px rgba(236, 201, 64, 0.28);
}
.tc-head {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  color: var(--green-deep);
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1.05;
}
.tc-head b {
  color: var(--green);
  font-size: 1.18em;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.tc-sub {
  font-family: 'Cormorant Garamond', serif;
  color: var(--ink);
  font-size: clamp(18px, 2.3vw, 32px);
  margin-top: 2px;
}
.tc-cta {
  margin-top: clamp(8px, 1.2vh, 14px);
  color: var(--green-deep);
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: clamp(13px, 1.5vw, 20px);
}
.tc-note {
  margin-top: clamp(6px, 1vh, 10px);
  color: var(--ink-soft);
  font-size: clamp(10px, 1.05vw, 13px);
  line-height: 1.4;
}

/* ===== Luxury "Donation Hub" header — mirrors the Palm app hero (2026-07-18) ===== */
.no-programs .sd-head {
  position: relative;
  overflow: hidden;
  align-self: stretch;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(12px, 1.8vh, 24px);
  padding: clamp(26px, 4.2vh, 60px) clamp(24px, 5vw, 70px) clamp(24px, 3.6vh, 48px);
  border-radius: clamp(22px, 3vw, 40px);
  background: radial-gradient(135% 92% at 50% 14%, #2b8150 0%, #175733 46%, #0a2414 100%);
  border: 1px solid rgba(236, 201, 64, 0.4);
  box-shadow: 0 20px 52px rgba(10, 36, 20, 0.4);
}
.no-programs .sd-head::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23ecc940' stroke-width='1'%3E%3Cpath d='M24 2 L46 24 L24 46 L2 24 Z'/%3E%3Ccircle cx='24' cy='24' r='10'/%3E%3Cpath d='M0 0 L48 48 M48 0 L0 48'/%3E%3C/g%3E%3C/svg%3E");
}
.hub-ring {
  position: relative; z-index: 1;
  width: clamp(160px, 22vh, 280px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cream);
  display: grid; place-items: center;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 10px rgba(236, 201, 64, 0.1), 0 18px 44px rgba(0, 0, 0, 0.44);
}
.no-programs .sd-head .sd-logo {
  display: block; width: 72%; height: auto; margin: 0;
}
.no-programs .sd-head .sd-h {
  position: relative; z-index: 1;
  font-family: 'Cinzel', serif; font-weight: 700;
  color: #fff; text-transform: uppercase;
  letter-spacing: 0.1em; line-height: 1.04;
  font-size: clamp(46px, 6.2vw, 100px);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}
.hub-orn {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px);
}
.hub-orn i {
  display: block; height: 2px; width: clamp(46px, 7vw, 120px);
  background: linear-gradient(90deg, transparent, var(--gold));
}
.hub-orn i:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.hub-orn span { color: var(--gold); font-size: clamp(13px, 1.5vw, 22px); }

/* ===== Header glass/shadow at the bottom + slow tile glow (2026-07-18) ===== */
/* Soft inner shadow at the base of the Donation Hub header — gives it depth,
   like the panel curves away into glass. Sits under the content (z-index 0). */
.no-programs .sd-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  z-index: 0;
  pointer-events: none;
  border-radius: 0 0 clamp(22px, 3vw, 40px) clamp(22px, 3vw, 40px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.32) 100%);
  box-shadow: inset 0 -1px 0 rgba(236, 201, 64, 0.35); /* faint gold edge = glass catch */
}
.no-programs .sd-head > * { position: relative; z-index: 1; } /* keep ring/title/orn above */

/* A gentle light slowly sweeping across each amount tile. Very subtle; staggered
   into a wave so it reads as a soft living glow, not a distracting flash. */
.tile .amt, .tile .cur { position: relative; z-index: 2; } /* text stays crisp above the glow */
.tile > .glow, .tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 20px;
  background: linear-gradient(115deg,
    transparent 34%,
    rgba(255, 255, 255, 0.11) 48%,
    rgba(236, 201, 64, 0.12) 50%,
    transparent 66%);
  background-size: 260% 100%;
  background-position: 130% 0;
  animation: tileGlow 6s ease-in-out infinite;
}
.grid-split .tile:nth-child(2)::after { animation-delay: 0.5s; }
.grid-split .tile:nth-child(3)::after { animation-delay: 1s; }
.grid-split .tile:nth-child(4)::after { animation-delay: 1.5s; }
.grid-split .tile:nth-child(5)::after { animation-delay: 2s; }
.grid-split .tile:nth-child(6)::after { animation-delay: 2.5s; }
@keyframes tileGlow {
  0%   { background-position: 130% 0; }
  55%  { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tile::after { animation: none; background-position: -50% 0; }
}

/* ===================== MONTHLY GIVING ===================== */
/* Home CTA — a gold "Become a Monthly Donor" bar under the funds */
.monthly-cta {
  display: flex; align-items: center; gap: clamp(10px, 1.6vw, 18px);
  width: 100%; text-align: left; cursor: pointer;
  margin-top: clamp(4px, 1vh, 12px);
  padding: clamp(12px, 1.8vh, 18px) clamp(18px, 2.4vw, 30px);
  border: 2px solid var(--gold); border-radius: 18px;
  background: linear-gradient(160deg, #f6e08a 0%, #ecc940 46%, #c59a2e 100%);
  color: var(--green-deep);
  box-shadow: 0 8px 22px rgba(236, 201, 64, 0.35), 0 1px 0 rgba(255,255,255,0.5) inset;
}
.monthly-cta .mc-heart { font-size: clamp(24px, 3.2vw, 38px); line-height: 1; color: var(--green-deep); }
.monthly-cta .mc-text { flex: 1; display: flex; flex-direction: column; }
.monthly-cta .mc-text b { font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.02em; font-size: clamp(16px, 2vw, 27px); }
.monthly-cta .mc-text small { font-size: clamp(11px, 1.3vw, 16px); opacity: 0.72; }
.monthly-cta .mc-arrow { font-size: clamp(28px, 3.4vw, 46px); font-weight: 700; opacity: 0.7; }

/* Monthly screen */
.monthly-wrap { margin: auto; width: min(94vw, 920px); display: flex; flex-direction: column; align-items: center; }
.m-step { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vh, 22px); width: 100%; text-align: center; }
.m-logo { width: clamp(84px, 10vh, 140px); height: auto; }
.m-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 26px); width: min(90vw, 640px); margin-top: clamp(4px, 1.2vh, 14px); }
.m-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(24px, 4vh, 50px) 0; border-radius: 20px; cursor: pointer; color: var(--gold);
  border: 1.5px solid rgba(236, 201, 64, 0.5);
  background: radial-gradient(135% 130% at 50% 0%, #2b8150 0%, #175733 52%, #0a2414 100%);
  box-shadow: 0 10px 24px rgba(10, 36, 20, 0.3);
}
.m-amt { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: clamp(40px, 6.4vw, 78px); line-height: 1; font-feature-settings: "lnum" 1, "tnum" 1; }
.m-per { font-family: 'Cinzel', serif; color: var(--gold-muted); font-size: clamp(12px, 1.4vw, 18px); margin-top: 4px; }
.m-summary { display: flex; align-items: baseline; gap: 12px; justify-content: center; margin: clamp(4px, 1.2vh, 14px) 0; }
.m-sum-amt { font-family: 'Cormorant Garamond', serif; font-weight: 700; color: var(--green); font-size: clamp(46px, 8vw, 96px); line-height: 1; font-feature-settings: "lnum" 1, "tnum" 1; }
.m-sum-per { font-family: 'Cinzel', serif; color: var(--gold-muted); font-size: clamp(14px, 1.8vw, 26px); }
.m-terms {
  max-width: 640px; color: var(--ink-soft); font-size: clamp(14px, 1.7vw, 22px); line-height: 1.5;
  background: var(--cream-2); border: 1px solid rgba(201, 165, 92, 0.4); border-radius: 14px;
  padding: clamp(12px, 2vh, 22px) clamp(16px, 2.4vw, 28px);
}
.m-tap-instr { font-family: 'Cormorant Garamond', serif; color: var(--green); font-weight: 700; font-size: clamp(20px, 2.8vw, 36px); line-height: 1.2; max-width: 640px; }
.m-step[hidden] { display: none; }  /* author display:flex would otherwise beat [hidden] */

/* Monthly donors (admin) */
.sub-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed rgba(201, 165, 92, 0.35); }
.sub-row:last-child { border-bottom: none; }
.sub-info { display: flex; flex-direction: column; min-width: 0; }
.sub-info b { color: var(--ink); font-size: 15px; }
.sub-info span { color: var(--ink-soft); font-size: 12.5px; word-break: break-all; }
.sub-status { font-style: normal; text-transform: capitalize; font-weight: 600; }
.sub-active { color: var(--green); }
.sub-canceled { color: var(--gold-muted); }
.sub-failed { color: #b23b34; }
.sub-cancel { flex: none; }
.sub-cancel-armed { color: #b23b34 !important; border-color: #b23b34 !important; }

/* Multi-kiosk admin bits */
.kiosk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.report-kiosks { display: flex; flex-direction: column; gap: 5px; margin: 6px 0 12px; }
.rk { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--ink-soft); padding: 6px 11px; border-radius: 9px; border: 1px solid transparent; }
.rk b { color: var(--green); font-weight: 700; font-variant-numeric: tabular-nums; }
.rk-mine { background: var(--cream-2); border-color: rgba(201, 165, 92, 0.45); }
.rk-mine span { color: var(--green); font-weight: 600; }
.m-swipe-note { color: var(--gold-muted); font-size: clamp(12px, 1.4vw, 18px); font-style: italic; max-width: 560px; margin-top: -4px; }
/* Email field on the monthly step: a normal fixed-width box (was shrinking to the caret). */
#m-email .email-display { width: min(88vw, 640px); justify-content: flex-start; }
#m-email .kbd { width: min(88vw, 640px); }

/* On-screen keyboard for the kiosk-name field (admin panel). Reuses the .kbd-*
   keys from the donor email pad, but sized down to fit inside an admin card. */
.kiosk-kbd { display: grid; gap: clamp(4px, 0.7vw, 8px); margin: 10px 0 4px; }
.kiosk-kbd .kbd-key { font-size: clamp(13px, 1.5vw, 18px); padding: clamp(7px, 1.1vh, 12px) 0; }
.kiosk-kbd .kbd-wide { font-size: clamp(10px, 1.15vw, 14px); }
.kbd-hint { margin-top: 6px; }

/* ---- "No credit card?" follow-up lead capture ---- */
.m-nocc {
  display: inline-block;
  margin: 4px auto 2px;
  background: none;
  border: none;
  color: var(--green);
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 1.9vw, 20px);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fu-fields { display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 16px); width: min(88vw, 640px); margin: 4px auto 0; }
.fu-field {
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--gold-muted);
  border-radius: 12px;
  padding: clamp(9px, 1.4vh, 14px) 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fu-field.fu-active { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31, 110, 63, 0.14); }
.fu-label { font-family: 'Inter', sans-serif; font-size: clamp(11px, 1.3vw, 14px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-muted); }
.fu-line { display: flex; align-items: center; gap: 1px; min-height: 1.4em; }
.fu-val { font-family: 'Inter', sans-serif; font-size: clamp(19px, 2.4vw, 28px); color: var(--ink); word-break: break-all; }
.fu-field:not(.fu-active) .caret { display: none; }
.kbd-blank { visibility: hidden; }

/* ---- Touch-only kiosk: never show a mouse cursor ----
   The screen is operated by finger only. A visible cursor (especially a
   mis-mapped one from a miscalibrated digitizer, or a stray USB mouse) looks
   broken on a public screen. This hides it across the whole app, overriding the
   `cursor:pointer` rules above. NOTE: this is cosmetic — it does NOT fix touch
   landing in the wrong spot; that's an OS-level calibration issue (recalibrate
   on the machine: "Calibrate the screen for pen or touch input"). */
*, *::before, *::after { cursor: none !important; }


/* Collections report: kiosk scope switch + per-day, per-kiosk split.
   Added when the daily figures were global but labelled "this kiosk", so
   every screen looked like it had earned the other one's money. */
.report-scope { display: flex; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.report-day-kiosks {
  margin-top: 4px;
  font-size: 0.8rem;
  opacity: 0.75;
}

/* ===================================================================
   COMPACT PORTRAIT (tablet kiosks)
   -------------------------------------------------------------------
   The donation screen was laid out for a 23.8" landscape touchscreen.
   The Women's kiosk runs on a 10" Android tablet in portrait, where the
   content is simply taller than the viewport -- so the Monthly Donor CTA
   and the Facebook/Instagram QR row fell off the bottom and were clipped.

   Two things here:
     1. Shrink the logo, tiles, CTA and QR codes so it all fits.
     2. Let the panel scroll as a safety net. On a kiosk you don't want
        scrolling, but content you can reach beats content that silently
        isn't there on a screen size we didn't anticipate.
   =================================================================== */
@media (orientation: portrait) and (max-height: 1500px) {
  /* NOTE the selector depth. The base rules are `.no-programs .sd-head .sd-h`
     (0,3,0) and `.hub-ring` sized off vh -- a shallower override here is
     silently ignored, which is why the first attempt at this didn't shrink
     anything. Match the depth or it does nothing. */
  .no-programs .sd-head {
    gap: clamp(6px, 1vh, 12px);
    padding: clamp(12px, 1.8vh, 22px) clamp(16px, 4vw, 32px) clamp(10px, 1.6vh, 18px);
    border-radius: clamp(16px, 2.5vw, 26px);
  }
  .no-programs .sd-head .hub-ring {
    width: clamp(84px, 11vh, 132px);
    border-width: 2px;
    box-shadow: 0 0 0 5px rgba(236, 201, 64, 0.1), 0 8px 20px rgba(0, 0, 0, 0.35);
  }
  .no-programs .sd-head .sd-h {
    font-size: clamp(22px, 5.6vw, 34px);
    letter-spacing: 0.06em;
  }
  .no-programs .sd-head .hub-orn i { width: clamp(28px, 6vw, 60px); }
  .no-programs .sd-head .hub-orn span { font-size: clamp(10px, 2vw, 14px); }
  .no-programs .sd-sub { font-size: clamp(13px, 2.4vw, 18px); }

  /* Tiles: now that the header is compact there's room to give these back
     some size -- they're the primary thing people tap. */
  .no-programs .grid-split { grid-auto-rows: clamp(96px, 10.6vh, 152px); gap: clamp(10px, 2vw, 18px); }
  .no-programs .grid-split .tile .amt { font-size: clamp(40px, 8vw, 62px); }

  .no-programs .split-donate-panel {
    /* Start at the top and allow scroll, instead of centring content that
       overflows equally off both ends. */
    justify-content: flex-start;
    overflow-y: auto;
    gap: clamp(8px, 1.2vh, 14px);
    padding-bottom: clamp(44px, 5.6vh, 68px);
  }

  .monthly-cta { padding: clamp(9px, 1.3vh, 14px) clamp(14px, 2vw, 22px); margin-top: clamp(2px, 0.6vh, 8px); }
  .monthly-cta .mc-heart { font-size: clamp(20px, 4vw, 28px); }
  .monthly-cta .mc-text b { font-size: clamp(14px, 3vw, 20px); }
  .monthly-cta .mc-text small { font-size: clamp(10px, 2vw, 13px); }

  /* Push the socials to the bottom of the panel so they sit just above the
     support pill instead of floating in the middle. margin-top:auto only
     bites when there's spare room, so it can't make overflow worse. */
  .no-programs .socials { margin-top: auto; }
  .socials-label { margin: clamp(4px, 0.8vh, 10px) 0; }
  .socials-row { gap: clamp(28px, 9vw, 80px); }
  .social img { width: clamp(72px, 17vw, 120px); padding: 4px; }
  .social span { font-size: clamp(11px, 2.2vw, 14px); }
}