@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --navy: #0B1F33;
  --navy-soft: #12304C;
  --steel: #5B6B7A;
  --paper: #F4F6F8;
  --amber: #F2A93B;
  --amber-dark: #D98F1F;
  --line: #D8DEE4;
  --ok: #2E7D4F;
  --bad: #C0392B;
  --radius: 4px;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family:'Inter', system-ui, sans-serif;
  background: var(--paper);
  color: var(--navy);
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding: 40px 16px;
}

.card{
  width:100%;
  max-width:560px;
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
}

.card__band{
  background: var(--navy);
  color:#fff;
  padding:20px 28px;
  display:flex;
  align-items:center;
  gap:14px;
  border-bottom:6px solid var(--amber);
}

.card__band .mark{
  width:34px;height:34px;flex:none;
  background: var(--amber);
  border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; font-size:18px; color:var(--navy);
}

.card__band h1{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:22px;
  letter-spacing:.3px;
  margin:0;
  text-transform:uppercase;
}
.card__band p{ margin:2px 0 0; font-size:12.5px; color:#C9D4DE; }

.card__body{ padding:28px; }

.step{ display:none; }
.step.active{ display:block; }

label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.4px;
  color: var(--steel);
  margin: 18px 0 6px;
}
label:first-of-type{ margin-top:0; }

input[type=text], input[type=email], input[type=tel]{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  font-size:15px;
  font-family:'Inter', sans-serif;
  color: var(--navy);
  background:#fff;
}
input:focus{ outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber-dark); }

.pay-grid{ display:grid; gap:8px; margin-top:4px; }
.pay-option{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:11px 12px;
  display:flex; align-items:center; gap:10px;
  cursor:pointer;
  font-size:14.5px;
}
.pay-option:hover{ border-color: var(--amber-dark); }
.pay-option input{ accent-color: var(--navy); width:16px; height:16px; }
.pay-option.selected{ border-color: var(--navy); background:#F7FAFC; }
.pay-option .fee{ margin-left:auto; font-weight:600; color: var(--amber-dark); font-size:12.5px; }

.ach-fields{
  display:none;
  margin-top:14px;
  padding:14px 14px 4px;
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--radius);
}
.ach-fields.show{ display:block; }
.ach-fields label{ margin-top:12px; }
.ach-fields label:first-of-type{ margin-top:0; }
.ach-note{ font-size:12px; color:var(--steel); margin:2px 0 0; }
.field-error{ color: var(--bad); font-size:12px; margin-top:4px; display:none; }
.field-error.show{ display:block; }

.sig-wrap{ position:relative; }
#sigCanvas{
  width:100%;
  height:150px;
  border:1px dashed var(--line);
  border-radius: var(--radius);
  background:#fff;
  touch-action:none;
  cursor:crosshair;
}
.sig-clear{
  position:absolute;
  top:8px; right:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:3px;
  font-size:11px;
  padding:4px 8px;
  cursor:pointer;
  color: var(--steel);
}
.sig-clear:hover{ border-color: var(--amber-dark); color: var(--navy); }

.btn{
  width:100%;
  margin-top:24px;
  padding:13px;
  border:none;
  border-radius: var(--radius);
  background: var(--navy);
  color:#fff;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:.5px;
  text-transform:uppercase;
  cursor:pointer;
}
.btn:hover{ background: var(--navy-soft); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn.amber{ background:var(--amber); color:var(--navy); }
.btn.amber:hover{ background:var(--amber-dark); }

.error{ color: var(--bad); font-size:13px; margin-top:10px; display:none; }
.error.show{ display:block; }

.center{ text-align:center; padding:20px 0; }
.spinner{
  width:38px;height:38px; margin:0 auto 18px;
  border:4px solid var(--line);
  border-top-color: var(--amber);
  border-radius:50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.loading-title{ font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:19px; text-transform:uppercase; letter-spacing:.4px; margin:0 0 6px; }
.loading-sub{ color:var(--steel); font-size:14px; margin:0; }

iframe#otpFrame{ width:100%; height:280px; border:1px solid var(--line); border-radius:var(--radius); }

.summary{ list-style:none; margin:16px 0 0; padding:0; }
.summary li{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.summary li span:first-child{ color:var(--steel); }
.summary li span:last-child{ font-weight:600; }

.status-badge{ display:inline-block; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.status-badge.ok{ background:#E4F3EA; color: var(--ok); }
.status-badge.bad{ background:#FBE6E3; color: var(--bad); }