/* Icecast Radio Player v11 Styles */
/* Container */
.irc-container {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: #222; color: #fff; display: flex;
    align-items: center; padding: 10px; flex-wrap: wrap;
    z-index: 9999; overflow: hidden; transition: background 0.5s;
}
/* Cover + radar */
.irc-cover { position: relative; margin-right: 10px; }
.irc-cover img {
    width: 60px; height: 60px; border-radius: 50%; object-fit: cover; z-index: 2;
}
.irc-radar {
    position: absolute; top: 50%; left: 50%;
    width: 80px; height: 80px; margin: -40px;
    border: 2px solid rgba(255,255,255,0.3); border-radius: 50%;
    opacity: 0; pointer-events: none;
}
.irc-container.playing .irc-radar {
    animation: radar 2s infinite; opacity: 1;
}
@keyframes radar {
    from { transform: scale(0.5); opacity: 0.7; }
    to { transform: scale(1.5); opacity: 0; }
}
/* Bars */
.irc-bars { display: none; gap: 4px; margin-left: 10px; align-items: flex-end; height: 30px; }
.irc-container.playing .irc-bars { display: flex; }
.irc-bar { width: 4px; background: rgba(255,255,255,0.5); animation: bar 1s infinite ease-in-out; }
.irc-bar:nth-child(1){ animation-delay:0s; }
.irc-bar:nth-child(2){ animation-delay:0.2s; }
.irc-bar:nth-child(3){ animation-delay:0.4s; }
.irc-bar:nth-child(4){ animation-delay:0.6s; }
.irc-bar:nth-child(5){ animation-delay:0.8s; }
@keyframes bar {
    0%,100%{ height:5px; }
    50%{ height:25px; }
}
/* Controls */
.irc-controls { display: flex; align-items: center; }
.irc-btn { background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 2rem; margin: 0 5px; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s; }
.irc-btn:hover { background: rgba(255,255,255,0.2); }
.irc-volume { width: 80px; margin: 0 5px; }
/* Social */
.irc-social { display: flex; gap: 8px; margin-left: auto; }
.irc-social-btn { color: #fff; font-size: 1.5rem; transition: color 0.3s; }
.irc-social-btn:hover { color: #ccc; }
/* Share Popup */

/* Hide bars on mobile */
@media (max-width: 600px) {
    .irc-bars { display: none !important; }
}

/* Hide bars on mobile */
@media (max-width: 600px) {
    .irc-bars { display: none !important; }
}


/* Mobile adjustments for v16 */
@media (max-width: 600px) {
    .irc-share-btn, .irc-social {
        display: none !important;
    }
    /* Adjust cover and info layout if needed */
    .irc-cover img {
        width: 50px !important;
        height: 50px !important;
    }
    .irc-volume {
        width: 50px !important;
    }
    .irc-btn.irc-play {
        width: 60px !important;
        height: 60px !important;
        font-size: 2rem !important;
    }
}

/* Track marquee for long text */
.irc-track {
    display: block;
    position: relative;
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}
.irc-track span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 10s linear infinite;
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Volume button and slider behavior */
.irc-volume-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
}
.irc-volume-slider {
    display: none;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
}


/* Share button right-aligned and smaller */
.irc-btn.irc-share-btn {
    margin-left: auto;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
}

/* Hide volume slider on mobile */
@media (max-width: 600px) {
    .irc-volume-slider {
        display: none !important;
    }
    .irc-share-btn {
        display: none !important;
    }
    .irc-social {
        display: none !important;
    }
}

/* Ensure bars hide on mobile */
@media (max-width: 600px) {
    .irc-bars {
        display: none !important;
    }
}


/* Mobile adjustments v21 */
/* Hide volume button on mobile */
@media (max-width: 600px) {
    .irc-volume-btn {
        display: none !important;
    }
    /* Position play button right of cover */
    .irc-cover {
        margin-right: 8px;
    }
    .irc-controls {
        order: 1;
        margin-left: 8px;
    }
    .irc-info {
        order: 2;
    }
}