/* xbuy.css — the cross-chain buy ("Pay with …") on the token page. See xbuy.js. */
.xb-box{display:flex;flex-direction:column;gap:8px;margin:8px 10px 0;padding:10px;background:#141418;border:1px solid #252525;border-radius:6px;font-family:var(--sans,Inter,sans-serif)}
.xb-box[hidden]{display:none!important}
.xb-box.on{background:rgba(74,222,74,.05);border-color:#1a5c1a}
.xb-title{font-size:13px;font-weight:600;color:#fff}
.xb-sub{font-size:12px;line-height:1.45;color:#9e9e9e}
.xb-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;background:#0d0d10;border:1px solid #252525;border-radius:6px;cursor:pointer;color:#fff;font:inherit;text-align:left;width:100%;box-sizing:border-box}
.xb-box.on .xb-row{background:none;border:none;padding:0;min-height:36px}
.xb-row:focus-visible{outline:2px solid #4ade4a;outline-offset:2px}
.xb-sw{width:36px;height:20px;border-radius:10px;background:#252525;position:relative;flex-shrink:0}
.xb-sw::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#9e9e9e;transition:left .12s}
.xb-box.on .xb-sw{background:#4ade4a}
.xb-box.on .xb-sw::after{left:18px;background:#000}
.xb-ico{width:16px;height:16px;flex-shrink:0}
.xb-ico-s{width:12px;height:12px;margin-right:6px;vertical-align:middle;display:inline-block}
.xb-lbl{flex:1;font-size:13px;font-weight:600}
.xb-meta{font-family:var(--mono,monospace);font-size:11px;color:#9e9e9e;white-space:nowrap}
.xb-link{align-self:flex-start;background:none;border:none;padding:0;color:#9e9e9e;font-family:var(--mono,monospace);font-size:11px;text-decoration:underline;cursor:pointer}
.xb-link.go{color:#4ade4a}
.xb-est{font-family:var(--mono,monospace);font-size:11px;color:#c0c0c0}
.xb-compact{display:flex;justify-content:flex-end;margin:4px 10px 0}
.xb-compact[hidden]{display:none!important}

.xb-wrap{position:fixed;inset:0;z-index:2147482000;display:flex;align-items:flex-end;justify-content:center}
.xb-wrap[hidden]{display:none!important}
.xb-scrim{position:absolute;inset:0;background:rgba(0,0,0,.66)}
.xb-sheet{position:relative;width:100%;max-width:440px;box-sizing:border-box;background:#0d0d10;border-top:1px solid #252525;border-radius:18px 18px 0 0;padding:10px 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;color:#c0c0c0;font-family:var(--sans,Inter,sans-serif)}
.xb-sheet .pwg-handle{display:flex;justify-content:center;padding:2px 0 4px}
.xb-sheet .pwg-handle span{display:block;width:36px;height:4px;border-radius:2px;background:#252525}
.xb-kicker{font-family:var(--mono,monospace);font-size:10px;letter-spacing:.12em;color:#9e9e9e}
.xb-head{font-family:var(--mono,monospace);font-size:20px;font-weight:800;color:#fff;overflow-wrap:anywhere}
.xb-steps{display:flex;flex-direction:column;background:#141418;border-radius:6px}
.xb-step{display:flex;align-items:center;gap:12px;padding:13px 12px;border-bottom:1px solid rgba(255,255,255,.07)}
.xb-step:last-child{border-bottom:none}
.xb-dot{width:24px;height:24px;border-radius:50%;border:2px solid #252525;box-sizing:border-box;flex-shrink:0}
.xb-step.active .xb-dot{border-color:#252525;border-top-color:#4ade4a;animation:xb-spin .9s linear infinite}
.xb-step.done .xb-dot{background:#4ade4a;border-color:#4ade4a;position:relative}
.xb-step.done .xb-dot::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #000;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.xb-step.fail .xb-dot{background:#ff6b00;border-color:#ff6b00}
.xb-st-t{font-size:14px;font-weight:600;color:#fff}
.xb-st-s{font-family:var(--mono,monospace);font-size:11px;color:#9e9e9e;overflow-wrap:anywhere}
.xb-fees{display:flex;flex-direction:column;gap:6px;font-family:var(--mono,monospace);font-size:12px}
.xb-fees div{display:flex;justify-content:space-between;gap:10px}
.xb-fees span:first-child{color:#9e9e9e}
.xb-fees span:last-child{color:#fff}
.xb-note{padding:10px 12px;border:1px solid #252525;border-radius:6px;font-size:12px;line-height:1.5;color:#c0c0c0}
.xb-note.warn{border-color:#7a3300;background:rgba(255,107,0,.06)}
.xb-btns{display:flex;gap:8px}
.xb-btn{flex:1;height:46px;border:none;border-radius:4px;font-family:var(--sans,Inter,sans-serif);font-weight:700;font-size:13px;letter-spacing:.06em;cursor:pointer}
.xb-btn.go{background:#4ade4a;color:#000}
.xb-btn.ghost{background:transparent;color:#c0c0c0;border:1px solid #252525;font-weight:600;letter-spacing:0}
@keyframes xb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.xb-step.active .xb-dot{animation:none;border-color:#4ade4a}}

/* The pay-with picker: a dropdown under the coin chip (desktop), a bottom sheet list (phones) */
.xb-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;width:280px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:8px;background:#0d0d10;border:1px solid #252525;border-radius:12px;box-shadow:0 18px 40px -12px rgba(0,0,0,.8);display:flex;flex-direction:column;gap:4px;font-family:var(--sans,Inter,sans-serif)}
.xb-menu .xb-kicker{padding:4px 6px 6px}
.xb-opts{display:flex;flex-direction:column;gap:6px}
.xb-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:8px 10px;box-sizing:border-box;background:#141418;border:1px solid transparent;border-radius:10px;color:#fff;font:inherit;text-align:left;cursor:pointer}
.xb-opt:hover,.xb-opt:focus-visible{border-color:#3a3a3a;outline:none}
.xb-opt.on{border-color:#4ade4a;background:rgba(74,222,74,.06)}
.xb-opt.off,.xb-opt[disabled]{opacity:.45;cursor:not-allowed}
.xb-opt-ico{width:24px;height:24px;border-radius:50%;flex-shrink:0}
.xb-opt-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.xb-opt-coin{font-size:14px;font-weight:700}
.xb-opt-sub{font-family:var(--mono,monospace);font-size:10px;color:#9e9e9e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xb-opt.on .xb-opt-sub{color:#4ade4a}
.xb-opt-bal{font-family:var(--mono,monospace);font-size:12px;color:#c0c0c0;white-space:nowrap}