/* ==========================================================
   Power FM Player X v2.0 Core
   Part 1
========================================================== */

:root{

    --bg:#0f172a;
    --bg2:#182336;

    --card:#1d2940;
    --card2:#26344d;

    --white:#ffffff;
    --text:#ffffff;
    --sub:#aab7cf;

    --accent:#2ea8ff;
    --live:#ff3b30;

    --radius:22px;

    --shadow:
        0 15px 35px rgba(0,0,0,.40);

}

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    background:
    linear-gradient(
    180deg,
    var(--bg2),
    var(--bg));

    color:var(--text);

    min-height:100vh;

    display:flex;

    justify-content:center;

    padding:40px 20px;

}

/* ==========================================================
   BACKGROUND
========================================================== */

#background{

    position:fixed;

    inset:0;

    z-index:-1;

    background:

    radial-gradient(
    circle at top,
    rgba(58,118,255,.25),
    transparent 45%
    ),

    radial-gradient(
    circle at bottom,
    rgba(46,168,255,.15),
    transparent 40%
    );

}

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

.player{

    width:100%;

    max-width:520px;

}

/* ==========================================================
   HEADER
========================================================== */

header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:32px;

}

.station{

    display:flex;

    gap:16px;

    align-items:center;

}

.logo{

    width:56px;

    height:56px;

}

.station h1{

    font-size:22px;

    font-weight:700;

}

.station p{

    margin-top:3px;

    font-size:13px;

    color:var(--sub);

}

/* ==========================================================
   LIVE
========================================================== */

.live{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    font-weight:700;

}

.live-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--live);

    animation:pulse 1.2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(.75);

opacity:.35;

}

100%{

transform:scale(1);

opacity:1;

}

}

/* ==========================================================
   ARTWORK
========================================================== */

.artwork{

    display:flex;

    justify-content:center;

}

.artwork img{

    width:320px;

    max-width:100%;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:28px;

    box-shadow:var(--shadow);

}

/* ==========================================================
   SONG
========================================================== */

.song{

    margin-top:34px;

    text-align:center;

}

.song h2{

    font-size:34px;

    font-weight:700;

    line-height:1.1;

}

.song h3{

    margin-top:8px;

    font-size:20px;

    font-weight:400;

    color:var(--sub);

}
.song .album {
    margin-top: 4px;
    font-size: 13px;
    color: #8fd8ff;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .9;
}

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

.progress{

    margin-top:36px;

}

.time{

    display:flex;

    justify-content:space-between;

    color:var(--sub);

    font-size:14px;

}

.progress-bar{

    margin-top:10px;

    width:100%;

    height:6px;

    background:#3a475d;

    border-radius:100px;

    overflow:hidden;

}

#progress-fill{

    width:0;

    height:100%;

    background:var(--white);

    transition:width .5s linear;

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

.controls{

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

    gap:34px;

    margin:38px 0;

}

/* ---------- ALGEMENE KNOP ---------- */

.controls button{

    border:none;
    outline:none;

    cursor:pointer;

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

    padding:0;

    transition:.20s ease;

}

/* ---------- PREVIOUS / NEXT ---------- */

#prev,
#next{

    width:56px;
    height:56px;

    border-radius:50%;

    background:transparent;

    color:#fff;

}

#prev:hover,
#next:hover{

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

}

#prev:active,
#next:active{

    transform:scale(.95);

}

#prev svg,
#next svg{

    width:28px;
    height:28px;

    fill:currentColor;

}

/* ---------- PLAY BUTTON ---------- */

#play{

    width:92px;
    height:92px;

    aspect-ratio:1/1;

    flex:0 0 92px;

    border-radius:50%;

    background:#fff;

    color:#111;

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

}

#play:hover{

    transform:scale(1.05);

}

#play:active{

    transform:scale(.96);

}

#play svg{

    width:44px;
    height:44px;

    display:block;

    fill:#111;

}

/* ==========================================================
   VOLUME
========================================================== */

.volume{

    margin-top:25px;

}

.volume label{

    display:block;

    margin-bottom:12px;

    color:var(--sub);

    font-size:14px;

}

.volume input{

    width:100%;

    accent-color:var(--accent);

}

/* ==========================================================
   UP NEXT
========================================================== */

.next{

    margin-top:45px;

}

.next h4{

    font-size:22px;

    margin-bottom:18px;

}

.card{

    display:flex;

    align-items:center;

    gap:16px;

    background:var(--card);

    border-radius:20px;

    padding:16px;

}

.card img{

    width:72px;
    height:72px;

    object-fit:cover;

    border-radius:16px;

}

#next-title{

    font-size:18px;

    font-weight:700;

}

#next-artist{

    margin-top:5px;

    color:var(--sub);

}

/* ==========================================================
   HISTORY
========================================================== */

.history{

    margin-top:45px;

}

.history h4{

    font-size:22px;

    margin-bottom:18px;

}

#history-list{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.history-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:14px;

    background:var(--card);

    border-radius:18px;

}

.history-item img{

    width:60px;
    height:60px;

    object-fit:cover;

    border-radius:14px;

}

.history-item h5{

    font-size:17px;

    font-weight:600;

}

.history-item p{

    margin-top:3px;

    color:var(--sub);

    font-size:14px;

}
/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:768px){

.player{

    max-width:100%;

}

header{

    margin-bottom:24px;

}

.logo{

    width:48px;
    height:48px;

}

.station h1{

    font-size:20px;

}

.song h2{

    font-size:28px;

}

.song h3{

    font-size:18px;

}

.artwork img{

    width:100%;

    max-width:320px;

}

.controls{

    gap:24px;

}

#play{

    width:80px;
    height:80px;

    flex:0 0 80px;

}

#play svg{

    width:38px;
    height:38px;

}

#prev,
#next{

    width:48px;
    height:48px;

}

.card{

    padding:14px;

}

.history-item{

    padding:12px;

}

}

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

@media (max-width:480px){

body{

    padding:20px 15px;

}

.station{

    gap:12px;

}

.station h1{

    font-size:18px;

}

.station p{

    font-size:12px;

}

.song{

    margin-top:28px;

}

.song h2{

    font-size:24px;

}

.song h3{

    font-size:16px;

}

.progress{

    margin-top:28px;

}

.controls{

    margin:28px 0;

    gap:18px;

}

#play{

    width:72px;
    height:72px;

}

#play svg{

    width:34px;
    height:34px;

}

.card img{

    width:60px;
    height:60px;

}

.history-item img{

    width:52px;
    height:52px;

}

}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#3b4d68;

    border-radius:50px;

}

/* ==========================================================
   ANIMATIONS
========================================================== */

.card,
.history-item,
#play,
#prev,
#next{

    transition:all .25s ease;

}

.card:hover{

    transform:translateY(-2px);

    background:var(--card2);

}

.history-item:hover{

    background:var(--card2);

}

.artwork img{

    transition:.4s ease;

}

.artwork img:hover{

    transform:scale(1.02);

}

#progress-fill{

    transition:width .4s linear;

}

/* ==========================================================
   HELPERS
========================================================== */

.hidden{

    display:none !important;

}

.fade{

    opacity:0;

}

.show{

    opacity:1;

}

.center{

    text-align:center;

}
#progress-fill {
    transition: width 1s linear;
}

/* ======================================================
   iPhone volume melding
====================================================== */

#ios-volume {
    display: none;
}


/* iPhone / mobiel */

@media (max-width:600px) {

    #volume {
        display: none;
    }

    #ios-volume {
        display: block;
        font-size: 13px;
        color: #888;
        text-align: center;
        margin-top: 8px;
    }

}
#format{
    font-size:13px;
    font-weight:600;
    letter-spacing:.5px;
    color:#3DDC84;
    transition:.3s;
}

.status-offline{
    color:#ff4d4f !important;
}

.status-connecting{
    color:#ffb000 !important;
}
.status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    background: #00ff55;
    border-radius: 50%;
    margin-right: 6px;
    box-shadow: 0 0 8px #00ff55;
    animation: pulse 1.5s infinite;
}


@keyframes pulse {

    0% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }

    100% {
        opacity: 1;
    }

}