/* PLAYER STYLE */
 .music-player {
     position: fixed;
     bottom: 20px;
     right: 20px;
     background: rgba(33, 33, 34, 0.5);
     backdrop-filter: blur(10px);
     padding: 12px;
     border-radius: 30px;
     display: flex;
     align-items: center;
     gap: 12px;
     box-shadow: 0 8px 20px rgba(33, 33, 34, 0.5);
     color: #fff;
     width: 80px;
     justify-content: center;
     transition: width 0.4s ease, padding 0.4s ease;
     overflow: hidden;
 }

 .music-player:hover {
     width: 140px;
     padding: 12px 5px 12px 30px;
     justify-content: flex-start;
 }

 /* ICON CONTROL */
 .music-player i {
     font-size: 20px;
     color: #333;
     background: #fff;
     border-radius: 50%;
     width: 35px;
     height: 35px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     transition: transform 0.3s ease, background 0.3s ease, opacity 0.4s ease;
     opacity: 0;
     pointer-events: none;
 }

 .music-player:hover i {
     opacity: 1;
     pointer-events: auto;
 }

 .music-player i:hover {
     background: #ffdde1;
     transform: scale(1.1);
 }

 /* Equalizer bars */
 .bars {
     display: flex;
     gap: 3px;
     height: 20px;
     padding-right: 25px;
     align-items: flex-end;
 }

 .bar {
     width: 4px;
     background: #fff;
     border-radius: 2px;
     animation: bounce 1s infinite;
 }

 .bar:nth-child(2) {
     animation-delay: 0.2s;
 }

 .bar:nth-child(3) {
     animation-delay: 0.4s;
 }

 .bar:nth-child(4) {
     animation-delay: 0.6s;
 }

 .bars.paused .bar {
     animation-play-state: paused;
     opacity: 0.3;
 }

 @keyframes bounce {

     0%,
     100% {
         height: 5px;
     }

     50% {
         height: 20px;
     }
 }

 @media only screen and (max-width: 767px) {
     .music-player:hover {
         width: 125px;
         padding: 12px 5px 12px 20px;
     }

     .music-player i {
         font-size: 14px;
         color: #333;
         background: #fff;
         border-radius: 50%;
         width: 30px;
         height: 30px;
     }
 }