/*
====================================================

Shadow-Wolves.FM
radio-player.css
Version 2.0

====================================================
*/


/* ==========================================
   Live Radio
========================================== */

#live-radio{

    background:var(--background);

}


/* ==========================================
   Radio Card
========================================== */

.radio-card{

    max-width:1000px;

    margin:0 auto;

    padding:3rem;

    background:var(--surface);

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

    border-radius:var(--radius);

    text-align:center;

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

}


/* ==========================================
   Live Badge
========================================== */

.live-badge{

    display:inline-block;

    padding:.6rem 1.5rem;

    margin-bottom:1rem;

    border-radius:999px;

    background:rgba(224,93,93,.18);

    color:#ff7272;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.08rem;

    text-transform:uppercase;

}


/* ==========================================
   Now Playing
========================================== */

.now-playing{

    display:inline-block;

    margin-bottom:1.5rem;

    padding:.6rem 1.5rem;

    border-radius:999px;

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

    border:1px solid rgba(61,184,255,.15);

    color:var(--primary);

    font-size:.85rem;

    font-weight:600;

    letter-spacing:.15rem;

    text-transform:uppercase;

}


/* ==========================================
   Song Infos
========================================== */

#song-title{

    font-size:clamp(2rem,4vw,3rem);

    font-weight:700;

    color:#ffffff;

    margin-bottom:.75rem;

}

#song-artist{

    font-size:1.2rem;

    color:var(--text-light);

    margin-bottom:2.5rem;

}


/* ==========================================
   Radio Infos
========================================== */

.radio-info-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:1.5rem;

    margin-bottom:3rem;

}

.info-box{

    padding:2rem;

    background:var(--background-light);

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

    border-radius:var(--radius);

    transition:var(--transition);

}

.info-box:hover{

    transform:translateY(-5px);

    border-color:var(--primary);

    background:var(--surface-hover);

}

.info-box h3{

    margin-bottom:1rem;

    color:var(--primary);

}

.info-box p{

    color:#ffffff;

    font-weight:600;

}


/* ==========================================
   Player Auswahl
========================================== */

.player-selection{

    margin-top:2rem;

}

.player-selection h3{

    margin-bottom:2rem;

    color:#ffffff;

}

.player-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:2rem;

}

.player-option{

    padding:2rem;

    background:var(--background-light);

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

    border-radius:var(--radius);

    transition:var(--transition);

}

.player-option:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

    background:var(--surface-hover);

}

.player-option h4{

    margin-bottom:1rem;

    color:var(--primary);

}

.player-option p{

    margin-bottom:2rem;

    color:var(--text-light);

}


/* ==========================================
   Audio Player
========================================== */

.audio-container{

    margin-top:2rem;

}

.audio-container audio{

    width:100%;

    max-width:700px;

    border-radius:12px;

}


/* ==========================================
   Mobile
========================================== */

@media (max-width:768px){

    .radio-card{

        padding:2rem;

    }

    .radio-info-grid,

    .player-grid{

        grid-template-columns:1fr;

    }

    #song-title{

        font-size:2rem;

    }

}

@media (max-width:480px){

    .radio-card{

        padding:1.5rem;

    }

    #song-artist{

        font-size:1rem;

    }

}