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


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

.hx-player{

position:fixed;

left:20px;

right:20px;

bottom:20px;

height:92px;

background:rgba(14,18,29,.92);

backdrop-filter:blur(24px);

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

border-radius:26px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 24px;

z-index:9999;

box-shadow:

0 20px 70px rgba(0,0,0,.45);

}


/* ==========================================================
   LEFT
========================================================== */

.hx-player-left{

display:flex;

align-items:center;

gap:18px;

width:320px;

}


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

.hx-player-cover{

width:64px;

height:64px;

border-radius:18px;

overflow:hidden;

flex-shrink:0;

}

.hx-player-cover img{

width:100%;

height:100%;

object-fit:cover;

}


/* ==========================================================
   INFO
========================================================== */

.hx-player-info{

display:flex;

flex-direction:column;

overflow:hidden;

}

.hx-player-title{

font-size:16px;

font-weight:700;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

.hx-player-artist{

font-size:13px;

margin-top:4px;

color:var(--hx-text-muted);

}


/* ==========================================================
   CENTER
========================================================== */

.hx-player-center{

flex:1;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

}


/* ==========================================================
   CONTROLS
========================================================== */

.hx-player-controls{

display:flex;

align-items:center;

gap:20px;

margin-bottom:14px;

}


/* ==========================================================
   BUTTON
========================================================== */

.hx-player-btn{

width:44px;

height:44px;

border:none;

border-radius:50%;

background:transparent;

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

cursor:pointer;

transition:.3s;

color:var(--hx-text);

}

.hx-player-btn:hover{

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

}


/* ==========================================================
   PLAY BUTTON
========================================================== */

.hx-player-play{

width:58px;

height:58px;

border-radius:50%;

border:none;

cursor:pointer;

background:var(--hx-gradient-primary);

color:white;

font-size:22px;

display:flex;

align-items:center;

justify-content:center;

transition:.3s;

}

.hx-player-play:hover{

transform:scale(1.08);

box-shadow:

0 10px 35px rgba(79,140,255,.35);

}


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

.hx-progress-wrap{

display:flex;

align-items:center;

gap:14px;

width:100%;

}

.hx-time{

font-size:12px;

color:var(--hx-text-muted);

min-width:40px;

text-align:center;

}

.hx-progress{

flex:1;

height:6px;

border-radius:999px;

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

overflow:hidden;

cursor:pointer;

}

.hx-progress-bar{

height:100%;

width:35%;

background:var(--hx-gradient-primary);

border-radius:999px;

}

/* ==========================================================
   RIGHT SIDE
========================================================== */

.hx-player-right{

display:flex;

align-items:center;

justify-content:flex-end;

gap:18px;

width:320px;

}


/* ==========================================================
   ICON BUTTON
========================================================== */

.hx-player-icon{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

cursor:pointer;

transition:.3s;

color:var(--hx-text-light);

background:transparent;

}

.hx-player-icon:hover{

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

color:white;

}


/* ==========================================================
   ACTIVE ICON
========================================================== */

.hx-player-icon.active{

color:var(--hx-primary);

background:rgba(79,140,255,.12);

}


/* ==========================================================
   LIKE
========================================================== */

.hx-player-like.active{

color:#ff4d8d;

}


/* ==========================================================
   SHUFFLE
========================================================== */

.hx-player-shuffle.active{

color:#10B981;

}


/* ==========================================================
   REPEAT
========================================================== */

.hx-player-repeat.active{

color:#F59E0B;

}


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

.hx-volume{

display:flex;

align-items:center;

gap:14px;

}

.hx-volume-slider{

width:120px;

height:6px;

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

border-radius:999px;

overflow:hidden;

cursor:pointer;

position:relative;

}

.hx-volume-level{

height:100%;

width:70%;

background:var(--hx-gradient-primary);

border-radius:999px;

}


/* ==========================================================
   QUEUE
========================================================== */

.hx-player-queue{

position:absolute;

right:20px;

bottom:110px;

width:360px;

max-height:500px;

overflow:auto;

border-radius:24px;

background:rgba(14,18,29,.97);

backdrop-filter:blur(25px);

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

padding:24px;

display:none;

box-shadow:0 25px 80px rgba(0,0,0,.45);

}

.hx-player-queue.show{

display:block;

}


/* ==========================================================
   QUEUE ITEM
========================================================== */

.hx-queue-item{

display:flex;

align-items:center;

gap:14px;

padding:14px;

border-radius:18px;

transition:.3s;

cursor:pointer;

}

.hx-queue-item:hover{

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

}

.hx-queue-item img{

width:56px;

height:56px;

border-radius:14px;

object-fit:cover;

}

.hx-queue-title{

font-size:15px;

font-weight:700;

margin-bottom:4px;

}

.hx-queue-artist{

font-size:13px;

color:var(--hx-text-muted);

}


/* ==========================================================
   NOW PLAYING
========================================================== */

.hx-now-playing{

background:rgba(79,140,255,.10);

border:1px solid rgba(79,140,255,.18);

}


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

.hx-player-menu{

display:flex;

align-items:center;

gap:10px;

}


/* ==========================================================
   SPEED
========================================================== */

.hx-speed{

padding:8px 14px;

border-radius:999px;

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

font-size:13px;

cursor:pointer;

transition:.3s;

}

.hx-speed:hover{

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

}


/* ==========================================================
   QUALITY
========================================================== */

.hx-quality{

padding:8px 14px;

border-radius:999px;

background:rgba(79,140,255,.12);

color:#58A6FF;

font-size:13px;

font-weight:600;

}


/* ==========================================================
   VISUALIZER
========================================================== */

.hx-visualizer{

display:flex;

align-items:flex-end;

gap:3px;

height:20px;

}

.hx-visualizer span{

width:3px;

border-radius:4px;

background:var(--hx-primary);

animation:hxVisualizer 1.2s infinite ease-in-out;

}

.hx-visualizer span:nth-child(1){

height:8px;

animation-delay:.1s;

}

.hx-visualizer span:nth-child(2){

height:18px;

animation-delay:.3s;

}

.hx-visualizer span:nth-child(3){

height:12px;

animation-delay:.5s;

}

.hx-visualizer span:nth-child(4){

height:20px;

animation-delay:.7s;

}

.hx-visualizer span:nth-child(5){

height:10px;

animation-delay:.9s;

}


/* ==========================================================
   VISUALIZER ANIMATION
========================================================== */

@keyframes hxVisualizer{

0%{

transform:scaleY(.4);

}

50%{

transform:scaleY(1);

}

100%{

transform:scaleY(.4);

}

}

/* ==========================================================
   MINI PLAYER MODE
========================================================== */

.hx-player-mini{

height:72px;

padding:0 18px;

}

.hx-player-mini .hx-player-cover{

width:50px;

height:50px;

}

.hx-player-mini .hx-player-play{

width:48px;

height:48px;

font-size:18px;

}


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

.hx-player-loading{

pointer-events:none;

opacity:.7;

}

.hx-player-loading .hx-progress-bar{

background-size:200% 100%;

background-image:linear-gradient(
90deg,
#4f8cff,
#7c3aed,
#4f8cff);

animation:hxPlayerLoading 1.5s linear infinite;

}

@keyframes hxPlayerLoading{

0%{

background-position:0%;

}

100%{

background-position:200%;

}

}


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

.hx-player.playing .hx-player-cover img{

animation:hxRotateCover 18s linear infinite;

}

@keyframes hxRotateCover{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}


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

.hx-progress:hover{

height:8px;

transition:.2s;

}

.hx-progress:hover .hx-progress-bar{

filter:brightness(1.15);

}


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

.hx-volume-slider:hover{

height:8px;

transition:.2s;

}


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

.hx-player{

transition:all .35s ease;

}

.hx-player:hover{

box-shadow:

0 25px 90px rgba(79,140,255,.12),

0 15px 45px rgba(0,0,0,.45);

}


/* ==========================================================
   GLASS EFFECT
========================================================== */

.hx-player::before{

content:"";

position:absolute;

inset:0;

border-radius:inherit;

background:

linear-gradient(

180deg,

rgba(255,255,255,.04),

transparent);

pointer-events:none;

}


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

.hx-player-title{

position:relative;

overflow:hidden;

}

.hx-player-title span{

display:inline-block;

white-space:nowrap;

}

.hx-player-title.marquee span{

animation:hxMarquee 10s linear infinite;

}

@keyframes hxMarquee{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-100%);

}

}


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

.hx-player.hidden{

transform:translateY(130%);

opacity:0;

pointer-events:none;

}


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

@media(max-width:992px){

.hx-player{

left:12px;

right:12px;

bottom:12px;

padding:0 18px;

}

.hx-player-left{

width:auto;

}

.hx-player-right{

width:auto;

}

.hx-volume-slider{

display:none;

}

}

@media(max-width:768px){

.hx-player{

height:82px;

}

.hx-player-center{

padding:0 12px;

}

.hx-player-cover{

width:56px;

height:56px;

}

.hx-player-title{

font-size:14px;

}

.hx-player-artist{

font-size:12px;

}

.hx-player-controls{

gap:12px;

}

.hx-player-btn{

width:38px;

height:38px;

font-size:16px;

}

.hx-player-play{

width:50px;

height:50px;

font-size:20px;

}

.hx-player-icon:nth-child(n+4){

display:none;

}

.hx-player-queue{

width:calc(100vw - 24px);

right:12px;

left:12px;

}

}

@media(max-width:480px){

.hx-player{

border-radius:18px;

}

.hx-player-right{

display:none;

}

.hx-time{

display:none;

}

.hx-progress-wrap{

margin-top:4px;

}

}