/* ================= PLAYER ================= */
.player{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  height: var(--playerH);
  padding: 10px 12px;

  display:flex;
  align-items:center;
  gap: 12px;

  background: rgba(7,10,18,.72);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(14px);

  z-index: 1000;
}

/* ================= PLAYER COVER ================= */
.player-cover img{
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* ================= PLAYER INFO ================= */
.player-info{
  flex: 1;
  min-width: 0;
}

.player-title-wrap{
  position: relative;
  overflow:hidden;
}

.player-title{
  display:inline-block;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  will-change: transform;
}

/* Lauftext wenn zu lang */
.player-title.ticker{
  padding-left: 100%;
  animation: ticker-smooth 14s linear infinite;
}

@keyframes ticker-smooth{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.player-artist{
  font-size: 12px;
  color: var(--textDim2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================= PROGRESS ================= */
.player-progress{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-top: 6px;
}

.player-progress span{
  font-size: 11px;
  color: var(--textDim2);
  min-width: 38px;
  text-align: center;
}

/* 🔵 PROGRESS – Safari / iOS FIX */
#progress{
  -webkit-appearance:none;
  appearance:none;

  flex:1;
  height:4px;
  border-radius:4px;

  background:#2a2f3a;
  background-image: linear-gradient(90deg, var(--blue), var(--blue2));
  background-size: 0% 100%;
  background-repeat: no-repeat;

  cursor:pointer;
}

/* Thumb – WebKit */
#progress::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.15);
}

/* Thumb – Firefox */
#progress::-moz-range-thumb{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  border:none;
}

/* ================= PLAY / PAUSE ================= */
.player-btn{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue);
  border:none;
  cursor:pointer;

  position: relative;
  box-shadow: 0 12px 28px rgba(63,169,245,.18);
}

.player-btn.play::before{
  content:"";
  position:absolute;
  left: 17px;
  top: 13px;

  border-left: 10px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.player-btn.pause::before,
.player-btn.pause::after{
  content:"";
  position:absolute;
  top: 12px;
  width: 4px;
  height: 20px;
  background: #fff;
}

.player-btn.pause::before{ left: 16px; }
.player-btn.pause::after { right: 16px; }

/* ================= PLAYER CONTROLS ================= */
.player-controls{
  display:flex;
  align-items:center;
  gap:10px;
}

/* ================= MUTE ================= */
.player-mute{
  background:none;
  border:none;
  cursor:pointer;

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

  color: var(--blue2);
}

.player-mute svg{
  width:22px;
  height:22px;
  fill:currentColor;
}

/* Waves aus wenn muted */
.player-mute.muted svg #vol-waves{
  display:none;
}

/* ================= VOLUME ================= */
/* 🔊 Safari / iOS FIXED VOLUME SLIDER */
#volume{
  -webkit-appearance:none;
  appearance:none;

  width:90px;
  height:4px;
  border-radius:4px;

  background:#2a2f3a;
  background-image: linear-gradient(90deg, var(--blue), var(--blue2));
  background-size: 80% 100%;
  background-repeat: no-repeat;

  cursor:pointer;
}

/* Thumb – WebKit */
#volume::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.15);
}

/* Thumb – Firefox */
#volume::-moz-range-thumb{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  border:none;
}

/* Mobile kompakter */
@media (max-width:600px){
  #volume{ width:70px; }
}

/* ================= DESKTOP ONLY ================= */
.desktop-only{
  display:flex;
}

@media (max-width: 768px){
  .desktop-only{
    display:none !important;
  }
}