/* Dynamic styles for categories and difficulties */

/* Category option colors */
.form-group select option[value="Classical"] {
    background: rgba(63, 130, 246, 0.1) !important;
    color: rgb(63, 130, 246) !important;
}
.form-group select option[value="Pop"] {
    background: rgba(236, 72, 153, 0.1) !important;
    color: rgb(236, 72, 153) !important;
}
.form-group select option[value="Gaming"] {
    background: rgba(16, 185, 129, 0.1) !important;
    color: rgb(16, 185, 129) !important;
}
.form-group select option[value="Anime"] {
    background: rgba(245, 158, 11, 0.1) !important;
    color: rgb(245, 158, 11) !important;
}
.form-group select option[value="Movies"] {
    background: rgba(139, 92, 246, 0.1) !important;
    color: rgb(139, 92, 246) !important;
}
.form-group select option[value="Jazz"] {
    background: rgba(6, 182, 212, 0.1) !important;
    color: rgb(6, 182, 212) !important;
}
.form-group select option[value="Rock"] {
    background: rgba(239, 68, 68, 0.1) !important;
    color: rgb(239, 68, 68) !important;
}
.form-group select option[value="Electronic"] {
    background: rgba(99, 102, 241, 0.1) !important;
    color: rgb(99, 102, 241) !important;
}
.form-group select option[value="Country"] {
    background: rgba(217, 119, 6, 0.1) !important;
    color: rgb(217, 119, 6) !important;
}
.form-group select option[value="RnB"] {
    background: rgba(168, 85, 247, 0.1) !important;
    color: rgb(168, 85, 247) !important;
}
.form-group select option[value="Rap"] {
    background: rgba(239, 68, 68, 0.1) !important;
    color: rgb(239, 68, 68) !important;
}
.form-group select option[value="Lo-Fi"] {
    background: rgba(139, 92, 246, 0.1) !important;
    color: rgb(139, 92, 246) !important;
}
.form-group select option[value="K-Pop"] {
    background: rgba(236, 72, 153, 0.1) !important;
    color: rgb(236, 72, 153) !important;
}
.form-group select option[value="Metal"] {
    background: rgba(51, 51, 51, 0.1) !important;
    color: rgb(51, 51, 51) !important;
}
.form-group select option[value="Blues"] {
    background: rgba(59, 130, 246, 0.1) !important;
    color: rgb(59, 130, 246) !important;
}
.form-group select option[value="Gospel"] {
    background: rgba(251, 191, 36, 0.1) !important;
    color: rgb(251, 191, 36) !important;
}
.form-group select option[value="Latin"] {
    background: rgba(234, 88, 12, 0.1) !important;
    color: rgb(234, 88, 12) !important;
}
.form-group select option[value="Reggae"] {
    background: rgba(34, 197, 94, 0.1) !important;
    color: rgb(34, 197, 94) !important;
}
.form-group select option[value="Folk"] {
    background: rgba(133, 77, 14, 0.1) !important;
    color: rgb(133, 77, 14) !important;
}
.form-group select option[value="Indie"] {
    background: rgba(219, 39, 119, 0.1) !important;
    color: rgb(219, 39, 119) !important;
}
.form-group select option[value="Hip-Hop"] {
    background: rgba(245, 158, 11, 0.1) !important;
    color: rgb(245, 158, 11) !important;
}
.form-group select option[value="Soul"] {
    background: rgba(168, 85, 247, 0.1) !important;
    color: rgb(168, 85, 247) !important;
}
.form-group select option[value="Disco"] {
    background: rgba(236, 72, 153, 0.1) !important;
    color: rgb(236, 72, 153) !important;
}
.form-group select option[value="Funk"] {
    background: rgba(234, 88, 12, 0.1) !important;
    color: rgb(234, 88, 12) !important;
}
.form-group select option[value="Punk"] {
    background: rgba(239, 68, 68, 0.1) !important;
    color: rgb(239, 68, 68) !important;
}
.form-group select option[value="Trap"] {
    background: rgba(99, 102, 241, 0.1) !important;
    color: rgb(99, 102, 241) !important;
}
.form-group select option[value="House"] {
    background: rgba(6, 182, 212, 0.1) !important;
    color: rgb(6, 182, 212) !important;
}
.form-group select option[value="Techno"] {
    background: rgba(139, 92, 246, 0.1) !important;
    color: rgb(139, 92, 246) !important;
}
.form-group select option[value="Dubstep"] {
    background: rgba(168, 85, 247, 0.1) !important;
    color: rgb(168, 85, 247) !important;
}
.form-group select option[value="Trance"] {
    background: rgba(99, 102, 241, 0.1) !important;
    color: rgb(99, 102, 241) !important;
}
.form-group select option[value="Ambient"] {
    background: rgba(6, 182, 212, 0.1) !important;
    color: rgb(6, 182, 212) !important;
}
.form-group select option[value="Vaporwave"] {
    background: rgba(236, 72, 153, 0.1) !important;
    color: rgb(236, 72, 153) !important;
}
.form-group select option[value="Synthwave"] {
    background: rgba(168, 85, 247, 0.1) !important;
    color: rgb(168, 85, 247) !important;
}
.form-group select option[value="Chillhop"] {
    background: rgba(16, 185, 129, 0.1) !important;
    color: rgb(16, 185, 129) !important;
}
.form-group select option[value="Broadway"] {
    background: rgba(245, 158, 11, 0.1) !important;
    color: rgb(245, 158, 11) !important;
}
.form-group select option[value="Orchestral"] {
    background: rgba(63, 130, 246, 0.1) !important;
    color: rgb(63, 130, 246) !important;
}
.form-group select option[value="Soundtrack"] {
    background: rgba(139, 92, 246, 0.1) !important;
    color: rgb(139, 92, 246) !important;
}
.form-group select option[value="Video-Game"] {
    background: rgba(16, 185, 129, 0.1) !important;
    color: rgb(16, 185, 129) !important;
}
.form-group select option[value="Meme"] {
    background: rgba(245, 158, 11, 0.1) !important;
    color: rgb(245, 158, 11) !important;
}
.form-group select option[value="Holiday"] {
    background: rgba(239, 68, 68, 0.1) !important;
    color: rgb(239, 68, 68) !important;
}

/* Difficulty option colors */
.form-group select option[value="Easy"] {
    background: rgba(34, 197, 94, 0.1) !important;
    color: rgb(34, 197, 94) !important;
}
.form-group select option[value="Medium"] {
    background: rgba(245, 158, 11, 0.1) !important;
    color: rgb(245, 158, 11) !important;
}
.form-group select option[value="Hard"] {
    background: rgba(239, 68, 68, 0.1) !important;
    color: rgb(239, 68, 68) !important;
}
.form-group select option[value="Impossible"] {
    background: rgba(168, 85, 247, 0.1) !important;
    color: rgb(168, 85, 247) !important;
}

/* Better select dropdown styling for dark themes */
.form-group select {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.form-group select option {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    padding: 8px !important;
}

/* Force override any browser default styling */
.form-group select option:checked {
    background-color: var(--accent) !important;
    color: white !important;
}