/* ================================================================
   AGEGE VOICE RADIO PLAYER  —  Fixed bottom audio player
   ================================================================ */

/* Body padding so content is never hidden behind the player */
body.has-radio-player {
    padding-bottom: 68px;
}

/* ================================================================
   AUDIO PLAYER  —  fixed bar, slides up from bottom
   ================================================================ */
.audio-player {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 66px;
    background: #060e1c;
    border-top: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 -4px 22px rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    padding: 0 22px;
    gap: 20px;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform .36s cubic-bezier(.4,0,.2,1);
}
.audio-player.visible   { transform: translateY(0); }
.audio-player.minimized { transform: translateY(calc(100% - 5px)); }

/* Left: logo + station name */
.ap-left { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.ap-logo-circle {
    width: 40px; height: 40px; border-radius: 50%;
    background: #162a5e;
    border: 1.5px solid rgba(74,154,255,.3);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ap-meta  { display:flex; flex-direction:column; }
.ap-station {
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px; font-weight: 700;
    color: #fff; letter-spacing: .4px; white-space: nowrap;
}
.ap-show  { font-size:11px; color:rgba(255,255,255,.52); white-space:nowrap; }

/* Controls */
.ap-controls { flex:1; display:flex; align-items:center; justify-content:center; gap:12px; }
.ap-skip {
    background: none; border: none;
    color: rgba(255,255,255,.6);
    font-size: 15px; padding: 6px; cursor: pointer;
    transition: color .2s;
}
.ap-skip:hover { color: #fff; }
.ap-play-btn {
    width: 46px; height: 46px; border-radius: 50%;
    background: #e8c547; border: none; color: #060e1c;
    font-size: 17px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding-left: 2px;
    box-shadow: 0 2px 14px rgba(232,197,71,.4);
    transition: all .22s;
}
.ap-play-btn:hover  { background: #f5d354; transform: scale(1.06); }
.ap-play-btn.playing { padding-left: 0; }

/* Volume */
.ap-volume { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.65); font-size:16px; flex-shrink:0; }
.ap-vol-range { width:110px; accent-color:#e8c547; cursor:pointer; }

/* LIVE badge */
.ap-live-badge {
    display: flex; align-items: center; gap: 7px;
    background: #c0392b; color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 2px;
    padding: 5px 15px; border-radius: 3px;
    flex-shrink: 0;
}
.ap-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ff6b6b;
    animation: ap-blink 1s step-start infinite;
}
@keyframes ap-blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Minimize chevron */
.ap-minimize {
    background: none; border: none;
    color: rgba(255,255,255,.4);
    font-size: 14px; padding: 6px; cursor: pointer;
    flex-shrink: 0; transition: color .2s;
}
.ap-minimize:hover { color: #fff; }
#apChevron { display:inline-block; transition:transform .36s ease; }
.audio-player.minimized #apChevron { transform:rotate(180deg); }

/* Mobile adjustments */
@media (max-width:980px) {
    .ap-volume { display:none; }
    .audio-player {
        padding-left: 16px; padding-right: 16px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        min-height: 66px; height: auto;
    }
    body.has-radio-player {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width:640px) {
    .ap-live-badge { display:none; }
    .ap-play-btn   { width:44px; height:44px; font-size:18px; }
    .ap-skip       { font-size:17px; padding:8px; }
    .ap-minimize   { font-size:17px; padding:8px; }
    .ap-station    { font-size:11px; }
    .ap-show       { font-size:9.5px; }
}