/* Base Layout Structure */
/* Add at the top of your CSS file */
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

.nft-content {
    display: flex;
    gap: 10px;
    max-width: 100%;
    margin:  auto;
    padding: 15px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.left-column,
.right-column {
    flex: 50%;
    min-width: 0; /* This prevents flex children from overflowing */
}

.nft-image-container {
    position: relative;
    margin-bottom: 10px;
    width: 75%;
}

#nft-image {
    max-width: 100%;
    height: auto;
    display: block;
}
/* Container to prevent horizontal overflow */
.nft-content {
    display: flex;
    gap: 10px;
    max-width: 100%;
    margin: 0 auto;
    padding: 15px;
    box-sizing: border-box; /* Prevents padding from causing overflow */
}

.left-column {
    flex: 50%;
}

.right-column {
    flex: 50%;
}

/* NFT Image Container */
/* Image container with relative positioning for overlays */
.nft-image-container {
    position: relative;
    margin-bottom: 10px;
    width: 75%;
}

#nft-image {
    max-width: 100%; /* Changed from 75% to 100% since container is already 75% */
    height: auto;
    display: block; /* Prevents unwanted spacing */
}



/* NFT Type Indicator - New, sized to match image */
.nft-type-indicator {
    max-width: 75%;
    margin-bottom: 10px;
}

/* Subcategories Gallery */
#subcategories-container {
    margin-top: 20px;
}

.nft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.nft-item {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
	font-size: 10px;
text-overflow: wrap;
}

.nft-item img {
    width: 100%;
    height: 150px; /* Fixed height */
    object-fit: cover;
    margin-bottom: 10px;
}

/* Expandable Containers */
.expandable-container {
    border: 1px solid #ddd;
    margin-bottom: 10px;
}

.expandable-header {
    background-color: #f8f8f8;
    padding: 10px;
    cursor: pointer;
}

.expandable-body {
    padding: 10px;
    display: none;
}

.expandable-container.expanded .expandable-body {
    display: block;
}

/* Media content */
#nft-media {
    margin-bottom: 20px;
}

#nft-media video {
    max-width: 100%;
    height: auto;
}


/* Fixed overlay display logic - only show when class is present */
.burned-overlay {
    display: none; /* Hide by default */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    background: rgba(220, 53, 69, 0.8);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: bold;
    z-index: 1;
}

.is-burned .burned-overlay {
    display: block; /* Only show when parent has is-burned class */
}

.for-sale-badge {
    top: 1rem;
    right: 1rem;
    background: var(--success-color);
    color: white;
}



/* Mobile Responsiveness */
@media (max-width: 768px) {
    .nft-content {
        flex-direction: column;
    }
    
    .left-column,
    .right-column {
        flex: 100%;
    }

    .nft-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}
.rev-share-badge:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 4px;
    font-size: 0.9em;
    white-space: nowrap;
    z-index: 10;
}

/* Ensure proper box sizing for all elements */
*, *::before, *::after {
    box-sizing: border-box;
}
.data-container {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word; /* For legacy support */
    word-break: normal;
}

.data-container h3 {
    font-size: 1.5em; /* Adjust font size as needed */
}

.data-url, .data-content {
    white-space: pre-wrap; /* This makes text wrap within the cell */
    word-wrap: break-word; /* Ensures long words break correctly */
    max-width: 100%; /* Ensures content fits within the container */
}

.data-url a {
    color: #007bff; /* Link color */
    text-decoration: none; /* Remove underline */
}

.data-url a:hover {
    text-decoration: underline; /* Underline on hover */
}

/* ── Action panel (Buy Now / Claim / Donate) ── */
.detail-action-panel {
    margin: 18px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-action {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 6px;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.12s;
}
.btn-action:hover { transform: translateY(-1px); }

.btn-buy-now {
    background: #2e7d32;
    color: #fff;
}
.btn-buy-now:hover { background: #1b5e20; }

.btn-claim-node {
    background: #00BFFF;
    color: #fff;
}
.btn-claim-node:hover { background: #0097cc; }

.btn-donate {
    background: transparent;
    border: 2px solid #7b61ff;
    color: #7b61ff;
}
.btn-donate:hover { background: #7b61ff; color: #fff; }

.detail-status-note {
    font-size: 0.9em;
    color: #888;
    font-style: italic;
}

/* ── L7 physical item notice ── */
.physical-item-notice {
    background: #0d2233;
    border-left: 4px solid #00BFFF;
    border-radius: 6px;
    padding: 14px 16px;
    color: #c8eaf8;
    font-size: 0.92em;
    margin-bottom: 6px;
}
.physical-item-notice strong {
    display: block;
    color: #00BFFF;
    font-size: 1.02em;
    margin-bottom: 6px;
}
.physical-item-notice p {
    margin: 0;
    line-height: 1.5;
}