/* =========================
   SPOTIFY-STYLE PLAYER
========================= */

/* Add padding to body when player is active */
body:has(.sp-player:not(.hidden)){
  padding-bottom:80px;
}

.sp-player{
  position:fixed;
  left:0; 
  right:0; 
  bottom:0;
  width:100%;
  background:#181818;
  color:#fff;
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 16px;
  z-index:9999;
  border-top:1px solid #282828;
  box-shadow:0 -2px 10px rgba(0,0,0,0.3);
  box-sizing:border-box;
}

.sp-player.hidden{display:none}

/* LEFT - Track Info */
.sp-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:200px;
  max-width:280px;
  flex-shrink:0;
}

.sp-art{
  width:56px;
  height:56px;
  background:#282828 center/cover no-repeat;
  border-radius:4px;
  flex-shrink:0;
}

.sp-meta{
  line-height:1.4;
  overflow:hidden;
}

.sp-title{
  font-size:14px;
  font-weight:400;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:4px;
}

.sp-title:hover{
  text-decoration:underline;
  cursor:pointer;
}

.sp-artist{
  font-size:12px;
  color:#b3b3b3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sp-artist:hover{
  text-decoration:underline;
  cursor:pointer;
  color:#fff;
}

/* CENTER - Controls & Progress */
.sp-center{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:0;
  max-width:100%;
}

.sp-controls{
  display:flex;
  align-items:center;
  gap:16px;
}

/* === FIX: BUTTON ICONS (STRUKTUR BARU) === */
.sp-controls button{
  width:32px;
  height:32px;
  border-radius:50%;
  border:0;
  background:transparent;
  color:#b3b3b3;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
  padding:0;
}

.sp-controls button:hover{
  color:#fff;
  transform:scale(1.06);
}

/* Play button khusus - lebih besar */
.sp-controls button#sp-play{
  width:32px;
  height:32px;
  background:#fff;
  color:#000;
}

.sp-controls button#sp-play:hover{
  transform:scale(1.06);
  background:#fff;
}

/* === ICON SIZING === */
.sp-controls button i{
  font-size:16px;
  line-height:1;
}

.sp-controls button#sp-play i{
  font-size:16px;
}

/* PROGRESS BAR */
.sp-progress{
  width:50%;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:#b3b3b3;
}

#sp-seek{
  flex:1;
  height:4px;
  -webkit-appearance:none;
  appearance:none;
  background:linear-gradient(to right, #1db954 0%, #1db954 var(--seek-before, 0%), #4d4d4d var(--seek-before, 0%), #4d4d4d 100%);
  border-radius:2px;
  outline:none;
  cursor:pointer;
  transition:background 0.1s;
}

#sp-seek::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:12px;
  height:12px;
  background:#fff;
  border-radius:50%;
  cursor:pointer;
  opacity:0;
  transition:opacity 0.2s;
  box-shadow:0 2px 4px rgba(0,0,0,0.5);
}

#sp-seek::-moz-range-thumb{
  width:12px;
  height:12px;
  background:#fff;
  border-radius:50%;
  border:0;
  cursor:pointer;
  opacity:0;
  transition:opacity 0.2s;
  box-shadow:0 2px 4px rgba(0,0,0,0.5);
}

#sp-seek:hover::-webkit-slider-thumb,
#sp-seek:hover::-moz-range-thumb{
  opacity:1;
}

.sp-progress span{
  min-width:40px;
  text-align:center;
}

/* RIGHT - Volume & Close */
.sp-right{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:160px;
  max-width:200px;
  justify-content:flex-end;
  flex-shrink:0;
}

.sp-vol-ico{
  color:#b3b3b3;
  cursor:pointer;
  display:flex;
  align-items:center;
  transition:color 0.2s;
}

.sp-vol-ico:hover{
  color:#fff;
}

.sp-vol-ico i{
  font-size:16px;
}

#sp-volume{
  width:93px;
  height:4px;
  -webkit-appearance:none;
  appearance:none;
  background:linear-gradient(to right, #fff 0%, #fff var(--vol-before, 100%), #4d4d4d var(--vol-before, 100%), #4d4d4d 100%);
  border-radius:2px;
  outline:none;
  cursor:pointer;
  transition:background 0.1s;
}

#sp-volume::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:12px;
  height:12px;
  background:#fff;
  border-radius:50%;
  cursor:pointer;
  opacity:0;
  transition:opacity 0.2s;
  box-shadow:0 2px 4px rgba(0,0,0,0.5);
}

#sp-volume::-moz-range-thumb{
  width:12px;
  height:12px;
  background:#fff;
  border-radius:50%;
  border:0;
  cursor:pointer;
  opacity:0;
  transition:opacity 0.2s;
  box-shadow:0 2px 4px rgba(0,0,0,0.5);
}

#sp-volume:hover::-webkit-slider-thumb,
#sp-volume:hover::-moz-range-thumb{
  opacity:1;
}

#sp-close{
  background:transparent;
  border:0;
  color:#b3b3b3;
  cursor:pointer;
  font-size:20px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:all 0.2s;
  padding:0;
}

#sp-close:hover{
  color:#fff;
  background:#282828;
}

/* =========================
   ELEMENTOR PLAY BUTTON
========================= */
.podcast-engine-play{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  min-height:48px;
  border:0;
  cursor:pointer;
  position:relative;
  background:#1db954;
  border-radius:50%;
  color:#000;
  transition:all 0.2s ease;
  padding:0;
}

.podcast-engine-play:hover{
  transform:scale(1.06);
  background:#1ed760;
}

.podcast-engine-play i,
.podcast-engine-play svg{
  color:currentColor;
  fill:currentColor;
  font-size:20px;
}

/* Ripple effect saat playing */
.podcast-engine-play.podcast-playing::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  animation:pulse 1.5s infinite;
  box-shadow:0 0 0 0 currentColor;
  z-index:1;
  pointer-events:none;
}

@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(29,185,84,0.4); }
  70%{ box-shadow:0 0 0 10px rgba(29,185,84,0); }
  100%{ box-shadow:0 0 0 0 rgba(29,185,84,0); }
}

/* =========================
   AUTO PLAY BUTTON
========================= */
.podcast-auto-play{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:20px;
  padding:12px 32px;
  background:#1db954;
  color:#000;
  border:none;
  border-radius:500px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:all 0.2s ease;
  letter-spacing:0.1em;
  text-transform:uppercase;
}

.podcast-auto-play:hover{
  transform:scale(1.04);
  background:#1ed760;
}

.podcast-auto-play i{
  font-size:16px;
}

/* =========================
   TABLET (≤ 900px)
========================= */
@media (max-width:900px){
  .sp-left{
    min-width:180px;
    max-width:180px;
  }
  .sp-center{
    max-width:500px;
  }
  .sp-right{
    min-width:140px;
    max-width:140px;
  }
  #sp-volume{
    width:70px;
  }
}

/* =========================
   MOBILE (≤ 600px)
========================= */
@media (max-width:600px){
  .sp-player{
    flex-direction:row;
    align-items:center;
    padding:8px 12px;
    gap:12px;
    height:auto;
    width: 95%;
    margin: 10px;
    border-radius: 8px;
    background: rgba(31, 31, 31, 0.65);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10.3px);
    -webkit-backdrop-filter: blur(10.3px);
    border: 1px solid rgba(0, 0, 0, 0.15);
  }



  /* Hide progress, volume di mobile */
  .sp-progress,
  #sp-volume,
  .sp-vol-ico,
  #sp-close{
    display:none !important;
  }

  .sp-left{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1;
    min-width:0;
    max-width:none;
  }

  .sp-art{
    width:48px;
    height:48px;
  }

  .sp-meta{
    min-width:0;
  }

  .sp-title{
    font-size:14px;
    margin-bottom:2px;
  }

  .sp-artist{
    font-size:12px;
  }

  .sp-center{
    flex:none;
    max-width:none;
  }

  .sp-controls{
    gap:12px;
  }

  .sp-controls button{
    width:32px;
    height:32px;
  }

  .sp-controls button#sp-play{
    width:40px;
    height:40px;
  }

  .sp-controls button i{
    font-size:14px;
  }

  .sp-controls button#sp-play i{
    font-size:18px;
  }

  .sp-right{
    display:none !important;
  }
}