/* Overlay */
#volumePopup{
    position:fixed;
    inset:0;

    background:rgba(8,29,24,0.65);
    backdrop-filter:blur(2vh);

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

    z-index:999;

    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
}

#volumePopup.open{
    opacity:1;
    pointer-events:all;
}

/* Popup */
#volumePopupContent{
    background: linear-gradient(
        180deg,
        rgba(20,60,60,0.6),
        rgba(15,20,22,0.85)
    );

    padding:4vh 4vh;
    border-radius:2vh;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2.5vh;

    border:0.1vh solid rgba(255,255,255,0.08);

    box-shadow:
        0 2vh 5vh rgba(0,0,0,0.6);

    position:relative;
}

/* Glow Aura (wie beim Artwork 😏) */
#volumePopupContent::before{
    content:"";
    position:absolute;
    inset:-10vh;

    background: radial-gradient(
        circle,
        rgba(var(--coverColor),0.25),
        transparent 70%
    );

    filter:blur(8vh);
    z-index:-1;
}

/* Close */
#volumeClose{
    position:absolute;
    right:1.5vh;
    top:1vh;
    font-size:2.2vh;
    cursor:pointer;
    opacity:.5;
    transition:all .2s ease;
}
#volumeClose:hover{
    opacity:1;
    transform:scale(1.1);
}

/* Value */
#volumeValue {
    font-size: 3vh;
    font-weight: bold;

    color: rgba(255,255,255,0.95);

    text-shadow:
        0 0 1vh rgba(var(--coverColor),0.7),
        0 0 2vh rgba(var(--coverColor),0.4);
}

/* Slider */
#volumeSlider{
    position:relative;
    width:6vh;
    height:30vh;
    display:flex;
    justify-content:center;
    cursor:pointer;
}

/* Track */
#volumeTrack{
    position:absolute;
    width:0.8vh;
    height:100%;

    background:rgba(255,255,255,0.1);
    border-radius:1vh;
}

/* Fill */
#volumeFill{
    position:absolute;
    bottom:0;
    width:0.8vh;
    height:50%;

    border-radius:1vh;

    background: linear-gradient(
        to top,
        rgba(var(--coverColor),0.9),
        rgba(var(--coverColor),0.6)
    );

    box-shadow:
        0 0 1vh rgba(var(--coverColor),0.4);
}

/* Handle */
#volumeHandle{
    position:absolute;
    width:3.2vh;
    height:1.8vh;

    border-radius:1vh;

    background: linear-gradient(
        180deg,
        #ffffff,
        #dcdcdc
    );

    bottom:50%;
    transform:translateY(50%);

    box-shadow:
        0 0.5vh 1vh rgba(0,0,0,0.5);

    transition: transform .1s ease;
}

/* Hover */
#volumeSlider:hover #volumeHandle{
    transform:translateY(50%) scale(1.08);

    box-shadow:
        0 0.8vh 2vh rgba(0,0,0,0.9),
        inset 0 0 1vh rgba(255,255,255,1),
        0 0 2vh rgba(var(--coverColor),0.6);
}