.token {
    position: relative;
    display: inline-block;
    cursor: help;
    color: rgba(var(--terUser), 1);

    .token-tooltip {
        position: absolute;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
    }

    &:hover .token-tooltip {
        display: block; // legacy fallback; .tt is JS-portal-only (no CSS hover)
    }
}

.token--empty {
    cursor: help;

    > i { opacity: 0.4; }
}

// Aperture foundation lives universally in _base.scss; nothing
// wallet-specific to override.

.wallet-page {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.wallet-tokens {
    display: flex;
    flex-direction: column;
    overflow: visible;

    .token-row {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        overflow: visible;
    }

    .token {
        font-size: 1.5rem;
    }

    .token:hover .token-tooltip { display: none; }
}

#id_payment_methods {
    overflow-y: auto;
}

@media (max-width: 768px) {
    .token .token-tooltip {
        width: 13rem;
        max-width: 90vw;
        left: 0;
        transform: none;
    }

    .wallet-tokens .token-tooltip {
        left: 50%;
        transform: translateX(-50%);
    }
}


// ── Wallet Shop applet ───────────────────────────────────────────────────────
// Mimics `.wallet-tokens` (horizontal row of tooltipped icons) but each tile
// carries an admin-defined catalog item + an optional `.shop-badge` (eg "×5"
// for the bundle) + a BUY-ITEM microbutton hosted in the tooltip portal.
// JS wiring lives in `apps/dashboard/static/apps/dashboard/wallet-shop.js`.

.wallet-shop {
    display: flex;
    flex-direction: column;
    overflow: visible;

    .shop-grid {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        gap: 1rem;
        overflow: visible;
    }
}

.shop-tile {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: rgba(var(--terUser), 1);
    cursor: help;
}

// ×5 badge — top-right corner, --quaUser glyph on --quiUser bg, 2rem circle.
// Per-locked spec from [[project-wallet-shop-expansion]].
.shop-badge {
    position: absolute;
    top: -0.5rem;
    right: -0.75rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(var(--quiUser), 1);
    color: rgba(var(--quaUser), 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    pointer-events: none;
}

// Microtooltip — the buy-btn lives inside the main tooltip portal, styled
// like Game Kit's `#id_mini_tooltip_portal` (Equipped/Unequipped/In-Use).
// Hover persistence (cursor moves from tile → portal → microbutton without
// dismissing the tooltip) is handled by `wallet-shop.js`.
.tt-microbutton-portal {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;

    .tt-buy-btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.75rem;
    }

    .tt-already-owned {
        font-size: 0.7rem;
        margin: 0;
        color: rgba(var(--terUser), 0.85);
    }
}