/* Song Selector Wrapper AJAX Mode */
#selector-wrapper {
    background: #000; /* Use solid black to ensure text is always visible */
    backdrop-filter: blur(60px) saturate(200%);
    z-index: 150 !important;
    overflow-y: auto; /* Let the wrapper handle scroll */
    -webkit-overflow-scrolling: touch;
}

#selector-wrapper #selector-page {
    /* Fixed: Primary content area without extra scroll conflict */
    min-height: 100vh;
    padding: 80px 10px 180px 10px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

@media (min-width: 1025px) {
    #selector-wrapper #selector-page {
        align-items: center;
        padding: 80px 0 180px 0;
    }
}

/* Base page styles for standalone selector.html */
body.selector-standalone {
    background: #000;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto; /* Ensure vertical scroll is allowed */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 60px 0;
}

#selector-page {
    width: 100%;
    position: relative;
    z-index: 10;
}

#song-selector-content {
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

#song-selector > .relative {
    background: rgba(255, 255, 255, 0.08); /* Brighter glass for premium feel */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    padding: 3rem;
    box-shadow: 0 100px 150px -50px rgba(0,0,0,0.9), 0 0 50px rgba(255, 82, 217, 0.15);
}

.selector-album-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 60px -15px rgba(255, 82, 217, 0.4);
}

.selector-album-container img {
    transition: transform 1s ease;
}

#song-selector:hover .selector-album-container img {
    transform: scale(1.05);
}

/* Song List and Items */
#song-list {
    -ms-overflow-style: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) rgba(255, 255, 255, 0.05);
    mask-image: none !important;
    -webkit-mask-image: none !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
}

#song-list::-webkit-scrollbar {
    width: 6px;
    display: block;
}

#song-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
}

#song-list::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
}

.song-item {
    border-radius: 12px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.song-item:hover {
    background: rgba(255, 82, 217, 0.1) !important;
    border-color: rgba(255, 82, 217, 0.4) !important;
    transform: scale(1.02) !important;
    box-shadow: 0 10px 30px -10px rgba(255, 82, 217, 0.2);
}

.song-number {
    font-family: 'Bebas Neue', sans-serif;
    color: var(--primary);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.song-item:hover .song-number {
    color: var(--primary);
}

.song-play-btn {
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
}

.song-item:hover .song-play-btn {
    opacity: 1;
    transform: translateX(0);
}

/* Mobile Adjustments for Selector Template */
@media (max-width: 1024px) {
    #selector-page { display: block; padding: 20px 0; }
    #song-list { 
        max-height: none !important; 
        overflow: visible !important; 
        mask-image: none !important; 
        -webkit-mask-image: none !important; 
    }
}

@media (max-width: 640px) {
    #selector-album-name {
        font-size: 3rem !important;
    }
    .selector-album-container {
        width: 180px !important;
        margin-bottom: 0 !important;
    }
    .song-item {
        padding: 1rem !important;
    }
    .song-item .text-2xl, .song-item .text-3xl {
        font-size: 1.1rem !important;
    }
    .song-play-btn span {
        display: none !important;
    }
    #song-selector-content {
        padding: 1.5rem !important;
    }
}