:root { --c:#2e7d2e; --bg:#f0f2f5 }

body {
  margin:0;
  background:var(--bg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
}

.wrap{ max-width:980px; margin:48px auto; padding:0 16px }
.card{ background:#fff; border-radius:6px; box-shadow:0 2px 16px rgba(0,0,0,.06); display:grid; grid-template-columns:1.1fr .9fr }
.left{ padding:28px 32px }
.right{ padding:28px 32px; border-left:1px solid #eef0f4; background:#fafbfc }
h1{ font-size:18px; margin:0 0 16px; color:#222 }
.muted{ color:#6b7280; font-size:14px }
.brand{ font-weight:700; font-size:26px; letter-spacing:.2px; margin:12px 0 22px }
label{ display:block; font-weight:600; margin:12px 0 6px }

/* inputs/buttons */
input{ width:100%; padding:12px 14px; border:1px solid #cfd6e4; border-radius:4px; font-size:15px }
button{ margin-top:18px; background:var(--c); color:#fff; border:0; border-radius:4px; padding:12px 16px; font-size:15px; cursor:pointer }
button:disabled{ opacity:.6; cursor:not-allowed }
.help{ margin-top:18px; font-size:13px; color:#6b7280 }
.err{ color:#b00020; margin-top:10px }
.ok{ color:#0a7d2a; margin-top:10px }
.row{ margin-top:12px; display:flex; gap:12px; flex-wrap:wrap }
#wizard{ display:none; margin-top:8px }
#msg{ margin-top:10px }

/* overlay */
.field-wrap{ position:relative }
#overlay{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center; gap:10px;
  background:rgba(255,255,255,.92); border-radius:6px; z-index:2; padding:12px; text-align:center;
}
#overlay.show{ display:flex }
.cover-text{ color:#39424e; font-size:14px; font-weight:600 }

/* spinner */
.loader{
  width:48px; height:48px; border:5px solid #FFF; border-bottom-color:transparent; border-radius:50%;
  display:inline-block; box-sizing:border-box; animation:rotation 1s linear infinite; box-shadow:0 0 0 1px rgba(0,0,0,.05) inset;
}
@keyframes rotation{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* msg yes/no */
.ack-row{ display:none; margin-top:10px }
.ack-label{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:#39424e }
.ack-label input[type="checkbox"]{ margin-top:2px; transform:scale(1.15) }

/* right column – accepted cards */
.accepts{ margin-top:18px }
.accepts .label{ display:block; font-size:13px; color:#6b7280; margin-bottom:8px }
.card-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.cc{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:36px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,0.02) inset }
.cc svg{ width:40px; height:22px }
.cc.visa text{ fill:#1a4fb5; font-weight:700; font-family:system-ui,Arial,sans-serif; font-size:14px }
.cc.amex rect{ fill:#2e77bb } .cc.amex text{ fill:#fff; font-weight:700; font-family:system-ui,Arial,sans-serif; font-size:12px }
.cc.disc circle{ fill:#f58020 } .cc.disc text{ fill:#222; font-weight:700; font-family:system-ui,Arial,sans-serif; font-size:10px }

/* contextual help shown only in Amount step */
.verify-help{ display:none; margin-top:20px; background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:14px; box-shadow:0 1px 8px rgba(0,0,0,.04) }
.verify-help.sticky{ position:sticky; top:16px }
.verify-help h2{ font-size:16px; margin:0 0 8px; color:#111 }
.verify-sample{ border:1px solid #eceff3; border-radius:10px; padding:12px; background:#fafcff; margin:8px 0 10px }
.verify-sample .brand{ font-size:18px; margin:0; letter-spacing:0; font-weight:700 }
.verify-sample .sub{ color:#6b7280; font-size:14px }
.verify-sample .amt{ font-weight:700; float:right }

@media (max-width:860px){ .card{ grid-template-columns:1fr } }

/* ====== CHAT (bubble & modal) ====== */
#chatLauncher{
  position:fixed; bottom:20px; right:20px; z-index:9998;
  width:56px; height:56px; border-radius:50%; border:none;
  background:#2e7d32; color:#fff; font-size:26px; cursor:pointer;
  box-shadow:0 6px 18px rgba(46,125,50,.4);
}
#chatModal{
  position:fixed; inset:0; display:none; z-index:9999;
  background:rgba(0,0,0,.35);
  align-items:flex-end; justify-content:flex-end;
}
#chatWindow{
  width:420px; height:50vh;
  background:#fff; border-radius:18px; overflow:hidden;
  margin:20px; box-shadow:0 12px 40px rgba(0,0,0,.22);
  display:flex; flex-direction:column;
}
#chatWindow iframe{
  flex:1 1 auto; width:100%; height:100%;
  border:0; display:block;
}
@media (max-width:600px){
  #chatModal{ align-items:flex-end; justify-content:center; }
  #chatWindow{
    width:100vw; height:50vh;
    border-radius:16px 16px 0 0; margin:0;
  }
}