/* Define CSS variables for theming */
:root {
    --background-image: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #e73c7e, #ee7752);
    --background-size: 400% 400%;
    --background-animation: gradientBG 12s ease infinite;
    --text-color: #ffffff;
    --secondary-text-color: rgba(255, 255, 255, 0.7);
    --icon-color: rgba(255, 255, 255, 0.8);
    --player-bg: rgba(0, 0, 0, 0.2);
    --hover-bg: rgba(255, 255, 255, 0.1);
    --active-bg: rgba(255, 255, 255, 0.2);
    --list-item-active-bg: rgba(255, 255, 255, 0.2);
    --dropdown-bg: rgba(0, 0, 0, 0.7); /* Increased opacity */
}

body {
    font-family: 'Inter', sans-serif;
    transition: background 0.8s ease, color 0.8s ease;
    /* Applies a dark overlay on top of the background image/gradient for text readability */
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), var(--background-image);
    background-size: var(--background-size);
    background-position: center center;
    animation: var(--background-animation);
    color: var(--text-color);
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.glass-card {
    background: rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.25), 0 0 30px rgba(255, 255, 255, 0.6);
}

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }

.playing-indicator span { animation: bounce 1.2s infinite ease-in-out; }
.playing-indicator span:nth-child(2) { animation-delay: -1.0s; }
.playing-indicator span:nth-child(3) { animation-delay: -0.8s; }
@keyframes bounce { 0%, 80%, 100% { transform: scaleY(0.4); } 40% { transform: scaleY(1.0); } }

/* Apply CSS variables to elements */
.secondary-text { color: var(--secondary-text-color); }
.icon-btn { color: var(--icon-color); }
.icon-btn:hover { background-color: var(--hover-bg); }
.icon-btn:active { background-color: var(--active-bg); }
.player-btn { background-color: var(--player-bg); }
.station-item:hover { background-color: var(--hover-bg); }
.station-item.active { background-color: var(--list-item-active-bg); }

/* Dropdown menu styles */
#theme-dropdown {
    background-color: var(--dropdown-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform-origin: top right;
}