/* public/css/wallet.css */
/* Enhanced wallet page styling with complete filtering system and responsive design */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #0a0a0f;
    color: #e0e0e0;
    min-height: 100vh;
    line-height: 1.6;
    display: block;
    padding: 0;
    align-items: initial;
}

body::before {
    display: none;
}

/* Header */
.wallet-header {
    background: #1a1a24;
    border-bottom: 1px solid #2a2a3a;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.header-left h1 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.user-info {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: #888;
    align-items: center;
}

.wallet-address {
    font-family: 'Courier New', monospace;
    background: #2a2a3a;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.wallet-address:hover {
    background: #3a3a4a;
}

.header-right {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Main Container */
.wallet-container {
    display: flex;
    min-height: calc(100vh - 72px);
}

/* Sidebar */
.wallet-sidebar {
    position: sticky;
    top: 72px;
    height: calc(100vh - 72px);
    overflow-y: auto;
    width: 320px;
    background: #1a1a24;
    border-right: 1px solid #2a2a3a;
    padding: 2rem 1.5rem;
}

.filter-section h3,
.stats-section h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: #fff;
}

.filter-group {
    margin-bottom: 1.5rem;
}

.filter-group label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: #aaa;
    font-weight: 500;
}

.price-range-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.price-range-input {
    width: 100%;
    padding: 0.6rem 0.5rem;
    background: #2a2a3a;
    border: 1px solid #3a3a4a;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 0.85rem;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.price-range-input:focus {
    outline: none;
    border-color: #4a9eff;
}

.price-range-input::placeholder {
    color: #666;
}

.filter-select {
    width: 100%;
    padding: 0.75rem;
    background: #2a2a3a;
    border: 1px solid #3a3a4a;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-select:focus {
    outline: none;
    border-color: #4a9eff;
    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.1);
}

.filter-select:hover {
    border-color: #4a9eff;
    background: #3a3a4a;
}

.filter-select option {
    background: #2a2a3a;
    color: #ffffff;
}

.filter-select option:hover {
    background: #4a9eff;
}

/* Chain Selector */
.chain-selector {
    display: flex;
    gap: 0.5rem;
}

.chain-btn {
    flex: 1;
    padding: 0.75rem;
    background: #2a2a3a;
    border: 1px solid #3a3a4a;
    border-radius: 6px;
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.chain-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s;
}

.chain-btn:hover {
    background: #3a3a4a;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(74, 158, 255, 0.2);
}

.chain-btn:hover::before {
    left: 100%;
}

.chain-btn.active {
    background: #4a9eff;
    border-color: #4a9eff;
    color: #fff;
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3);
}

/* Metadata Filters */
.metadata-filters {
    margin-top: 16px;
    padding-top: 16px;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filter-divider {
    height: 1px;
    background: #3a3a4a;
    margin-bottom: 16px;
}

.metadata-filters h4 {
    margin: 0 0 12px 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.metadata-filters-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

/* FIX: .filter-group carries margin-bottom: 1.5rem for the top-level
   sidebar filters (Currency, etc.). showMetadataFilters() reuses that
   class for each metadata filter inside this list, so the 24px margin
   stacked on top of the 12px gap here. Zero it out so only the parent
   gap controls spacing. */
.metadata-filters-list .filter-group {
    margin-bottom: 0;
}

.metadata-filter-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metadata-filter-label {
    font-size: 12px;
    color: #b3b3b3;
    font-weight: 500;
}

.metadata-filter-select {
    background: #2a2a3a;
    border: 1px solid #3a3a4a;
    color: #ffffff;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
    width: 100%;
    transition: all 0.2s ease;
}

.metadata-filter-select:focus {
    outline: none;
    border-color: #4a9eff;
}

.metadata-filter-select:hover {
    border-color: #4a9eff;
    background: #3a3a4a;
}

.metadata-filter-select option {
    background: #2a2a3a;
    color: #ffffff;
}

.metadata-filter-select option:hover {
    background: #4a9eff;
}

/* Enhanced Buttons */
.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.btn-ghost {
    background: transparent;
    border: 1px solid #3a3a4a;
    color: #b3b3b3;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-ghost:hover {
    border-color: #4a9eff;
    color: #4a9eff;
    background: rgba(74, 158, 255, 0.05);
}

.btn-sm {
    padding: 4px 8px;
    font-size: 11px;
}

.btn-primary {
    background: #4a9eff;
    color: white;
}

.btn-primary:hover {
    background: #3a8eef;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3);
}

.btn-secondary {
    background: #2a2a3a;
    color: #e0e0e0;
}

.btn-secondary:hover {
    background: #3a3a4a;
    transform: translateY(-1px);
}

.btn-danger {
    background: #ef4444;
    color: white;
}

.btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.btn-block {
    width: 100%;
    justify-content: center;
}

/* Filter Indicators */
.filter-count {
    background: #4a9eff;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
}

.metadata-filter-value-count {
    color: #888;
    font-size: 10px;
    margin-left: 4px;
}

.filter-active-indicator {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #10b981;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
    z-index: 1;
}

/* Stats Section */
.stats-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #2a2a3a;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    position: relative;
    padding: 0.75rem;
    background: rgba(74, 158, 255, 0.05);
    border-radius: 6px;
    border-left: 3px solid #4a9eff;
    transition: all 0.2s ease;
}

.stat-item:hover {
    background: rgba(74, 158, 255, 0.1);
    transform: translateX(2px);
}

.stat-label {
    color: #888;
}

.stat-value {
    color: #4a9eff;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Loading Progress */
.loading-progress {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(74, 158, 255, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(74, 158, 255, 0.3);
}

.progress-label {
    font-size: 0.85rem;
    color: #4a9eff;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: #2a2a3a;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4a9eff, #10b981);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.75rem;
    color: #aaa;
    text-align: center;
}

/* Main Content */
.wallet-main {
    flex: 1;
    padding: 2rem;
    min-width: 0;
    overflow-x: clip;
}

/* Search Bar */
.search-bar {
    margin-bottom: 2rem;
}

.search-input {
    width: 100%;
    max-width: 600px;
    padding: 1rem 1.5rem;
    background: #1a1a24;
    border: 1px solid #2a2a3a;
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.search-input:focus {
    outline: none;
    border-color: #4a9eff;
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
    transform: scale(1.02);
}

/* NFT Grid */
.nft-container {
    min-height: 400px;
}

.nft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* ===================================================================
   NFT CARD - FIX: Remove border changes on hover to prevent jump
   =================================================================== */
.nft-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #1a1a24;
    border: 1px solid #2a2a3a;
    border-radius: 12px;
    padding: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    height: 100%;
    overflow: hidden;
    /* Skip rendering for off-screen cards — massive perf win at 5000+ cards */
    content-visibility: auto;
    contain-intrinsic-size: auto 280px 380px;
}

.nft-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(74, 158, 255, 0.2);
    border-color: #4a9eff; /* Changed from commented out to active */
}

.nft-image {
    position: relative;
    width: 100%;
    padding-top: 130%;
    background: #0a0a0f;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
}

/* Old styles - keep for backwards compatibility with non-animated NFTs */
.nft-image img,
.nft-image video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    transition: transform 0.3s ease;
}

/* Disable image zoom on hover - it was causing overflow issues */
.nft-card:hover .nft-image:not(.has-animation) img {
    transform: none;
}

/* Illuvitars: shorter aspect ratio + contain to show full image including Alpha tag */
.nft-card[data-collection-address="0xc7c38afa53e105e9183e0932ff4f25c82a19121d"] .nft-image {
    padding-top: 100%;
}
.nft-card[data-collection-address="0xc7c38afa53e105e9183e0932ff4f25c82a19121d"] .nft-image img {
    object-fit: cover;
    object-position: center center;
}
.nft-card[data-collection-address="0xc7c38afa53e105e9183e0932ff4f25c82a19121d"]:hover .nft-image img {
    transform: scale(1.05);
}
}

/* Minting overlay for recently listed NFTs with no image yet */
.minting-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 15, 0.85);
    z-index: 2;
    gap: 0.75rem;
}
.minting-overlay span {
    color: #a78bfa;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.minting-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(167, 139, 250, 0.2);
    border-top-color: #a78bfa;
    border-radius: 50%;
    animation: mintSpin 1s linear infinite;
}
@keyframes mintSpin {
    to { transform: rotate(360deg); }
}

.chain-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.8);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 1.2rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 2;
}

.listed-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: #4a9eff;
    color: white;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(74, 158, 255, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(74, 158, 255, 0.4);
    z-index: 2;
}

/* Price badge — FIXED: Much darker background for better readability */
.price-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    border: 1px solid;
    z-index: 2;
    cursor: default;
    white-space: nowrap;
    /* FIXED: Darker background with semi-transparent black overlay */
    background: rgba(0, 0, 0, 0.75) !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Optional: Add colored accent border based on currency */
.price-badge[style*="background"] {
    border-width: 2px;
    /* Border color will be set inline via style attribute */
}

.nft-card:hover .listed-badge {
    transform: scale(1.05);
    box-shadow: 
        0 4px 12px rgba(74, 158, 255, 0.5),
        0 0 0 1px rgba(74, 158, 255, 0.3);
}

.nft-card:hover .price-badge {
    transform: scale(1.05);
}

/* NFT Info - FIXED: Proper internal spacing */
.nft-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    min-height: auto;
}

.nft-collection {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.nft-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.nft-details {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0;
    flex-shrink: 0;
}

.nft-type {
    display: none;
}

.nft-game {
    font-size: 0.75rem;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    border: 1px solid rgba(34, 197, 94, 0.2);
    line-height: 1.2;
}

/* NFT Pricing */
.nft-pricing {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid #2a2a3a;
}

.nft-price-crypto {
    font-size: 1rem;
    font-weight: 700;
    color: #10b981;
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    line-height: 1.2;
}

.nft-price-crypto::before {
    content: '💰';
    font-size: 0.9rem;
}

.nft-price-usd {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 500;
    line-height: 1.2;
}

.nft-card:hover .nft-pricing {
    border-top-color: #4a9eff;
}

.nft-card:hover .nft-price-crypto {
    color: #22c55e;
}

/* View Details Button */
.view-details-btn {
    width: 100%;
    margin: 0;
    padding: 0.75rem 1rem;
    background: #4a9eff;
    border: none;
    border-radius: 0 0 12px 12px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.view-details-btn:hover {
    background: #3a8eef;
    transform: translateY(-1px);
}

.view-details-btn:active {
    transform: translateY(0);
}

/* Loading States */
.loading-container,
.load-more-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #2a2a3a;
    border-top: 3px solid #4a9eff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

.loading-spinner.large {
    width: 60px;
    height: 60px;
    border-width: 4px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Empty and Error States */
.empty-state,
.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    color: #888;
    padding: 2rem;
}

.empty-icon,
.error-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.7;
}

.error-icon {
    color: #dc2626;
}

.empty-state h3,
.error-container h3 {
    color: #fff;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.error-container h3 {
    color: #dc2626;
}

.empty-state p,
.error-message {
    color: #aaa;
    margin-bottom: 2rem;
    max-width: 400px;
}

.error-container {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 8px;
}

/* Back to Top Button */
.back-to-top-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #4a9eff;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3);
}

.back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(74, 158, 255, 0.4);
}

/* Temporary Messages */
.temporary-message {
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ==================== NFT DETAIL MODAL ==================== */

.wallet-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.wallet-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    background: #1a1a24;
    border: 1px solid #2a2a3a;
    border-radius: 12px;
    margin: 2rem auto;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.wallet-modal.active .modal-content {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #dc2626;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: #b91c1c;
    transform: scale(1.1);
}

.modal-body {
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem;
}

/* Modal Header */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #2a2a3a;
}

.modal-title-section h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

.modal-title-section h3 {
    font-size: 1.2rem;
    color: #aaa;
    margin-bottom: 1rem;
}

.nft-meta-info {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.chain-info,
.game-info,
.type-info {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.chain-info {
    background: rgba(74, 158, 255, 0.2);
    color: #4a9eff;
}

.game-info {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.type-info {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.listing-status .listed-badge.large {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 600;
}

/* Modal Tabs */
.modal-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #2a2a3a;
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    color: #aaa;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    font-weight: 500;
}

.tab-btn:hover {
    color: #4a9eff;
}

.tab-btn.active {
    color: #4a9eff;
    border-bottom-color: #4a9eff;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Overview Tab */
.overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.overview-image {
    position: relative;
}

.overview-image img {
    width: 100%;
    border-radius: 8px;
    background: #0a0a0f;
}

.image-actions {
    margin-top: 1rem;
    text-align: center;
}

.description-section {
    margin-bottom: 2rem;
}

.description-section h4 {
    color: #fff;
    margin-bottom: 0.5rem;
}

.description-section p {
    color: #ccc;
    line-height: 1.6;
}

.quick-attributes h4 {
    color: #fff;
    margin-bottom: 1rem;
}

.attributes-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.attribute-item {
    background: #2a2a3a;
    padding: 0.75rem;
    border-radius: 6px;
    border-left: 3px solid #4a9eff;
}

.attr-label {
    display: block;
    font-size: 0.8rem;
    color: #aaa;
    margin-bottom: 0.25rem;
}

.attr-value {
    font-weight: 600;
    color: #fff;
}

.more-attributes {
    margin-top: 1rem;
    color: #aaa;
    font-style: italic;
}

/* Attributes Tab */
.attributes-full {
    padding: 1rem 0;
}

.attributes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.attributes-header h4 {
    color: #fff;
}

.attributes-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.sort-select {
    background: #2a2a3a;
    border: 1px solid #3a3a4a;
    color: #fff;
    padding: 0.5rem;
    border-radius: 4px;
}

.attributes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.attribute-group-title {
    grid-column: 1 / -1;
    color: #4a9eff;
    margin: 1.5rem 0 0.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #2a2a3a;
}

.attribute-card {
    background: #2a2a3a;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #4a9eff;
    transition: all 0.2s ease;
}

.attribute-card:hover {
    background: #3a3a4a;
    transform: translateY(-2px);
}

.attribute-card .attr-type {
    font-size: 0.85rem;
    color: #aaa;
    margin-bottom: 0.5rem;
}

.attribute-card .attr-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
}

.attr-rarity {
    font-size: 0.8rem;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
}

.attr-percentage {
    font-size: 0.8rem;
    color: #4a9eff;
}

/* Metadata Tab */
.metadata-section {
    padding: 1rem 0;
}

.metadata-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.meta-tab-btn {
    padding: 0.5rem 1rem;
    background: #2a2a3a;
    border: 1px solid #3a3a4a;
    color: #aaa;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.meta-tab-btn.active,
.meta-tab-btn:hover {
    background: #4a9eff;
    color: white;
    border-color: #4a9eff;
}

.metadata-block {
    display: none;
}

.metadata-block.active {
    display: block;
}

.metadata-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.metadata-header h5 {
    color: #fff;
}

.metadata-json {
    background: #0a0a0f;
    border: 1px solid #2a2a3a;
    border-radius: 6px;
    padding: 1rem;
    color: #e0e0e0;
    font-size: 0.9rem;
    line-height: 1.4;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Details Tab */
.details-section {
    padding: 1rem 0;
}

.detail-groups {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.detail-group h5 {
    color: #4a9eff;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #2a2a3a;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.detail-item {
    background: #2a2a3a;
    padding: 1rem;
    border-radius: 6px;
}

.detail-item.full-width {
    grid-column: 1 / -1;
}

.detail-label {
    display: block;
    font-size: 0.85rem;
    color: #aaa;
    margin-bottom: 0.5rem;
}

.detail-value {
    color: #fff;
    font-weight: 500;
    word-break: break-all;
}

.detail-value.mono {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.external-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Modal Actions */
.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding: 2rem 0;
    border-top: 1px solid #2a2a3a;
    margin-top: 2rem;
}

/* Modal Loading and Error States */
.modal-loading,
.modal-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.modal-error {
    color: #dc2626;
}

.modal-error .error-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.modal-error h3 {
    color: #dc2626;
    margin-bottom: 1rem;
}

.modal-error p {
    color: #aaa;
    margin-bottom: 1rem;
}

/* Empty Section */
.empty-section {
    text-align: center;
    padding: 3rem;
    color: #aaa;
}

/* Subtle glow on listed NFT cards — blue to match Listed badge */
.nft-card:has(.listed-badge) {
    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.15);
}

.nft-card:has(.listed-badge):hover {
    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.3);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .nft-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.25rem;
    }
}

@media (max-width: 1024px) {
    .wallet-sidebar {
        width: 280px;
    }
    
    .nft-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .wallet-container {
        flex-direction: column;
    }
    
    .wallet-sidebar {
        position: static;
        width: 100%;
        height: auto;
        order: 2;
        border-right: none;
        border-top: 1px solid #2a2a3a;
    }
    
    .wallet-main {
        order: 1;
        padding: 1rem;
    }
    
    .nft-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
        padding: 1rem;
    }
    
    .nft-info {
        padding: 0.65rem;
        gap: 0.3rem;
    }
    
    .nft-collection {
        font-size: 0.8rem;
    }
    
    .nft-name {
        font-size: 1rem;
    }
    
    .nft-details {
        gap: 0.3rem;
    }
    
    .nft-game {
        font-size: 0.7rem;
        padding: 0.12rem 0.35rem;
    }
    
    .nft-pricing {
        margin-top: 0.4rem;
        padding-top: 0.4rem;
    }
    
    .nft-price-crypto {
        font-size: 1rem;
    }
    
    .nft-price-usd {
        font-size: 0.8rem;
    }
    
    .view-details-btn {
        padding: 0.6rem 0.85rem;
        font-size: 0.85rem;
    }
    
    .listed-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    .price-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    .chain-selector {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    
    .chain-btn {
        font-size: 0.85rem;
        padding: 0.5rem;
    }
    
    .metadata-filters-list {
        gap: 0.75rem;
    }
    
    .metadata-filter-select {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .wallet-header {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
    }
    
    .header-right {
        width: 100%;
        justify-content: center;
    }
    
    .user-info {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .nft-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    
    .nft-info {
        padding: 0.6rem;
        gap: 0.25rem;
    }
    
    .nft-collection {
        font-size: 0.75rem;
    }
    
    .nft-name {
        font-size: 0.95rem;
    }
    
    .nft-price-crypto {
        font-size: 0.95rem;
        justify-content: center;
    }
    
    .nft-price-usd {
        font-size: 0.75rem;
    }
    
    .view-details-btn {
        padding: 0.55rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .chain-selector {
        flex-direction: column;
    }
}

/* Smooth transitions for all interactive elements */
.chain-btn,
.filter-select,
.metadata-filter-select,
.btn,
.nft-card,
.stat-item {
    transition: all 0.2s ease;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .listed-badge {
        border: 2px solid white;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .listed-badge,
    .price-badge,
    .nft-card,
    .view-details-btn {
        transition: none;
    }
    
    .nft-card:hover .listed-badge {
        transform: none;
    }
    
    .nft-card:hover .price-badge {
        transform: none;
    }
    
    .nft-card:hover .nft-image img {
        transform: none;
    }
    
/*
delete if still here
     Disable animation transitions for reduced motion 
    .nft-static-image,
    .nft-animation-video {
        transition: none;
    }
*/

}

/* ==================== FAVORITE BUTTON ==================== */

/* Card footer with button and favorite */
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0;
  width: 100%;
}

.card-footer .view-details-btn {
  flex: 1;
  margin: 0;
  border-radius: 0 0 0 12px;
}

.favorite-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  border-radius: 0 0 12px 0;
  min-width: 60px;
}

.favorite-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  transform: scale(1.1);
}

.favorite-btn.is-favorite {
  background: rgba(239, 68, 68, 0.15);
}

.favorite-btn.is-favorite:hover {
  background: rgba(239, 68, 68, 0.25);
}

.heart-icon {
  font-size: 24px;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transition: transform 0.2s ease;
}

.favorite-btn:active .heart-icon {
  transform: scale(0.85);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .heart-icon {
    font-size: 20px;
  }
  
  .favorite-btn {
    padding: 0.6rem 0.85rem;
    min-width: 50px;
  }
}

@media (max-width: 480px) {
  .heart-icon {
    font-size: 18px;
  }
  
  .favorite-btn {
    padding: 0.55rem 0.75rem;
    min-width: 45px;
  }
}


/* ===== NFT Card Selection Checkbox Styles ===== */
.nft-checkbox-container {
  position: absolute;
  top: 8px;
  left: 8px;  /* TOP-LEFT to avoid conflict with listed badge (top-right) */
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  border-radius: 6px;
  padding: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.nft-card:hover .nft-checkbox-container {
  opacity: 1;
}

.nft-card.selected .nft-checkbox-container {
  opacity: 1;
  background: rgba(66, 153, 225, 0.8);
}

.nft-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #4299e1;
  margin: 0;
}

.nft-checkbox:hover {
  transform: scale(1.1);
}

/* Visual feedback for selected cards */
.nft-card.selected {
  border: 2px solid #4299e1;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
  transform: translateY(-2px);
}

.nft-card.selected .nft-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(66, 153, 225, 0.1);
  pointer-events: none;
  border-radius: 12px;
}

/* Floating Action Bar (shown when items selected) */
.bulk-action-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #1a1a24 0%, #2a2a3a 100%);
  border: 1px solid #3a3a4a;
  border-radius: 16px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 1000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateX(-50%) translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

.bulk-action-bar-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 16px;
  border-right: 1px solid #3a3a4a;
}

.bulk-action-bar-count {
  font-size: 24px;
  font-weight: 700;
  color: #4299e1;
}

.bulk-action-bar-label {
  font-size: 14px;
  color: #aaa;
}

.bulk-action-bar-actions {
  display: flex;
  gap: 8px;
}

.bulk-action-btn {
  padding: 10px 20px;
  background: #3a3a4a;
  border: 1px solid #4a4a5a;
  border-radius: 8px;
  color: #e0e0e0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bulk-action-btn:hover {
  background: #4a4a5a;
  border-color: #4299e1;
  transform: translateY(-1px);
}

.bulk-action-btn.primary {
  background: linear-gradient(135deg, #4a9eff 0%, #3a7edf 100%);
  border-color: #4a9eff;
  color: white;
}

.bulk-action-btn.primary:hover {
  background: linear-gradient(135deg, #3a8eef 0%, #2a6ecf 100%);
  box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3);
}

.bulk-action-btn.danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border-color: #ef4444;
  color: white;
}

.bulk-action-btn.danger:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Select All/Deselect All buttons in header */
.selection-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.select-all-btn,
.deselect-all-btn {
  padding: 8px 16px;
  background: #2a2a3a;
  border: 1px solid #3a3a4a;
  border-radius: 8px;
  color: #e0e0e0;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.select-all-btn:hover,
.deselect-all-btn:hover {
  background: #3a3a4a;
  border-color: #4299e1;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .bulk-action-bar {
    bottom: 10px;
    left: 10px;
    right: 10px;
    transform: none;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
  }

  .bulk-action-bar-info {
    border-right: none;
    border-bottom: 1px solid #3a3a4a;
    padding-right: 0;
    padding-bottom: 12px;
    width: 100%;
  }

  .bulk-action-bar-actions {
    width: 100%;
    flex-direction: column;
  }

  .bulk-action-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Animation modal */
.animation-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animation-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.animation-modal-video {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.animation-modal-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 32px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.animation-modal-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: rotate(90deg);
  border-color: rgba(255, 255, 255, 0.5);
}

.animation-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: white;
  gap: 1rem;
}

/* ==================== ERC-1155 SUPPORT ==================== */

/* NEW: Subtle top accent instead of side border */
.nft-card-erc1155::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 12px 12px 0 0;
  z-index: 1;
}

/* Quantity badges container - MOVED to bottom-left of image */
.erc1155-quantity-badges {
  position: absolute;
  bottom: 0.5rem;  /* Changed from top to bottom */
  left: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  z-index: 3;
}

.quantity-badge {
  padding: 0.4rem 0.7rem;  /* Increased from 0.3rem 0.6rem for better visibility */
  border-radius: 6px;
  font-size: 0.9rem;  /* Increased from 0.8rem */
  font-weight: 700;
  backdrop-filter: blur(10px);
  border: 1px solid;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;  /* Increased from 0.3rem */
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);  /* Stronger shadow for better contrast */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);  /* Added text shadow for readability */
}

.owned-badge {
  background: rgba(59, 130, 246, 0.95);  /* Changed from orange to blue, more opaque */
  border-color: rgba(59, 130, 246, 0.6);
  color: white;
}

.listed-count-badge {
  background: rgba(16, 185, 129, 0.95);  /* Changed from blue to green, more opaque */
  border-color: rgba(16, 185, 129, 0.6);
  color: white;
}

/* Quantity badge hover effects */
.nft-card:hover .quantity-badge {
  transform: scale(1.05);
}

/* ERC-1155 type badge in tags */
.nft-type-badge {
  font-size: 0.7rem;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  font-weight: 600;
  border: 1px solid;
  line-height: 1.2;
}

.erc1155-badge {
  background: rgba(139, 92, 246, 0.15);  /* Purple to match top accent */
  border-color: rgba(139, 92, 246, 0.4);
  color: #a78bfa;
}

/* Responsive adjustments for ERC-1155 */
@media (max-width: 768px) {
  .erc1155-quantity-badges {
    gap: 0.25rem;
  }
  
  .quantity-badge {
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
  }
}

@media (max-width: 480px) {
  .quantity-badge {
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem
  }
  
  .nft-type-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.35rem;
  }
}