/* ===== TABS ===== */

.wpm-tabs{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:20px;
}

.wpm-tab{
padding:10px 16px;
border:1px solid #ccc;
background:#f5f5f5;
cursor:pointer;
font-size:15px;
}

.wpm-tab.active{
background:white;
border-bottom:3px solid #0073aa;
}


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

.wpm-player-box{
display:flex;
gap:25px;
border:1px solid #ddd;
padding:20px;
border-radius:12px;
margin-bottom:20px;
align-items:center;
}


/* ===== COVER ===== */

.wpm-cover img{
width:150px;
height:150px;
border-radius:12px;
object-fit:cover;
}


/* ===== TITLE ===== */

.wpm-song-title{
font-weight:600;
font-size:18px;
margin-bottom:8px;
}


/* ===== PROGRESS ===== */

.wpm-progress{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
}

.wpm-progress input{
flex:1;
}


/* ===== BUTTONS ===== */

.wpm-buttons{
display:flex;
gap:8px;
flex-wrap:wrap;
}

.wpm-buttons button{
padding:8px 12px;
cursor:pointer;
border:1px solid #ccc;
background:white;
font-size:15px;
}


/* ===== PLAYLIST ===== */

.wpm-playlist{
list-style:none;
padding:0;
margin-top:10px;
}

.wpm-playlist li{
padding:12px;
border-bottom:1px solid #eee;
cursor:pointer;
transition:all .2s;
}

.wpm-playlist li:hover{
background:#f5f7fb;
}

.wpm-track.active{
background:#e8f1ff;
border-left:4px solid #2b7cff;
font-weight:600;
}


/* =====================================================
   TABLET RESPONSIVE
   ===================================================== */

@media (max-width:1024px){

.wpm-player-box{
gap:15px;
padding:15px;
}

.wpm-cover img{
width:120px;
height:120px;
}

.wpm-buttons button{
padding:7px 10px;
font-size:14px;
}

}


/* =====================================================
   MOBILE RESPONSIVE
   ===================================================== */

@media (max-width:768px){

.wpm-player-box{
flex-direction:column;
align-items:center;
text-align:center;
}

.wpm-cover img{
width:130px;
height:130px;
}

.wpm-controls{
width:100%;
}

.wpm-progress{
width:100%;
}

.wpm-buttons{
justify-content:center;
}

.wpm-playlist li{
font-size:15px;
}

}


/* =====================================================
   SMALL MOBILE
   ===================================================== */

@media (max-width:480px){

.wpm-tab{
font-size:14px;
padding:8px 12px;
}

.wpm-buttons button{
font-size:14px;
padding:6px 8px;
}

.wpm-cover img{
width:110px;
height:110px;
}

.wpm-song-title{
font-size:16px;
}

}


/* =====================================================
   TAB SCROLL IF MANY LANGUAGES
   ===================================================== */

.wpm-tabs{
overflow-x:auto;
white-space:nowrap;
}

.wpm-tabs::-webkit-scrollbar{
height:6px;
}

.wpm-tabs::-webkit-scrollbar-thumb{
background:#ccc;
border-radius:10px;
}