/*
============================================================
 RADIO FLAMENGO
 Player Profesional CSS 1.0
============================================================
*/


.radio-player {


    background:

    linear-gradient(

        145deg,

        #111827,

        #1f2937

    );


    color:white;

    padding:30px;

    border-radius:25px;

    max-width:500px;

    margin:25px auto;

    box-shadow:

    0 15px 40px rgba(0,0,0,.35);

    text-align:center;


}






.radio-player-header {


    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    margin-bottom:20px;


}





.radio-logo {


    width:60px;

    height:60px;

    background:#dc2626;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;


}






.radio-title {


    font-size:24px;

    font-weight:bold;


}






.live-indicator {


    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#16a34a;

    padding:8px 20px;

    border-radius:30px;

    font-weight:bold;

    margin-bottom:20px;


}






.live-dot {


    width:12px;

    height:12px;

    background:white;

    border-radius:50%;

    animation:

    pulse 1.5s infinite;


}






@keyframes pulse {


    0%{


        opacity:1;

        transform:scale(1);


    }



    50%{


        opacity:.4;

        transform:scale(1.4);


    }



    100%{


        opacity:1;

        transform:scale(1);


    }


}







.song-box {


    background:

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


    padding:20px;

    border-radius:15px;

    margin-bottom:25px;


}






.song-title {


    font-size:22px;

    font-weight:bold;

    margin-bottom:8px;


}






.song-artist {


    color:#d1d5db;

    font-size:16px;


}






.player-controls {


    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin:25px 0;


}






.play-button {


    width:75px;

    height:75px;

    border-radius:50%;

    border:none;

    background:#dc2626;

    color:white;

    font-size:30px;

    cursor:pointer;


    transition:.3s;


}






.play-button:hover {


    transform:scale(1.08);

    background:#ef4444;


}






.volume-area {


    display:flex;

    align-items:center;

    gap:10px;

    margin-top:20px;


}





.volume-slider {


    width:150px;


}







.radio-info {


    display:grid;

    grid-template-columns:

    repeat(3,1fr);


    gap:10px;

    margin-top:25px;


}





.radio-info-item {


    background:

    rgba(255,255,255,.1);


    padding:15px;

    border-radius:12px;


}






.radio-info-number {


    display:block;

    font-size:22px;

    font-weight:bold;


}







.player-offline {


    background:#374151;

    color:#d1d5db;


}







@media(max-width:600px){



    .radio-player{


        margin:15px;

        padding:20px;


    }




    .radio-info{


        grid-template-columns:1fr;


    }




    .volume-slider{


        width:120px;


    }



}