/* =============================================================
   TEAM FM – PLAYER BAR (OVERRIDE TEMPLATE) • v2025‑08‑07 • revD
   Plaats dit ALS LAATSTE stylesheet (enqueue priority ≥ 99 of Extra CSS)
   ============================================================= */

/* ---------- VARIABELEN ------------------------------------------------- */
:root{
    --dj-primary      : #0070FF;   /* helder blauw  */
    --dj-secondary    : #005DDC;   /* donker blauw  */
    --dj-accent       : #FFD700;   /* zacht geel    */
    /* sync met theme‑vars */
    --tfm-primary-light : var(--dj-primary);
    --tfm-primary-dark  : var(--dj-secondary);
    --tfm-accent-lime   : var(--dj-accent);
}

/***********************************************************
 *  1. TEMPLATE‑VARIANT  –  #player-bar  (#playpause)
 ***********************************************************/
#player-bar{
    position:fixed!important; inset:auto 0 0 0;   /* bottom‑stick */
    z-index:99999!important;
    display:flex!important; align-items:center!important; gap:1rem!important;
    height:64px!important; padding:0 14px!important;
    background:linear-gradient(90deg,var(--dj-primary) 0%,var(--dj-secondary) 100%)!important;
    box-shadow:0 -2px 6px rgba(0,0,0,.25)!important;
    font-family:"Inter",sans-serif!important; color:#fff!important;
}
#player-cover{
    width:48px!important; height:48px!important; flex:0 0 auto!important;
    object-fit:cover; border-radius:6px!important;
    box-shadow:0 0 0 2px rgba(255,255,255,.15) inset!important;
}
#title-main{font-size:15px!important; font-weight:600!important; line-height:1.25!important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#title-sub {font-size:13px!important; opacity:.8!important; line-height:1.25!important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

#playpause{
    all:unset!important; cursor:pointer!important;
    width:52px!important; height:52px!important; min-width:0!important;
    border-radius:50%!important; background:var(--dj-accent)!important;
    box-shadow:0 3px 6px rgba(0,0,0,.35)!important;
    display:flex!important; align-items:center!important; justify-content:center!important;
    position:relative!important; pointer-events:auto!important;
    z-index:100000!important;       /* boven evt overlays */
}
/* interne iconen onzichtbaar (events blijven) */
#playpause > *{opacity:0!important; width:0!important; height:0!important; overflow:hidden!important;}
#playpause::before{content:""; display:block; width:0; height:0; margin-left:3px; border-left:16px solid var(--dj-secondary); border-top:11px solid transparent; border-bottom:11px solid transparent; pointer-events:none!important;}
#playpause.playing::before{width:18px; height:18px; margin:0; background:var(--dj-secondary); clip-path:polygon(0 0,42% 0,42% 100%,0 100%,58% 0,100% 0,100% 100%,58% 100%); border:none; pointer-events:none!important;}

/* optioneel extra controls verbergen */
#desktop-controls, #volume-range{display:none!important;}

/***********************************************************
 *  2. PRORADIO‑VARIANT  –  #dj-player-bar  (.djpb-play)
 ***********************************************************/
#dj-player-bar.djpb{position:fixed!important; inset:auto 0 0 0; z-index:99999!important; display:flex!important; align-items:center!important; gap:1rem!important; height:64px!important; padding:0 14px!important; background:linear-gradient(90deg,var(--dj-primary) 0%,var(--dj-secondary) 100%)!important; box-shadow:0 -2px 6px rgba(0,0,0,.25)!important; font-family:"Inter",sans-serif!important; color:#fff!important;}
#dj-player-bar .djpb-cover{width:48px!important; height:48px!important; object-fit:cover; flex:0 0 auto; border-radius:6px; box-shadow:0 0 0 2px rgba(255,255,255,.15) inset;}
#dj-player-bar .djpb-meta{min-width:0; overflow:hidden; margin-right:1rem;}
#dj-player-bar .djpb-title{font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#dj-player-bar .djpb-artist{font-size:13px; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

#dj-player-bar button.djpb-btn.djpb-play{
    all:unset!important; cursor:pointer;
    width:52px!important; height:52px!important; min-width:0!important;
    border-radius:50%!important; background:var(--dj-accent)!important;
    box-shadow:0 3px 6px rgba(0,0,0,.35)!important;
    display:flex!important; align-items:center!important; justify-content:center!important;
    position:relative!important; pointer-events:auto!important;
}
#dj-player-bar button.djpb-btn.djpb-play > *{opacity:0!important; width:0!important; height:0!important; overflow:hidden!important;}
#dj-player-bar .djpb-play::before{content:""; display:block; width:0; height:0; margin-left:3px; border-left:16px solid var(--dj-secondary); border-top:11px solid transparent; border-bottom:11px solid transparent; pointer-events:none!important;}
.djpb.playing .djpb-play::before{width:18px; height:18px; margin:0; background:var(--dj-secondary); clip-path:polygon(0 0,42% 0,42% 100%,0 100%,58% 0,100% 0,100% 100%,58% 100%); border:none; pointer-events:none!important;}

/* overige knoppen weg */
#dj-player-bar .djpb-btn:not(.djpb-play), #dj-player-bar .djpb-icn-vol, #dj-player-bar .djpb-vol input[type=range]{display:none!important;}
#dj-player-bar .djpb-vol{gap:0!important;}

/* rand van qtmplayer wrapper weg */
#qtmplayer{background:transparent!important; box-shadow:none!important;}
#qtmplayer::before,#qtmplayer::after{display:none!important;}

/***********************************************************
 *  3. RESPONSIVE  < 480px
 ***********************************************************/
@media (max-width:480px){
  #player-bar, #dj-player-bar.djpb{height:56px; gap:10px;}
  #player-cover, #dj-player-bar .djpb-cover{width:40px; height:40px;}
  #playpause, #dj-player-bar button.djpb-btn.djpb-play{width:42px!important; height:42px!important;}
}

/* ============================================================= */