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

.sticky-player{

    position:fixed;
    bottom:12px;
    left:50%;

    transform:translateX(-50%);

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

    z-index:999999;

    border-radius:22px;

    background:rgba(25, 0, 35, 0.92);

    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:10px 14px;

    box-sizing:border-box;

    animation:playerSlideUp .35s ease;
}

.hidden{
    display:none;
}

.sticky-player-inner{

    display:flex;
    align-items:center;
    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:56px;
    height:56px;

    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:15px;
    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:54px;
    height:54px;

    border:none;

    border-radius:50%;

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

    color:#ffffff;

    font-size:20px;
    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);
}

.custom-play-button{

    width:58px;
    height:58px;

    border-radius:50%;

    border:4px solid #d7d7d7;

    background:#69d126;

    color:#ffffff;

    font-size:26px;

    cursor:pointer;

    transition:0.3s;
}

.custom-play-button:hover{

    transform:scale(1.05);
}

.button-loading{

    border:4px solid rgba(255,255,255,0.3);

    border-top:4px solid #ffffff;

    border-radius:50%;

    width:22px;
    height:22px;

    animation:spin 1s linear infinite;

    margin:auto;
}

@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;
    }
}