/* =========================================
   PLAYER.CSS - UI/UX GLASSMORPHISM JUCÁS FM
   ========================================= */

/* A NOSSA BARRA PRINCIPAL - EFEITO VIDRO (GLASSMORPHISM) */
.barra-base {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 96%;
    max-width: 1200px;
    height: 85px;
    
    /* EFEITO VIDRO MODERNO */
    background: rgba(43, 22, 77, 0.75); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 25px;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    box-sizing: border-box;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 9999;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.barra-base:hover {
    background: rgba(43, 22, 77, 0.90);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    transform: translateX(-50%) translateY(-2px);
}

/* =========================================
   O VU METER NEON (DESLIGADO QUANDO PARADO)
   ========================================= */
.barra-base .vu-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    opacity: 0.95; /* Mantém a intensidade alta para quando estiver tocando */
    z-index: 0; 
    pointer-events: none; 
    padding: 0 15px; 
    box-sizing: border-box;
    gap: 10px; 
}

.barra-base .vu-channel {
    flex: 1;
    max-width: 280px; 
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
}

.barra-base .vu-track {
    width: 100%;
    height: 15%; 
    /* Fundo do trilho quando "desligado" (bem escuro e com profundidade) */
    background-color: rgba(10, 2, 20, 0.6); 
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
    position: relative;
    overflow: hidden;
    border-radius: 10px; 
}

/* Camada com o Gradiente de Cores Fixo */
.barra-base .vu-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* O Brilho Neon fica apenas no gradiente colorido, para apagar quando parado */
    filter: drop-shadow(0 0 6px rgba(255, 42, 42, 0.6));
}

/* Cores de Roxo para Vermelho (onde o mais alto é Vermelho) */
.barra-base .vu-left .vu-gradient {
    background: linear-gradient(to left, #ff0000 0%, #ff5900  40%,#ffae00  100%);
} 

.barra-base .vu-right .vu-gradient {
   background: linear-gradient(to left, #ffae00 0%, #ff5900  40%, #ff0000 100%);
}

/* A Máscara que "esconde" o som - AGORA SÓLIDA PARA APAGAR TUDO */
.barra-base .vu-mask {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    /* Cor sólida bem escura para cobrir o neon quando a música para */
    background-color: #30164c; 
    will-change: transform;
}

.barra-base .vu-left .vu-mask { left: 0; transform-origin: left; }
.barra-base .vu-right .vu-mask { right: 0; transform-origin: right; }

/* A Linha do Indicador de Pico (Peak Hold) - Vermelho Neon */
.barra-base .vu-peak {
    position: absolute;
    top: 0;
    width: 4px;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 0 0 5px #ffffff, 0 0 10px #ff2a2a, 0 0 15px #ff2a2a;
    border-radius: 2px;
    z-index: 2;
    will-change: left, right;
}

.barra-base .vu-left .vu-peak { right: 0; }
.barra-base .vu-right .vu-peak { left: 0; }

/* AS 3 ÁREAS - Z-INDEX PARA FICAREM ACIMA DO VU METER */
.barra-base .area-esquerda, 
.barra-base .area-direita, 
.barra-base .area-centro { position: relative; z-index: 10; }

.barra-base .area-esquerda, 
.barra-base .area-direita { flex: 1; display: flex; align-items: center; }

.barra-base .area-esquerda { justify-content: flex-start; gap: 20px; }
.barra-base .area-direita { justify-content: flex-end; gap: 15px; } 
.barra-base .area-centro { flex: 1; display: flex; justify-content: center; }

/* =========================================
   BOTÃO PLAY/PAUSE (DESTAQUE LARANJA)
   ========================================= */
.barra-base .btn-play-pause {
    width: 65px; height: 65px; 
    background: linear-gradient(135deg, #f06c35, #d15622); 
    border: 2px solid rgba(255, 255, 255, 0.2); 
    border-radius: 50%;
    cursor: pointer; display: flex; justify-content: center; align-items: center;
    padding: 0; outline: none; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 6px 20px rgba(240, 108, 53, 0.5);
}
.barra-base .icon-svg, 
.barra-base .icon-vol { transition: filter 0.3s ease, transform 0.3s ease; }

.barra-base .btn-play-pause:hover { 
    background: linear-gradient(135deg, #f78b56, #f06c35); 
    transform: scale(1.1); 
    box-shadow: 0 8px 25px rgba(240, 108, 53, 0.8); 
    border-color: rgba(255, 255, 255, 0.5);
}
.barra-base .btn-play-pause:hover .icon-svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.barra-base .btn-play-pause:active { transform: scale(0.95); }

.barra-base .spinner { width: 26px; height: 26px; border: 3px solid rgba(255, 255, 255, 0.3); border-top: 3px solid #ffffff; border-radius: 50%; animation: spin 1s linear infinite; display: none; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* =========================================
   CONTROLES DE VOLUME E BADGE AO VIVO
   ========================================= */
.barra-base .btn-volume { 
    background: rgba(255, 255, 255, 0.05); 
    border: 1px solid rgba(255, 102, 0, 0.1); 
    border-radius: 50%; width: 42px; height: 42px; cursor: pointer; 
    display: flex; justify-content: center; align-items: center; padding: 0; 
    outline: none; transition: 0.3s; backdrop-filter: blur(5px); 
}
.barra-base .btn-volume:hover { background: rgba(255, 255, 255, 0.15); transform: scale(1.1); border-color: rgba(255, 255, 255, 0.3); }
.barra-base .btn-volume:active { transform: scale(0.9); }

.barra-base .icon-svg { width: 22px; height: auto; }
.barra-base .icon-vol { width: 22px; height: auto; color: rgba(240, 108, 53, 0.8) ; }
.barra-base .radio-logo { height: 60px; width: auto; filter: drop-shadow(0 5px 10px rgba(166, 0, 255, 0.525)); transition: 0.3s; }
.barra-base .radio-logo:hover { transform: scale(1.05); filter: drop-shadow(0 5px 15px rgba(255,255,255,0.2));}

.barra-base .live-badge { 
    background: rgba(234, 30, 30, 0.85); backdrop-filter: blur(5px); color: #ffffff; 
    padding: 6px 14px; border-radius: 12px; font-size: 13px; font-weight: 900; 
    text-transform: uppercase; font-family: sans-serif; display: flex; align-items: center; 
    gap: 8px; box-shadow: 0 4px 10px rgba(234, 30, 30, 0.4); border: 1px solid rgba(255, 255, 255, 0.2); 
    cursor: default; 
}
.barra-base .live-circle { width: 10px; height: 10px; background-color: #ffffff; border-radius: 50%; display: inline-block; animation: pulse-red 1.5s infinite ease-in-out; box-shadow: 0 0 8px rgba(255, 255, 255, 0.8); }
@keyframes pulse-red { 0% { transform: scale(0.8); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.5; } 100% { transform: scale(0.8); opacity: 1; } }

.barra-base .slider-volume { -webkit-appearance: none; width: 120px; background: transparent; cursor: pointer; outline: none; --progresso: 100%; }
.barra-base .slider-volume::-webkit-slider-runnable-track { width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(to right, #f06c35 var(--progresso), rgba(255, 255, 255, 0.1) var(--progresso)); transition: filter 0.2s ease; border: 1px solid rgba(0,0,0,0.2); }
.barra-base .slider-volume:hover::-webkit-slider-runnable-track { filter: brightness(1.2); }
.barra-base .slider-volume::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; background: #ffffff; margin-top: -6px; box-shadow: 0 2px 5px rgba(0,0,0,0.5); transition: transform 0.2s ease, box-shadow 0.2s ease; border: 2px solid #f06c35; }
.barra-base .slider-volume::-webkit-slider-thumb:hover { transform: scale(1.3); box-shadow: 0 4px 10px rgba(240, 108, 53, 0.6); }

.barra-base .live-badge-mobile { display: none; }

/* =========================================
   SISTEMA RESPONSIVO (MOBILE)
   ========================================= */
@media (max-width:1024px) {
    .barra-base .btn-volume, 
    .barra-base .slider-volume { display: none !important; }
    .barra-base .area-esquerda .live-badge { display: none !important; }
    .barra-base .live-badge-mobile { display: flex !important; }
    .barra-base { height: 75px; padding: 0 20px; border-radius: 20px; bottom: 20px; }
    .barra-base .radio-logo { height: 50px; }
    .barra-base .btn-play-pause { width: 55px; height: 55px; }
    
    .barra-base .vu-container { padding: 0 120px; }
    .barra-base .vu-track { height: 10px; }
}

@media (max-width:768px) {
    .barra-base { height: 70px; padding: 0 15px; border-radius: 20px; bottom: 15px; width: 92%; }
    .barra-base .radio-logo { height: 45px; }
    .barra-base .btn-play-pause { width: 50px; height: 50px; }
    
    .barra-base .vu-container { padding: 0 110px; }
    .barra-base .vu-track { height: 8px; }
   
    .barra-base .live-badge-mobile { font-size: 11px; padding: 5px 10px; border-radius: 8px; }
    .barra-base .live-circle { width: 8px; height: 8px; }
}