/* GiveFlow front-end styles. Colors come from CSS variables set in Settings → Appearance. */
.gf-wrap{--gf-primary:#2d6cdf;--gf-on-primary:#fff;--gf-accent:#2d9d5b;--gf-bg:#fff;--gf-text:#1d2433;--gf-border:#dde1e8;--gf-radius:12px;
  max-width:640px;margin:0 auto;color:var(--gf-text);line-height:1.5;box-sizing:border-box}
.gf-wrap *,.gf-wrap *::before,.gf-wrap *::after{box-sizing:border-box}
.gf-title,.gf-camp-title{margin:0 0 14px;line-height:1.25}

/* Form container */
.gf-form{background:var(--gf-bg);padding:4px 0}
.gf-style-card .gf-form{border:1px solid var(--gf-border);border-radius:var(--gf-radius);padding:26px;box-shadow:0 10px 30px rgba(20,30,60,.08)}
.gf-field{border:0;margin:0 0 20px;padding:0;min-width:0}
.gf-label{display:block;font-weight:600;font-size:15px;margin:0 0 8px;padding:0}
.gf-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Amount chips */
.gf-amounts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.gf-chip input,.gf-seg input{position:absolute;opacity:0;pointer-events:none}
.gf-chip span{display:block;text-align:center;padding:14px 10px;border:2px solid var(--gf-border);border-radius:var(--gf-radius);cursor:pointer;font-weight:700;font-size:20px;transition:all .15s;background:var(--gf-bg)}
.gf-chip:hover span{border-color:var(--gf-primary)}
.gf-chip input:checked+span{background:var(--gf-primary);border-color:var(--gf-primary);color:var(--gf-on-primary);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.gf-chip input:focus-visible+span,.gf-seg input:focus-visible+span{outline:3px solid var(--gf-primary);outline-offset:2px}

/* Custom amount */
.gf-custom{position:relative;margin-top:12px}
.gf-cur{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-weight:700;opacity:.6}
.gf-custom input{width:100%;padding:13px 14px 13px 34px;font-size:18px;border:2px solid var(--gf-border);border-radius:var(--gf-radius);background:var(--gf-bg);color:var(--gf-text)}
.gf-custom input:focus,.gf-input:focus,.gf-select:focus{border-color:var(--gf-primary);outline:0;box-shadow:0 0 0 3px rgba(45,108,223,.15)}

/* Inputs */
.gf-input,.gf-select{width:100%;padding:12px 14px;font-size:16px;border:2px solid var(--gf-border);border-radius:var(--gf-radius);background:var(--gf-bg);color:var(--gf-text);height:auto}
.gf-months-other{margin-top:10px}

/* Frequency segmented control */
.gf-seg{display:flex;flex-wrap:wrap;border:2px solid var(--gf-border);border-radius:var(--gf-radius);overflow:hidden}
.gf-seg label{flex:1 1 auto;position:relative}
.gf-seg span{display:block;text-align:center;padding:11px 14px;cursor:pointer;font-weight:600;transition:background .15s}
.gf-seg input:checked+span{background:var(--gf-primary);color:var(--gf-on-primary)}
.gf-duration{margin-top:16px}
.gf-hint{margin:8px 0 0;font-size:14px;opacity:.75}

/* Donor details (skip-checkout mode) */
.gf-details .gf-input{margin-bottom:10px}
.gf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gf-row3{grid-template-columns:2fr 1fr 1fr}
.gf-phone-wrap .gf-input{margin-bottom:10px}

/* Checkboxes */
.gf-check{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;cursor:pointer;font-size:15px}
.gf-check input{margin-top:4px;width:18px;height:18px;accent-color:var(--gf-primary);flex:none}

/* Impact list */
.gf-impact{list-style:none;margin:14px 0 0;padding:12px 16px;background:rgba(0,0,0,.035);border-radius:var(--gf-radius);font-size:14px}
.gf-impact li{padding:3px 0}

/* Total + button */
.gf-total{display:flex;justify-content:space-between;align-items:center;font-size:18px;padding:14px 0;border-top:1px dashed var(--gf-border);margin-top:6px}
.gf-total strong{font-size:26px}
.gf-submit{display:block;width:100%;padding:16px 20px;font-size:19px;font-weight:700;border:0;border-radius:var(--gf-radius);background:var(--gf-primary);color:var(--gf-on-primary);cursor:pointer;transition:filter .15s,transform .05s}
.gf-submit:hover{filter:brightness(1.08)}
.gf-submit:active{transform:translateY(1px)}
.gf-submit[disabled]{opacity:.6;cursor:wait}
.gf-secure{text-align:center;font-size:13px;opacity:.7;margin:12px 0 0}

/* Alerts */
.gf-alert{padding:12px 16px;border-radius:var(--gf-radius);background:#f3f6fb;border:1px solid var(--gf-border);margin:0 0 16px}
.gf-alert.gf-error{background:#fdecea;border-color:#f3b9b4;color:#8a1f17}
.gf-alert.gf-ended{background:#f3f3f3}

/* Campaign header */
.gf-campaign{margin-bottom:24px}
.gf-hero img{width:100%;height:auto;border-radius:var(--gf-radius);display:block;margin-bottom:16px}
.gf-story{margin-bottom:20px}
.gf-progress{padding:18px;border:1px solid var(--gf-border);border-radius:var(--gf-radius);background:var(--gf-bg)}
.gf-bar{height:16px;background:rgba(0,0,0,.08);border-radius:999px;overflow:hidden}
.gf-fill{height:100%;background:var(--gf-accent);border-radius:999px;transition:width .8s ease;background-image:linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%);background-size:24px 24px}
.gf-nums{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;font-size:17px}
.gf-nums strong{font-size:26px}
.gf-pct{font-weight:800;font-size:22px;color:var(--gf-accent)}
.gf-meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:6px;font-size:14px;opacity:.85}
.gf-goal{margin-top:12px;padding:10px 14px;border-radius:var(--gf-radius);background:rgba(45,157,91,.12);font-weight:600}

/* Share + wall */
.gf-share{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gf-share a{display:inline-block;padding:7px 14px;border:1px solid var(--gf-border);border-radius:999px;text-decoration:none;font-size:14px;color:var(--gf-text)}
.gf-share a:hover{border-color:var(--gf-primary);color:var(--gf-primary)}
.gf-wall{margin-top:24px}
.gf-wall h4{margin:0 0 8px}
.gf-wall ul{list-style:none;margin:0;padding:0}
.gf-wall li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--gf-border);font-size:15px}
.gf-wall em{opacity:.6;font-size:13px;white-space:nowrap}
.gf-tag{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--gf-primary);color:var(--gf-on-primary);vertical-align:middle}

@media (max-width:480px){
  .gf-style-card .gf-form{padding:18px}
  .gf-amounts{grid-template-columns:repeat(2,1fr)}
  .gf-row,.gf-row3{grid-template-columns:1fr}
}