/* Custom CSS for Radio Player */

/* Status Badge */
#stream-status .dot {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#stream-status.live .dot {
    background-color: #10b981; /* Tailwind green-500 */
    box-shadow: 0 0 10px #10b981;
}

#stream-status.loading .dot {
    background-color: #ffb800;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* CSS Bars Visualizer */
.bars {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.bar {
    transition: height 0.1s ease;
}

.radio-container.playing .bar {
    animation: eq 1s ease-in-out infinite alternate;
}

/* Randomize durations for 24 bars */
.radio-container.playing .bar:nth-child(3n) { animation-duration: 0.6s; }
.radio-container.playing .bar:nth-child(3n+1) { animation-duration: 0.8s; }
.radio-container.playing .bar:nth-child(3n+2) { animation-duration: 0.7s; }
.radio-container.playing .bar:nth-child(5n) { animation-duration: 1.1s; }
.radio-container.playing .bar:nth-child(7n) { animation-duration: 0.5s; }
.radio-container.playing .bar:nth-child(11n) { animation-duration: 1.3s; }

@keyframes eq {
    0% { height: 10%; }
    100% { height: 100%; }
}

/* Hide Scrollbar */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}