/* Give online, on our own page: the three steps of the Give block when the
   church's Square app is connected (assets/js/give-online.js). Builds on the
   .give-on card styles in site.css. */

.gx{gap:0;}
.gx__step{display:grid;gap:18px;justify-items:center;width:100%;}
.gx__step[hidden]{display:none;}
.gx[data-at="2"] .gx__step,.gx[data-at="3"] .gx__step{animation:gxIn .45s var(--ease-out,cubic-bezier(.22,1,.36,1)) both;}
@keyframes gxIn{from{opacity:0;transform:translateY(10px);}}

/* How often: one quiet segmented switch above the amounts */
.gx__freq{display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.1);gap:2px;}
.gx__freq label{position:relative;cursor:pointer;}
.gx__freq input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;}
.gx__freq span{display:block;padding:9px 18px;border-radius:999px;font-weight:700;font-size:.92rem;color:rgba(255,255,255,.78);transition:background-color .2s,color .2s;}
.gx__freq label:hover span{color:#fff;}
.gx__freq input:checked + span{background:#fff;color:var(--navy);}
.gx__freq input:focus-visible + span{outline:3px solid var(--cyan-bright);outline-offset:2px;}

/* Step 2: a white sheet inside the navy card, so Square's card field sits on
   the background it was designed for */
.gx__sheet{max-width:460px;margin-inline:auto;background:#fff;color:var(--navy);border-radius:var(--radius,18px);padding:clamp(20px,4vw,30px);gap:16px;justify-items:stretch;text-align:left;box-shadow:0 24px 50px -28px rgba(0,0,0,.55);}
.gx__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line,#e3e8ee);}
.gx__what{margin:0;font-size:1rem;color:var(--muted,#5b6b7f);}
.gx__what b{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--navy);margin-right:4px;}
.gx__change{appearance:none;background:none;border:0;padding:6px 2px;font:inherit;font-weight:700;font-size:.92rem;color:var(--cyan);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.gx__change:hover{color:var(--navy);}
.gx__change:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px;}

.gx__wallets{display:grid;gap:10px;}
.gx__wallets[hidden]{display:none;}
.gx__apple{-webkit-appearance:-apple-pay-button;-apple-pay-button-type:donate;-apple-pay-button-style:black;appearance:none;display:block;width:100%;height:48px;border:0;border-radius:12px;cursor:pointer;background:#000;}
.gx__apple[hidden],.gx__gpay[hidden]{display:none;}
.gx__gpay{min-height:48px;}
.gx__or{display:flex;align-items:center;gap:12px;margin:4px 0 0;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5b6b7f);}
.gx__or::before,.gx__or::after{content:"";flex:1;height:1px;background:var(--line,#e3e8ee);}

.gx__fields{display:grid;gap:14px;}
.gx__f{display:grid;gap:6px;}
.gx__f > span{font-size:.85rem;font-weight:700;color:var(--navy);}
.gx__f small{font-weight:500;color:var(--muted,#5b6b7f);margin-left:4px;}
.gx__f input{width:100%;min-height:48px;padding:0 14px;border:1px solid #cfd6df;border-radius:12px;background:#fff;font:inherit;font-size:16px;color:var(--navy);transition:border-color .15s,box-shadow .15s;}
.gx__f input:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 22%,transparent);}
.gx__card{min-height:48px;}
.gx__loading{display:flex;align-items:center;min-height:48px;padding:0 14px;border:1px dashed #cfd6df;border-radius:12px;font-size:.9rem;color:var(--muted,#5b6b7f);}

.gx__plan{margin:0;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--cyan) 9%,#fff);color:var(--navy);font-size:.9rem;line-height:1.5;}
.gx__plan[hidden],.gx__err[hidden]{display:none;}
.gx__err{margin:0;padding:12px 14px;border-radius:12px;background:#fff3ee;color:#9a3412;font-size:.92rem;line-height:1.45;}
.gx__pay{width:100%;justify-content:center;min-height:54px;font-size:1.05rem;}
.gx__pay[disabled]{opacity:.55;cursor:not-allowed;}
.gx.is-busy .gx__pay{opacity:.8;cursor:progress;}
.gx.is-busy .gx__pay span::after{content:"";display:inline-block;width:14px;height:14px;margin-left:10px;vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:gxSpin .7s linear infinite;}
@keyframes gxSpin{to{transform:rotate(360deg);}}
.gx__fine{margin:0;font-size:.8rem;line-height:1.5;color:var(--muted,#5b6b7f);text-align:center;text-wrap:balance;}
.gx__fine svg{vertical-align:-2px;margin-right:5px;}

/* Step 3: thanks */
.gx__done{max-width:480px;margin-inline:auto;gap:10px;outline:0;}
.gx__done > svg{color:var(--cyan-bright);}
.gx__done h3{margin:0;color:#fff;font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem);}
.gx__done p{margin:0;color:rgba(255,255,255,.85);line-height:1.55;}
.gx__done .gx__receipt a{color:#fff;font-weight:700;text-underline-offset:3px;}
.gx__done .gx__change{color:var(--cyan-bright);margin-top:6px;}
.gx__done .gx__change:hover{color:#fff;}

@media (max-width:520px){
  .gx__freq{width:100%;}
  .gx__freq label{flex:1;}
  .gx__freq span{padding:9px 6px;text-align:center;}
  .give-on__card:has(.gx[data-at="2"]){padding-inline:12px;}
}
@media (prefers-reduced-motion:reduce){
  .gx[data-at] .gx__step{animation:none;}
  .gx__freq span{transition:none;}
}

/* Give block: the way back in for people who already give weekly or monthly */
.gx__manage{font-size:.86rem;color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.gx__manage:hover{color:#fff;}

/* /give/manage/ */
.gm{min-height:62vh;padding-top:clamp(128px,12vw,170px);}
.gm__wrap{max-width:620px;}
.gm .eyebrow{margin:0 0 6px;}
.gm__h{margin:0 0 10px;font-size:clamp(2rem,1.5rem + 2vw,2.8rem);line-height:1.05;}
.gm__lead{margin:0 0 22px;max-width:52ch;color:var(--ink-soft,#33475e);font-size:1.05rem;}
.gm__muted{margin:0;color:var(--muted,#5b6b7f);font-size:.9rem;}
.gm__help{margin-top:26px;}
.gm__box{background:#fff;border:1px solid var(--line,#e3e8ee);border-radius:var(--radius,18px);padding:clamp(20px,4vw,30px);display:grid;gap:14px;}
.gm__box h2{margin:0;font-size:1.35rem;}
.gm__box p{margin:0;}
.gm__box--sent > svg{color:var(--cyan);}
.gm__ask{max-width:460px;}
.gm .gx__err{margin:0 0 14px;}
.gm__list{display:grid;gap:16px;}
.gm__gift{background:#fff;border:1px solid var(--line,#e3e8ee);border-radius:var(--radius,18px);padding:clamp(18px,3.5vw,26px);display:grid;gap:14px;transition:box-shadow .2s;}
.gm__gift.is-open{box-shadow:0 18px 40px -28px rgba(13,37,65,.45);}
.gm__gift.is-busy{opacity:.7;pointer-events:none;}
.gm__row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.gm__amt{margin:0;color:var(--muted,#5b6b7f);font-size:1.02rem;}
.gm__amt b{font-family:var(--font-display);font-size:1.6rem;font-weight:800;color:var(--navy);margin-right:4px;}
.gm__badge{flex:none;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--cyan) 12%,#fff);color:var(--cyan-deep,#0b6f8a);}
.gm__gift.is-ending .gm__badge{background:#fff3ee;color:#9a3412;}
.gm__ends{margin:0;color:var(--ink-soft,#33475e);}
.gm__facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 0;border-block:1px solid var(--line,#e3e8ee);}
.gm__facts dt{font-size:.78rem;font-weight:700;color:var(--muted,#5b6b7f);}
.gm__facts dd{margin:2px 0 0;font-weight:700;color:var(--navy);}
.gm__acts{display:flex;flex-wrap:wrap;gap:8px;}
.gm__acts:empty{display:none;}
.gm__btn{appearance:none;font:inherit;font-weight:700;font-size:.92rem;min-height:42px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line,#d5dde6);background:#fff;color:var(--navy);cursor:pointer;transition:border-color .15s,background-color .15s;}
.gm__btn:hover,.gm__btn[aria-expanded="true"]{border-color:var(--navy);}
.gm__btn:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;}
.gm__btn--quiet{border-color:transparent;color:var(--muted,#5b6b7f);text-decoration:underline;text-underline-offset:3px;padding-inline:8px;}
.gm__btn--quiet:hover,.gm__btn--quiet[aria-expanded="true"]{border-color:transparent;color:#9a3412;}
.gm__panel{display:grid;gap:12px;padding:16px;border-radius:14px;background:var(--cream,#f5f7f9);}
.gm__panel[hidden]{display:none;}
.gm__panel p{margin:0;}
.gm__row2{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.gm__danger{--bg:#b42318;--fg:#fff;background:#b42318;color:#fff;border-color:#b42318;}
.gm__danger:hover{background:#912018;border-color:#912018;}
.gm__dollar{display:flex;align-items:center;gap:6px;max-width:200px;background:#fff;border:1px solid #cfd6df;border-radius:12px;padding:0 14px;min-height:48px;}
.gm__dollar:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 22%,transparent);}
.gm__dollar b{font-family:var(--font-display);color:var(--navy);}
.gm__dollar input{border:0 !important;outline:0;box-shadow:none !important;padding:0 !important;min-height:0 !important;border-radius:0 !important;background:transparent;width:100%;font:inherit;font-weight:700;font-size:1.1rem;color:var(--navy);-moz-appearance:textfield;}
.gm__dollar input::-webkit-outer-spin-button,.gm__dollar input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.gm__msg{margin:0;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--cyan) 10%,#fff);color:var(--navy);font-size:.93rem;}
.gm__msg.is-bad{background:#fff3ee;color:#9a3412;}
.gm__msg[hidden]{display:none;}
@media (max-width:340px){.gm__facts{grid-template-columns:1fr;}}

/* ---- polish: spacing on phones, Square's card message, button text ---- */
.gx .give-on__fine{display:block;text-align:center;text-wrap:balance;line-height:1.5;}
.gx .give-on__fine svg{vertical-align:-2px;margin-right:6px;}
.gx .give-on__other{margin-top:-2px;}
.gx__manage{margin-top:2px;}
/* Square adds an empty message line under the card field (44px of nothing);
   show it only when it has something to say */
.gx__card .sq-card-message:empty{display:none !important;}
.gx__card .sq-card-message{margin:8px 0 0 !important;}
.gx__card .sq-card-wrapper{min-width:0 !important;}
@media (max-width:520px){
  .gx__step{gap:16px;}
  /* amounts as an even grid: rows of three, and a short last row shares the width */
  .gx .give-on__amts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;width:100%;}
  .gx .give-on__amt{grid-column:span 2;}
  .gx .give-on__amt span{width:100%;min-width:0;padding:0 8px;}
  .gx .give-on__amt:first-of-type:nth-last-of-type(4),.gx .give-on__amt:first-of-type:nth-last-of-type(4) ~ .give-on__amt,
  .gx .give-on__amt:first-of-type:nth-last-of-type(2),.gx .give-on__amt:first-of-type:nth-last-of-type(2) ~ .give-on__amt,
  .gx .give-on__amt:nth-of-type(4):nth-last-of-type(2),.gx .give-on__amt:nth-of-type(5):last-of-type{grid-column:span 3;}
  .gx .give-on__amt:nth-of-type(7):last-of-type,.gx .give-on__amt:only-of-type{grid-column:1 / -1;}
  .gx .give-on__go{width:100%;justify-content:center;}
  .gx .give-on__dollar{width:100%;max-width:240px;}
  .gx__sheet{padding:20px 18px 22px;gap:14px;}
  .gx__top{padding-bottom:12px;}
  .gx__what b{font-size:1.35rem;}
}