/* ==========================================================
   PLAYER
   ========================================================== */

.progress{
    display:flex;
    align-items:center;
    gap:18px;
    margin:32px 0;
}

.progress{

    display:flex;

    align-items:center;

    gap:16px;

    margin:30px 0;

}

.progress-bar{

    flex:1;

    height:6px;

    overflow:hidden;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    position:relative;

}

.progress-fill{

    width:40%;

    height:100%;

    border-radius:999px;

    background:#33d6ff;

}



.time-start,
.time-end{

    font-size:.85rem;

    color:#8ea6c2;

    min-width:44px;

}

.controls{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:18px;

}

.player-btn{

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    font-size:1.15rem;

    color:white;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    transition:.25s;

}

.player-btn:hover{

    transform:translateY(-2px);

    background:#1f84ff;

    box-shadow:0 0 24px rgba(55,150,255,.45);

}

.play{

    width:96px;

    height:96px;

    border-radius:50%;

    background:

        linear-gradient(
            145deg,
            #41d8ff,
            #1b8fff);

    border:none;

    color:white;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:

        0 15px 45px rgba(45,180,255,.35);

    transition:.25s;

}

.play:hover{

    transform:scale(1.06);

    box-shadow:

        0 18px 55px rgba(45,180,255,.5);

}

.volume{

    display:flex;

    align-items:center;

    gap:12px;

    margin-left:auto;

}

.volume-bar{

    width:150px;

    height:6px;

    overflow:hidden;

    border-radius:999px;

    background:rgba(255,255,255,.08);

}

.volume-fill{

    width:72%;

    height:100%;

    background:#39b7ff;

    box-shadow:0 0 16px rgba(70,180,255,.7);

}
.icon{

    width:22px;
    height:22px;

    fill:currentColor;

    pointer-events:none;

}

.play .icon{

    width:28px;
    height:28px;

}

.volume-icon{

    width:20px;
    height:20px;

    color:#8ea6c2;

}

@keyframes liveProgress{

    from{

        left:-35%;

    }

    to{

        left:100%;

    }

}

#volumeSlider{

    width:140px;

    accent-color:#33d6ff;

    cursor:pointer;

}