/* Tyler Family Outpost Ministries · experimental candidate
   Shared giving panel (homepage support section and giving.html).
   1. Recipient first, 2. optional amount, 3. one method. The amount appears in every method's instructions. */

.give-panel{display:grid;gap:28px}

/* recipient identity leads the panel */
.give-recipient{display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:20px;
  background:linear-gradient(180deg,rgba(40,86,70,.45),rgba(9,32,26,.6));border:1px solid rgba(233,214,160,.24);
  box-shadow:inset 0 1px 0 rgba(255,250,230,.14)}
.give-recipient .gr-emb{width:54px;height:50px;flex-shrink:0;background:url("../img/emblem.webp") center/contain no-repeat;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.give-recipient .gr-k{display:block;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#D9B66D}
.give-recipient b{display:block;font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:clamp(22px,2.2vw,28px);line-height:1.15;color:#F3EDE0}
.give-recipient .gr-s{display:block;font-size:14px;color:#AAB8B0;margin-top:2px}

/* numbered steps */
.give-step{display:grid;gap:14px}
.step-h{display:flex;align-items:center;gap:14px}
.step-n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-weight:700;font-size:15px;color:#1B1407;
  background:radial-gradient(circle at 35% 30%,#F7E7B8,#D9B66D 55%,#9C7A3E 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 10px rgba(0,0,0,.4)}
.step-h b{display:block;font-size:17px;font-weight:600;color:#F3EDE0}
.step-h span:not(.step-n){display:block;font-size:13.5px;color:#AAB8B0}
.amt-help{margin:0;font-size:14px;color:#AAB8B0;min-height:1.5em}
.amt-help b{color:#F4DE9F}
.amounts{justify-self:start}
.amt:focus-visible,.mt:focus-visible{outline:2px solid #F4DE9F;outline-offset:2px}
.amt-clear{border:0;background:none;color:#D9B66D;font:inherit;font-size:14px;font-weight:600;min-height:44px;padding:0 8px;cursor:pointer}
.amt-clear[hidden]{display:none}

/* method switcher: phones only */
.method-tabs{display:none}
.mt{flex:1;min-width:0;white-space:nowrap;min-height:48px;border-radius:12px;border:1px solid rgba(243,237,224,.16);background:rgba(243,237,224,.04);color:#F3EDE0;font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 4px;transition:background .2s,border-color .2s,color .2s}
.mt i{width:7px;height:7px;border-radius:50%;background:var(--accent,#D9B66D)}
.mt[aria-pressed="true"]{background:linear-gradient(180deg,#F4DE9F,#D9B66D);border-color:#D9B66D;color:#1B1407}

/* amount shown on each card when chosen */
.c-amt{display:inline-flex;align-items:center;align-self:flex-start;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:#1B1407;background:linear-gradient(180deg,#F4DE9F,#D9B66D);box-shadow:0 4px 12px rgba(0,0,0,.35)}
.c-amt[hidden]{display:none}
.c-note b{color:#F4DE9F}

@media (max-width:620px){
  .give-panel{gap:22px}
  .give-recipient{padding:14px 16px;gap:14px}
  .give-recipient .gr-emb{width:44px;height:40px}
  .method-tabs{display:flex;gap:6px}
  .mt{font-size:13.5px;padding:6px 2px}
  .give-panel .cards{grid-template-columns:1fr}
  .give-panel .card{display:none;min-height:0}
  .give-panel .card.is-active{display:block}
  .give-panel .card .card-in{min-height:300px}
  .amounts{justify-self:stretch}
}
@media (prefers-reduced-motion:reduce){.mt{transition:none}}

/* QR codes, shown on request */
.qr-btn{align-self:flex-start;margin-top:10px;border:0;background:none;padding:0;min-height:36px;font:inherit;font-size:13px;font-weight:600;color:#F4DE9F;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.qr-btn:focus-visible{outline:2px solid #F4DE9F;outline-offset:2px;border-radius:4px}
.qr-pop{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(2,10,7,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .25s}
.qr-pop.open{opacity:1;visibility:visible;transition:opacity .2s,visibility 0s}
.qr-card{position:relative;width:min(360px,100%);padding:22px;border-radius:24px;background:#F8F4EA;color:#1B1407;text-align:center;box-shadow:0 30px 70px -20px rgba(0,0,0,.8)}
.qr-card img{display:block;width:100%;max-height:60vh;object-fit:contain;border-radius:12px;background:#fff}
.qr-t b{display:block;margin-top:14px;font-size:16px}
.qr-t p{margin:4px 0 0;font-size:14px;color:#3A2D12}
.qr-x{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(27,20,7,.08);color:#1B1407;font-size:22px;line-height:1;cursor:pointer}
.qr-x:focus-visible{outline:2px solid #9C7A3E;outline-offset:2px}