#comingup .track-item:not(.queue-draggable),
#comingupMobile .track-item:not(.queue-draggable) {
  cursor: not-allowed;
}

.track-cover-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.track-cover-wrap img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.lock-on-cover {
  position: absolute;
  right: -3px;
  top: -3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  z-index: 3;
  box-shadow: 0 0 6px rgba(0,0,0,.35);
}
/* Lijsten */
    #comingup, #lastplayed, #requesttop5,
    #comingupMobile, #lastplayedMobile, #requesttop5Mobile {
      display: block; padding-left: 0; margin: 0; list-style: none;
    }
    #comingup > li, #lastplayed > li, #requesttop5 > li,
    #comingupMobile > li, #lastplayedMobile > li, #requesttop5Mobile > li {
      display:block; margin:0 0 .6rem 0;
    }
        /* Kaartje */
.track-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  column-gap: .6rem;
  padding: 8px 10px;
  padding-right: 32px; /* 👈 BELANGRIJK voor slotje ruimte */
  width: 100%;
  box-sizing: border-box;
  border: 1px solid oklab(66.021% 0.25557 -0.169 / 0.212);
  background: rgba(255,255,255,.03);
  border-radius: 10px;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
    .track-item:hover{
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.14);
      transform:translateY(-1px);
    }
    .track-item img{
      width:44px;
      height:44px;
      object-fit:cover;
      border-radius:8px;
      box-shadow:0 1px 6px rgba(0,0,0,.25);
    }

    .track-item .track-text{
      min-width:0;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:normal;
      line-height:1.25;
    }
    @media (min-width: 1024px) {
  #comingup {
    display: block;
  }

  #comingup > li {
    margin: 0 0 .6rem 0;
  }

  #lastplayed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.3rem;
  }

  #lastplayed > li {
    margin: 0;
  }

  #requesttop5 {
    display: block;
  }
}
    #requesttop5 .pos-badge {
      position:absolute;
      top:4px;
      left:4px;
      min-width:18px;
      height:18px;
      padding:0 6px;
      border-radius:999px;
      background:#5E005E;
      color:#fff;
      font-size:11px;
      font-weight:700;
      line-height:18px;
      text-align:center;
      box-shadow:0 0 6px rgba(94,0,94,.5);
      pointer-events:none;
    }
    #requesttop5 li:nth-child(1) .pos-badge { background:#8a0e8a; }

    @media (max-width: 640px) {
  #comingup .track-item,
  #comingupMobile .track-item,
  #lastplayed .track-item,
  #lastplayedMobile .track-item,
  #requesttop5 .track-item,
  #requesttop5Mobile .track-item {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    text-align: left !important;
    align-items: center;
    padding: 8px 10px;
    padding-right: 32px;
    column-gap: 0.6rem;
  }

  #comingup .track-item img,
  #comingupMobile .track-item img,
  #lastplayed .track-item img,
  #lastplayedMobile .track-item img,
  #requesttop5 .track-item img,
  #requesttop5Mobile .track-item img {
    margin: 0 !important;
    width: 44px !important;
    height: 44px !important;
    object-fit: cover !important;
    border-radius: 8px;
  }
}
      #requesttop5 > li {
      margin-bottom: 0.35rem !important;
    }
    #requesttop5 .track-item {
      padding: 6px 8px !important;
      gap: 0.5rem !important;
    }
    #requesttop5 .track-text {
      font-size: 0.95rem;
    }
    /* Desktop: covers naast de tekst forceren */
@media (min-width: 768px) {
  .track-item {
    display: grid !important;
    grid-template-columns: 44px 1fr !important;
    text-align: left !important;
  }

  .track-item img {
    margin: 0 !important;
    width: 44px !important;
    height: 44px !important;
  }
}
  #comingup .track-text,
  #comingupMobile .track-text,
  #lastplayed .track-text,
  #lastplayedMobile .track-text,
  #requesttop5 .track-text,
  #requesttop5Mobile .track-text {
    min-width: 0;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
  }