/* ============================================================
   give2.css — the one-screen giving flow, in the v7 tricolour system.
   ============================================================ */

.g2-wrap{ max-width:640px; margin:0 auto; }

/* The form sits on a raised white card so it reads as the object of the page */
.g2-wrap[data-give2]{
  background:var(--surface);
  border:1px solid var(--rule-c);
  border-radius:var(--radius);
  box-shadow:var(--shadow-l);
  padding:clamp(24px,3.4vw,40px);
  position:relative;
  overflow:hidden;
}
.g2-wrap[data-give2]::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--tri-light);
}

/* ---- Frequency: two large equal cards, monthly first ---- */
.g2-modes{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:.6rem 0 1.7rem; }
.g2-mode{
  position:relative; display:block; cursor:pointer; text-align:center;
  padding:1.1rem .8rem; border:2px solid var(--rule-c); border-radius:var(--radius-s);
  background:var(--surface); transition:border-color .18s, box-shadow .18s, background .18s, transform .16s;
}
.g2-mode input{ position:absolute; opacity:0; width:0; height:0; }
.g2-mode .g2-mt{ display:block; font-weight:800; font-size:var(--fs-m); color:var(--text-head); }
.g2-mode .g2-md{ display:block; font-size:var(--fs-xs); color:var(--text-soft); margin-top:.22rem; }
.g2-mode:hover{ border-color:var(--saffron-300); transform:translateY(-2px); }
.g2-mode:has(input:checked){
  border-color:var(--accent);
  background:var(--surface-warm);
  box-shadow:0 6px 18px rgba(204,83,9,.16);
}
.g2-mode:has(input:checked) .g2-mt{ color:var(--accent-dark); }
.g2-mode:has(input:focus-visible){ outline:3px solid var(--saffron-400); outline-offset:2px; }
.g2-mode .g2-tag{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--green-700),var(--green-800)); color:#fff;
  font-size:var(--fs-nano); font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  padding:.24rem .6rem; border-radius:100px; white-space:nowrap;
  box-shadow:0 4px 12px rgba(13,110,62,.3);
}

/* ---- The amount dropdown — the centrepiece ---- */
.g2-amount-label{ display:block; font-weight:800; font-size:var(--fs-micro); margin:0 0 .55rem; color:var(--text-head); }
.g2-select-wrap{ position:relative; }
.g2-select{
  width:100%; appearance:none; -webkit-appearance:none;
  font-family:var(--font-display); font-size:clamp(1.5rem,4vw,1.9rem); font-weight:800;
  color:var(--text-head); background:var(--surface);
  border:2px solid var(--navy-800); border-radius:var(--radius-s);
  padding:.85rem 3.2rem .85rem 1.1rem; line-height:1.25; cursor:pointer;
  letter-spacing:-.02em;
}
.g2-select:hover{ border-color:var(--accent); }
.g2-select:focus-visible{ outline:3px solid var(--saffron-400); outline-offset:2px; }
.g2-select-wrap::after{
  content:""; position:absolute; right:1.25rem; top:50%; pointer-events:none;
  width:.62em; height:.62em; margin-top:-.44em; font-size:1.3rem;
  border-right:2.5px solid var(--accent-dark); border-bottom:2.5px solid var(--accent-dark);
  transform:rotate(45deg);
}
.g2-custom{ margin-top:.75rem; display:none; }
.g2-custom.on{ display:block; }
.g2-custom input{
  width:100%; font-family:var(--font-display); font-size:clamp(1.5rem,4vw,1.9rem); font-weight:800;
  color:var(--text-head); border:2px solid var(--navy-800); border-radius:var(--radius-s);
  padding:.78rem 1.1rem; background:var(--surface);
}

/* ---- The single live impact line ---- */
.g2-impact{
  margin:1.1rem 0 0; padding:1rem 1.2rem;
  background:var(--surface-warm);
  border-left:4px solid var(--accent);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  font-family:var(--font-display); font-size:var(--fs-l); font-weight:600;
  color:var(--text-head); line-height:1.45;
}
.g2-impact b{ font-weight:800; color:var(--accent-dark); }

/* ---- Details ---- */
.g2-fields{ margin-top:1.9rem; display:grid; gap:.9rem; }
.g2-f label{ display:block; font-size:var(--fs-micro); font-weight:800; color:var(--text-head); margin-bottom:.3rem; }
.g2-f label .opt{ font-weight:400; color:var(--text-soft); text-transform:none; letter-spacing:0; }
.g2-f input{ width:100%; }
.g2-f input[aria-invalid="true"]{ border-color:var(--saffron-500); background:var(--saffron-050); }
.g2-two{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
@media (max-width:540px){ .g2-two{ grid-template-columns:1fr; } .g2-modes{ grid-template-columns:1fr; } }

.g2-consent{ display:flex; gap:.65rem; align-items:flex-start; margin-top:1.2rem; font-size:var(--fs-s); color:var(--text); line-height:1.5; font-weight:400; }
.g2-consent input{ margin-top:.2rem; width:18px; height:18px; flex:none; accent-color:var(--accent); }

.g2-pay{ width:100%; margin-top:1.4rem; font-size:var(--fs-base); padding:1.05rem 1.5rem; }
.g2-sub{ margin:.85rem 0 0; text-align:center; font-size:var(--fs-micro); color:var(--text-soft); line-height:1.6; }
.g2-err{
  margin:.9rem 0 0; padding:.8rem 1rem; background:var(--saffron-050);
  border-left:4px solid var(--accent); border-radius:0 var(--radius-s) var(--radius-s) 0;
  font-size:var(--fs-s); color:var(--saffron-700); font-weight:600; display:none;
}
.g2-err.on{ display:block; }

/* ---- Escape hatch, quiet, below the form ---- */
.g2-more{ margin-top:2.3rem; padding-top:1.5rem; border-top:1px solid var(--rule-c); text-align:center; }
.g2-more p{ margin:.5rem 0 0; font-size:var(--fs-xs); color:var(--text-soft); }

/* Enquiry forms reuse the same card treatment */
.g2-wrap form{ margin:0; }