
:root{--navy:#07395b;--green:#159447;--soft:#f2f7f9;--border:#d7e3e9;--muted:#657786}
*{box-sizing:border-box}.transfer-page{margin:0;background:#edf3f6;color:#183044}.transfer-header{position:sticky;top:0;z-index:20;background:#fff}.transfer-header .nav-wrap{min-height:105px}.transfer-nav{margin-left:auto;display:flex;gap:24px;align-items:center}.transfer-nav a{font-weight:800;color:var(--navy)}.transfer-nav span{font-weight:700;color:var(--green)}
.transfer-hero{padding:50px 0 34px;color:#fff;background:linear-gradient(120deg,#052f50,#0b5b71 65%,#168551)}.transfer-hero h1{color:#fff;font-size:clamp(2.3rem,4vw,4rem);margin:8px 0}.transfer-hero p{margin:0}.demo-notice{margin-top:22px;max-width:930px;padding:14px 16px;border:1px solid #ffffff55;border-radius:12px;background:#ffffff14;line-height:1.5}
.transfer-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:26px;margin-top:32px;margin-bottom:70px;align-items:start}.steps-panel,.wizard{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 15px 45px #07395b12}.steps-panel{position:sticky;top:130px;padding:22px}.steps-panel h2{font-size:1rem;color:var(--navy)}.steps-panel ol{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}.steps-panel li{display:flex;align-items:center;gap:10px;padding:10px;border-radius:11px;color:#84939d}.steps-panel b{width:30px;height:30px;display:grid;place-items:center;border:1px solid #ccd8df;border-radius:50%}.steps-panel li.active{background:#eef9f2;color:var(--navy);font-weight:800}.steps-panel li.active b,.steps-panel li.done b{background:var(--green);color:#fff;border-color:var(--green)}.wizard{padding:clamp(20px,4vw,44px)}
.form-step{display:none}.form-step.active{display:block}.step-title{margin-bottom:25px}.step-title span{font-size:.75rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--green)}.step-title h2{font-size:clamp(1.8rem,3vw,2.7rem);color:var(--navy);margin:7px 0}.step-title p{color:var(--muted);margin:0}.centre{text-align:center}
.grid{display:grid;gap:17px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}label{display:grid;gap:7px;font-size:.88rem;font-weight:700;color:#2b4355}.full{grid-column:1/-1}input,select,textarea{width:100%;min-height:48px;border:1px solid #c7d5dd;border-radius:10px;padding:11px 13px;background:#fff;font:inherit}input:focus,select:focus{outline:3px solid #15944720;border-color:var(--green)}.bad{border-color:#c73838;background:#fff8f8}
.uploads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:22px}.upload{min-height:145px;place-content:center;text-align:center;padding:18px;border:2px dashed #b9cbd5;border-radius:14px;background:#f9fbfc;cursor:pointer}.upload input{position:absolute;opacity:0}.upload small,.upload em{display:block;color:var(--muted);font-style:normal}.upload em{margin-top:8px;color:var(--green);font-weight:800}.check{display:flex;align-items:flex-start;gap:10px;margin-top:20px;line-height:1.45}.check input{width:19px;height:19px;min-height:19px;margin-top:2px}
.payouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.payouts input{position:absolute;opacity:0}.payouts span{display:block;height:100%;padding:20px;border:2px solid var(--border);border-radius:14px;font-size:1.5rem}.payouts b,.payouts small{display:block}.payouts b{font-size:.95rem;color:var(--navy);margin-top:9px}.payouts small{font-size:.75rem;color:var(--muted);margin-top:4px}.payouts input:checked+span{border-color:var(--green);background:#effaf3}.conditional{display:none;margin-top:20px;padding:20px;background:var(--soft);border-radius:14px}.conditional.show{display:block}.note{font-size:.8rem;color:#8a5a27}
.quote-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;margin-top:28px}.quote{padding:23px;border-radius:16px;color:#fff;background:linear-gradient(145deg,#063b60,#08706b)}.quote div{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid #ffffff25}.quote span{color:#ffffffbf;font-size:.82rem}.quote b{text-align:right}.quote .receive{margin-top:8px;padding:17px;border:0;border-radius:12px;background:#ffffff18}.quote .receive b{color:#a4f2bb;font-size:1.2rem}.quote small{display:block;margin-top:15px;color:#ffffffb8;line-height:1.45}
.review-block{padding:19px;border:1px solid var(--border);border-radius:14px;margin-bottom:15px}.review-block h3{margin:0 0 13px;color:var(--navy)}.review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}.review-item span{display:block;color:var(--muted);font-size:.74rem}.review-item b{display:block;margin-top:3px}.confirm{padding:18px;background:#f7fafb;border-radius:14px}.success{width:70px;height:70px;margin:0 auto 15px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:#fff;font-size:2rem;font-weight:800}.receipt{padding:24px;border:1px solid var(--border);border-radius:15px}.receipt-head{display:flex;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}.receipt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.receipt-buttons{display:flex;justify-content:center;gap:12px;margin-top:22px}
.alert{display:none;margin-top:20px;padding:13px 15px;border-radius:10px;background:#fff0f0;color:#8b2525}.alert.show{display:block}.controls{display:flex;justify-content:space-between;margin-top:30px;padding-top:22px;border-top:1px solid var(--border)}#back{visibility:hidden}
@media(max-width:900px){.transfer-layout{grid-template-columns:1fr}.steps-panel{position:static}.steps-panel ol{grid-template-columns:repeat(6,minmax(105px,1fr));overflow:auto}.steps-panel li{display:grid;text-align:center}.steps-panel b{margin:auto}}
@media(max-width:700px){.transfer-nav span{display:none}.grid.two,.uploads,.payouts,.quote-grid,.review-grid,.receipt-grid{grid-template-columns:1fr}.wizard{padding:20px 15px}.receipt-head{display:grid}}
@media print{.site-header,.transfer-hero,.steps-panel,.controls,.receipt-buttons,.demo-notice{display:none!important}.transfer-layout{display:block;margin:0}.wizard{box-shadow:none;border:0}.form-step{display:none!important}.form-step[data-step="6"]{display:block!important}}

/* Version 14: sending-currency dropdown */
.send-money-row{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr);
  gap:14px;
}
.send-money-row input,
.send-money-row select{
  min-height:52px;
}
@media(max-width:700px){
  .send-money-row{grid-template-columns:1fr}
}

/* Version 15: full funding-method workflow */
.funding-section{
  margin-top:24px;
}
.funding-section>h3{
  color:var(--navy);
  margin:0 0 14px;
}
.funding-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
}
.funding-options label{
  cursor:pointer;
}
.funding-options input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.funding-options span{
  display:block;
  height:100%;
  padding:19px;
  border:2px solid var(--border);
  border-radius:14px;
  background:#fff;
  font-size:1.45rem;
}
.funding-options b,
.funding-options small{
  display:block;
}
.funding-options b{
  margin-top:9px;
  color:var(--navy);
  font-size:.92rem;
}
.funding-options small{
  margin-top:5px;
  color:var(--muted);
  font-size:.74rem;
  line-height:1.4;
}
.funding-options input:checked+span{
  border-color:var(--green);
  background:#effaf3;
  box-shadow:0 0 0 3px #15944718;
}
.funding-details{
  display:none;
  margin-top:18px;
  padding:20px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--soft);
}
.funding-details.show{
  display:block;
}
.funding-details h3{
  margin:0 0 15px;
  color:var(--navy);
}
.payment-instruction{
  margin-top:16px;
  padding:15px 17px;
  border-left:4px solid var(--green);
  border-radius:9px;
  background:#fff;
}
.payment-instruction p,
.payment-instruction ol{
  margin:7px 0 0;
  color:var(--muted);
  line-height:1.55;
}
.payment-instruction ol{
  padding-left:20px;
}
.paybill-card{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:17px;
}
.paybill-card div{
  padding:15px;
  border-radius:11px;
  background:#fff;
}
.paybill-card span,
.paybill-card strong{
  display:block;
}
.paybill-card span{
  color:var(--muted);
  font-size:.74rem;
}
.paybill-card strong{
  margin-top:5px;
  color:var(--navy);
}
@media(max-width:800px){
  .funding-options,
  .paybill-card{
    grid-template-columns:1fr;
  }
}

/* Version 19: account-linked sender profiles */
.profile-loaded-note{
  margin-bottom:18px;
  padding:13px 15px;
  border-left:4px solid var(--green);
  border-radius:10px;
  color:#215b3a;
  background:#eef9f2;
  font-weight:700;
}
.customer-type-selector{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:22px;
}
.customer-type-selector input{position:absolute;opacity:0}
.customer-type-selector span{
  display:block;height:100%;padding:19px;border:2px solid var(--border);
  border-radius:14px;background:#fff;font-size:1.4rem;cursor:pointer;
}
.customer-type-selector b,.customer-type-selector small{display:block}
.customer-type-selector b{margin-top:8px;color:var(--navy);font-size:.95rem}
.customer-type-selector small{margin-top:5px;color:var(--muted);font-size:.75rem}
.customer-type-selector input:checked+span{border-color:var(--green);background:#effaf3}
.sender-type-fields{display:none}
.sender-type-fields.show{display:block}
@media(max-width:700px){.customer-type-selector{grid-template-columns:1fr}}

/* Version 29: saved beneficiary and connected transaction history */
.saved-beneficiary-panel{
  margin:0 0 20px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#f7fafb;
}
.saved-beneficiary-panel p{
  margin:7px 0 0;
  color:var(--muted);
  font-size:.8rem;
}
.save-beneficiary-choice{
  margin-top:20px;
}
.transaction-saved-banner{
  margin:18px 0;
  padding:14px 16px;
  border-left:4px solid var(--green);
  border-radius:10px;
  background:#eef9f2;
  color:#215b3a;
  font-weight:700;
}

/* V93 payment and beneficiary usability refinements */
.funding-details .grid.two{grid-template-columns:1fr 1fr;gap:16px}
.payment-input-wide input{min-height:52px;font-size:16px;padding:13px 14px;width:100%;box-sizing:border-box}
.funding-details label{min-width:0}
.payment-completion{margin-top:22px;padding:18px;border:1px solid #cfdeda;border-radius:14px;background:#f8fbfa}
.payment-completion h3{margin:0 0 6px}.payment-completion p{margin:0 0 12px;color:#52666a}
.payment-completion input{min-height:54px;font-size:16px;width:100%;box-sizing:border-box}
.wallet-name-verify{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}
.button.compact{padding:10px 14px;min-height:42px}
.verified-name{padding:11px 13px;border-radius:10px;background:#f3f8f6;color:#274a42;flex:1;min-width:240px}
.verified-name.success{border:1px solid #7fbd96;background:#eff9f2;font-weight:700}
.receipt-subject-note{margin-top:16px;padding:13px 16px;border-top:2px solid #128a50;text-align:center;color:#324d45}
@media(max-width:760px){.funding-details .grid.two{grid-template-columns:1fr}.payment-input-wide{grid-column:1/-1}}
.payment-input-wide{grid-column:1/-1}

/* V94 calculation, payment-entry and 10-digit reference refinements */
.payment-input-wide{grid-column:1/-1;width:100%;display:block}
.payment-input-wide input{min-height:62px;font-size:17px;padding:16px 17px;width:100%;max-width:none;box-sizing:border-box}
.bank-instruction-card strong,.paybill-card strong{overflow-wrap:anywhere}
#paybillAmount{font-size:1.18rem}
.payment-completion{margin-top:26px}
.payment-completion input{min-height:60px;font-size:17px;padding:15px 16px}

/* V95: keep review and receipt centred and full-width */
.review-receipt-mode .transfer-layout{grid-template-columns:minmax(0,980px);justify-content:center;max-width:1180px;margin-left:auto;margin-right:auto;}
.review-receipt-mode .steps-panel{display:none;}
.review-receipt-mode .wizard{width:100%;min-width:0;margin:0 auto;}
.review-receipt-mode .form-step.active{width:100%;max-width:100%;margin:0 auto;}
@media(max-width:900px){.review-receipt-mode .transfer-layout{display:block;margin-left:auto;margin-right:auto}.review-receipt-mode .wizard{width:100%}}


/* V97: Step 4 centred layout */
.step4-centred-mode .transfer-layout{grid-template-columns:minmax(0,1080px);justify-content:center;max-width:1180px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;}
.step4-centred-mode .steps-panel{display:none;}
.step4-centred-mode .wizard{width:100%;min-width:0;margin:0 auto;}
.step4-centred-mode .form-step[data-step="4"].active{width:100%;max-width:100%;margin:0 auto;}
.step4-centred-mode .quote-grid{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);align-items:start;}
@media(max-width:900px){.step4-centred-mode .transfer-layout{display:block;padding-left:12px;padding-right:12px}.step4-centred-mode .quote-grid{grid-template-columns:1fr}.step4-centred-mode .wizard{width:100%}}
