/* ===============================
🔥 FULLSCREEN MOBILE PLAYER
=============================== */

.mobile-player {
  position: fixed;
  inset: 0;
  z-index: 99999;

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

  padding: 24px;

  background: radial-gradient(circle at top, #0f1220, #05070f);
  backdrop-filter: blur(30px);

  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: all 0.35s ease;
}

/* ACTIVE STATE */
.mobile-player.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ===============================
⬇ CLOSE BTN
=============================== */
.mp-header {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  text-align: center;
}

#mpClose {
  font-size: 28px;
  color: white;
  opacity: 0.7;
  cursor: pointer;
}

/* ===============================
🎧 COVER
=============================== */
#mpCover {
  width: 260px;
  height: 260px;
  object-fit: cover;
  border-radius: 22px;

  box-shadow:
    0 20px 60px rgba(0,0,0,0.6),
    0 0 60px rgba(255,77,109,0.2),
    0 0 80px rgba(0,240,255,0.15);

  margin-bottom: 20px;
}

/* ===============================
🎵 TITLE
=============================== */
#mpTitle {
  font-size: 18px;
  font-weight: 600;
  color: white;
  text-align: center;

  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  margin-bottom: 20px;
}

/* ===============================
🎮 CONTROLS
=============================== */
.mp-controls {
  display: flex;
  align-items: center;
  gap: 30px;

  margin: 20px 0;
}

.mp-controls button {
  background: transparent;
  border: none;
  color: white;
  font-size: 26px;
}

#mpPlay {
  width: 70px;
  height: 70px;

  border-radius: 50%;

  background: linear-gradient(135deg, #00f0ff, #ff4d6d);

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

  font-size: 20px;

  box-shadow:
    0 10px 30px rgba(0,240,255,0.4),
    0 0 40px rgba(255,77,109,0.35);
}

/* ===============================
📊 PROGRESS
=============================== */
#mpProgress {
  width: 90%;
  height: 4px;
  border-radius: 10px;

  background: rgba(255,255,255,0.1);
  margin-top: 20px;
}

#mpBar {
  height: 100%;
  width: 0%;
  border-radius: 10px;

  background: linear-gradient(90deg, #ff4d6d, #00f0ff);
}

/* ===============================
⏱ TIME
=============================== */
.mp-time {
  width: 90%;
  display: flex;
  justify-content: space-between;

  font-size: 12px;
  color: rgba(255,255,255,0.6);

  margin-top: 6px;
}

/* ===============================
📱 ONLY MOBILE
=============================== */
@media (min-width: 769px) {
  .mobile-player {
    display: none !important;
  }
}
/* ===============================
🔥 ACTION BAR
=============================== */
.mp-actions {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin-top: 25px;
}

.mp-actions button {
  background: rgba(255,255,255,0.05);
  border: none;
  color: white;
  font-size: 18px;
  padding: 12px;
  border-radius: 12px;

  backdrop-filter: blur(10px);
}

/* 🔥 ACTIVE LIKE */
.mp-actions .active {
  color: #ff4d6d;
}

/* ===============================
🔥 SWIPE FEEL
=============================== */
.mobile-player {
  touch-action: none;
}
/* ===============================
🔥 FORCE PLAY BUTTON ON TOP
=============================== */
#mpPlay {
  position: relative;
  z-index: 9999; /* 👈 highest priority */
}

/* also make sure controls sit above everything */
.mp-controls {
  position: relative;
  z-index: 9998;
}

/* prevent cover or overlays from blocking clicks */
.mp-cover,
.mp-bg,
.mp-overlay {
  pointer-events: none;
}
/* ===============================
🔥 DYNAMIC COVER BACKGROUND
=============================== */


.mobile-player {


  background-color: rgba(5,8,18,0.92);


  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;


  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);


  position: fixed;
  overflow: hidden;


}


/* extra glass layer */
.mobile-player::before {


  content: "";


  position: absolute;
  inset: 0;


  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.28),
      rgba(0,0,0,0.72)
    );


  z-index: 0;


}


/* bring content above glass */
.mobile-player > * {


  position: relative;
  z-index: 2;


}
/* ===============================
🔽 SLIDE ARROW BACK TO TOP
=============================== */


.mp-header{
  position: absolute;
  top: 18px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 20;
}


#mpClose{
  width: 46px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0;
  cursor: pointer;
  transition: 0.25s ease;
}


#mpClose:hover{
  background: rgba(255,255,255,0.7);
  transform: scaleX(1.08);
}
/* ===============================
🔥 PRO MENU SHEET
=============================== */


#proMenuSheet{


    position:fixed;
    inset:0;


    z-index:999999999;
}


/* BACKDROP */


.sheet-backdrop{


    position:absolute;
    inset:0;


    background:rgba(0,0,0,.6);


    backdrop-filter:blur(12px);
}


/* PANEL */


.sheet-panel{


    position:absolute;


    left:0;
    bottom:0;


    width:100%;


    background:#0b1020;


    border-radius:28px 28px 0 0;


    padding:22px;


    display:flex;
    flex-direction:column;
    gap:14px;


    animation:sheetUp .35s ease;
}


/* HANDLE */


.sheet-handle{


    width:70px;
    height:6px;


    border-radius:999px;


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


    margin:0 auto 8px;
}


/* TITLE */


.sheet-title{


    color:white;


    font-size:20px;
    font-weight:700;


    text-align:center;


    margin-bottom:10px;
}


/* BUTTONS */


.sheet-item{


    height:56px;


    border:none;


    border-radius:18px;


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


    color:white;


    font-size:16px;


    cursor:pointer;
}


/* BUY */


.sheet-item.buy{


    background:
    linear-gradient(
      135deg,
      #00f0ff,
      #ff4d6d
    );
}


/* DELETE */


.sheet-item.delete{


    background:
    linear-gradient(
      135deg,
      #ff2d55,
      #ff0000
    );
}


/* ANIMATION */


@keyframes sheetUp{


    from{
        transform:translateY(100%);
    }


    to{
        transform:translateY(0);
    }
}
/* ===============================
🔥 CART POWER COUNT
=============================== */


#cartCount.bump{


    animation:cartPop .35s ease;
}


@keyframes cartPop{


    0%{
        transform:scale(.7);
    }


    50%{
        transform:scale(1.35);
    }


    100%{
        transform:scale(1);
    }
}


/* ===============================
🔥 CART TOAST
=============================== */


#cartToast{


    position:fixed;


    left:50%;
    bottom:120px;


    transform:
    translateX(-50%)
    translateY(30px);


    background:
    linear-gradient(
      135deg,
      #00f0ff,
      #ff4d6d
    );


    color:white;


    padding:
    16px 22px;


    border-radius:18px;


    font-weight:700;


    z-index:999999999;


    opacity:0;


    transition:.35s ease;
}


#cartToast.active{


    opacity:1;


    transform:
    translateX(-50%)
    translateY(0);
}
/* ===============================
🔥 FORCE HIDE MINI PLAYER BTNS ON MOBILE
=============================== */
@media screen and (max-width: 768px) {
  body .global-player #gpShuffle,
  body .global-player #gpRepeat,
  body .global-player #gpDownload,
  body #gpShuffle,
  body #gpRepeat,
  body #gpDownload {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
  }

  /* Re-center prev/play/next after hiding */
  body .global-player .gp-controls {
    display: flex !important;
    gap: 24px !important;
    justify-content: center !important;
    align-items: center !important;
  }

  body .global-player #gpPrev {
    order: 1 !important;
  }
  body .global-player #gpPlay {
    order: 2 !important;
  }
  body .global-player #gpNext {
    order: 3 !important;
  }
}
/* ===============================
   PREV / PLAY / NEXT - WITH GAP
   =============================== */

#mobilePlayer .mp-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 120px !important; /* GAP IS BACK BABY */
  margin: 32px auto !important;
  width: 100% !important;
  max-width: 300px !important;
}

/* PREV & NEXT */
#mobilePlayer #mpPrev,
#mobilePlayer #mpNext {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin: 0 !important; /* Remove negative margin */
  z-index: 1 !important;
}

#mobilePlayer #mpPrev svg,
#mobilePlayer #mpNext svg {
  width: 24px !important;
  height: 24px !important;
  fill: currentColor !important;
  display: block !important;
}

/* PLAY BUTTON - CENTER BOSS */
#mobilePlayer #mpPlay {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  background: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #000 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 32px rgba(255,255,255,0.4) !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
  margin: 0 !important;
}

#mobilePlayer #mpPlay svg {
  width: 32px !important;
  height: 32px !important;
  fill: currentColor !important;
  display: block !important;
  margin-left: 2px !important;
}

/* PROGRESS BAR - SLIGHTLY THICKER */
#mobilePlayer #mpProgress {
  width: calc(100% - 48px) !important;
  height: 6px !important; /* Was 4px */
  background: rgba(255,255,255,0.1) !important;
  border-radius: 3px !important; /* Was 2px - match height */
  margin: 0 auto 12px !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

#mobilePlayer #mpBar {
  height: 100% !important;
  background: #fff !important;
  border-radius: 3px !important; /* Match parent */
  box-shadow: 0 0 16px rgba(255,255,255,0.4) !important;
  transition: width 0.1s linear !important;
}
/* GLASS OVERLAY - TRANSLUCENT */
#mobilePlayer::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.35) !important; /* Lighter - was 0.75 */
  backdrop-filter: blur(40px) saturate(150%) !important; /* Was blur(80px) */
  -webkit-backdrop-filter: blur(40px) saturate(150%) !important;
  z-index: 1 !important;
}
/* VIGNETTE - DARKEN EDGES FOR AURA FOCUS */
#mobilePlayer::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.4) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important; /* Same level as glass */
}
/* VIGNETTE - DARKEN EDGES FOR AURA FOCUS */
#mobilePlayer::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.4) 100%
  ) !important;
  pointer-events: none !important; /* THIS FIXES CLICK-THROUGH */
  z-index: 1 !important;
}
#mobilePlayer {
  /*... your existing styles... */
  background-size: cover!important;
  background-position: center!important;
  background-repeat: no-repeat!important;
  transition: background-image 0.4s ease!important;
}