/* ======================================================
PAGE OFFSET (voor player)
====================================================== */

body{
padding-bottom:80px;
}

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

#pp-player-container{

position:fixed;
bottom:env(safe-area-inset-bottom,0);
left:0;

width:100%;

z-index:9999;

display:flex;
align-items:center;
gap:12px;

background:#111;
color:#fff;

padding:10px;

box-shadow:0 -2px 6px rgba(0,0,0,.3);

}

#pp-player-container img{

width:50px;
height:50px;

border-radius:4px;
object-fit:cover;

}

#pp-player-container button{

background:none;
border:none;

color:#fff;

font-size:18px;
cursor:pointer;

}

.pp-controls{
display:flex;
gap:10px;
}

/* track info */

.pp-trackinfo{

display:flex;
flex-direction:column;
flex:1;
min-width:0;

}

/* title */

#pp-title{

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

overflow:hidden;
text-overflow:ellipsis;

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

}

#pp-sub{

font-size:14px;
opacity:.85;

}

#pp-meta{

font-size:13px;
opacity:.7;

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

}

/* ======================================================
VOLUME
====================================================== */

.pp-volume-container{

position:relative;

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

height:50px;
width:40px;

}

.pp-speaker{
font-size:18px;
cursor:pointer;
}

#pp-volume{

    position:absolute;

    /* ⬇️ HIER ZIT DE OPLOSSING */
    bottom: calc(100% + 12px);   /* extra ruimte boven speaker */
    left: 50%;
    transform: translateX(-50%);

    writing-mode: vertical-lr;
    direction: rtl;

    width: 8px;
    height: 90px;

    border-radius: 4px;
    background: #ccc;

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

    z-index: 10000; /* zekerheid */
}

.pp-volume-container.show-volume #pp-volume{
  opacity:1;
  pointer-events:auto;
}