/* ===================================================
   THEME2026 PLAYER.CSS
=================================================== */

.player-box{

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

backdrop-filter:blur(20px);

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

border-radius:24px;

padding:25px;

margin:30px 0;

box-shadow:0 15px 40px rgba(0,0,0,.35);

}

/* Album Row */

.player-top{

display:flex;

align-items:center;

gap:20px;

flex-wrap:wrap;

}

.player-cover{

width:90px;

height:90px;

border-radius:18px;

object-fit:cover;

box-shadow:0 8px 20px rgba(0,0,0,.4);

}

.player-info{

flex:1;

}

.player-title{

font-size:22px;

font-weight:700;

color:#fff;

margin-bottom:5px;

}

.player-artist{

font-size:15px;

color:#9ca3af;

}

/* Controls */

.player-controls{

display:flex;

justify-content:center;

align-items:center;

gap:15px;

margin-top:25px;

}

.player-btn{

width:48px;

height:48px;

border:none;

border-radius:50%;

background:#1f2937;

color:#fff;

cursor:pointer;

transition:.3s;

}

.player-btn:hover{

background:#06b6d4;

transform:scale(1.08);

}

.player-btn.play{

width:60px;

height:60px;

background:#ef4444;

font-size:20px;

}

/* Progress */

.progress-area{

margin-top:25px;

}

.progress-bar{

width:100%;

height:6px;

background:#2d3748;

border-radius:50px;

overflow:hidden;

}

.progress{

height:100%;

width:0%;

background:linear-gradient(90deg,#06b6d4,#22c55e);

border-radius:50px;

transition:.2s;

}

/* Time */

.player-time{

display:flex;

justify-content:space-between;

margin-top:8px;

font-size:13px;

color:#9ca3af;

}

/* Volume */

.volume-area{

display:flex;

align-items:center;

gap:12px;

margin-top:20px;

}

.volume-area i{

color:#06b6d4;

}

.volume-area input{

flex:1;

accent-color:#06b6d4;

}

/* HTML5 Audio */

audio{

width:100%;

margin-top:20px;

border-radius:14px;

filter:brightness(.95);

}

/* Download Buttons */

.player-download{

display:flex;

gap:15px;

margin-top:30px;

flex-wrap:wrap;

}

.player-download a{

flex:1;

min-width:180px;

text-align:center;

padding:16px;

border-radius:16px;

font-weight:600;

text-decoration:none;

transition:.3s;

color:#fff;

}

.player-download a.hd{

background:#16a34a;

}

.player-download a.normal{

background:#2563eb;

}

.player-download a.low{

background:#6b7280;

}

.player-download a:hover{

transform:translateY(-4px);

box-shadow:0 10px 25px rgba(0,0,0,.35);

}

/* Equalizer Animation */

.equalizer{

display:flex;

align-items:flex-end;

gap:4px;

height:24px;

margin-left:10px;

}

.equalizer span{

width:4px;

background:#06b6d4;

border-radius:4px;

animation:equalizer 1s infinite ease-in-out;

}

.equalizer span:nth-child(2){

animation-delay:.2s;

}

.equalizer span:nth-child(3){

animation-delay:.4s;

}

.equalizer span:nth-child(4){

animation-delay:.6s;

}

@keyframes equalizer{

0%{

height:6px;

}

50%{

height:24px;

}

100%{

height:8px;

}

}

/* Mobile */

@media(max-width:768px){

.player-top{

text-align:center;

justify-content:center;

}

.player-cover{

width:80px;

height:80px;

}

.player-controls{

gap:10px;

}

.player-btn{

width:42px;

height:42px;

}

.player-btn.play{

width:55px;

height:55px;

}

.player-download{

flex-direction:column;

}

}
/*=========================================
 Theme2026 Sticky Player
=========================================*/

.sticky-player{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:88px;
    background:rgba(15,15,20,.95);
    backdrop-filter:blur(18px);
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    z-index:99999;
    box-shadow:0 -10px 30px rgba(0,0,0,.35);
}

/* Left */

.player-left{
    display:flex;
    align-items:center;
    width:30%;
}

.player-left img{
    width:60px;
    height:60px;
    object-fit:cover;
    border-radius:12px;
    margin-right:15px;
    box-shadow:0 5px 18px rgba(0,0,0,.35);
}

.player-info{
    overflow:hidden;
}

#playerTitle{
    color:#fff;
    font-size:16px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

#playerArtist{
    color:#bdbdbd;
    font-size:13px;
    margin-top:4px;
}

/* Center */

.player-center{
    width:40%;
}

.player-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-bottom:10px;
}

.player-buttons button{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    background:#252525;
    color:#fff;
    transition:.25s;
}

.player-buttons button:hover{
    background:#e63946;
    transform:scale(1.08);
}

#playPause{
    width:52px;
    height:52px;
    background:#e63946;
    font-size:20px;
}

#playPause:hover{
    background:#ff4d5d;
}

/* Progress */

.player-progress{
    display:flex;
    align-items:center;
    gap:10px;
}

.player-progress span{
    color:#ddd;
    font-size:12px;
    min-width:42px;
}

#progressBar{
    flex:1;
    accent-color:#e63946;
    cursor:pointer;
}

/* Right */

.player-right{
    width:20%;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;
}

.player-right i{
    color:#fff;
}

#volumeBar{
    width:120px;
    accent-color:#e63946;
    cursor:pointer;
}

/* Hide */

.sticky-player.hidden{
    transform:translateY(100%);
    transition:.35s;
}

/* Body Space */

body{
    padding-bottom:95px;
}

/* Mobile */

@media(max-width:768px){

.sticky-player{
    height:80px;
    padding:10px;
}

.player-left{
    width:48%;
}

.player-center{
    width:52%;
}

.player-right{
    display:none;
}

.player-left img{
    width:48px;
    height:48px;
}

#playerTitle{
    font-size:14px;
}

#playerArtist{
    font-size:11px;
}

.player-buttons{
    gap:8px;
}

.player-buttons button{
    width:36px;
    height:36px;
}

#playPause{
    width:44px;
    height:44px;
}

.player-progress span{
    display:none;
}

}