/* ==========================================================
   🎧 CONINCSTUDIO GLOBAL PLAYER
   Cinematic Afro-Creative Theme
   Engine 4.1
========================================================== */

#cs-sticky-player{

    /* Layout */
    position:fixed;
    left:0;
    right:0;
    bottom:0;

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

    gap:18px;

    padding:14px 22px;

    z-index:99999;

    /* Brand */

    background:
        linear-gradient(
            135deg,
            #120A1F,
            #1B1333
        );

    border-top:1px solid rgba(245,179,1,.18);

    backdrop-filter:blur(24px);

    box-shadow:
        0 -12px 40px rgba(0,0,0,.55),
        0 0 45px rgba(157,77,255,.10),
        inset 0 1px rgba(255,255,255,.04);

    overflow:hidden;
}

/* ==========================================================
   GOLD LIGHTING
========================================================== */

#cs-sticky-player::before{

    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:

        radial-gradient(
            circle at left,
            rgba(245,179,1,.12),
            transparent 45%
        ),

        radial-gradient(
            circle at right,
            rgba(255,140,66,.10),
            transparent 50%
        );

}

/* ==========================================================
   ALBUM ART
========================================================== */

#cs-artwork{

    width:64px;
    height:64px;

    object-fit:cover;

    border-radius:16px;

    border:2px solid rgba(245,179,1,.25);

    box-shadow:

        0 0 20px rgba(245,179,1,.22),

        0 0 40px rgba(157,77,255,.08);

    flex-shrink:0;
}

/* ==========================================================
   INFO
========================================================== */

.cs-player-meta{

    flex:1;

    min-width:0;
}

#cs-title{

    color:#FFFFFF;

    font-family:Inter,sans-serif;

    font-weight:800;

    font-size:16px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    letter-spacing:.3px;
}

#cs-artist{

    margin-top:4px;

    color:#BBBBBB;

    font-size:13px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

/* ==========================================================
   CONTROLS
========================================================== */

.cs-player-controls{

    display:flex;

    align-items:center;

    gap:14px;
}

.cs-player-controls button{

    width:46px;
    height:46px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    transition:.25s;

    color:#FFFFFF;

    background:#24193D;

    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,.05),

        0 6px 18px rgba(0,0,0,.25);

}

.cs-player-controls button:hover{

    transform:translateY(-2px);

    background:#2F1F50;

    box-shadow:

        0 0 18px rgba(157,77,255,.35);
}

/* ==========================================================
   PLAY BUTTON
========================================================== */

#cs-play{

    width:58px;
    height:58px;

    border-radius:50%;

    background:

        linear-gradient(
            90deg,
            #F5B301,
            #FF8C42
        );

    color:#120A1F;

    font-size:22px;

    font-weight:700;

    box-shadow:

        0 0 24px rgba(245,179,1,.45),

        0 10px 30px rgba(255,140,66,.25);

}

#cs-play:hover{

    transform:scale(1.05);

    box-shadow:

        0 0 35px rgba(245,179,1,.65),

        0 0 45px rgba(255,140,66,.35);

}

/* ==========================================================
   PROGRESS
========================================================== */

.cs-progress{

    width:100%;

    height:6px;

    border-radius:999px;

    overflow:hidden;

    background:#2B2146;

    margin-top:12px;
}

#cs-progress{

    width:0;

    height:100%;

    background:

        linear-gradient(
            90deg,
            #F5B301,
            #FF8C42,
            #9D4DFF
        );

    border-radius:999px;

    transition:width .15s linear;

    box-shadow:

        0 0 18px rgba(245,179,1,.40);
}

/* ==========================================================
   TIME
========================================================== */

.cs-player-times{

    display:flex;

    justify-content:space-between;

    margin-top:6px;

    font-size:11px;

    color:#BBBBBB;
}

/* ==========================================================
   EXPAND BUTTON
========================================================== */

#cs-expand{

    width:42px;
    height:42px;

    border-radius:12px;

    background:#24193D;

    color:#F5B301;

    border:none;

    cursor:pointer;

    transition:.25s;
}

#cs-expand:hover{

    background:#31204F;

    color:#FFFFFF;

    box-shadow:

        0 0 20px rgba(245,179,1,.25);
}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

#cs-sticky-player{

    padding:12px;

    gap:12px;
}

#cs-artwork{

    width:54px;
    height:54px;
}

#cs-title{

    font-size:14px;
}

#cs-artist{

    font-size:12px;
}

.cs-player-controls{

    gap:8px;
}

.cs-player-controls button{

    width:40px;
    height:40px;
}

#cs-play{

    width:50px;
    height:50px;

    font-size:18px;
}

}