/* =========================
   MODERN STICKY PLAYER
========================= */

.sticky-player{

    position:fixed;
    bottom:12px;
    left:50%;
    
    will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;

    opacity:0;

    transform:translateX(-50%) translateY(20px);

    transition:
    opacity .25s ease,
    transform .25s ease;

    width:95%;
    max-width:720px;

    z-index:999999;

    border-radius:22px;

    background:rgb(17 19 23 / 94%);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,0.08);

    box-shadow:
    0 8px 35px rgba(0,0,0,0.45);

    padding:8px 12px;

    box-sizing:border-box;

}

.hidden{
    display:none;
}

.sticky-player-inner{

    display:flex;
    align-items:center;
    transform:translateZ(0);
    justify-content:space-between;

    gap:12px;
}

.player-left{

    display:flex;
    align-items:center;

    min-width:0;

    flex:1;
}

.art-wrapper{

    position:relative;

    margin-right:12px;
}

#player-art{

    width:48px;
    height:48px;

    border-radius:14px;

    object-fit:cover;

    box-shadow:
    0 4px 18px rgba(0,0,0,0.4);

    animation:none;
}

/* rotating image while playing */
.sticky-player.playing #player-art{

    animation:rotateArt 12s linear infinite;
}

.live-dot{

    position:absolute;

    bottom:-2px;
    right:-2px;

    width:14px;
    height:14px;

    background:#7dff43;

    border-radius:50%;

    border:2px solid #1a001f;

    box-shadow:
    0 0 12px #7dff43;
}

.player-meta{

    display:flex;
    flex-direction:column;

    overflow:hidden;
}

#player-title{

    color:#ffffff;

    font-size:14px;
    font-weight:700;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    max-width:220px;
}

.player-status{

    color:#97d94c;

    font-size:11px;

    margin-top:3px;

    letter-spacing:1px;
}

.player-center{

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    margin-left:auto;
}

#play-toggle{

    width:46px;
    height:46px;

    border:none;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #97d94c,
        #56c91f
    );

    color:#ffffff;

    font-size:17px;
    font-weight:bold;

    cursor:pointer;

    transition:.25s;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:
    0 4px 18px rgba(151,217,76,.45);
}

#play-toggle:hover{

    transform:scale(1.06);
}


@keyframes spin{

    0%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(360deg);
    }
}

@keyframes rotateArt{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

@keyframes playerSlideUp{

    from{

        opacity:0;
        transform:
        translateX(-50%)
        translateY(30px);
    }

    to{

        opacity:1;
        transform:
        translateX(-50%)
        translateY(0);
    }
}

/* MOBILE */

@media(max-width:768px){

    .sticky-player{

        width:100%;

        left:0;
        bottom:0;

        transform:none;

        border-radius:18px 18px 0 0;

        padding:10px;
    }

    #player-title{

    max-width:120px;

    font-size:13px;
}

    #play-toggle{

        width:52px;
        height:52px;

        font-size:20px;
    }

    #player-art{

        width:52px;
        height:52px;
    }
}    
/* =========================
MARQUEE TITLE
========================= */

.marquee-wrap{

    width:100%;
    overflow:hidden;
}

#player-title{

    display:inline-block;

    min-width:100%;

    animation:marqueeMove 10s linear infinite;
}

@keyframes marqueeMove{

    0%{
        transform:translateX(0%);
    }

    100%{
        transform:translateX(-40%);
    }
}

/* =========================
LIVE STATUS
========================= */

.player-status{

    display:flex;
    align-items:center;

    gap:8px;

    margin-top:4px;
}

.live-text{

    color:#97d94c;

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;
}

/* DESKTOP FLOATING PLAYER */

@media(min-width:769px){

    .sticky-player{

        left:50%;
        bottom:0;

        transform:translateX(-50%);

        width: calc(100% - 340px);
        max-width: 1120px;
        min-width: 760px;

        padding:10px 18px;

        border-radius:22px 22px 0 0;

        background:rgb(17 19 23 / 94%);

        border-bottom:none;

        box-shadow:
        0 -2px 30px rgba(0,0,0,0.35);
    }

    .sticky-player-inner{

        gap:20px;
    }

    .player-left{

        flex:1;
    }

    #player-title{

        max-width:420px;

        font-size:15px;
    }

    #play-toggle{

        width:52px;
        height:52px;
    }

}    
.sticky-player.player-visible{

    opacity:1;

    transform:translateX(-50%) translateY(0);
}
@media(max-width:768px){

    .sticky-player.player-visible{

        transform:translateY(0);
    }
}
.player-status{

    display:flex;
    align-items:center;

    gap:8px;
}

.live-bars{

    display:flex;
    align-items:flex-end;

    gap:3px;

    height:12px;
}

.live-bars span{

    width:3px;

    background:#97d94c;

    border-radius:10px;

    animation:liveBars 1s infinite ease-in-out;
    
    animation-play-state: paused;
}
.radio-playing .live-bars span{

    animation-play-state: running;
}

.live-bars span:nth-child(1){

    height:5px;
    animation-delay:.1s;
}

.live-bars span:nth-child(2){

    height:10px;
    animation-delay:.2s;
}

.live-bars span:nth-child(3){

    height:7px;
    animation-delay:.3s;
}

@keyframes liveBars{

    0%,100%{

        transform:scaleY(.5);
        opacity:.5;
    }

    50%{

        transform:scaleY(1.4);
        opacity:1;
    }
}
select{

    appearance:auto !important;
    -webkit-appearance:auto !important;
    -moz-appearance:auto !important;
}

.bootstrap-select{

    display:block !important;
}

.bootstrap-select .dropdown-toggle{

    display:flex !important;
    align-items:center;
}    
.station-logo-wrap{

position:relative;

display:inline-block;

width:100%;

overflow:hidden;

border-radius:12px;

}

.station-mini-bars {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 3px;
    height: 29px;
    margin-top: 3px;
    margin-bottom: 2px;
}

.station-mini-bars span{

width:4px;

border-radius:10px;

background:linear-gradient(
to top,
#0cc500,
#fbff00,
#ff0000
);

animation:stationBars .9s infinite ease-in-out;

animation-play-state:paused;

transform-origin:bottom;
}

.radio-playing .station-mini-bars span{

animation-play-state:running;
}

.station-mini-bars span:nth-child(1){
height:6px;
animation-delay:.0s;
}

.station-mini-bars span:nth-child(2){
height:12px;
animation-delay:.1s;
}

.station-mini-bars span:nth-child(3){
height:18px;
animation-delay:.2s;
}

.station-mini-bars span:nth-child(4){
height:12px;
animation-delay:.3s;
}

.station-mini-bars span:nth-child(5){
height:6px;
animation-delay:.4s;
}

@keyframes stationBars{

0%,100%{
transform:scaleY(.4);
}

50%{
transform:scaleY(1.7);
}

}

.global-play-btn.playing{

background:#22c55e !important;

color:#fff !important;

}

#player-loader{

width:12px;
height:12px;

border:2px solid rgba(255,255,255,.25);

border-top:2px solid #97d94c;

border-radius:50%;

animation:playerLoading .8s linear infinite;

}

@keyframes playerLoading{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}

.live-dot.offline{

background:#ff3b30;

box-shadow:0 0 10px #ff3b30;
}

.live-dot.buffering{

background:#ffcc00;

box-shadow:0 0 10px #ffcc00;
}

.live-dot.live{

background:#7dff43;

box-shadow:0 0 12px #7dff43;
}

.station-play-circle{

width:72px;
height:72px;

border:none;

border-radius:50%;

background:linear-gradient(
135deg,
#97d94c,
#56c91f
);

color:#fff;

font-size:28px;

cursor:pointer;

display:flex;
align-items:center;
justify-content:center;

margin:0 auto;



transition:.25s;
}

.station-play-circle:hover{

transform:scale(1.05);
}

.station-play-circle.playing{

background:#22c55e;
}

.station-play-circle.loading{

pointer-events:none;
}

.station-play-circle .spinner{

width:22px;
height:22px;

border:3px solid rgba(255,255,255,.3);

border-top:3px solid #fff;

border-radius:50%;

animation:spin .8s linear infinite;
}

#toggle-spinner{

    width:22px;
    height:22px;

    border:3px solid rgba(255,255,255,.3);

    border-top:3px solid #ffffff;

    border-radius:50%;

    animation:spin .8s linear infinite;

    display:none;
}