/* ==========================================
   PERIYAR SONGS PLAYER
   player.css
   Part 1
========================================== */

/* ---------- Reset ---------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --bg:#070707;
    --panel:#151515;
    --panel-light:#1e1e1e;

    --border:#2a2a2a;

    --primary:#c40012;
    --primary-light:#ff3344;

    --text:#ffffff;
    --muted:#9c9c9c;

    --radius:18px;

    --transition:.25s ease;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        sans-serif;

    color:var(--text);

    background:#070707;

    background-image:
        radial-gradient(
            circle at top,
            #420000 0%,
            #141414 35%,
            #070707 100%
        );

}


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

.header{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    background:#090909;

    border-bottom:2px solid var(--primary);

}

.site-logo{

    width:180px;

    max-width:90%;

    height:auto;

    display:block;

    margin:auto;

    transition:transform .25s ease;

}

.site-logo:hover{

    transform:scale(1.03);

}


/* ==========================================
   LAYOUT
========================================== */

.app{

    max-width:1100px;

    width:100%;

    margin:35px auto;

    padding:0 20px;

}

.player-panel,
.playlist-panel{

    background:rgba(20,20,20,.94);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:30px;

    box-shadow:

        0 14px 40px rgba(0,0,0,.45),

        0 0 28px rgba(196,0,18,.08);

}


/* ==========================================
   NOW PLAYING
========================================== */

.now-playing{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-bottom:28px;

}

.music-icon{

    width:74px;

    height:74px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

        linear-gradient(
            135deg,
            #340000,
            #89000d
        );

}

.music-icon svg{

    width:34px;

    height:34px;

    fill:white;

}

.song-info{

    min-width:0;

}

#songTitle{

    font-size:30px;

    font-weight:700;

    margin-bottom:6px;

    word-break:break-word;

}

#songFolder{

    color:var(--muted);

    font-size:15px;

}


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

.progress{

    margin:18px 0 10px;

}

#seekBar{

    width:100%;

    appearance:none;

    height:5px;

    background:#353535;

    border-radius:999px;

    cursor:pointer;

}

#seekBar::-webkit-slider-thumb{

    appearance:none;

    width:16px;

    height:16px;

    border-radius:50%;

    background:var(--primary-light);

    border:3px solid white;

}

.time{

    display:flex;

    justify-content:space-between;

    color:var(--muted);

    font-size:13px;

}


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

.controls{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin:30px 0;

}

.controls button{

    width:48px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:none;

    background:none;

    color:#d6d6d6;

    cursor:pointer;

    transition:var(--transition);

}

.controls button svg{

    width:28px;

    height:28px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;

}

.controls button:hover{

    color:var(--primary-light);

    transform:scale(1.12);

}

.controls button.active{

    color:var(--primary-light);

}

#play{

    width:66px;

    height:66px;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            var(--primary-light)

        );

    color:white;

    box-shadow:

        0 10px 24px

        rgba(196,0,18,.35);

}

#play svg{

    width:34px;

    height:34px;

    fill:white;

    stroke:none;

}


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

.volume-row{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

}

.volume-row svg{

    width:22px;

    height:22px;

    fill:none;

    stroke:white;

    stroke-width:1.8;

}

#volume{

    width:220px;

    appearance:none;

    height:4px;

    background:#333;

    border-radius:999px;

}

#volume::-webkit-slider-thumb{

    appearance:none;

    width:13px;

    height:13px;

    border-radius:50%;

    background:var(--primary-light);

}
/* ==========================================
   PLAYLIST
========================================== */

.playlist-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:20px;

    flex-wrap:wrap;

}

.playlist-header h3{

    font-size:24px;

    font-weight:700;

}

.playlist-header span{

    font-size:15px;

    color:var(--muted);

    font-weight:400;

}


/* ==========================================
   SEARCH
========================================== */

#searchSongs{

    width:280px;

    padding:11px 16px;

    border-radius:30px;

    border:1px solid #333;

    background:#1d1d1d;

    color:white;

    font-size:15px;

    outline:none;

    transition:var(--transition);

}

#searchSongs::placeholder{

    color:#777;

}

#searchSongs:focus{

    border-color:var(--primary-light);

    box-shadow:

        0 0 0 3px

        rgba(196,0,18,.20);

}


/* ==========================================
   PLAYLIST
========================================== */

#playlist{

    list-style:none;

    max-height:520px;

    overflow-y:auto;

}

#playlist li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    padding:15px 18px;

    border-left:4px solid transparent;

    border-bottom:1px solid rgba(255,255,255,.05);

    cursor:pointer;

    transition:var(--transition);

}

#playlist li:last-child{

    border-bottom:none;

}

#playlist li:hover{

    background:#202020;

}

#playlist li.active{

    background:#181818;

    border-left-color:var(--primary-light);

}

.song-details{

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:4px;

}

.song-details strong{

    font-size:16px;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.song-details small{

    color:var(--muted);

    font-size:13px;

}

.play-indicator{

    width:24px;

    height:24px;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    color:var(--primary-light);

}

.play-indicator svg{

    width:18px;

    height:18px;

    fill:currentColor;

}

#playlist li.active .play-indicator{

    opacity:1;

}


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

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#444;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-light);

}


/* ==========================================
   INPUT RANGE
========================================== */

input[type="range"]{

    accent-color:var(--primary-light);

}


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

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

@media (max-width:768px){

    *{
        -webkit-tap-highlight-color:transparent;
    }

    body{

        overflow-x:hidden;

    }

    .header{

        padding:14px 10px;

    }

    .site-logo{

        width:min(120px,75vw);

    }

    .app{

        width:100%;

        padding:12px;

        margin:0;

        gap:14px;

    }

    .player-panel,
    .playlist-panel{

        width:100%;

        padding:16px;

        border-radius:14px;

    }

    /* ---------- Now Playing ---------- */

    .now-playing{

        display:flex;

        flex-direction:column;

        align-items:center;

        text-align:center;

        gap:10px;

        margin-bottom:18px;

    }

    .music-icon{

        width:56px;

        height:56px;

    }

    .music-icon svg{

        width:26px;

        height:26px;

    }

    #songTitle{

        font-size:20px;

        line-height:1.35;

        word-break:break-word;

    }

    #songFolder{

        font-size:13px;

    }

    /* ---------- Progress ---------- */

    .progress{

        width:100%;

        margin:16px 0 8px;

    }

    #seekBar{

        width:100%;

    }

    .time{

        width:100%;

        font-size:12px;

    }

    /* ---------- Controls ---------- */

    .controls{

        width:100%;

        display:grid;

        grid-template-columns:repeat(5,1fr);

        align-items:center;

        justify-items:center;

        gap:4px;

        margin:22px 0;

    }

    .controls button{

        width:42px;

        height:42px;

        min-width:42px;

        min-height:42px;

    }

    .controls button svg{

        width:22px;

        height:22px;

    }

    #play{

        width:56px;

        height:56px;

    }

    #play svg{

        width:28px;

        height:28px;

    }

    /* ---------- Volume ---------- */

    .volume-row{

        width:100%;

        display:flex;

        gap:10px;

        align-items:center;

    }

    .volume-row span{

        flex:0 0 auto;

    }

    #volume{

        flex:1;

        width:auto;

    }

    /* ---------- Playlist ---------- */

    .playlist-header{

        display:flex;

        flex-direction:column;

        gap:12px;

        align-items:stretch;

    }

    .playlist-header h3{

        font-size:20px;

    }

    #searchSongs{

        width:100%;

    }

    #playlist{

        width:100%;

        max-height:55vh;

    }

    #playlist li{

        width:100%;

        padding:14px 10px;

        gap:10px;

    }

    .song-details{

        min-width:0;

    }

    .song-details strong{

        display:block;

        overflow:hidden;

        white-space:nowrap;

        text-overflow:ellipsis;

        font-size:15px;

    }

    .song-details small{

        font-size:12px;

    }

}