/* Estilos para a barra superior */
.top-bar {
    background: linear-gradient(45deg, #00D4FF, #6B48FF); /* Cor de fundo com gradiente */
    color: #ecf0f1; /* Cor do texto */
    padding: 10px 0;
    font-size: 0.9em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Linha sutil na parte inferior, ajustada para o gradiente */
}

.top-bar-content {
    max-width: 1200px; /* Largura máxima, ajuste conforme seu layout */
    margin: 0 auto; /* Centraliza o conteúdo */
    display: flex;
    justify-content: space-between; /* Espaço entre os itens de contato, sociais e áudio */
    align-items: center;
    padding: 0 20px; /* Preenchimento nas laterais */
    flex-wrap: wrap; /* Permite quebrar linha em telas menores */
}

.top-bar-contact,
.top-bar-social {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaço entre os itens */
    flex-wrap: wrap;
}

.top-bar-contact a,
.top-bar-social a {
    color: #ecf0f1; /* Cor do texto dos links */
    text-decoration: none;
    transition: color 0.3s ease;
}

.top-bar-contact a:hover,
.top-bar-social a:hover {
    color: #ffffff; /* Cor ao passar o mouse, para contraste com o gradiente */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Sombra suave para destacar */
}

.top-bar-contact .fa-whatsapp {
    color: #25d366; /* Cor do ícone do WhatsApp */
}

.top-bar-social .fab {
    font-size: 1.2em; /* Tamanho dos ícones sociais */
}

.separator {
    margin: 0 10px;
    color: #e0e0e0; /* Cor do separador, ajustada para o gradiente */
}

/* Estilos para o player de áudio na top bar */
.top-bar-audio {
    display: flex;
    align-items: center;
    margin-left: 00px; /* Espaço à esquerda do player */
    /* Remove a necessidade de um título separado se você quiser apenas o player compacto */
}

.top-bar-audio audio {
    width: 180px; /* Largura menor para o player de áudio */
    height: 15px; /* Altura menor para o player de áudio */
    background-color: transparent; /* Fundo transparente para o player */
    border-radius: 5px;
    /* Estilos para customizar a aparência do player */
    /* Nota: A customização completa do player de áudio nativo varia entre navegadores e é limitada.
       Para controle total, seria necessário usar uma biblioteca JS ou criar um player customizado com JS/CSS. */
}

/* Estiliza a barra de progresso e volume para usar as cores do projeto */
.top-bar-audio audio::-webkit-media-controls-timeline,
.top-bar-audio audio::-webkit-media-controls-current-time-display,
.top-bar-audio audio::-webkit-media-controls-time-remaining-display {
    color: #fff; /* Cor do texto do tempo */
}

.top-bar-audio audio::-webkit-media-controls-play-button,
.top-bar-audio audio::-webkit-media-controls-volume-slider,
.top-bar-audio audio::-webkit-media-controls-seek-back-button,
.top-bar-audio audio::-webkit-media-controls-seek-forward-button,
.top-bar-audio audio::-webkit-media-controls-mute-button,
.top-bar-audio audio::-webkit-media-controls-volume-slider,
.top-bar-audio audio::-webkit-media-controls-toggle-closed-captions-button,
.top-bar-audio audio::-webkit-media-controls-fullscreen-button {
    color: #fff; /* Ícones dos controles */
}

.top-bar-audio audio::-webkit-media-controls-panel {
    background-color: rgba(255, 255, 255, 0.2); /* Fundo dos controles */
    border-radius: 5px;
}

.top-bar-audio audio::-webkit-media-controls-play-button {
    background: linear-gradient(45deg, #00D4FF, #6B48FF); /* Cor de fundo do botão de play */
    border-radius: 50%; /* Para deixá-lo redondo */
    padding: 2px;
}

.top-bar-audio audio::-webkit-media-controls-current-time-display,
.top-bar-audio audio::-webkit-media-controls-time-remaining-display {
    font-size: 0.8em; /* Tamanho da fonte do tempo */
}

/* Estilos específicos para o slider de volume e progresso */
.top-bar-audio audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb,
.top-bar-audio audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
    background: linear-gradient(45deg, #00D4FF, #6B48FF); /* Cor do "pegador" do slider */
}

.top-bar-audio audio::-webkit-media-controls-volume-slider,
.top-bar-audio audio::-webkit-media-controls-timeline {
    background-color: rgba(255, 255, 255, 0.3); /* Cor da barra do slider (inativo) */
}

/* Ajustes responsivos para o player de áudio */
@media (max-width: 992px) {
    .top-bar-audio {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
        justify-content: center;
    }

    .top-bar-audio audio {
        width: 80%;
        max-width: 250px; /* Ajustado para um player ainda menor em telas menores */
    }
}

/* Responsividade básica para o resto da topbar */
@media (max-width: 768px) {
    .top-bar-content {
        flex-direction: column;
        text-align: center;
    }

    .top-bar-contact,
    .top-bar-social {
        margin-bottom: 10px;
        justify-content: center;
    }

    .separator {
        display: none;
    }
}

@media (max-width: 480px) {
    .top-bar {
        padding: 8px 0;
    }
    .top-bar-contact a,
    .top-bar-social a {
        font-size: 0.85em;
    }
    .top-bar-social .fab {
        font-size: 1.1em;
    }
}