/* Force show NFT elements */
.nft-image-container,
.nft-image-compact,
.mint-btn-compact,
#btnMintNowHero {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.nft-mint-compact {
    display: grid !important;
    visibility: visible !important;
}

.nft-mint-left,
.nft-mint-right {
    display: flex !important;
    visibility: visible !important;
}

/* Fix z-index layering */
.nft-mint-compact {
    position: relative !important;
    z-index: 10 !important;
}

.nft-collection-left,
.nft-collection-right,
.nft-mint-left,
.nft-mint-right {
    position: relative !important;
    z-index: 10 !important;
}

.nft-hero-background {
    z-index: 0 !important;
}

.nft-animated-bg,
.nft-particles {
    z-index: 1 !important;
}

/* Ensure container is visible */
.container {
    position: relative !important;
    z-index: 5 !important;
}

/* Swap left/right layout */
.nft-mint-left {
    grid-column: 1;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    z-index: 10;
}

.nft-collection-right {
    grid-column: 2;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 10;
}

/* Ensure mint section has same width as before (400px) */
.nft-mint-compact {
    grid-template-columns: 400px 1fr !important;
}

@media (max-width: 1024px) {
    .nft-mint-compact {
        grid-template-columns: 1fr !important;
    }
    
    .nft-mint-left {
        grid-column: 1;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .nft-collection-right {
        grid-column: 1;
    }
}