/* Customer send and track (module 01): dashboard, send flow, tracking, recipients, rates (sd- prefix). */

/* ---------- dashboard: greeting strip ---------- */
.sd-hello { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 4px; padding: 14px 16px; box-shadow: var(--shadow); }
.sd-hello .av { width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.sd-hello h2 { margin: 0; font-size: 17px; color: var(--text); }
.sd-hello p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.sd-hello .acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.sd-hello .acts .ct-btn { min-height: 40px; padding: 0 16px; font-size: 13px; }
.sd-hello .acts .ct-btn.pri { padding: 0 22px; }

/* KPI cards with a faint ring pattern, like the preview */
.sd-kpi { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 124px; padding: 16px 70px 14px 18px; border-radius: 5px; color: #fff; box-shadow: 0 4px 10px rgba(18, 45, 72, .18); min-width: 0; }
.sd-kpi:hover { color: #fff; }
.sd-kpi::before { content: ""; position: absolute; width: 150px; height: 150px; right: -50px; top: -60px; border-radius: 50%; border: 18px solid rgba(255, 255, 255, .1); }
.sd-kpi small { font-size: 13px; font-weight: 700; }
.sd-kpi strong { font-size: 26px; font-weight: 700; margin-top: 8px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em; }
.sd-kpi em { font-style: normal; font-size: 12px; margin-top: auto; padding-top: 10px; opacity: .95; }
.sd-kpi .ico { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 32px; opacity: .9; }
.sd-k1 { background: linear-gradient(135deg, #3a95f2, #1f74dc); }
.sd-k2 { background: linear-gradient(135deg, #22c1a0, #10a283); }
.sd-k3 { background: linear-gradient(135deg, #f8b23a, #ee9612); }
.sd-k4 { background: linear-gradient(135deg, #5a55d6, #3a33b5); }

/* wallets */
.sd-consol { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: flex-end; background: var(--panel2); border: 1px solid var(--line2); border-radius: 4px; padding: 12px 14px; }
.sd-consol .big small { display: block; font-size: 12px; color: var(--muted); }
.sd-consol .big b { font-size: 24px; }
.sd-consol .fig small { display: block; font-size: 11.5px; color: var(--muted); }
.sd-consol .fig b { font-size: 14px; }
.sd-consol .rates { margin-left: auto; text-align: right; font-size: 12px; color: var(--muted); }
.sd-wallets { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.sd-wallet { border: 1px solid var(--line2); border-top: 3px solid var(--blue); border-radius: 4px; padding: 12px; background: #fff; min-width: 0; }
.sd-wallet:nth-child(2) { border-top-color: #13b985; } .sd-wallet:nth-child(3) { border-top-color: #7553d6; } .sd-wallet:nth-child(4) { border-top-color: #f5a524; }
.sd-wallet .hd { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.sd-wallet .hd b { color: var(--text); font-size: 13px; }
.sd-wallet .hd .tot { margin-left: auto; }
.sd-wallet .cur { background: var(--infoBg); color: var(--infoFg); font-weight: 700; font-size: 11px; padding: 2px 6px; border-radius: 3px; }
.sd-wallet .av { font-size: 22px; font-weight: 700; margin: 8px 0; }
.sd-wallet .bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: #e6edf3; margin-bottom: 8px; }
.sd-wallet .bar i { display: block; height: 100%; }
.sd-wallet dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: 12px; }
.sd-wallet dt { color: var(--text2); display: flex; align-items: center; gap: 6px; }
.sd-wallet dt i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.sd-wallet dd { margin: 0; font-weight: 700; text-align: right; }

/* quick send */
.sd-qs-box { border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; background: #fff; }
.sd-qs-box label { display: block; font-size: 12px; color: var(--muted); font-weight: 700; }
.sd-qs-box .row { display: flex; align-items: center; gap: 8px; }
.sd-qs-box input { border: 0; font-size: 24px; font-weight: 700; width: 100%; min-width: 0; padding: 4px 0; color: var(--text); background: transparent; }
.sd-qs-box input:focus { outline: 2px solid #b8d6f7; border-radius: 3px; }
.sd-qs-box .cur { font-weight: 700; background: var(--infoBg); color: var(--infoFg); padding: 4px 8px; border-radius: 3px; font-size: 12px; }
.sd-qs-box.gets { background: #eefaf5; border-color: #b9dfce; }
.sd-qs-box.gets .cur { background: #d5f1e4; color: var(--okFg); }
.sd-lines { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; margin: 10px 2px; font-size: 13px; }
.sd-lines dt { color: var(--text2); } .sd-lines dd { margin: 0; text-align: right; font-weight: 700; }
.sd-lines .tot { border-top: 1px solid var(--line2); padding-top: 6px; font-size: 14px; }
.sd-lock { display: flex; align-items: center; gap: 10px; background: var(--warnBg); border: 1px solid #f0d58f; color: var(--warnFg); border-radius: 4px; padding: 8px 12px; font-size: 13px; font-weight: 700; margin: 8px 0; }
.sd-lock .track { flex: 1; height: 5px; background: rgba(0, 0, 0, .08); border-radius: 3px; overflow: hidden; min-width: 40px; }
.sd-lock .track span { display: block; height: 100%; background: #e9a400; transition: width 1s linear; }
.sd-lock.expired { background: var(--badBg); border-color: #ebbcc5; color: var(--badFg); }
.sd-eta { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; margin: 10px 2px; }
.sd-eta i { color: var(--okFg); font-size: 18px; }
.sd-eta small { display: block; color: var(--muted); }
.sd-cta { width: 100%; min-height: 44px !important; font-size: 14px !important; text-transform: uppercase; letter-spacing: .03em; }

/* recent transfers with step chips */
.sd-tr { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e6edf3; }
.sd-tr:last-child { border-bottom: 0; }
.sd-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; flex: none; position: relative; background: var(--blue); }
.sd-av small { position: absolute; right: -4px; bottom: -3px; background: #fff; color: var(--text2); font-size: 8px; border: 1px solid var(--line); border-radius: 3px; padding: 0 2px; line-height: 1.3; }
.sd-av.c1 { background: #1f74dc; } .sd-av.c2 { background: #c2508f; } .sd-av.c3 { background: #10a283; } .sd-av.c4 { background: #ef6b2a; } .sd-av.c5 { background: #6b45c7; } .sd-av.c6 { background: #d99a06; }
.sd-tr .main { flex: 1; min-width: 0; }
.sd-tr .top { display: flex; gap: 10px; align-items: flex-start; }
.sd-tr .top .who { flex: 1; min-width: 0; }
.sd-tr .top .who b { display: block; font-size: 13.5px; }
.sd-tr .top .who span { font-size: 12px; color: var(--muted); }
.sd-tr .top .amt { text-align: right; font-weight: 700; font-size: 13px; white-space: nowrap; }
.sd-tr .top .amt div { margin-top: 4px; }
.sd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; }
.sd-chip { font-size: 11.5px; font-weight: 700; border-radius: 10px; padding: 2px 8px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; background: #eef2f6; color: #6b7c8f; border: 1px solid #dde5ed; }
.sd-chip.done { background: var(--okBg); color: var(--okFg); border-color: #c6e9d8; }
.sd-chip.now { background: var(--infoBg); color: var(--infoFg); border-color: #c2d9f5; }
.sd-chip.wait { background: var(--warnBg); color: var(--warnFg); border-color: #f0d58f; }
.sd-chip.bad { background: var(--badBg); color: var(--badFg); border-color: #ebbcc5; }
.sd-chip.off { opacity: .55; }
.sd-chips .ln { width: 10px; height: 1px; background: #c3d0dc; }

/* saved recipients */
.sd-rc { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #e6edf3; }
.sd-rc:last-child { border-bottom: 0; }
.sd-rc .who { flex: 1; min-width: 0; }
.sd-rc .who b { display: block; font-size: 13px; }
.sd-rc .who span { font-size: 11.5px; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-ratelist { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.sd-ratelist li { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed #e0e7ed; }
.sd-ratelist li:last-child { border-bottom: 0; }
.sd-ratelist li i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex: none; }
.sd-ratelist li b { margin-left: auto; }
.sd-sec { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line2); border-radius: 4px; padding: 9px 10px; margin-bottom: 8px; background: #fff; color: var(--text); }
.sd-sec:hover { border-color: #b8cde0; }
.sd-sec .ic { width: 30px; height: 30px; border-radius: 4px; display: grid; place-items: center; background: var(--okBg); color: var(--okFg); flex: none; }
.sd-sec.no .ic { background: var(--warnBg); color: var(--warnFg); }
.sd-sec .t { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); }
.sd-sec .t b { display: block; color: var(--text); font-size: 13px; }
.sd-sec .v { font-size: 12px; font-weight: 700; color: var(--text2); }
.sd-limit { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.sd-limit .cells { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line2); border-radius: 4px; }
.sd-limit .cells div { padding: 8px 10px; border-bottom: 1px solid var(--line2); }
.sd-limit .cells div:nth-child(odd) { border-right: 1px solid var(--line2); }
.sd-limit .cells div:nth-last-child(-n+2) { border-bottom: 0; }
.sd-limit .cells small { display: block; font-size: 11.5px; color: var(--muted); }
.sd-limit .cells b { font-size: 15px; }

/* ---------- send flow ---------- */
.sd-flow { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
.sd-side { position: sticky; top: 70px; }
.sd-rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.sd-rpick { display: flex; gap: 10px; align-items: center; border: 1px solid #b9c8d6; border-radius: 4px; padding: 10px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: var(--text); width: 100%; }
.sd-rpick:hover, .sd-rpick:focus { border-color: #0a6fd2; box-shadow: inset 0 0 0 1px #0a6fd2; outline: none; }
.sd-rpick .who { min-width: 0; flex: 1; }
.sd-rpick .who b { display: block; font-size: 13px; }
.sd-rpick .who span { display: block; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-rpick[disabled] { opacity: .6; cursor: not-allowed; }
.sd-toggle { display: inline-flex; border: 1px solid #9fb2c6; border-radius: 4px; overflow: hidden; }
.sd-toggle label { padding: 7px 14px; font-size: 12.5px; font-weight: 700; color: #2f5f88; cursor: pointer; background: #fff; }
.sd-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.sd-toggle label:has(input:checked) { background: #0a6fd2; color: #fff; }
.sd-toggle label:has(input:focus-visible) { outline: 2px solid #0a6fd2; outline-offset: -3px; }
.sd-amount { display: flex; align-items: center; border: 1px solid #9fb2c6; border-radius: 4px; background: #fff; overflow: hidden; }
.sd-amount input { border: 0; font-size: 26px; font-weight: 700; padding: 10px 12px; flex: 1; min-width: 0; color: var(--text); }
.sd-amount input:focus { outline: none; }
.sd-amount:focus-within { border-color: #0a6fd2; box-shadow: 0 0 0 3px #d8ebff; }
.sd-amount .cur { padding: 0 14px; font-weight: 700; color: var(--infoFg); background: var(--infoBg); align-self: stretch; display: flex; align-items: center; }
.sd-quote { border: 1px solid var(--line); border-radius: 4px; background: var(--panel2); padding: 12px; }
.sd-quote.loading { opacity: .6; }
.sd-quote .err { color: var(--badFg); font-size: 13px; }
.sd-gets { font-size: 24px; font-weight: 700; color: var(--okFg); }
.sd-sandbox { font-size: 11.5px; color: var(--warnFg); background: var(--warnBg); border-radius: 3px; padding: 2px 6px; display: inline-block; }
.sd-paybox { display: grid; gap: 8px; }
.sd-paybox .opt { border: 1px solid #b9c8d6; border-radius: 4px; background: #fff; }
.sd-paybox .opt > label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; cursor: pointer; }
.sd-paybox .opt > label input { margin-top: 3px; accent-color: #0a6fd2; }
.sd-paybox .opt > label i.bi { font-size: 18px; color: var(--blue); }
.sd-paybox .opt > label b { display: block; font-size: 13px; }
.sd-paybox .opt > label small { color: var(--muted); }
.sd-paybox .opt > label .right { margin-left: auto; text-align: right; font-size: 12px; }
.sd-paybox .opt:has(> label input:checked) { border-color: #0a6fd2; box-shadow: inset 0 0 0 1px #0a6fd2; background: #f6faff; }
.sd-paybox .more { display: none; padding: 0 12px 12px 40px; }
.sd-paybox .opt:has(> label input:checked) .more { display: block; }
.sd-paybox .opt.off { opacity: .6; }
.sd-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sd-bigline { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line2); }
.sd-bigline b { font-size: 20px; }
.sd-done { text-align: center; padding: 22px 10px 10px; }
.sd-done .tick { width: 64px; height: 64px; border-radius: 50%; background: var(--okBg); color: var(--okFg); display: grid; place-items: center; font-size: 34px; margin: 0 auto 10px; }
.sd-done.wait .tick { background: var(--warnBg); color: var(--warnFg); }
.sd-done h2 { margin: 0 0 4px; font-size: 20px; }
.sd-instr { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; border: 1px dashed #9fb2c6; border-radius: 4px; background: #fbfdff; }
.sd-instr dt, .sd-instr dd { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--line2); }
.sd-instr dt { color: var(--muted); }
.sd-instr dd { font-weight: 700; font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.sd-instr > :nth-last-child(-n+2) { border-bottom: 0; }

/* ---------- tracking ---------- */
.sd-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; }
.sd-track li { position: relative; text-align: center; padding-top: 34px; font-size: 12px; font-weight: 700; color: var(--muted); }
.sd-track li:before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 3px; background: #e0e7ed; }
.sd-track li:first-child:before { left: 50%; } .sd-track li:last-child:before { right: 50%; }
.sd-track li .dot { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: #e0e7ed; display: grid; place-items: center; color: #fff; font-size: 12px; border: 3px solid #fff; box-shadow: 0 0 0 1px #d3dde7; }
.sd-track li.done { color: var(--okFg); } .sd-track li.done .dot { background: #18ae73; } .sd-track li.done:before { background: #18ae73; }
.sd-track li.now { color: var(--infoFg); } .sd-track li.now .dot { background: #0a6fd2; box-shadow: 0 0 0 4px #d8ebff; }
.sd-track li.wait { color: var(--warnFg); } .sd-track li.wait .dot { background: #e9a400; box-shadow: 0 0 0 4px #fff1cc; }
.sd-track li.bad { color: var(--badFg); } .sd-track li.bad .dot { background: #df4152; }
.sd-track li.off { opacity: .5; }
.sd-track li small { display: block; font-weight: 400; color: var(--muted); margin-top: 2px; }
.sd-headline { font-size: 14px; font-weight: 700; margin: 14px 0 0; padding: 10px 12px; border-radius: 4px; background: var(--infoBg); color: var(--infoFg); }
.sd-headline.ok { background: var(--okBg); color: var(--okFg); } .sd-headline.warn { background: var(--warnBg); color: var(--warnFg); } .sd-headline.bad { background: var(--badBg); color: var(--badFg); }
.sd-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; letter-spacing: .12em; font-weight: 700; }
.sd-receipt { max-width: 760px; margin: 0 auto; background: #fff; }

/* ---------- recipients form ---------- */
.sd-mth { display: none; }
.sd-mth.on { display: block; }
.sd-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.sd-check.ok { color: var(--okFg); } .sd-check.bad { color: var(--badFg); } .sd-check.no { color: var(--muted); }

/* ---------- rates ---------- */
.sd-calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; }

@media (max-width: 1100px) {
    .sd-flow { grid-template-columns: minmax(0, 1fr); }
    .sd-side { position: static; }
}
@media (max-width: 760px) {
    .sd-hello .acts { margin-left: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .sd-hello .acts .ct-btn { width: 100%; }
    .sd-review { grid-template-columns: minmax(0, 1fr); }
    .sd-track li { font-size: 10.5px; padding-top: 30px; }
    .sd-consol .rates { margin-left: 0; text-align: left; }
    .sd-limit { grid-template-columns: 1fr; }
    .sd-tr .top { flex-direction: column; gap: 4px; }
    .sd-tr .top .amt { text-align: left; }
}

/* Wide tables scroll sideways inside their panel on small screens. */
.ct-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

/* Elements the send scripts hide must stay hidden even when a layout rule gives them a display value. */
[data-method-choice][hidden], [data-q-row][hidden], [data-when-expired][hidden], [data-when-live][hidden], [data-person][hidden],
[data-business][hidden], [data-namecheck][hidden], [data-quote-box][hidden], [data-q-error][hidden] { display: none !important; }