/**
 * Radio-LiSa Web Portal
 *
 * @project     Radio-LiSa
 * @author      datOnkel (SW-Development)
 * @website     https://sw-development.de
 * @copyright   (c) 2026 SW-Development. Alle Rechte vorbehalten.
 *
 * Dieses Projekt wurde von datOnkel erstellt,
 * auch bekannt unter SW-Development (https://sw-development.de).
 */
.radio-player{

    width:100%;

    background:#081120;

    border:1px solid #17345f;

    border-radius:25px;

    padding:20px;

    display:flex;

    align-items:center;

    gap:20px;

    box-shadow:0 0 30px rgba(0,200,255,.2);

    flex-wrap:wrap;
}

.player-cover img{

    width:90px;
    height:90px;

    border-radius:15px;

    object-fit:cover;
}

.player-info{

    flex:1;
}

#song-title{

    font-size:22px;

    font-weight:bold;

    color:#0087ff;
}

#song-artist{

    margin-top:5px;

    color:#9db6d3;
}

.player-controls button{

    width:70px;
    height:70px;

    border:none;

    border-radius:50%;

    background:
    linear-gradient(
        90deg,
        #009dff,
        #005dff
    );

    color:white;

    font-size:24px;

    cursor:pointer;
}

.volume-control{

    display:flex;

    align-items:center;

    gap:10px;
}

.volume-control input{

    width:120px;
}

.listeners{

    font-size:18px;

    color:#0087ff;
}

/*
|--------------------------------------------------------------------------
| EQ VISUALIZER
|--------------------------------------------------------------------------
*/

.player-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.player-visualizer {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
    opacity: 0.3;
    transition: opacity 0.4s ease;
}

.radio-player.is-playing .player-visualizer {
    opacity: 1;
}

.player-visualizer span {
    display: block;
    width: 4px;
    background: linear-gradient(to top, #009dff, #00d4ff);
    border-radius: 2px;
    height: 4px;
    transform-origin: bottom;
    transition: height 0.2s ease;
}

/* Idle: static low bars */
.player-visualizer span:nth-child(1) { height: 5px; }
.player-visualizer span:nth-child(2) { height: 8px; }
.player-visualizer span:nth-child(3) { height: 6px; }
.player-visualizer span:nth-child(4) { height: 9px; }
.player-visualizer span:nth-child(5) { height: 5px; }

/* Playing: animated EQ bars */
@keyframes eq1 { 0%,100%{height:5px}  25%{height:16px} 50%{height:8px}  75%{height:18px} }
@keyframes eq2 { 0%,100%{height:12px} 25%{height:6px}  50%{height:18px} 75%{height:9px}  }
@keyframes eq3 { 0%,100%{height:18px} 25%{height:10px} 50%{height:5px}  75%{height:15px} }
@keyframes eq4 { 0%,100%{height:8px}  25%{height:18px} 50%{height:12px} 75%{height:6px}  }
@keyframes eq5 { 0%,100%{height:14px} 25%{height:7px}  50%{height:19px} 75%{height:10px} }

.radio-player.is-playing .player-visualizer span:nth-child(1) { animation: eq1 1.1s ease-in-out infinite; }
.radio-player.is-playing .player-visualizer span:nth-child(2) { animation: eq2 0.9s ease-in-out infinite; }
.radio-player.is-playing .player-visualizer span:nth-child(3) { animation: eq3 1.3s ease-in-out infinite; }
.radio-player.is-playing .player-visualizer span:nth-child(4) { animation: eq4 0.8s ease-in-out infinite; }
.radio-player.is-playing .player-visualizer span:nth-child(5) { animation: eq5 1.0s ease-in-out infinite; }

/*
|--------------------------------------------------------------------------
| EXTERNAL PLAYERS
|--------------------------------------------------------------------------
*/

.player-extern {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 135, 255, 0.12);
    flex-wrap: wrap;
}

.player-extern-label {
    font-size: 11px;
    color: #5a7a9a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 4px;
}

.player-extern a {
    opacity: 0.55;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: inline-flex;
}

.player-extern a:hover {
    opacity: 1;
    transform: scale(1.1);
}

.player-extern a img {
    height: 28px;
    width: auto;
    display: block;
}