/* --- RADIO PLAYER CARD --- */
.radio-player-card {
    /* Define fallback station theme variables */
    --station-accent-color: #0d6efd;
    --station-play-icon-color: #ffffff;
    --station-active-bg: var(--station-accent-color);
    --station-active-text: #ffffff;
    
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 15px var(--card-shadow);
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.station-logo {
    height: 140px;
    max-width: 90%;
    object-fit: contain;
    /* REMOVED: No more slow transition */
}

/* --- PLAYER VISUALIZER --- */
.player-visualizer { display: flex; justify-content: center; align-items: center; height: 30px; gap: 4px; }
.player-visualizer .bar {
    width: 5px;
    height: 5px;
    background-color: var(--station-accent-color);
    border-radius: 2px;
    transform-origin: bottom;
    transform: scaleY(1);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* --- CUSTOM PLAYER CONTROLS --- */
.player-controls { display: flex; align-items: center; gap: 1.5rem; width: 100%; justify-content: center; }

.play-pause-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: var(--station-accent-color);
    color: var(--station-play-icon-color);
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: transform 0.2s ease, background-color 0.3s ease, filter 0.2s ease;
}
.play-pause-btn:hover { transform: scale(1.05); filter: brightness(1.1); }
.play-pause-btn .icon-pause { display: none; }
.play-pause-btn.playing .icon-play { display: none; }
.play-pause-btn.playing .icon-pause { display: block; }

.volume-control { display: flex; align-items: center; gap: 0.75rem; color: var(--caption-color); flex-grow: 1; max-width: 200px; }
.volume-control i { font-size: 1.5rem; }

.volume-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: var(--border-color); outline: none; border-radius: 4px; transition: background-color 0.3s ease; }
.volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--station-accent-color); cursor: pointer; border-radius: 50%; border: 3px solid var(--card-bg); transition: background-color 0.3s ease, border-color 0.3s ease; }
.volume-slider::-moz-range-thumb { width: 20px; height: 20px; background: var(--station-accent-color); cursor: pointer; border-radius: 50%; border: 3px solid var(--card-bg); }

/* --- STATION SWITCHER --- */
.station-switcher { width: 100%; border-top: 1px solid var(--border-color); padding-top: 1.5rem; margin-top: 1rem; }
.station-switcher .btn-group { width: 100%; }
.station-switcher .btn { border-color: var(--border-color); color: var(--caption-color); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.station-switcher .btn.active {
    background-color: var(--station-active-bg);
    color: var(--station-active-text);
    border-color: var(--station-active-bg);
}
.station-switcher .btn:hover:not(.active) { background-color: var(--border-color); color: var(--text-color); }

/* --- BREADCRUMB --- */
.breadcrumb a { color: var(--accent-color); text-decoration: none; }
.breadcrumb-item.active { color: var(--caption-color); }