/* CryptoPayr — buyer-facing inline checkout. Dark, brand-aligned, standalone. */
:root {
    --bg:#0b0f1a; --card:#11162a; --ink:#e6edf6; --muted:#94a3b8;
    --line:rgba(255,255,255,.10); --field:#0e1426;
    --brand:#08a05a; --brand-2:#08a05a; --ok:#34d399; --danger:#f87171;
    --radius:18px;
    color-scheme: dark;
}
/* Light theme (default) */
[data-theme="light"] {
    --bg:#eef1f7; --card:#ffffff; --ink:#0f1b2e; --muted:#5b6677;
    --line:rgba(15,23,42,.12); --field:#f4f6fb; color-scheme:light;
}
[data-theme="light"] .cx-card { box-shadow:0 30px 70px -44px rgba(15,23,42,.45); }
[data-theme="light"] .cx-timer span { color:#6d28d9; }
[data-theme="light"] .cx-partial { color:#b45309; }
[data-theme="light"] .cx-partial b { color:#92400e; }
* { box-sizing:border-box; }
html,body { height:100%; }
body.cx {
    margin:0; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    color:var(--ink); background:var(--bg);
    background-image:radial-gradient(1100px 560px at 50% -260px, rgba(8,160,90,.22), transparent 70%);
    min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 18px;
    -webkit-font-smoothing:antialiased;
}
.cx-card {
    width:100%; max-width:430px; background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); box-shadow:0 40px 90px -45px rgba(0,0,0,.7); padding:28px 26px;
}
.cx-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.cx-brand { display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:-.3px; color:var(--brand); }
.cx-brand img { width:24px; height:24px; }
.cx-amount { font-weight:700; font-size:15px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; }
.cx-title { font-size:22px; font-weight:700; margin:0 0 6px; }
.cx-sub { color:var(--muted); margin:0 0 22px; font-size:14px; line-height:1.5; }
.cx-alert { background:rgba(248,113,113,.12); color:#fecaca; border:1px solid rgba(248,113,113,.3);
    padding:11px 14px; border-radius:12px; font-size:13px; margin-bottom:16px; }

/* Form */
.cx-label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin:14px 0 6px; }
.cx-select {
    width:100%; padding:13px 14px; border-radius:12px; border:1px solid var(--line);
    background:var(--field); color:var(--ink); font-size:15px; appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 20px) 20px, calc(100% - 15px) 20px; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.cx-select:focus { outline:none; border-color:var(--brand); }
.cx-btn {
    display:block; width:100%; margin-top:22px; padding:14px; border:0; border-radius:12px; cursor:pointer;
    text-align:center; text-decoration:none;
    font-weight:700; font-size:15px; color:#0b0f1a; background:linear-gradient(135deg,var(--brand),var(--brand-2));
}
.cx-btn:disabled { opacity:.45; cursor:not-allowed; }

/* Pay-by-card alternative */
.cx-sep { display:flex; align-items:center; gap:12px; margin:22px 0 4px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.6px; }
.cx-sep::before, .cx-sep::after { content:""; flex:1; height:1px; background:var(--line); }
.cx-btn-alt { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; color:var(--ink); background:var(--field); border:1px solid var(--line); }
.cx-btn-alt:hover { border-color:var(--brand); }
.cx-payicons { display:inline-flex; align-items:center; gap:5px; }
.cx-payicons svg { height:20px; width:auto; border-radius:4px; display:block; }
.cx-revlogo { height:15px; width:auto; display:block; }
/* PayPal wordmark: brand navy is unreadable on the dark checkout, so dark gets a lighter blue. */
.cx-pplogo { height:16px; width:auto; display:block; }
.cx-pplogo .pp-a { fill:#8fb4ff; } .cx-pplogo .pp-b { fill:#35b6ff; }
[data-theme="light"] .cx-pplogo .pp-a { fill:#003087; } [data-theme="light"] .cx-pplogo .pp-b { fill:#009cde; }
.cx-cashapp { display:inline-flex; align-items:center; gap:6px; font-weight:700; }
.cx-onbrand { display:inline-flex; align-items:center; gap:6px; font-weight:700; }
.cx-brandlogo { width:20px; height:20px; flex:none; }
.cx-simplexlogo { height:17px; width:auto; margin-left:2px; vertical-align:middle; }
.cx-calogo { height:18px; width:18px; display:block; }
.cx-region { font-size:10px; font-weight:800; letter-spacing:.06em; padding:2px 6px; border-radius:6px; border:1px solid var(--line); color:var(--muted); line-height:1.2; }
.cx-bnb { display:inline-flex; align-items:center; gap:6px; font-weight:700; }
.cx-bnblogo { height:17px; width:17px; display:block; }
.cx-cardnote { margin:10px 0 0; text-align:center; font-size:12px; color:var(--muted); line-height:1.5; }

/* Awaiting-payment overlay (shown while the on-ramp completes in a new tab) */
.cx-overlay { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:20px;
    background:rgba(6,9,16,.66); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:cxfade .2s ease; }
.cx-overlay[hidden] { display:none; }
.cx-overlay-box { width:100%; max-width:360px; text-align:center; background:var(--card); border:1px solid var(--line);
    border-radius:18px; padding:34px 26px; box-shadow:0 24px 60px -20px rgba(0,0,0,.6); }
.cx-overlay-title { margin:20px 0 8px; font-size:19px; }
.cx-overlay-sub { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.cx-overlay-note { margin:14px 0 0; font-size:12px; color:var(--muted); opacity:.85; line-height:1.5; }
.cx-overlay-link { display:inline-block; margin-top:16px; color:var(--muted); font-size:13px; text-decoration:underline; }
.cx-overlay-link:hover { color:var(--ink); }
.cx-loader { width:46px; height:46px; margin:0 auto; border-radius:50%;
    border:3px solid var(--line); border-top-color:var(--brand); animation:cxspin .9s linear infinite; }
@keyframes cxspin { to { transform:rotate(360deg); } }
@keyframes cxfade { from { opacity:0; } to { opacity:1; } }

/* Methods list */
.cx-methods { display:flex; flex-direction:column; gap:10px; }
.cx-method {
    display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 10px;
    padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--field);
    text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s;
}
.cx-method:hover { border-color:var(--brand); transform:translateY(-1px); }
.cx-method-name { font-weight:600; }
.cx-method-alt { grid-column:1; font-size:13px; color:var(--muted); }
.cx-method-go { grid-row:1 / span 2; font-size:20px; color:var(--brand-2); }

/* Coin grid (hosted selector) */
.cx-coingrid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:6px; }
.cx-coin { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; cursor:pointer;
    border:1px solid var(--line); border-radius:14px; background:var(--field); color:var(--ink); transition:border-color .15s, transform .15s; }
.cx-coin:hover { border-color:var(--brand); transform:translateY(-2px); }
.cx-coin.sel { border-color:var(--brand); box-shadow:0 0 0 2px rgba(8,160,90,.35) inset; }
.cx-coin img { width:34px; height:34px; }
.cx-coin-mono { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:800;
    color:#0b0f1a; background:linear-gradient(135deg,var(--brand),var(--brand-2)); }
.cx-coin-name { font-size:13px; font-weight:600; }
.cx-coin-ticker { font-size:11px; color:var(--muted); }
.cx-netwrap { margin-top:18px; }
.cx-nets { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.cx-net { padding:9px 14px; border-radius:999px; cursor:pointer; font-size:13px; font-weight:600;
    border:1px solid var(--line); background:var(--field); color:var(--ink); transition:border-color .15s; }
.cx-net:hover { border-color:var(--brand); }
.cx-net.sel { border-color:var(--brand); background:rgba(8,160,90,.16); color:var(--brand); }

/* Settled / closed state */
.cx-state { text-align:center; padding:14px 0 4px; }
.cx-state-icon { width:64px; height:64px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center; font-size:30px; font-weight:800; }
.cx-state-icon.ok { color:var(--ok); background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.4); }
.cx-state-icon.warn { color:#fca5a5; background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.4); }

/* Deposit page */
.cx-timer { text-align:center; font-size:13px; color:var(--muted); margin-bottom:14px; }
.cx-timer span { font-weight:700; color:var(--brand-2); font-variant-numeric:tabular-nums; }
.cx-partial { margin-top:14px; padding:12px 14px; border-radius:12px; font-size:13px; line-height:1.5;
    background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.35); color:#fcd34d; }
.cx-partial b { color:#fde68a; }
.cx-partial-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.cx-partial-title { font-weight:700; }
.cx-partial-pct { font-weight:800; font-variant-numeric:tabular-nums; }
.cx-partial-text { margin:0; }
.cx-progress { height:8px; border-radius:999px; overflow:hidden; margin-bottom:9px;
    background:rgba(245,158,11,.18); }
.cx-progress-bar { height:100%; border-radius:999px; width:0; transition:width .5s ease;
    background:linear-gradient(90deg,#f59e0b,#fbbf24); }
[data-theme="light"] .cx-partial-title, [data-theme="light"] .cx-partial-pct { color:#92400e; }
[data-theme="light"] .cx-progress { background:rgba(245,158,11,.2); }
.cx-receipt-msg { margin-top:14px; text-align:center; font-size:13px; color:var(--muted); }
.cx-receipt-msg.ok { color:var(--ok); }
.cx-recheck-msg { margin-top:10px; text-align:center; font-size:13px; color:var(--muted); }
.cx-recheck-msg.ok { color:var(--ok); }
.cx-recheck-msg.warn { color:#f59e0b; font-weight:600; }
.cx-qr { width:196px; height:196px; margin:6px auto 22px; padding:10px; background:#fff; border-radius:14px; }
.cx-qr img, .cx-qr canvas { display:block; }
.cx-field { margin-bottom:14px; }
.cx-field-label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:6px; }
.cx-copy { display:flex; align-items:center; gap:8px; background:var(--field); border:1px solid var(--line); border-radius:12px; padding:11px 12px; }
.cx-copy code { flex:1; font-size:13px; word-break:break-all; font-family:'SFMono-Regular',ui-monospace,Menlo,monospace; }
.cx-copybtn { border:0; background:rgba(8,160,90,.18); color:var(--brand); font-weight:600; font-size:12px;
    padding:7px 12px; border-radius:9px; cursor:pointer; white-space:nowrap; }
.cx-status { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px;
    padding:13px; border-radius:12px; background:var(--field); border:1px solid var(--line); color:var(--muted); font-size:14px; }
.cx-status.is-ok { color:var(--ok); border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.1); }
.cx-ok { color:var(--ok); font-size:18px; }
.cx-spinner { width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--brand); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.cx-foot { margin-top:22px; text-align:center; font-size:12px; color:var(--muted); line-height:1.7; }
.cx-foot a { color:var(--muted); text-decoration:underline; }
.cx-foot a:hover { color:var(--brand); }

/* QR (vendored qrcode-generator → inline SVG) */
.cx-qr { width:204px; height:204px; margin:8px auto 22px; padding:12px; background:#fff; border-radius:16px; box-shadow:0 8px 24px -12px rgba(0,0,0,.5); }
.cx-qr svg { display:block; width:100%; height:100%; }

/* "Connect Wallet & Pay" (EVM inline wallet payment) */
#cpwc[hidden] { display:none; }
.cx-wc-btn { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; }
.cx-wc-ico { flex:0 0 auto; }
.cx-wc-alt { display:block; width:100%; margin-top:10px; padding:6px; background:none; border:0; cursor:pointer;
    color:var(--muted); font-size:13px; text-decoration:underline; }
.cx-wc-alt[hidden] { display:none; }   /* the `hidden` attr must beat display:block */
.cx-wc-alt:hover { color:var(--brand); }
.cx-wc-msg { margin:12px 0 0; text-align:center; font-size:13px; line-height:1.5; color:var(--muted); }
.cx-wc-msg[hidden] { display:none; }
.cx-wc-msg.ok { color:var(--ok); }
.cx-wc-msg.warn { color:var(--danger); }
.cx-wc-msg a { color:inherit; text-decoration:underline; }

/* Currency dropdown with coin icon on the left */
.cx-selrow { display:flex; align-items:center; gap:10px; }
.cx-selicon { flex:0 0 auto; width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
    background:var(--field); border:1px solid var(--line); overflow:hidden; }
.cx-selicon:empty { display:none; }
.cx-selicon img { width:30px; height:30px; }
.cx-selmono { font-weight:800; color:var(--brand); font-size:18px; }
.cx-select-icon { flex:1; min-width:0; }