#pfDonateForm{
  --jakaranda:#2D6CB5;
  --sky:#75BDEF;
  --midnight:#0E1F33;
  --cloud:#F6F9FC;
  --heritage:#000080;
  --slate:#6B7280;
  --soft:#E5E7EB;
  --radius:16px;

  /* Once-off Mode */
  --accent-1: var(--jakaranda);
  --accent-2: var(--heritage);
  --accent-shadow: rgba(0,0,128,.18);
  --accent-ring: rgb(45, 108, 181,0.2);
  --accent-border: #000080;
  --accent-border-soft: rgba(45,108,181,.50);
  --accent-select-border: #000080;

  --grad-once: linear-gradient(135deg,var(--jakaranda),var(--heritage));
  --grad-month: linear-gradient(135deg,var(--jakaranda),var(--sky));
}

#pfDonateForm,
#pfDonateForm *{
  box-sizing:border-box;
}

#pfDonateForm{
  width:100%;
  max-width:600px;
  margin:0 auto;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Monthly Mode */
#pfDonateForm.is-monthly{
  --accent-1: var(--jakaranda);
  --accent-2: var(--sky);
  --accent-shadow: rgba(14,31,51,.22);
  --accent-ring: rgba(117,189,239,.30);
  --accent-border: rgba(117,189,239,.75);
  --accent-border-soft: rgba(117,189,239,.55);
  --accent-select-border: #75BDEF;
}

#pfDonateForm .pf-note{
  border:1px solid #00008033;
  background:rgb(45, 108, 181,0.1);
  color:var(--midnight);
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}

#pfDonateForm.is-monthly .pf-note{
  border-color:rgba(14,31,51,.22);
  background:rgba(14,31,51,.08);
  color:var(--midnight);
}

.pf-cause-wrap{
  margin-top:10px;
  max-height:140px;
  opacity:1;
  transform:translateY(0);
  transition:max-height .25s ease, opacity .25s ease, transform .25s ease, margin-top .25s ease;
  overflow:visible;
}
#pfDonateForm.is-monthly .pf-cause-wrap{
  margin-top:0;
  max-height:0;
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  overflow:hidden;
}

.pf-grad-fade{position:relative;overflow:hidden;}
.pf-grad-fade::before,
.pf-grad-fade::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  transition:opacity .35s ease;
  pointer-events:none;
}
.pf-grad-fade::before{background:var(--grad-once);opacity:1;}
.pf-grad-fade::after{background:var(--grad-month);opacity:0;}
#pfDonateForm.is-monthly .pf-grad-fade::before{opacity:0;}
#pfDonateForm.is-monthly .pf-grad-fade::after{opacity:1;}

.pf-grad-fade > *{position:relative;z-index:1;}
.pf-card{
  background:var(--cloud);
  border:1px solid var(--soft);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 10px 30px rgba(14,31,51,.08);
}
.pf-header{
  padding:20px 18px;
  color:#fff;
  background:transparent;
}
.pf-header h2{margin:0;font-size:20px;letter-spacing:.2px;color:#fff;}
.pf-header p{margin:6px 0 0;opacity:.9;font-size:13.5px;}

.pf-body{padding:18px;}

.pf-row{display:flex;gap:12px;flex-wrap:wrap;}
.pf-col{flex:1;min-width:200px;}
#pfDonateForm .pf-row{position:relative;z-index:1;}

.pf-label{display:block;margin:14px 0 6px;font-weight:650;color:var(--midnight);font-size:13.5px;}
.pf-help{margin:6px 0 0;color:var(--slate);font-size:12.5px;}

#pfDonateForm .pf-input{
  width:100%;
  box-sizing:border-box;
  padding:12px 12px;
  border:1px solid var(--soft);
  border-radius:12px;
  font-size:15.5px;
  line-height:1.2;
  outline:none;
  background:#fff;
  color:var(--midnight);
  transition:border-color .15s ease, box-shadow .15s ease;
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  z-index:2;
}
#pfDonateForm input.pf-input{
  height:46px;
}
#pfDonateForm input[type="text"].pf-input,
#pfDonateForm input[type="email"].pf-input{
  height:46px;
}
#pfDonateForm .pf-select{
  padding-right:40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--slate) 50%),
    linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
#pfDonateForm .pf-select:disabled{
  background-color:#f3f4f6;
  color:var(--slate);
  cursor:not-allowed;
}
#pfDonateForm .pf-input:focus{
  border-color: var(--accent-border);
  box-shadow:0 0 0 4px var(--accent-ring);
  outline:none;
}

.pf-seg{
  display:flex;
  background:#fff;
  border:1px solid var(--soft);
  border-radius:14px;
  padding:4px;
  gap:4px;
  margin-top:10px;
}
.pf-seg input{position:absolute;opacity:0;pointer-events:none;}
.pf-seg label{
  position:relative;
  flex:1;
  text-align:center;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
  font-weight:800;
  font-size:14px;
  color:var(--midnight);
  transition:background .35s ease, color .25s ease, box-shadow .35s ease;
}
.pf-seg input:checked + label{
  background:transparent;
  color:#fff;
  box-shadow:0 6px 18px var(--accent-shadow);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.pf-seg input:checked + label::before,
.pf-seg input:checked + label::after{
  z-index:0;
}
.pf-seg input:checked + label{
  z-index:1;
}

/* gradient layers */
.pf-seg input:checked + label::before,
.pf-seg input:checked + label::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  transition:opacity .35s ease;
  pointer-events:none;
}
.pf-seg input:checked + label::before{background:var(--grad-once);opacity:1;z-index:-1;}
.pf-seg input:checked + label::after{background:var(--grad-month);opacity:0;z-index:-1;}
#pfDonateForm.is-monthly .pf-seg input:checked + label::before{opacity:0;}
#pfDonateForm.is-monthly .pf-seg input:checked + label::after{opacity:1;}

.pf-amount-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
@media (max-width:420px){
  .pf-amount-grid{grid-template-columns:1fr;}
}

.pf-option{
  display:block;
  position:relative;
  background:#fff;
  border:1px solid var(--soft);
  border-radius:14px;
  padding:12px 12px 12px 44px;
  cursor:pointer;
  transition:border-color .25s ease, box-shadow .35s ease, transform .15s ease;
  user-select:none;
  box-sizing:border-box;
  min-height:64px;
}
.pf-option:hover{border-color: var(--accent-border-soft);box-shadow:0 8px 18px rgba(14,31,51,.06);}
.pf-option:active{transform:translateY(1px);}
.pf-option strong{display:block;color:var(--midnight);font-size:15px;line-height:1.1;}
.pf-option span{display:block;color:var(--slate);font-size:12.5px;margin-top:3px;line-height:1.2;}

.pf-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.pf-dot{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:18px;height:18px;
  border-radius:999px;
  border:2px solid rgba(107,114,128,.45);
  background:#fff;
  box-sizing:border-box;
}
.pf-dot::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  transform:scale(0);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), background .35s ease;
}

.pf-option:has(input:checked){
  border-color: var(--accent-select-border);
  box-shadow:0 0 0 4px var(--accent-ring);
}
.pf-option:has(input:checked) .pf-dot{border-color:rgba(14,31,51,.45);}
#pfDonateForm:not(.is-monthly) .pf-option:has(input:checked) .pf-dot{border-color:rgba(0,0,128,.45);} /* once-off keeps heritage tone */
.pf-option:has(input:checked) .pf-dot::after{transform:scale(1);}

.no-has .pf-option input:checked ~ .pf-dot::after{transform:scale(1);}

.pf-custom-wrap{
  margin-top:0;
  overflow:visible;
  pointer-events:none;
  max-height:0;
  opacity:0;
  transform:translateY(-6px);
  transition:max-height .35s ease, opacity .25s ease, transform .25s ease, margin-top .25s ease;
}
.pf-custom-wrap.is-on{
  margin-top:10px;
  max-height:220px;
  opacity:1;
  transform:translateY(0);
  overflow:visible;
  pointer-events:auto;
}

.pf-note{
  margin:14px 0 0;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(45,108,181,.18);
  background:rgba(117,189,239,.18);
  color:var(--midnight);
  font-size:13.25px;
  line-height:1.35;
}
#pfDonateForm.is-monthly .pf-note{
  border-color:rgba(117,189,239,.28);
  background:rgba(117,189,239,.16);
}

.pf-actions{
  display:flex;
  gap:10px;
  margin-top:16px;
  flex-wrap:wrap;
}
.pf-btn{
  border:0 !important;
  border-radius:14px;
  padding:12px 14px;
  font-weight:900;
  font-size:15.5px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease;
  will-change:transform;
  appearance:none;
  -webkit-appearance:none;
}
.pf-btn:active{transform:translateY(1px);}
.pf-primary{
  color:#fff;
  background:transparent;
  border:0 !important;
  outline:0;
  box-shadow:0 10px 22px var(--accent-shadow);
  flex:1;
  min-width:190px;
  position:relative;
  overflow:hidden;
  transition:box-shadow .35s ease, transform .25s ease, filter .15s ease;
  z-index:0;
}

.pf-primary:hover{
  transform:translateY(-2px);
  transform:scale(1.01);
  filter:brightness(1.12);
  box-shadow:0 14px 30px var(--accent-shadow);
}

@media (prefers-reduced-motion: reduce){
  .pf-btn, .pf-option, .pf-seg label, .pf-input,
  .pf-grad-fade::before, .pf-grad-fade::after,
  .pf-custom-wrap,
  .pf-seg input:checked + label::before, .pf-seg input:checked + label::after{transition:none !important;}
  .pf-primary:hover{transform:none;}
}

.pf-error{
  display:none;
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(185,28,28,.25);
  background:rgba(185,28,28,.08);
  color:#7f1d1d;
  font-size:13px;
  line-height:1.35;
}

@media (max-width:640px){
  #pfDonateForm .pf-body{padding:16px;}
  #pfDonateForm .pf-header{padding:18px 16px;}
  #pfDonateForm .pf-header h2{font-size:18px;}
  #pfDonateForm .pf-header p{font-size:13px;}

  #pfDonateForm .pf-row{gap:10px;}
  #pfDonateForm .pf-col{min-width:0; flex-basis:100%;}

  #pfDonateForm .pf-amount-grid{grid-template-columns:1fr;}
  #pfDonateForm .pf-input{font-size:16px;}
  #pfDonateForm .pf-btn{width:100%;}
}