/* ============================================================
   COLUCA FINAL USER UI CORRECTION V103045
   Alleen kleur + exacte control geometry
   ============================================================ */


/* ------------------------------------------------------------
   GEEN GOUD/GEEL MEER IN USER UI
   Oude gold tokens worden COLUCA purple/cyan.
   Admincenter blijft ongemoeid.
   ------------------------------------------------------------ */

body:not(.admincenter-body){
    --gold:#8b5cff !important;
    --gold-300:#22d3ee !important;
    --gold-400:#7c5cff !important;
    --gold-500:#665cff !important;
    --coluca-gold:#8b5cff !important;
    --connected-color:#8b5cff !important;
}

body:not(.admincenter-body)
:is(
    .button--gold,
    [class*="gold-button"],
    [class*="button-gold"]
){
    color:#fff !important;
    border-color:rgba(123,92,255,.45) !important;

    background:
      linear-gradient(
        110deg,
        #a34fff 0%,
        #795cff 37%,
        #367fff 70%,
        #20d5eb 100%
      ) !important;
}


/* ------------------------------------------------------------
   PROFIELFOTO RECHTSBOVEN
   Alleen deze header-avatar.
   Accountinstellingen worden NIET geraakt.
   ------------------------------------------------------------ */

header .coluca-header-profile-avatar-v103045{
    display:block !important;

    flex:0 0 30px !important;

    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;

    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;

    padding:0 !important;
    margin:0 !important;

    border-radius:50% !important;

    object-fit:cover !important;
    object-position:center !important;

    border:1px solid rgba(139,92,255,.58) !important;

    box-shadow:
      0 0 0 2px rgba(139,92,255,.08),
      0 4px 12px rgba(0,0,0,.28) !important;
}


/* profielknop: geen gele rand */
body:not(.admincenter-body)
header :is(
    [data-profile-menu-toggle],
    [data-account-menu-toggle],
    [data-user-menu-toggle]
){
    border-color:rgba(139,92,255,.35) !important;
    color:#f5f7ff !important;
}


/* ------------------------------------------------------------
   STARTPAGINA / FAVORIETEN PLAYKNOP
   ------------------------------------------------------------ */

body:not(.admincenter-body) .round-play{
    box-sizing:border-box !important;

    display:grid !important;
    place-items:center !important;

    flex:0 0 36px !important;

    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;

    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;

    padding:0 !important;
    margin:0 !important;

    border-radius:50% !important;

    line-height:1 !important;
}

body:not(.admincenter-body)
.round-play > :is(svg,i){
    position:static !important;
    inset:auto !important;

    display:block !important;

    width:17px !important;
    height:17px !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;
    translate:none !important;

    align-self:center !important;
    justify-self:center !important;
}


/* ------------------------------------------------------------
   HAMBURGER
   ------------------------------------------------------------ */

body:not(.admincenter-body) [data-nav-toggle]{
    box-sizing:border-box !important;

    display:grid !important;
    place-items:center !important;

    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;

    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;

    padding:0 !important;
    margin:0 !important;

    line-height:1 !important;
}

body:not(.admincenter-body)
[data-nav-toggle] > :is(svg,i){
    position:static !important;
    inset:auto !important;

    display:block !important;

    width:20px !important;
    height:20px !important;

    margin:0 !important;

    transform:none !important;
    translate:none !important;

    align-self:center !important;
    justify-self:center !important;
}


/* ------------------------------------------------------------
   HOOFDPLAYER
   ------------------------------------------------------------ */

body:not(.admincenter-body) .player-controls{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:10px !important;
}

body:not(.admincenter-body)
.player-controls > :is(
    [data-player-previous],
    [data-player-next]
){
    box-sizing:border-box !important;

    display:grid !important;
    place-items:center !important;

    flex:0 0 46px !important;

    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;

    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;

    padding:0 !important;
    margin:0 !important;

    border-radius:50% !important;
}

body:not(.admincenter-body)
.player-controls > [data-player-toggle]{
    box-sizing:border-box !important;

    display:grid !important;
    place-items:center !important;

    flex:0 0 52px !important;

    width:52px !important;
    min-width:52px !important;
    max-width:52px !important;

    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;

    padding:0 !important;
    margin:0 !important;

    border-radius:50% !important;

    grid-template-columns:1fr !important;
    grid-template-rows:1fr !important;
}

body:not(.admincenter-body)
.player-controls > :is(
    [data-player-previous],
    [data-player-next]
) > :is(svg,i){
    position:static !important;
    inset:auto !important;

    display:block !important;

    width:19px !important;
    height:19px !important;

    margin:0 !important;

    transform:none !important;
    translate:none !important;
}


/* play/pause exact dezelfde centrale cel */
body:not(.admincenter-body)
[data-player-toggle] > :is(.icon-play,.icon-pause){
    grid-column:1 !important;
    grid-row:1 !important;

    align-self:center !important;
    justify-self:center !important;

    position:static !important;
    inset:auto !important;

    width:21px !important;
    height:21px !important;

    margin:auto !important;

    transform:none !important;
    translate:none !important;
}


/* PAUZE wanneer echt playing */
body:not(.admincenter-body)
[data-player-shell][data-player-state="playing"]
[data-player-toggle] .icon-play{
    display:none !important;
}

body:not(.admincenter-body)
[data-player-shell][data-player-state="playing"]
[data-player-toggle] .icon-pause{
    display:block !important;
}


/* PLAY bij ieder niet-playing state */
body:not(.admincenter-body)
[data-player-shell]:not([data-player-state="playing"])
[data-player-toggle] .icon-play{
    display:block !important;
}

body:not(.admincenter-body)
[data-player-shell]:not([data-player-state="playing"])
[data-player-toggle] .icon-pause{
    display:none !important;
}


/* ------------------------------------------------------------
   EXPANDED PLAYER: ZELFDE PLAY/PAUSE LOGICA
   ------------------------------------------------------------ */

body:not(.admincenter-body)
[data-player-shell][data-player-state="playing"]
:is(
    [data-expanded-toggle],
    [data-expanded-sticky-toggle]
) .icon-play{
    display:none !important;
}

body:not(.admincenter-body)
[data-player-shell][data-player-state="playing"]
:is(
    [data-expanded-toggle],
    [data-expanded-sticky-toggle]
) .icon-pause{
    display:block !important;
}

body:not(.admincenter-body)
[data-player-shell]:not([data-player-state="playing"])
:is(
    [data-expanded-toggle],
    [data-expanded-sticky-toggle]
) .icon-play{
    display:block !important;
}

body:not(.admincenter-body)
[data-player-shell]:not([data-player-state="playing"])
:is(
    [data-expanded-toggle],
    [data-expanded-sticky-toggle]
) .icon-pause{
    display:none !important;
}


/* ------------------------------------------------------------
   MOBIEL/PWA
   Zelfde geometrie; geen aparte look meer.
   ------------------------------------------------------------ */

@media(max-width:1024px){

    body:not(.admincenter-body) .round-play{
        width:34px !important;
        min-width:34px !important;
        max-width:34px !important;

        height:34px !important;
        min-height:34px !important;
        max-height:34px !important;
    }

    body:not(.admincenter-body)
    .round-play > :is(svg,i){
        width:16px !important;
        height:16px !important;
    }
}