/**
 * Udos-Country-Western-Radio Web Portal
 *
 * @project     Udos-Country-Western-Radio
 * @author      Udos-Country-Western-Radio (Udos-Country-Western-Radio)
 * @website     https://udos-country-western-radio.de
 * @copyright   (c) 2026 Udos-Country-Western-Radio. Alle Rechte vorbehalten.
 *
 * Dieses Projekt wurde von Udos-Country-Western-Radio erstellt,
 * auch bekannt unter Udos-Country-Western-Radio (https://udos-country-western-radio.de).
 */
.radio-player{

    width:100%;

    background:#2f1e13;

    border:1px solid #634128;

    border-radius:25px;

    padding:20px;

    display:flex;

    align-items:center;

    gap:20px;

    box-shadow:0 0 30px rgba(240, 189, 105,.2);

    flex-wrap:wrap;
}

.player-cover img{

    width:90px;
    height:90px;

    border-radius:15px;

    object-fit:cover;
}

.player-info{

    flex:1;
    min-width:0;
}

#song-title{

    font-family:"Sancreek", Georgia, serif;
    font-size:24px;

    font-weight:400;
    letter-spacing:.04em;

    color:#d49a45;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

#song-artist{

    font-family:"Quentin Caps", Georgia, serif;
    font-size:15px;
    letter-spacing:.08em;
    margin-top:5px;

    color:#c4a886;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.player-controls button{

    width:70px;
    height:70px;

    border:none;

    border-radius:50%;

    background:
    linear-gradient(
        90deg,
        #d49a45,
        #8b5429
    );

    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:#d49a45;
}

/*
|--------------------------------------------------------------------------
| 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, #d49a45, #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(212, 154, 69, 0.12);
    flex-wrap: wrap;
}

.player-extern-label {
    font-size: 11px;
    color: #9d805f;
    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;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #c4a886;
}

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

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

.player-extern-link span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.stream-powered-by {
    flex-basis: 100%;
    color: #9d805f;
    font-size: 12px;
    text-align: center;
}

.stream-powered-by a {
    color: #d49a45;
    font-weight: 700;
    text-decoration: none;
}

.stream-powered-by a:hover {
    color: #f0bd69;
    text-decoration: underline;
}
/* Country Western action palette */
button:not(.close-btn), input[type="submit"], input[type="button"], .btn, [class*="-btn"] { background: linear-gradient(135deg, #d49a45, #a9652f) !important; border-color: #f0bd69 !important; color: #211309 !important; }
button:not(.close-btn):hover, input[type="submit"]:hover, input[type="button"]:hover, .btn:hover, [class*="-btn"]:hover { background: linear-gradient(135deg, #f0bd69, #d49a45) !important; color: #211309 !important; box-shadow: 0 6px 16px rgba(212, 154, 69, .28) !important; }
.close-btn, .icon-btn, .btn-icon { background: rgba(212, 154, 69, .12) !important; border-color: rgba(240, 189, 105, .55) !important; color: #f0bd69 !important; }
/* Country Western surface palette */
html, body { background-color: #1b120d; }
header, .header, .admin-sidebar, .sidebar, .admin-shell { background-color: #21150e !important; }
.card, .panel, .modal, .admin-card, .dashboard-card, .sidebar-card, .glass-card, .auth-box, .login-card { background-color: #3a2519 !important; border-color: rgba(212, 154, 69, .28) !important; }
/* Country Western admin reference bridge */
:root { --cw-bg: #1b120d; --cw-bg-deep: #120b08; --cw-wood: #2a1a11; --cw-wood-2: #3a2417; --cw-leather: #4a2e1b; --cw-brass: #c98a38; --cw-gold: #f0bd69; --cw-gold-soft: #d9a252; --cw-copper: #a9652f; --cw-red: #a94735; --cw-cream: #fff2d8; --cw-muted: #c4a886; --cw-muted-2: #9d805f; --cw-line: rgba(212,154,69,.26); }
html { background: var(--cw-bg); }
body { color: var(--cw-cream); background-color: var(--cw-bg) !important; }
header, .header, .sidebar, .admin-sidebar, .admin-shell { background: linear-gradient(180deg, var(--cw-wood), var(--cw-bg-deep)) !important; border-color: var(--cw-line) !important; }
.card, .panel, .modal, .admin-card, .dashboard-card, .sidebar-card, .glass-card, .auth-box, .login-card { background: linear-gradient(145deg, var(--cw-wood-2), var(--cw-leather)) !important; border-color: var(--cw-line) !important; color: var(--cw-cream); }
h1, h2, h3, h4, h5, h6 { color: var(--cw-cream); }
a { color: var(--cw-gold); }
button:not(.close-btn), input[type="submit"], input[type="button"], .btn, .primary-btn, .login-btn, [class*="-btn"] { background: linear-gradient(135deg, var(--cw-brass), var(--cw-copper)) !important; border-color: var(--cw-gold) !important; color: #211309 !important; }
button:not(.close-btn):hover, input[type="submit"]:hover, input[type="button"]:hover, .btn:hover, .primary-btn:hover, .login-btn:hover, [class*="-btn"]:hover { background: linear-gradient(135deg, var(--cw-gold), var(--cw-brass)) !important; color: #211309 !important; box-shadow: 0 6px 16px rgba(201,138,56,.28) !important; }
input, select, textarea { background: rgba(18,11,8,.72) !important; border-color: var(--cw-line) !important; color: var(--cw-cream) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--cw-gold) !important; outline-color: var(--cw-gold) !important; }
.close-btn, .icon-btn, .btn-icon { background: rgba(201,138,56,.14) !important; border-color: rgba(240,189,105,.55) !important; color: var(--cw-gold) !important; }
.success, .alert-success { border-color: rgba(130,181,122,.42) !important; }
.error, .alert-error, .danger { border-color: rgba(169,71,53,.55) !important; }
/* End Country Western admin reference bridge */