/* ==========================================================================
   Deposit flow (asset -> network & amount -> send -> confirm).
   Loaded only on deposit pages, on top of cw.css tokens.
   ========================================================================== */

.cwf { --cwf-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; max-width: 1040px; }
.cwf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 991px) { .cwf-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Stepper ---------- */
.cwf-steps { display: flex; align-items: center; gap: 0; margin: 4px 0 22px; padding: 0; list-style: none; }
.cwf-steps li { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--slate-2); font-size: 14px; font-weight: 500; }
.cwf-steps li:last-child { flex: 0 0 auto; }
.cwf-steps li::after { content: ""; flex: 1; height: 2px; margin: 0 12px; border-radius: 2px; background: var(--line); }
.cwf-steps li:last-child::after { display: none; }
.cwf-steps__n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 13px; font-weight: 600; background: #fff; border: 1.5px solid var(--line-2); color: var(--slate); transition: all .25s; }
.cwf-steps__t { white-space: nowrap; }
.cwf-steps li.is-done { color: var(--ink); }
.cwf-steps li.is-done .cwf-steps__n { background: var(--ink); border-color: var(--ink); color: #fff; font-size: 0; }
.cwf-steps li.is-done .cwf-steps__n::before { content: "\f00c"; font-family: 'Line Awesome Free'; font-weight: 900; font-size: 14px; }
.cwf-steps li.is-done::after { background: var(--ink); }
.cwf-steps li.is-current { color: var(--ink); font-weight: 600; }
.cwf-steps li.is-current .cwf-steps__n { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 4px rgba(255, 91, 20, .16); }
@media (max-width: 575px) {
    .cwf-steps li { gap: 6px; font-size: 12px; }
    .cwf-steps li::after { margin: 0 6px; }
    .cwf-steps__t { display: none; }
    .cwf-steps li.is-current .cwf-steps__t { display: inline; }
}

/* ---------- Widget card ---------- */
.cwf-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 24px 48px -32px rgba(16, 24, 40, .25); overflow: hidden; }
.cwf-card__h { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.cwf-card__h h2 { font-size: 19px; letter-spacing: -.02em; margin: 0; flex: 1; }
.cwf-card__h p { margin: 2px 0 0; font-size: 14px; color: var(--slate); }
.cwf-card__b { padding: 24px; }
.cwf-card__f { padding: 20px 24px 24px; border-top: 1px solid var(--line); background: #fcfcfd; }
@media (max-width: 575px) { .cwf-card { border-radius: 20px; } .cwf-card__h, .cwf-card__b { padding: 18px; } .cwf-card__f { padding: 16px 18px 18px; } }
.cwf-back { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; font-size: 18px; color: var(--ink); cursor: pointer; flex-shrink: 0; }
.cwf-back:hover { background: var(--mist); }

/* Step panels: with JS only the current one shows; without JS everything stays visible */
.cw-js .cwf-panel:not(.is-active) { display: none; }
.cw-js .cwf-panel.is-active { animation: cwf-in .32s cubic-bezier(.2, .7, .2, 1); }
@keyframes cwf-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Step 1: assets ---------- */
.cwf-search { position: relative; margin-bottom: 16px; }
.cwf-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--slate-2); }
.cwf-search input { width: 100%; height: 46px; padding: 0 14px 0 42px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--mist); font: 400 15px var(--font); color: var(--ink); }
.cwf-search input:focus { outline: 0; background: #fff; border-color: var(--ember); box-shadow: var(--ring); }
.cwf-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 575px) { .cwf-assets { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.cwf-asset { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; font: inherit; color: var(--ink); }
.cwf-asset:hover { border-color: var(--ink); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.cwf-asset:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.cwf-asset__t { flex: 1; min-width: 0; }
.cwf-asset__t b { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.cwf-asset__t span { display: block; font-size: 13.5px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cwf-asset__go { color: var(--slate-2); font-size: 18px; }
.cwf-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--ember-soft); color: #c2410c; }

/* Coin icon with an optional network badge */
.cwf-coin { position: relative; width: 42px; height: 42px; flex-shrink: 0; }
.cwf-coin img:not(.cwf-coin__net), .cwf-coin__txt { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--mist); font-size: 12.5px; font-weight: 700; color: #fff; }
.cwf-coin__net { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; background: #fff; object-fit: cover; }
.cwf-coin--lg, .cwf-coin--lg img:not(.cwf-coin__net), .cwf-coin--lg .cwf-coin__txt { width: 56px; height: 56px; }
.cwf-coin--lg .cwf-coin__net { width: 24px; height: 24px; }

/* ---------- Step 2: network + amount ---------- */
.cwf-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 600; margin: 0 0 10px; color: var(--ink); }
.cwf-label small { font-weight: 400; color: var(--slate); font-size: 13px; }
.cwf-nets { display: grid; gap: 8px; margin-bottom: 24px; }
.cwf-net { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; margin: 0; transition: border-color .15s, box-shadow .15s; }
.cwf-net input { position: absolute; opacity: 0; pointer-events: none; }
.cwf-net img, .cwf-net .cwf-coin__txt { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; font-size: 10px; }
.cwf-net__t { flex: 1; min-width: 0; }
.cwf-net__t b { display: block; font-size: 15px; font-weight: 600; }
.cwf-net__t span { font-size: 13px; color: var(--slate); }
.cwf-net__std { font: 600 12px var(--cwf-mono); padding: 3px 8px; border-radius: 8px; background: var(--mist); color: var(--ink-2); }
.cwf-net__tick { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: 13px; color: transparent; flex-shrink: 0; }
.cwf-net:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.cwf-net:has(input:checked) .cwf-net__tick { background: var(--ink); border-color: var(--ink); color: #fff; }
.cwf-net:has(input:focus-visible) { outline: 2px solid var(--ember); outline-offset: 2px; }
.cw-js .cwf-netgroup:not(.is-active) { display: none; }
.cwf-netgroup__h { font-size: 13px; color: var(--slate); margin: 4px 0 8px; }
.cw-js .cwf-netgroup__h { display: none; }

.cwf-amount { display: flex; align-items: center; gap: 6px; padding: 10px 18px; border: 1px solid var(--line-2); border-radius: 18px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.cwf-amount:focus-within { border-color: var(--ember); box-shadow: var(--ring); }
.cwf-amount__sym { font-size: 30px; font-weight: 600; color: var(--slate-2); }
.cwf-amount input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 650 40px/1.1 var(--font); letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; padding: 4px 0; }
.cwf-amount input::placeholder { color: var(--line-2); }
.cwf-amount input:focus-visible { outline: none; }
.cwf-amount__cur { font-size: 14px; font-weight: 600; color: var(--slate); padding: 6px 10px; border-radius: 10px; background: var(--mist); }
@media (max-width: 575px) { .cwf-amount input { font-size: 32px; } .cwf-amount__sym { font-size: 24px; } }
.cwf-hint { font-size: 13px; color: var(--slate); margin: 8px 2px 0; min-height: 18px; }
.cwf-hint.is-bad { color: var(--bad); }
.cwf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 24px; }
.cwf-chips button { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 600 14px var(--font); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.cwf-chips button:hover, .cwf-chips button.is-on { border-color: var(--ink); background: var(--ink); color: #fff; }

.cwf-sum { display: grid; gap: 0; padding: 4px 16px; border-radius: 16px; background: var(--mist); }
.cwf-sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 14.5px; border-top: 1px solid var(--line); }
.cwf-sum > div:first-child { border-top: 0; }
.cwf-sum span { color: var(--slate); }
.cwf-sum b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.cwf-sum .is-total span, .cwf-sum .is-total b { color: var(--ink); font-size: 16px; font-weight: 650; }
.cwf-sum .is-credit b { color: var(--ok); }
.cwf-note { display: flex; gap: 10px; padding: 12px 14px; margin-top: 16px; border-radius: 14px; background: var(--warn-soft); color: #7a3a07; font-size: 13.5px; line-height: 1.5; }
.cwf-note i { font-size: 18px; margin-top: 1px; }
.cwf-note--info { background: var(--info-soft); color: #1730a8; }

/* Aside summary (desktop) */
.cwf-aside { position: sticky; top: 84px; display: grid; gap: 14px; }
.cwf-aside .cwf-card__b { padding: 20px; }
@media (max-width: 991px) { .cwf-aside { position: static; } .cwf-aside:not(.cwf-aside--keep) { display: none; } }
.cwf-aside h3 { font-size: 15px; margin: 0 0 12px; }
.cwf-trust { display: grid; gap: 12px; font-size: 13.5px; color: var(--slate); }
.cwf-trust div { display: flex; gap: 10px; }
.cwf-trust i { font-size: 18px; color: var(--ink); }

/* ---------- Step 3: send ---------- */
.cwf-pay__head { display: flex; align-items: center; gap: 16px; }
.cwf-pay__head h2 { font-size: 21px; margin: 0; letter-spacing: -.025em; }
.cwf-chain { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 10px 3px 6px; border-radius: 999px; background: var(--mist); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.cwf-chain::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cwf-c, var(--ok)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cwf-c, var(--ok)) 22%, transparent); }
.cwf-send { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 767px) { .cwf-send { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

/* The one bold element: QR on a slowly turning glow */
.cwf-qr { position: relative; width: 220px; max-width: 100%; aspect-ratio: 1; margin: 0 auto; border-radius: 22px; padding: 3px; background: conic-gradient(from var(--cwf-a, 0deg), var(--cwf-c, #26a17b), #ff5b14, #2347f5, var(--cwf-c, #26a17b)); animation: cwf-spin 8s linear infinite; }
@property --cwf-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes cwf-spin { to { --cwf-a: 360deg; } }
.cwf-qr__in { position: relative; width: 100%; height: 100%; border-radius: 19px; background: #fff; display: grid; place-items: center; padding: 14px; }
.cwf-qr__in canvas, .cwf-qr__in > img:not(.cwf-qr__logo) { width: 100% !important; height: 100% !important; display: block; }
.cwf-qr__logo { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; padding: 3px; box-shadow: 0 0 0 4px #fff; object-fit: cover; z-index: 2; }
.cwf-qr__cap { text-align: center; font-size: 13px; color: var(--slate); margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .cwf-qr { animation: none; } }

.cwf-field { margin-bottom: 18px; }
.cwf-field > label, .cwf-field > .cwf-field__l { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; font-weight: 500; color: var(--slate); margin-bottom: 8px; }
.cwf-big { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--ink); color: #fff; }
.cwf-big b { flex: 1; min-width: 0; font-size: 28px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cwf-big small { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .65); margin-left: 4px; letter-spacing: 0; }
.cwf-big .cw-copy { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); color: #fff; }
.cwf-big .cw-copy:hover { border-color: #fff; }
.cwf-addr { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--mist); }
.cwf-addr code { flex: 1; min-width: 0; font: 600 15px/1.45 var(--cwf-mono); color: var(--ink); word-break: break-all; background: none; padding: 0; }
.cwf-addr code .hl { color: var(--ember); }
.cwf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.cwf-list li { display: flex; gap: 12px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.cwf-list li::before { counter-increment: s; content: counter(s); width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--mist); font-size: 12px; font-weight: 700; color: var(--ink); }
.cwf-instr { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; }
.cwf-instr summary { cursor: pointer; padding: 12px 14px; font-size: 14px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.cwf-instr summary::-webkit-details-marker { display: none; }
.cwf-instr summary::after { content: "+"; margin-left: auto; font-size: 18px; color: var(--slate); }
.cwf-instr[open] summary::after { content: "–"; }
.cwf-instr__b { padding: 0 14px 14px; font-size: 14px; color: var(--slate); overflow-wrap: anywhere; }
.cwf-instr__b * { color: inherit !important; background: transparent !important; font-size: inherit !important; }

/* Proof upload */
.cwf-drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; border: 1.5px dashed var(--line-2); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.cwf-drop:hover, .cwf-drop.is-over { border-color: var(--ink); background: var(--mist); }
.cwf-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cwf-drop__ic { width: 46px; height: 46px; border-radius: 14px; background: var(--mist); display: grid; place-items: center; font-size: 24px; color: var(--ink); flex-shrink: 0; overflow: hidden; }
.cwf-drop__ic img { width: 100%; height: 100%; object-fit: cover; }
.cwf-drop__t { min-width: 0; }
.cwf-drop__t b { display: block; font-size: 15px; font-weight: 600; }
.cwf-drop__t span { font-size: 13px; color: var(--slate); word-break: break-all; }
.cwf-drop.has-file { border-style: solid; border-color: var(--ok); background: var(--ok-soft); }
.cwf-drop.has-file .cwf-drop__ic { background: #fff; color: var(--ok); }
.cwf-input { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); font: 500 15px var(--cwf-mono); color: var(--ink); }
.cwf-input:focus { outline: 0; border-color: var(--ember); box-shadow: var(--ring); }

/* ---------- Step 4: status ---------- */
.cwf-status { text-align: center; padding: 8px 0 4px; }
.cwf-status__ic { position: relative; width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; font-size: 36px; background: var(--warn-soft); color: var(--warn); }
.cwf-status__ic::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid currentColor; opacity: .25; animation: cwf-ping 2s ease-out infinite; }
.cwf-status--ok .cwf-status__ic { background: var(--ok-soft); color: var(--ok); }
.cwf-status--bad .cwf-status__ic { background: var(--bad-soft); color: var(--bad); }
.cwf-status--ok .cwf-status__ic::after, .cwf-status--bad .cwf-status__ic::after { animation: none; opacity: 0; }
@keyframes cwf-ping { 0% { transform: scale(.9); opacity: .4; } 100% { transform: scale(1.25); opacity: 0; } }
.cwf-status h2 { font-size: 24px; letter-spacing: -.03em; margin: 0 0 6px; }
.cwf-status p { color: var(--slate); margin: 0 auto; max-width: 440px; font-size: 15px; }
.cwf-tl { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; text-align: left; }
.cwf-tl li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding-bottom: 20px; }
.cwf-tl li:last-child { padding-bottom: 0; }
.cwf-tl li::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line); }
.cwf-tl li:last-child::before { display: none; }
.cwf-tl__dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; border: 2px solid var(--line-2); background: #fff; color: transparent; position: relative; z-index: 1; }
.cwf-tl li.is-done .cwf-tl__dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.cwf-tl li.is-done::before { background: var(--ok); }
.cwf-tl li.is-now .cwf-tl__dot { border-color: var(--warn); color: var(--warn); }
.cwf-tl li.is-now .cwf-tl__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); animation: cwf-blink 1.2s ease-in-out infinite; }
.cwf-tl li.is-bad .cwf-tl__dot { background: var(--bad); border-color: var(--bad); color: #fff; }
@keyframes cwf-blink { 50% { opacity: .25; } }
.cwf-tl b { display: block; font-size: 15px; font-weight: 600; }
.cwf-tl span { font-size: 13.5px; color: var(--slate); }
.cwf-recent { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; margin-bottom: 16px; }
.cwf-recent__t { flex: 1; min-width: 0; }
.cwf-recent__t b { display: block; font-size: 15px; }
.cwf-recent__t span { font-size: 13px; color: var(--slate); }

/* History table bits */
.cwf-hist__gw { display: flex; align-items: center; gap: 10px; }
.cwf-hist__gw .cwf-coin, .cwf-hist__gw .cwf-coin img:not(.cwf-coin__net), .cwf-hist__gw .cwf-coin__txt { width: 34px; height: 34px; }
.cwf-hist__gw .cwf-coin__net { width: 16px; height: 16px; }
.cwf-hist__gw b { display: block; font-weight: 600; }
.cwf-hist__gw small { color: var(--slate); font-family: var(--cwf-mono); font-size: 12px; }
.cwf-detail-btn { height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: 500 13px var(--font); color: var(--ink); cursor: pointer; }
.cwf-detail-btn:hover { border-color: var(--ink); }