/* ===== STYLE.CSS (MASTER FILE) ===== */

@import url('reset.css');
@import url('layout.css');
@import url('header.css');
@import url('hero.css');
@import url('sections.css');
@import url('player.css');
@import url('footer.css');
@import url('responsive.css');

#radioPlayer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;           /* ocupă aproape toată lățimea */
    max-width: 600px;     /* dar nu exagerăm */
    background: linear-gradient(90deg,#222,#111);
    color: white;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -2px 15px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    align-items: center;   /* centru vertical și orizontal */
    min-height: 120px; /* suficient pentru titlu + audio */
    padding: 10px 15px;
    z-index: 9999;
}
.player-header {
    flex-wrap: wrap; /* permite textului să se așeze pe 2 linii dacă e lung */
}

#radioPlayer .player-header,
#radioPlayer .player-controls,
#radioPlayer audio {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#radioPlayer audio {
    margin: 5px 0;
    max-width: 100%;
}

#songTitle {
    margin-top: 5px;
    font-size: 14px;
    white-space: nowrap; /* DOAR o linie pe desktop */
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: left;
}

/* Pe mobil DA voie la mai multe linii */
@media (max-width: 768px) {
    #songTitle {
        white-space: normal;
        word-break: break-word;
        text-overflow: unset;
    }
}