/* =========================================================
   SONGCHOICE PREMIUM MINI PLAYER
========================================================= */

.sc-mini-player{

    position:fixed;
    left:0;
    bottom:0;

    width:100%;

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

    gap:30px;

    padding:16px 28px;

    background:rgba(8,12,24,.92);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border-top:1px solid rgba(255,255,255,.08);

    z-index:9999;

    box-shadow:
    0 -10px 40px rgba(0,0,0,.45);

}

/* =========================================================
   LEFT
========================================================= */

.sc-player-left{

    display:flex;
    align-items:center;

    gap:16px;

    min-width:240px;

}

/* =========================================================
   COVER
========================================================= */

.sc-player-cover{

    width:58px;
    height:58px;

    border-radius:14px;

    overflow:hidden;

    flex-shrink:0;

    background:#111827;

    box-shadow:
    0 8px 20px rgba(0,0,0,.35);

}

.sc-player-cover img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}

/* =========================================================
   META
========================================================= */

.sc-player-meta{

    display:flex;
    flex-direction:column;

    overflow:hidden;

}

.sc-player-title{

    font-size:15px;
    font-weight:700;

    color:#FFFFFF;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

}

.sc-player-artist{

    margin-top:4px;

    font-size:13px;

    color:#9CA3AF;

}

/* =========================================================
   CENTER
========================================================= */

.sc-player-center{

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

    flex:1;

}

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

.sc-play-btn{

    width:58px;
    height:58px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:linear-gradient(
        135deg,
        #7C5CFF,
        #00D4FF
    );

    color:#FFFFFF;

    font-size:20px;
    font-weight:700;

    transition:
    transform .25s ease,
    box-shadow .25s ease,
    opacity .25s ease;

    box-shadow:
    0 10px 30px rgba(124,92,255,.45);

}

.sc-play-btn:hover{

    transform:scale(1.08);

    box-shadow:
    0 14px 36px rgba(124,92,255,.55);

}

.sc-play-btn:active{

    transform:scale(.96);

}

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

.sc-player-progress{

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:8px;

    background:
    rgba(255,255,255,.08);

    overflow:hidden;

    cursor:pointer;

    transition:
    height .2s ease,
    background .2s ease;

}
.sc-player-progress:hover{

    height:12px;

    background:
    rgba(255,255,255,.14);

}
.sc-progress-bar{

    width:0%;
    height:100%;

    background:linear-gradient(
        90deg,
        #7C5CFF,
        #00D4FF
    );

    box-shadow:
    0 0 20px rgba(0,212,255,.45);

    transition:width .05s linear;

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

@media (max-width:768px){

    .sc-mini-player{

        padding:14px 16px;

        gap:14px;

    }

    .sc-player-left{

        min-width:0;

        flex:1;

    }

    .sc-player-cover{

        width:48px;
        height:48px;

        border-radius:12px;

    }

    .sc-player-title{

        font-size:14px;

    }

    .sc-player-artist{

        font-size:12px;

    }

    .sc-play-btn{

        width:50px;
        height:50px;

        font-size:18px;

    }

}

/* =========================================================
   EXTRA SAFE SPACE
========================================================= */

body{

    padding-bottom:110px;

}

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

.sc-time-wrap{

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

    gap:8px;

    margin-left:20px;

    color:#CBD5E1;

    font-size:14px;
    font-weight:600;

}

.sc-time-separator{

    opacity:.5;

}

/* =========================================================
   PLAYER GLOW
========================================================= */

.sc-mini-player::before{

    content:'';

    position:absolute;

    top:0;
left:0;
right:0;
bottom:4px;

    background:
    radial-gradient(
        circle at center,
        rgba(124,92,255,.14),
        transparent 70%
    );

    pointer-events:none;

    opacity:.9;

}

.sc-mini-player::before{

    display:none !important;

}


/* =========================================================
   WAVEFORM
========================================================= */

.sc-waveform{

    display:flex;
    align-items:flex-end;

    gap:4px;

    margin-left:24px;

    height:34px;

}

.sc-waveform span{

    width:4px;

    height:10px;

    border-radius:20px;

    background:linear-gradient(
        180deg,
        #00D4FF,
        #7C5CFF
    );

    opacity:.35;

    transform-origin:center bottom;

    transition:
    opacity .2s ease,
    transform .2s ease;

}

/* =========================================================
   ACTIVE WAVEFORM
========================================================= */

.sc-waveform.active span{

    opacity:1;

    animation:scWave 1s ease-in-out infinite;

}

.sc-waveform.active span:nth-child(1){
    animation-delay:.0s;
}

.sc-waveform.active span:nth-child(2){
    animation-delay:.1s;
}

.sc-waveform.active span:nth-child(3){
    animation-delay:.2s;
}

.sc-waveform.active span:nth-child(4){
    animation-delay:.3s;
}

.sc-waveform.active span:nth-child(5){
    animation-delay:.4s;
}

.sc-waveform.active span:nth-child(6){
    animation-delay:.5s;
}

.sc-waveform.active span:nth-child(7){
    animation-delay:.6s;
}

.sc-waveform.active span:nth-child(8){
    animation-delay:.7s;
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes scWave{

    0%{

        transform:scaleY(.4);

    }

    50%{

        transform:scaleY(2.2);

    }

    100%{

        transform:scaleY(.5);

    }

}