/* Deluxe Wallet Balances - CSS - Autloads Every 10 Seconds */
/* Positioned in upper right corner, below Xaman buttons in header */

#wallet-balances {
    position: fixed; /* Fixed positioning relative to viewport */
    top: 75px; /* Below header/Xaman buttons (header is typically ~70px) */
    right: 55px; /* Increased right margin */
    margin-top: 0;
    font-size: 13px;
    text-align: left; /* Left-align all content including token abbreviations */
    color: #eee;
    line-height: 1.35;
    z-index: 1000; /* High z-index to stay above other content */
    min-width: 320px; /* Reduced by 10px (was 330px) */
    max-width: 360px; /* Reduced by 10px (was 370px) */
    background: rgba(0, 0, 0, 0.85); /* Semi-transparent dark background */
    border: 1px solid rgba(0, 255, 255, 0.4); /* Tactical cyan border */
    border-radius: 6px;
    padding: 10px 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 255, 255, 0.2); /* Enhanced shadow with cyan glow */
    display: none; /* Hidden by default - JavaScript will show it when wallet is connected */
}

.balance-item {
    margin-bottom: 3px;
    text-align: left; /* Ensure balance items are left-aligned */
}

/* Ensure issuer names (white text) are hard left-aligned like token symbols */
#wallet-balances * {
    text-align: left;
    margin-left: 0;
    padding-left: 0;
}

/* Force issuer names to be flush left */
#wallet-balances .balance-item,
#wallet-balances span,
#wallet-balances div {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.balance-updated {
    background: rgba(255, 255, 255, 0.15);
    transition: background 0.6s ease-out;
    border-radius: 4px;
    padding: 1px 3px;
}