/* give-sunset.css — the hosted giving page (api.churpay.com/g/<join code>, opened by the iOS app and QR posters)
   in the locked member-app language (member-prototype.locked.html › "s-hosted" and "s-safari_done").
   Loads after give.html's own styles; every id and class the page script uses stays. give-sunset.js adds the
   church header, the fund chips, the quick amounts and the "ways to pay" line. */
@font-face{font-family:"Figtree";src:url("/assets/fonts/Figtree-Variable.woff2") format("woff2");font-weight:300 800;font-display:swap}
:root{
  --cp-font:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cp-teal:#09A895;--cp-teal-deep:#087F73;--cp-teal-soft:#E3F5F2;--cp-action:#1B2430;--cp-on-action:#FFFFFF;
  --cp-pale:#F6DCC8;--cp-pale2:#FBF0E6;--cp-art:#E07A5F;--cp-art-dark:#A84B34;--cp-sky:#CFE5F2;--cp-bad-bg:#FBE9E5;--cp-bad:#D85A30;
  --cp-shadow:0 2px 10px rgba(16,24,40,.04)
}
@media (prefers-color-scheme:dark){
  :root{--cp-teal-deep:#5FD3C0;--cp-teal-soft:rgba(9,168,149,.2);--cp-action:#E8ECEF;--cp-on-action:#111827;--cp-pale:#3A2E2A;--cp-pale2:#2A2320;--cp-art-dark:#F0A98C;--cp-sky:#22303A;--cp-bad-bg:#3A2622;--cp-bad:#F0705A;--cp-shadow:0 1px 2px rgba(0,0,0,.3)}
}
html,body{font-family:var(--cp-font)!important;background:var(--cp-bg)!important;-webkit-font-smoothing:antialiased}
body *{font-family:var(--cp-font)}
b,strong,h1,h2,h3,h4{font-weight:500}
.num,.amount-display,.fee-list strong,.sum-rows b{font-variant-numeric:tabular-nums}

/* ---------- one phone-width column, like the prototype ---------- */
.wrap{max-width:430px!important;padding:12px 16px 28px!important}
.project-mode .wrap{max-width:430px!important;padding:12px 16px 28px!important}
.header{display:none!important}
.grid,.project-mode .grid{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
.card,.project-mode .card{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;display:flex;flex-direction:column;gap:12px}
.summary-card{display:none!important}
.summary-card:has(#projectPanel:not(.hidden)){display:flex!important}
.summary-card #summaryTitle,.summary-card #churchMeta,.summary-card #fundMeta,.summary-card .meta{display:none!important}
#giveForm{display:flex;flex-direction:column;gap:12px}
.hidden{display:none!important}

/* ---------- church header (wordmark + the church's logo) ---------- */
.sun-church-hd{display:flex;justify-content:space-between;align-items:center;background:var(--cp-surface);border-radius:18px;padding:10px 14px;box-shadow:var(--cp-shadow);order:-2}
.sun-church-hd img.wm{height:22px;width:auto;display:block}
.sun-church-hd .lg{width:36px;height:36px;border-radius:50%;background:var(--cp-pale2);display:grid;place-items:center;overflow:hidden}
.sun-church-hd .lg svg{width:26px;height:24px;display:block}
.sun-church-hd .lg img{width:36px;height:36px;object-fit:cover;display:block}
.giving-heading{order:-1;display:grid;gap:2px;padding:2px 2px 0}
.giving-kicker{display:none!important}
.title,.project-mode .title{margin:0!important;font-size:26px!important;line-height:1.15!important;font-weight:500!important;letter-spacing:-.02em;color:var(--cp-text)!important;text-wrap:balance}
#subtitle{font-size:12.5px;color:var(--cp-text-muted)}
#subtitle.sun-hide{display:none}
/* no Project / Church giving switcher on the web page — the fund chips carry the choice */
#modeTabs,.mode-tabs{display:none!important}

/* ---------- launcher (no join code yet) ---------- */
.launcher{margin:0!important;border:0!important;border-radius:18px!important;background:var(--cp-surface)!important;padding:16px!important;box-shadow:var(--cp-shadow)}
.launcher .giving-brand{display:none!important}
.launcher h3{font-size:16px;font-weight:500;margin:0 0 4px}
.launcher p{font-size:12.5px;color:var(--cp-text-muted)}
.launcher-actions{display:grid;gap:8px;margin-top:10px}
.launcher details{font-size:12.5px;color:var(--cp-text-muted);margin-top:10px}

/* ---------- funds as chips with illustrations ---------- */
.fund-panel.fund-field,.project-mode .fund-field{display:block;margin:0!important;padding:0!important;border:0!important;background:transparent!important}
.fund-panel > span{display:none!important}
.fund-select-shell{display:none!important}
.sun-funds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sun-funds.many{grid-template-columns:repeat(3,minmax(0,1fr))}
.sun-fund{background:var(--cp-surface);border:0;border-radius:16px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:500;text-align:center;line-height:1.15;box-shadow:var(--cp-shadow);color:var(--cp-text);cursor:pointer;font-family:var(--cp-font)}
.sun-fund svg{width:44px;height:40px;display:block}
.sun-fund,.sun-fund span{text-transform:none!important;letter-spacing:0!important;font-size:12px!important;font-weight:500!important}
.sun-fund.on{box-shadow:0 0 0 2px var(--cp-teal);background:var(--cp-teal-soft)}
.sun-funds .sun-fund span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- amount ---------- */
.amount-selector{display:flex;flex-direction:column;gap:12px}
.amount-stage,.project-mode .amount-stage{position:relative;background:transparent!important;padding:6px 0 0!important;border:0!important;text-align:center}
.amount-caption{display:none!important}
.amount-display{min-height:0!important;align-items:baseline!important;gap:6px!important;font-weight:500!important;line-height:1!important;cursor:text}
.amount-display .currency{font-size:18px!important;color:var(--cp-teal-deep)!important;font-weight:500!important}
.amount-display .amount-value{font-size:44px!important;font-weight:500!important;letter-spacing:-.02em;color:var(--cp-text)!important}
.amount-display .amount-value i{font-style:normal;font-size:18px;color:var(--cp-text-faint);margin-left:2px}
.amount-hint{font-size:12px!important;font-weight:400!important;color:var(--cp-text-faint)!important;margin:6px 0 0!important;letter-spacing:0!important;text-transform:none!important}
.amount-stage,.project-mode .amount-stage{min-height:0!important}
.native-amount-input{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;pointer-events:auto!important;cursor:text}
.amount-keypad{display:none!important}
.sun-quick{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.sun-quick button{height:32px;padding:0 14px;border-radius:999px;border:0;background:var(--cp-surface);box-shadow:var(--cp-shadow);color:var(--cp-text);font-size:12.5px;font-weight:500;cursor:pointer;font-family:var(--cp-font)}
.sun-quick button.on{background:var(--cp-teal-deep);color:#fff}
.frequency-tabs{min-height:0!important;padding:4px!important;border:0!important;background:var(--cp-surface)!important;box-shadow:var(--cp-shadow);border-radius:999px!important}
.frequency-tab{height:36px;font-size:13px!important;font-weight:500!important;color:var(--cp-text-muted)!important}
.frequency-tab.is-active{background:var(--cp-teal-deep)!important;color:#fff!important}
.checkbox-field{font-size:12.5px!important;font-weight:400!important;color:var(--cp-text-muted)!important;padding:0 4px;letter-spacing:0!important;text-transform:none!important}

/* ---------- fields ---------- */
.field,#visitorDetails .field,.payment-method-field{display:grid!important;gap:3px;margin:0!important;background:var(--cp-surface);border-radius:16px;padding:10px 14px;box-shadow:var(--cp-shadow);position:relative}
.field span{font-size:12px!important;color:var(--cp-text-faint)!important;margin:0!important}
.field input,.field select{border:0!important;background:transparent!important;padding:0!important;height:auto!important;min-height:22px;font-size:15px!important;font-weight:500;color:var(--cp-text)!important;border-radius:0!important;box-shadow:none!important;outline:0}
.field input:focus,.field select:focus{box-shadow:none!important;outline:0!important}
.field input::placeholder{color:var(--cp-text-faint);font-weight:400}
#visitorDetails{display:grid;gap:8px}
.member-checkout{margin:0!important;padding:12px 14px!important;border:0!important;border-radius:16px!important;box-shadow:var(--cp-shadow)}
.member-checkout-avatar{background:var(--cp-pale2)!important;color:var(--cp-art-dark)!important}
.saved-card-note{font-size:12px;color:var(--cp-text-faint)}

/* ---------- fee rows, button, status ---------- */
.fee-list,.giving-fee-list,.project-mode .fee-list{margin:0!important;border:0!important;border-radius:16px!important;background:var(--cp-surface)!important;box-shadow:var(--cp-shadow);padding:2px 14px!important;overflow:hidden}
.fee-list li{padding:10px 0!important;font-size:13px;border-top:1px solid var(--cp-line)!important;color:var(--cp-text-muted)}
.fee-list li:first-child{border-top:0!important}
.fee-list li strong{font-weight:500;color:var(--cp-text)}
.fee-list li.total{background:transparent!important}
.fee-list li.total strong{color:var(--cp-teal-deep)}
.fee-note,.giving-fee-note{font-size:11.5px!important;color:var(--cp-text-faint)!important;margin:0!important;padding:0 4px;text-align:center}
.btn,#payBtn,.project-mode .btn{margin:0!important;height:54px;padding:0 16px!important;font-size:14px!important;font-weight:500!important;background:var(--cp-teal-deep)!important;color:#fff!important;display:flex;align-items:center;justify-content:center;gap:8px}
.btn.ghost,#openAppBtn{background:transparent!important;color:var(--cp-text)!important;border:0!important;box-shadow:inset 0 0 0 1px var(--cp-line)!important;height:46px}
.sun-alt{text-align:center;font-size:12px;color:var(--cp-text-muted);margin:-4px 0 0}
.status{text-align:center;font-size:12.5px!important;color:var(--cp-text-muted)!important;margin:0!important;min-height:0!important}
.success{background:var(--cp-teal-soft)!important;color:var(--cp-teal-deep)!important;border:0!important;border-radius:14px!important;padding:12px 14px!important;font-size:13px;font-weight:500;text-align:center}
.error{background:var(--cp-bad-bg)!important;color:var(--cp-bad)!important;border:0!important;border-radius:14px!important;padding:12px 14px!important;font-size:13px;font-weight:500;text-align:center}
.error:empty,.success:empty{display:none}

/* ---------- project story and shop in the same language ---------- */
.project-story-intro,.project-panel{background:var(--cp-surface)!important;border:0!important;border-radius:22px!important;box-shadow:var(--cp-shadow);padding:14px!important}
.project-story-meta,.project-chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--cp-pale2)!important;color:var(--cp-art-dark)!important;font-size:11.5px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important}
.project-story-intro h2,.project-title{font-size:20px!important;font-weight:500!important;margin:8px 0 4px!important;letter-spacing:-.01em}
.project-story-intro p,.project-summary,.project-details p{font-size:13px!important;color:var(--cp-text-muted)!important;line-height:1.45}
.project-story-media,.project-media{border-radius:16px!important;overflow:hidden;background:var(--cp-sky)!important}
.project-story-progress,.project-progress{height:10px!important;border-radius:999px!important;background:var(--cp-pale)!important;overflow:hidden;margin:10px 0 6px!important}
.project-story-progress span,.project-progress span{background:var(--cp-art)!important;border-radius:999px!important}
.project-story-numbers,.project-numbers{font-size:12px!important;color:var(--cp-text-muted)!important}
.project-story-numbers strong,.project-numbers strong{font-size:16px;font-weight:500;color:var(--cp-text)}
.project-trust-strip{display:none!important}
.project-sticky-cta{border:0!important;border-radius:22px 22px 0 0!important;background:var(--cp-surface)!important;box-shadow:0 -8px 30px rgba(16,24,40,.08)!important}
.project-sticky-cta button{background:var(--cp-teal-deep)!important;color:#fff!important;border-radius:999px!important;font-weight:500!important}
.shop-section{background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important}
.shop-heading h2{font-size:20px;font-weight:500;margin:6px 0 2px}
.shop-item{border:0!important;border-radius:18px!important;background:var(--cp-surface)!important;box-shadow:var(--cp-shadow)!important}
.shop-sheet{border-radius:22px 22px 0 0!important;border:0!important}
.shop-chip{border-radius:999px!important;border:0!important;background:var(--cp-surface)!important;box-shadow:inset 0 0 0 1px var(--cp-line)}
.shop-chip.is-active,.shop-chip[aria-pressed="true"]{background:var(--cp-teal-deep)!important;color:#fff!important;box-shadow:none}

/* ---------- review dialog ---------- */
#givingReview{border:0;border-radius:22px;padding:18px;width:min(420px,calc(100% - 32px));box-shadow:0 24px 60px rgba(20,27,34,.18);background:var(--cp-surface);color:var(--cp-text)}
#givingReview::backdrop{background:rgba(20,27,34,.45)}
#givingReview h2{font-size:20px;font-weight:500;margin:0 0 4px}
#givingReview p{font-size:13px;color:var(--cp-text-muted);margin:0 0 8px}
#givingReview dl{display:grid;grid-template-columns:1fr auto;gap:8px 12px;margin:10px 0;padding:10px 14px;background:var(--cp-bg);border-radius:14px;font-size:13px}
#givingReview dt{color:var(--cp-text-muted)}#givingReview dd{margin:0;font-weight:500;text-align:right}
#givingReview form{display:flex;gap:8px;margin-top:12px}
#givingReview form .btn{flex:1;height:46px}
#givingReview form .btn.ghost{height:46px}

/* ---------- laptop and up ----------
   The phone column above is the locked prototype and stays as it is on a phone. On a wide screen that column
   left a narrow ribbon, and in project mode the page's own two-column grid (436px + 322px) still ran inside it,
   so the content overflowed. Here the page opens up in the same sunset language: warm ground, the story beside
   a give card that follows the reader, everything on real cards. */
@media (min-width: 900px) {
  html, body { background: var(--cp-pale2) !important; }
  .wrap { max-width: 560px !important; padding: 30px 20px 56px !important; }
  .project-mode .wrap { max-width: 1060px !important; padding: 30px 24px 56px !important; }
  .grid, .project-mode .grid { gap: 22px !important; align-items: start; }
  .project-mode .grid { grid-template-columns: minmax(0, 1fr) 436px !important; }

  /* both columns become proper sunset cards */
  .card, .project-mode .card,
  .summary-card, .project-mode .summary-card {
    background: var(--cp-surface) !important;
    border-radius: 22px !important;
    padding: 20px !important;
    box-shadow: var(--cp-shadow) !important;
  }
  /* the give card stays with the reader while the story scrolls */
  .project-mode .card { position: sticky; top: 24px; }
  /* the church header already carries its own card; inside one it would be a box in a box */
  .sun-church-hd { background: transparent !important; box-shadow: none !important; padding: 0 0 4px !important; }
  .title, .project-mode .title { font-size: 30px !important; }
  .project-media { border-radius: 16px; overflow: hidden; }
}
@media (min-width: 1180px) {
  .project-mode .wrap { max-width: 1140px !important; }
}