/* =========================================================
   Wallet Modal — styles
   Reuses the same tokens/shell conventions as auth-modals.css
   (.modal-overlay, .form-group, .form-error, .btn-auth-submit,
   .input-wrap, .form-success-general are defined there — this
   file only adds what's specific to the wallet UI).
   ========================================================= */

/* ── Modal shell ─────────────────────────────────────────── */
.wallet-modal {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    /* overflow is clipped here (not on the scrolling element itself) so the
       rounded corners actually mask the scrollbar instead of letting it
       overhang the edge on mobile. */
    overflow: hidden;
    background: rgba(42, 27, 61, 0.98);
    border: 1px solid rgba(233, 30, 254, 0.15);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.94) translateY(10px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.modal-overlay.visible .wallet-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.theme-dark .wallet-modal { background: rgba(26, 26, 26, 0.98); }

/* Actual scrolling happens on this inner wrapper, inset from the rounded
   outer edge, so the scrollbar thumb never sticks out past the corners. */
.wallet-modal-scroll {
    max-height: 90vh;
    overflow-y: auto;
}
.wallet-modal-scroll::-webkit-scrollbar       { width: 6px; }
.wallet-modal-scroll::-webkit-scrollbar-track { background: transparent; }
.wallet-modal-scroll::-webkit-scrollbar-thumb { background: rgba(233, 30, 254, 0.3); border-radius: 3px; }

/* ── Header ("Box" title + close) ────────────────────────── */
.wallet-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 0;
}
.wallet-modal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.wallet-modal-header .modal-close { position: static; }

/* ── Tabs (underline style, distinct from auth pill-tabs) ── */
.wallet-tabs {
    display: flex;
    gap: 24px;
    margin: 16px 20px 0;
    padding-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    scrollbar-width: none;
}
.wallet-tabs::-webkit-scrollbar { display: none; }

.wallet-tab {
    position: relative;
    flex-shrink: 0;
    padding: 0 2px 14px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.25s;
}
.wallet-tab::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, #E91EFE 0%, #C01EFE 100%);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform 0.25s ease;
}
.wallet-tab.active         { color: var(--text-primary); }
.wallet-tab.active::after  { transform: scaleX(1); }
.wallet-tab:hover:not(.active) { color: var(--text-primary); }

/* ── Body / panels ───────────────────────────────────────── */
.wallet-body { padding: 20px 20px 24px; }

.wallet-panel {
    display: none;
    flex-direction: column;
    animation: walletPanelIn 0.25s ease;
}
.wallet-panel.active { display: flex; }

@keyframes walletPanelIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wallet-section-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.wallet-hint {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
		text-align: center;
}
.wallet-hint-center { text-align: center; margin-top: 12px; }
.wallet-optional { font-weight: 400; color: var(--text-muted); }

/* ── Currency grid (deposit step 1) ──────────────────────── */
.wallet-currency-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.wallet-currency-grid[hidden],
.wallet-deposit-detail[hidden] {
    display: none;
}
.wallet-currency-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s;
}
.wallet-currency-card:hover,
.wallet-currency-card:focus-visible {
    border-color: var(--accent);
    background: rgba(233, 30, 254, 0.06);
    transform: translateY(-2px);
    outline: none;
}
.wallet-currency-card .wallet-coin-icon { width: 40px; height: 40px; font-size: 15px; }
.wallet-currency-card-symbol { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.wallet-currency-card-name   { font-size: 11px; color: var(--text-secondary); }

/* ── Coin icon (shared monogram badge) ───────────────────── */
.wallet-coin-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--icon-color, #888);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}
.wallet-connect-icon {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--icon-color, #888);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    margin-left: -6px;
    border: 2px solid rgba(42, 27, 61, 1);
}
.wallet-connect-icons { display: flex; align-items: center; }

/* ── Back link ────────────────────────────────────────────── */
.wallet-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none; border: none;
    color: var(--text-secondary);
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin-bottom: 18px;
    transition: color 0.25s;
}
.wallet-back-link:hover { color: var(--text-primary); }
.wallet-back-link svg { width: 16px; height: 16px; }

/* ── Currency row (selector button used in several panels) ── */
.wallet-currency-row {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.25s;
    margin-bottom: 20px;
}
.wallet-currency-row:hover { border-color: rgba(233, 30, 254, 0.35); }
.wallet-currency-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.wallet-currency-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.wallet-currency-ticker { font-size: 12px; color: var(--text-muted); }
.wallet-currency-value { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.chevron-down { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }

/* ── Inline currency dropdown (search + list) ────────────── */
.wallet-currency-dropdown {
    margin: -12px 0 20px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}
.wallet-currency-search {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
}
.wallet-currency-search:focus {
    outline: none;
    border-color: var(--accent);
}
.wallet-currency-list {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(233, 30, 254, 0.3) transparent;
}
.wallet-currency-list::-webkit-scrollbar       { width: 6px; }
.wallet-currency-list::-webkit-scrollbar-track { background: transparent; }
.wallet-currency-list::-webkit-scrollbar-thumb { background: rgba(233, 30, 254, 0.3); border-radius: 3px; }
.wallet-currency-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}
.wallet-currency-option:hover,
.wallet-currency-option.selected { background: rgba(233, 30, 254, 0.08); }
.wallet-currency-option .wallet-coin-icon { width: 26px; height: 26px; font-size: 11px; }
.wallet-no-results { padding: 14px 8px; text-align: center; font-size: 13px; color: var(--text-muted); }

/* ── Network toggle (TRC-20 / ERC-20 style pills) ────────── */
.wallet-network-toggle {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.wallet-network-pill {
    flex: 1;
    min-width: 130px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    text-align: center;
}
.wallet-network-pill span { font-weight: 500; color: var(--text-muted); margin-left: 4px; }
.wallet-network-pill.active {
    border-color: var(--accent);
    color: var(--text-primary);
    background: rgba(233, 30, 254, 0.08);
}

/* ── Address / QR box ────────────────────────────────────── */
.wallet-address-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin-bottom: 12px;
}
.wallet-qr {
    flex-shrink: 0;
    width: 88px; height: 88px;
    border-radius: 6px;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    padding: 6px;
    gap: 2px;
    overflow: hidden; /* clip anything (a real QR img/canvas/svg) that exceeds the box */
}
.wallet-qr-cell { background: #17101f; border-radius: 1px; }
/* When a real QR code (img/canvas/svg) is injected in place of the
   placeholder cells, it should fill the box exactly rather than render at
   its own intrinsic size and spill out over the rest of the address card. */
.wallet-qr img,
.wallet-qr canvas,
.wallet-qr svg {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 0;
}
.wallet-address-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wallet-address-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.wallet-address-value {
    font-size: 13px;
    color: var(--text-primary);
    word-break: break-all;
    font-family: 'SFMono-Regular', Consolas, monospace;
}

/* ── Buttons specific to wallet ───────────────────────────── */
.wallet-btn-secondary {
    width: 100%;
    padding: 13px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
}
.wallet-btn-secondary:hover { border-color: var(--accent); background: rgba(233, 30, 254, 0.06); }
.wallet-btn-secondary.copied { border-color: #2ED573; color: #2ED573; }

.wallet-divider {
    position: relative;
    text-align: center;
    margin: 4px 0 20px;
}
.wallet-divider::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 50%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}
.wallet-divider span {
    position: relative;
    padding: 0 12px;
    background: rgba(42, 27, 61, 1);
    font-size: 12px;
    color: var(--text-muted);
}

.wallet-connect-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: border-color 0.25s;
}
.wallet-connect-row:hover { border-color: var(--accent); }

.wallet-help-link {
    display: block;
    width: 100%;
    text-align: center;
    background: none; border: none;
    color: var(--accent);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.wallet-help-link:hover { text-decoration: underline; }

/* ── Amount input with $ prefix / suffix ──────────────────── */
.wallet-amount-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s;
}
/* Wallet-modal text inputs never carry a leading icon (unlike the auth
   modals, where .input-wrap reserves 42px for one) — reset that padding
   so text aligns with the rest of the wallet fields. */
.wallet-panel .input-wrap input,
.wallet-panel .input-wrap select {
    padding-left: 16px;
}
.wallet-amount-wrap:focus-within {
    border-color: var(--accent);
    background: rgba(233, 30, 254, 0.05);
    box-shadow: 0 0 0 3px rgba(233, 30, 254, 0.1);
}
.wallet-amount-prefix { padding-left: 16px; color: var(--text-muted); font-size: 14px; font-weight: 600; }
.wallet-amount-suffix { padding-right: 14px; color: var(--text-muted); font-size: 13px; font-weight: 700; }
.wallet-amount-wrap input {
    flex: 1; min-width: 0;
    padding: 13px 10px;
    background: none; border: none;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
}
.wallet-amount-wrap input:focus { outline: none; }
.wallet-amount-wrap input::placeholder { color: var(--text-muted); }
.wallet-max-btn {
    margin-right: 8px;
    padding: 5px 10px;
    background: rgba(233, 30, 254, 0.12);
    border: none;
    border-radius: 6px;
    color: var(--accent);
    font-size: 11px; font-weight: 700;
    cursor: pointer;
    transition: background 0.25s;
}
.wallet-max-btn:hover { background: rgba(233, 30, 254, 0.22); }

.form-group.has-error .wallet-amount-wrap { border-color: #FF4D6D; background: rgba(255, 77, 109, 0.05); }

/* ── Fee row ──────────────────────────────────────────────── */
.wallet-fee-row {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin: 4px 0 16px;
}

/* ── Textarea (tip message) ──────────────────────────────── */
.wallet-textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 64px;
    transition: all 0.3s;
}
.wallet-textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(233, 30, 254, 0.05);
    box-shadow: 0 0 0 3px rgba(233, 30, 254, 0.1);
}

/* ── Swap icon between "You Pay" / "You Get" (Buy Crypto) ─── */
.wallet-swap-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 4px 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
}
.wallet-swap-icon:hover { color: var(--text-primary); }
.wallet-swap-icon svg { width: 20px; height: 20px; }

/* ── Submit button reuses .btn-auth-submit; small tweak ──── */
.wallet-submit-btn { margin-top: 4px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 480px) {
    .wallet-modal { max-width: 100%; border-radius: 16px; }
    .wallet-tabs  { margin: 14px 16px 0; gap: 18px; }
    .wallet-body  { padding: 16px 16px 20px; }
    .wallet-currency-grid { gap: 8px; }
    .wallet-currency-card { padding: 16px 4px; }
    .wallet-address-box { flex-direction: row; padding: 12px; }
}