/* Modern Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #05020a; }
::-webkit-scrollbar-thumb { background: #2a1f3d; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a855f7; }

/* Glassmorphism Utilities */
.glass {
    background: rgba(10, 5, 20, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(168, 85, 247, 0.15);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

/* Ad Stripes */
.ad-stripe {
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(168, 85, 247, 0.05) 0px,
        rgba(168, 85, 247, 0.05) 10px,
        transparent 10px,
        transparent 20px
    );
}

.ad-label-corner {
    position: absolute;
    top: 0; right: 0;
    background: rgba(168, 85, 247, 0.9);
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-bottom-left-radius: 8px;
    z-index: 20;
    box-shadow: -2px 2px 5px rgba(0,0,0,0.3);
}

/* Tab Animation */
.tab-content { display: none; animation: fadeIn 0.3s ease-out; }
.tab-content.active { display: block; }

.tab-btn.active {
    background: rgba(168, 85, 247, 0.2);
    color: #d8b4fe;
    border-bottom: 2px solid #a855f7;
}

/* View Switching */
.view-section { display: none; animation: fadeIn 0.4s ease-out; }
.view-section.active { display: block; }

.nav-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Filter Active State */
.filter-btn { transition: all 0.2s; }
.filter-btn.active-filter {
    background-color: rgba(168, 85, 247, 0.2);
    border: 1px solid rgba(168, 85, 247, 0.5);
    color: white;
    font-weight: 700;
}
.filter-btn:not(.active-filter) {
    color: #9ca3af;
    border: 1px solid transparent;
}
.filter-btn:not(.active-filter):hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
}

/* Hide scrollbar for chrome/safari/opera */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Fix Select Dropdown Options for Dark Mode */
select option {
    background-color: #110a1c; /* bento-card */
    color: #ffffff;
    padding: 8px;
}

/* Custom Scrollbar for Filters */
#browse-filters::-webkit-scrollbar {
    height: 4px;
    display: block;
}
#browse-filters::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin: 0 10px;
}
#browse-filters::-webkit-scrollbar-thumb {
    background: #2a1f3d;
    border-radius: 10px;
}
#browse-filters::-webkit-scrollbar-thumb:hover {
    background: #a855f7;
}
/* Standard Nav Link Active State (No background) */
.nav-link.active {
    color: #ffffff;
    font-weight: 700;
    border-bottom: 2px solid #a855f7; /* Added bottom border for clearer active state */
}
.nav-link:not(.active) {
    color: #9ca3af; /* text-gray-400 */
    border-bottom: 2px solid transparent;
}
.nav-link:hover {
    color: #ffffff;
    border-bottom-color: rgba(168, 85, 247, 0.5);
}