/* Reset básico e box-sizing */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Estilos globais do corpo da página */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #fff; /* Cor padrão do texto para o body */
  background-color: white;
  background-size: cover;
  background-position: center;
  overflow-x: hidden; /* Adicionado para prevenir rolagem horizontal global */
}

/* --- Estilos para o Cabeçalho (Header) --- */
.white-label {
    width: 100%;
    background-color: white;
    display: flex;
    height: 40px !important;
    align-items: center; /* Adicione esta linha */
}

.high-links-container {
    max-width: 1100px; /* Mesma largura do contêiner do menu */
    margin: 0 auto;    /* Centraliza o contêiner na página */
    text-decoration: none;
    color: black;
}

.site-header {
  background-color: whitesmoke;
  color: #888;
  padding: 20px 0; /* Ajustado para 0 nas laterais, o conteúdo interno terá padding */
  text-align: center;
  display: flex;
  flex-direction: column; /* Empilha logo e navegação */
  justify-content: center;
  align-items: center;
}

.high-links {
    margin: 10px 15px;
    text-decoration: none;
    color: black;
    font-size: 14px;
}

.header-top-area {
  width: 100%;
  max-width: 1100px; /* Limite a largura da área superior */
  display: flex;
  flex-direction: column; /* Empilha o logo e os links de auth no mobile por padrão */
  align-items: center;
  padding: 0 20px; /* Padding para evitar que o logo cole nas laterais em telas maiores */
}

.site-header .header-content {
    width: 100%; /* Ocupa a largura disponível no header-top-area */
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0; /* Ajuste se precisar de espaço entre logo e links auth */
}

.site-header img.top-banner {
  width: 100%;
  max-width: 600px; /* Limite a largura máxima do banner/logo */
  height: auto;
  display: block;
}

/* --- Estilos para Ícones nos Links Superiores --- */

/* Altera o display do link para alinhar o ícone e o texto */
.high-links {
    display: inline-flex; /* Usa flexbox para alinhamento */
    align-items: center;  /* Centraliza verticalmente o ícone e o texto */
    vertical-align: middle; /* Ajuda no alinhamento com outros elementos da linha */
}

/* Estiliza a imagem do ícone dentro do link */
.high-link-icon {
    height: 16px;         /* Altura do ícone */
    width: auto;          /* Largura automática para manter a proporção */
    margin-right: 8px;    /* Espaço entre o ícone e o texto */
}

/* Contêiner dos links de autenticação na parte superior (NOVA ESTRUTURA) */
.auth-links-top {
    margin-top: 10px; /* Espaço entre o logo e os links */
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.95rem;
    font-weight: bold;
    text-transform: uppercase; /* Garante que o texto esteja em caixa alta */
}

.auth-links-top .auth-link {
    color: #000;
    text-decoration: none;
    transition: color 0.2s ease;
}

.auth-links-top .auth-link:hover {
    color: #007bff;
    text-decoration: underline;
}

.auth-links-top .auth-separator {
    color: #ccc;
    margin: 0 -5px;
}

/* REGRA PARA OS ÍCONES PNG NA BARRA DE NAVEGAÇÃO */
.nav-action-icon {
    height: 20px;
    width: 20px;
}

/* Esconde a div .auth-links antiga, que não é mais usada com a nova estrutura do header.php */
.auth-links {
    display: none;
}

/* --- Estilos para o Banner Fixo --- */
.banner-container {
  max-width: 800px; /* Define a mesma largura máxima do texto */
  margin: 0 auto 30px auto; /* Centraliza o container e mantém a margem inferior */
  text-align: center;
}

.page-banner {
  max-width: 100%;    /* Garante que a imagem nunca ultrapasse a largura da tela */
  height: auto;       /* Mantém a proporção da imagem ao redimensionar */
  display: block;     /* Remove espaços extras abaixo da imagem */
  margin: 0 auto;     /* Garante a centralização */
}

/* --- Estilos para a Navegação Principal (main-navigation) --- */
.main-navigation {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fundo sutil para o menu */
  padding: 10px 0; /* Padding vertical para a barra do menu */
  margin-top: 20px; /* Espaço entre a área superior e o menu de navegação */
}

.main-navigation ul {
  list-style: none;
  padding: 0 20px; /* Padding lateral para a lista */
  margin: 0 auto; /* Centraliza a lista */
  max-width: 1100px; /* Alinha com a largura do site-wrapper */
  display: flex; /* Para alinhar os itens horizontalmente */
  justify-content: center; /* Centraliza os itens do menu */
  align-items: center;
  flex-wrap: wrap; /* Permite que os itens quebrem a linha em telas pequenas */
  gap: 25px; /* Espaçamento entre os itens do menu */
}

.main-navigation ul li {
  margin: 0;
  padding: 0;
}

.main-navigation ul li a {
  color: #fff; /* Cor padrão do texto dos links */
  text-decoration: none;
  font-weight: bold;
  padding: 5px 0; /* Padding para os botões do menu, sem padding lateral para que o gap funcione */
  border-radius: 0; /* Sem borda arredondada se quiser apenas texto */
  transition: color 0.3s ease;
  white-space: nowrap; /* Evita quebra de linha em itens curtos */
  display: block; /* Garante que o padding e a área de clique funcionem bem */
}

.main-navigation ul li a:hover {
  color: #007bff; /* Cor do texto azul ao passar o mouse */
}

/* Estilo para o link ativo no menu */
.main-navigation ul li a.active {
  color: #007bff; /* Cor do texto azul para o link ativo */
}

/* menu button */

.menu-button-wrapper {
    background-color: #00a6ea;    
}


/* --- Site Wrapper --- */
.site-wrapper {
  /*max-width: 1200px;*/
  width: 100%; /* Garante que o site-wrapper ocupe 100% da largura em telas menores */
  margin: 0 auto;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  background-color:white;
  color: black;
}

/* --- Footer --- */
.site-footer {
  background-color: transparent;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
}

.site-footer a {
  color: #000;
  text-decoration: underline;
}

/* --- Títulos Genéricos --- */
h1, h2 {
  text-align: center;
  margin: 0;
}

h1 {
  font-size: 1.5rem;
  margin-top: 0px;
  margin-bottom: 5px;
}

h2 {
  font-size: 1rem;
  font-weight: normal;
  margin-bottom: 40px;
}

/* --- Parágrafos --- */
p {
  max-width: 800px;
  margin: 0 auto 20px auto;
  text-align: justify;
  line-height: 1.6;
  font-size: 1rem;
}

/* --- Player Principal (na página de detalhes/index.html - ESTE É O PLAYER DA PLAYLIST) --- */
.player {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  width: 60%;
  max-width: 660px;
  margin: 3rem auto 4rem;
  background: #111;
  border-radius: 1rem;
  padding: 1rem 1.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  color: #fff;
}

.cover {
  flex-shrink: 0;
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.info h1 {
  margin: 0 0 0.25rem 0;
  font-size: 1.8rem;
  color: #fff;
}

.info h2 {
  margin: 0 0 1rem 0;
  font-weight: 400;
  color: #aaa;
  font-size: 1.1rem;
}

/* --- Estilo Específico para a Página de Playlist --- */
.playlist-bg {
  background-image: url('media/bg/pl.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.9); /* fallback escuro */
}

/* --- Elemento Audio (escondido quando controles customizados são usados) --- */
audio {
  width: 100%;
  outline: none;
  border-radius: 8px;
}

/* --- Lista de Faixas (Tracklist) --- */
.tracklist {
  width: 100%;
  max-width: 800px;
  margin: 40px auto 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

/* Estilo individual de cada faixa na lista */
.track {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: rgba(255, 255, 255, 0.05);
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 100%;
  box-sizing: border-box;
}

.track:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.track img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

.track .meta {
  display: flex;
  flex-direction: column;
}

.track .meta strong {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.track .meta span {
  font-size: 0.9rem;
  color: #ccc;
}

/* --- Destaque da faixa em reprodução (.track.playing) --- */
.track.playing {
    background-color: #007bff;
    color: #fff;
}

.track.playing .meta strong {
    color: #fff;
}

.track.playing .meta span {
    color: #eee;
}

/* --- Menu Mobile (Hamburger) --- */
.mobile-menu {
  position: fixed;
  top: 0;
  left: -260px;
  width: 260px;
  height: 100vh;
  background-color: #f0f0f0;
  color: #000;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.2);
  transition: left 0.3s ease-in-out;
  z-index: 1200; /* <<-- VALOR ALTERADO AQUI */
  padding: 20px;
}

.mobile-menu.open {
  left: 0;
}

.mobile-menu-button {
  width: 40px;
  height: 40px;
  font-size: 24px;
  cursor: pointer;
  background: #fff;
  color: #000;
  padding: 6px;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  position: relative;
  z-index: 1100;
}

.mobile-menu .menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  margin-bottom: 20px;
}

.mobile-menu .menu-header button {
  background: none;
  border: none;
  font-size: 24px;
  color: #000;
  cursor: pointer;
}

.mobile-menu .menu-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu .menu-items li.first-item {
  margin-top: 40px;
}

.mobile-menu .menu-items li {
  margin-bottom: 10px;
}

.mobile-menu .menu-items a {
  color: #003040;
  text-decoration: none;
  font-size: 16px;
  display: flex;
  align-items: center;
}

/* Ícone do menu */
.menu-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

/* --- Player Wrapper (para páginas de conteúdo com um único player) --- */
.player-wrapper {
  width: 100%;
  max-width: 660px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Player de áudio ajustado */
.player-wrapper audio {
  width: 100%;
  max-width: 100%;
  border-radius: 8px;
  outline: none;
}

.track-title, .track-author {
  text-align: center;
}

.track-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: #fff;
}

.track-author {
  font-size: 1rem;
  font-weight: normal;
  color: #ccc;
}

/* Ficha técnica centralizada e espaçada */
.ficha-tecnica {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #000;
}

/* Função e nome em blocos */
.ficha-tecnica .funcao {
  font-weight: bold;
  color: #000;
}

.ficha-tecnica .nome {
  font-style: italic;
  color: #000;
}


/* --- Custom Audio Controls (o player que você implementou) --- */
.custom-audio-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #1a1a1a;
    padding: 8px 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    width: 100%;
    box-sizing: border-box;
    min-height: 45px;
}

/* Botões de controle (Play/Pause, Mute) */
.control-button {
    background-color: transparent;
    border: none;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    outline: none;
    flex-shrink: 0;
}

.control-button:hover {
    color: #007bff;
}

/* Container da barra de progresso (tempo e barra) */
.progress-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
    gap: 8px;    
}

.time-display {
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
}

.progress-bar {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

/* Estilo do "thumb" (o seletor) da barra de progresso */
.progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
    margin-top: 0px;
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
}

.progress-bar::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;

}

/* Estilo da "track" (o caminho) da barra de progresso */
.progress-bar::-webkit-slider-runnable-track {
    background: #ddd;
    border-radius: 3px;
}

.progress-bar::-moz-range-track {
    background: #ddd;
    border-radius: 3px;
}

/* Container para o botão de mute */
.mute-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Opcional: Estilo para o thumb quando arrastando/focado (para feedback visual) */
.progress-bar::-webkit-slider-thumb:active {
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.3);
}

/* --- Estilos para Formulários de Autenticação (register.php, login.php) --- */

.auth-form {
    max-width: 500px;
    margin: 30px auto;
    padding: 30px;
    background-color: #00a6ea; /* [ALTERADO] Cor de fundo para o azul principal */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3); /* [ALTERADO] Borda mais suave */
}

.form-group {
    display: flex;
    flex-direction: column;
}

.auth-form label {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: #fff; /* Cor do texto mantida em branco */
    font-weight: 600;
}

.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.5); /* [ALTERADO] Borda branca semitransparente */
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.2); /* [ALTERADO] Fundo branco semitransparente */
    color: #fff; /* Cor do texto digitado em branco */
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.auth-form input::placeholder {
    color: rgba(255, 255, 255, 0.7); /* [NOVO] Estilo para o texto de placeholder */
}

.auth-form input:focus {
    border-color: #fff; /* [ALTERADO] Borda branca ao focar */
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); /* [ALTERADO] Sombra branca ao focar */
}

.submit-button {
    background-color: #fff; /* [ALTERADO] Fundo do botão para branco */
    color: #00a6ea; /* [ALTERADO] Cor do texto do botão para azul */
    border: none;
    padding: 15px 25px;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%;
}

.submit-button:hover {
    background-color: #e6e6e6; /* [ALTERADO] Efeito hover para um cinza claro */
    transform: translateY(-2px);
}

.form-link {
    text-align: center;
    font-size: 0.95rem;
    color: #fff; /* [ALTERADO] Cor do texto para branco */
    margin-top: 10px;
}

.form-link a {
    color: #fff; /* [ALTERADO] Cor do link para branco */
    text-decoration: underline; /* Adiciona sublinhado para destaque */
    font-weight: bold;
}

.form-link a:hover {
    text-decoration: none;
}

/* Estilos para mensagens de erro/sucesso */

.message {
    padding: 10px;
    border-radius: 5px;
    font-size: 0.95rem;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
}

.message.error {
    background-color: rgba(255, 0, 0, 0.2);
    color: #ff3333;
    border: 1px solid #ff3333;
}

.message.success {
    background-color: rgba(0, 255, 0, 0.2);
    color: #33ff33;
    border: 1px solid #33ff33;
}

/* --- Container e Content Gerais --- */
.container {
    padding: 20px; /* Mantém o padding padrão para desktop */
    max-width: 940px;
    margin: 0 auto;
}

.content {
    padding: 20px; /* Mantém o padding interno para o conteúdo */
}

/* --- Estilos para a Modal de Mensagem --- */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.show {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: #333;
    color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    max-width: 400px;
    width: 90%;
    text-align: center;
    position: relative;
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal-overlay.show .modal-content {
    transform: translateY(0);
    opacity: 1;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    cursor: pointer;
    color: #aaa;
    transition: color 0.2s ease;
}

.close-button:hover {
    color: #fff;
}

#modalMessage {
    margin-bottom: 20px;
    font-size: 1.1rem;
    line-height: 1.5;
}

#modalOkButton {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s ease;
}

#modalOkButton:hover {
    background-color: #0056b3;
}

.modal-content.error-type {
    background-color: #a00;
}

.modal-content.success-type {
    background-color: #0a0;
}

/* --- Produtores Page Specific Styles --- */
.producer-card {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin: 40px auto;
    max-width: 800px;
    background-color: #fff; /* [ALTERADO] Fundo branco */
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* [ALTERADO] Sombra mais suave */
    color: #000; /* [ALTERADO] Texto principal preto */
    border: 1px solid #eee; /* [NOVO] Borda sutil para o card */
}

.producer-photo {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #ccc; /* [ALTERADO] Borda cinza */
}

.producer-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: justify;
}

.producer-details p {
    margin: 0 0 5px 0;
    text-align: justify;
    max-width: none;
}

.producer-details p strong {
    font-size: 1.3rem;
    display: block;
    margin-bottom: 0px;
    text-align: left;
}

.producer-details .function {
    color: #555; /* [ALTERADO] Cor da função para cinza escuro */
    margin-top: -5px;
    margin-bottom: 15px;
    font-size: 1rem;
    text-align: left;
}

.producer-details .description {
    font-size: 1rem;
    line-height: 1.6;
    text-align: justify;
}

/* --- Estilos para Colaboradores Adicionais (Mini Cards) --- */
.additional-producers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin: 60px auto 40px auto;
    max-width: 800px;
}

.producer-mini-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 200px;
    background-color: #fff; /* [ALTERADO] Fundo branco */
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* [ALTERADO] Sombra mais suave */
    color: #000; /* [ALTERADO] Texto principal preto */
    border: 1px solid #eee; /* [NOVO] Borda sutil */
}

.producer-mini-photo {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #ccc; /* [ALTERADO] Borda cinza */
    margin-bottom: 10px;
}

.producer-mini-details p {
    margin: 0;
    text-align: center;
    max-width: none;
}

.producer-mini-details p strong {
    font-size: 1rem;
    white-space: nowrap;
    margin-bottom: 3px;
}

.producer-mini-details .function {
    font-size: 0.85rem;
    color: #555; /* [ALTERADO] Cor da função para cinza escuro */
}

/* --- Estilos para a Página de Participações (Guest) --- */
.guest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 40px auto;
    max-width: 1200px;
    padding: 0 20px;
    justify-items: center;
}

.guest-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #fff; /* [ALTERADO] Fundo branco */
    padding: 20px; /* Aumentado um pouco o padding para mais respiro */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* [ALTERADO] Sombra mais suave */
    color: #000; /* [ALTERADO] Texto principal preto */
    width: 100%;
    max-width: 330px;
    border: 1px solid #eee; /* [NOVO] Borda sutil */
}

.guest-photo {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #ccc; /* [ALTERADO] Borda cinza */
    margin-bottom: 15px;
}

.guest-card p {
    margin: 0;
    max-width: none;
    text-align: center;
}

.guest-card p strong {
    font-size: 1.1rem;
    display: block;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.guest-card .guest-role {
    font-size: 0.95rem;
    color: #555; /* [ALTERADO] Cor da função para cinza escuro */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* =================================================================== */
/* ===== CÓDIGO DE RESTAURAÇÃO PARA O PLAYER DAS PÁGINAS DE CONTEÚDO ===== */
/* =================================================================== */

.player-wrapper {
  width: 100%;
  max-width: 660px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.custom-audio-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #f1f3f4; /* Fundo mais claro para contraste */
    padding: 8px 15px;
    border-radius: 50px; /* Bordas arredondadas */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: 100%;
    box-sizing: border-box;
    min-height: 50px;
    border: 1px solid #ddd;
}

.control-button {
    background-color: transparent;
    border: none;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    color: #333; /* Cor escura para os ícones */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    outline: none;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.control-button:hover {
    color: #007bff;
}

.progress-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
    gap: 10px;
}

.time-display {
    font-size: 14px;
    color: #555; /* Cor escura para o tempo */
    white-space: nowrap;
}

.progress-bar {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #ccc;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
}

.progress-bar::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
}

/* --- Responsividade Geral (Mobile) --- */
@media (max-width: 768px) { /* Consolidado e Corrigido */

/* --- AJUSTES MOBILE FINAIS PARA CABEÇALHO --- */

/* 1. Ajuste da Barra Branca Superior */
.white-label {
    height: auto; /* Altura automática */
    padding: 15px 10px; /* Aumenta o padding vertical para dar mais altura */
    justify-content: center;
}

/* 2. Ajuste da Barra Cinza do Logo */
.site-header {
    flex-direction: column;
    align-items: center;
    padding: 150px 100x; /* Aumenta significativamente o padding vertical */
}

    /* Estilos do Site Wrapper e Container */
    .site-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    .container {
        padding-left: 15px;
        padding-right: 15px;
        /* Remover overflow-x: hidden aqui se não for estritamente necessário,
           pode causar problemas em alguns casos */
        /* overflow-x: hidden; */
    }

    /* Estilos de Parágrafos */
    p {
        padding: 0;
        text-align: justify;
    }

    /* Estilos do Cabeçalho Mobile */
    .site-header {
        flex-direction: column;
        align-items: center;
        padding: 10px 0;
    }

    .header-top-area {
        padding: 0 15px;
        flex-direction: column;
        gap: 10px;
    }

    .site-header img.top-banner {
        max-width: 90%;
    }

    .auth-links-top {
        margin-top: 5px;
        font-size: 0.85rem;
        gap: 10px;
    }

    /* Estilos do Menu Principal Mobile */
    .main-navigation {
        margin-top: 15px;
        padding: 8px 0;
    }
    .main-navigation ul {
        flex-direction: column;
        gap: 8px;
        width: 100%;
        padding: 0 15px;
    }

    .main-navigation ul li {
        width: 100%;
        text-align: center;
    }

    .main-navigation ul li a {
        font-size: 1rem;
        padding: 8px 0;
    }

    /* Estilos do Player */
    .player {
        width: 95%;
        max-width: none;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 10px;
        gap: 1rem;
    }

    .cover {
        width: 100%;
        max-width: 180px;
        height: auto;
    }

    .info h1, .info h2 {
        text-align: center;
    }

    /* Ajustes específicos para o Player Wrapper nas páginas de conteúdo */
    .player-wrapper {
        width: 100%;
        max-width: none;
        padding: 0 10px;
        margin: 2rem auto;
    }

    .custom-audio-controls {
        gap: 5px;
        padding: 6px 10px;
        min-height: 40px;
    }

    .time-display {
        font-size: 12px;
        flex-shrink: 0;
    }

    .control-button {
        font-size: 24px;
        width: 30px;
        height: 30px;
        flex-shrink: 0;
    }

    .progress-bar::-webkit-slider-thumb,
    .progress-bar::-moz-range-thumb {
        width: 14px;
        height: 14px;
        margin-top: -4px; /* Valor revisado para alinhamento */
    }

    /* AJUSTES PARA PRODUTORES PRINCIPAIS NO MOBILE */
    .producer-card {
        flex-direction: column;
        align-items: center; /* Centraliza horizontalmente */
        padding: 15px;
        gap: 15px;
        margin: 25px auto;
    }

    .producer-photo { /* Reduzindo fotos dos produtores principais */
        width: 200px;
        height: 200px;
    }

    .producer-details {
        text-align: center; /* Centraliza todo o texto do producer-details */
        width: 100%;
    }

    .producer-details p strong,
    .producer-details .function {
        text-align: center; /* Garante centralização do nome e função */
        margin-bottom: 0px;
    }

    .producer-details .description {
        text-align: justify; /* Mantém justificado */
        margin-top: 20px;
    }

    /* AJUSTES PARA COLABORADORES ADICIONAIS (MINI CARDS) NO MOBILE */
    .additional-producers {
        flex-direction: row; /* Altera para linha no mobile para ficarem lado a lado */
        flex-wrap: wrap; /* Permite quebrar linha se não couberem */
        justify-content: center; /* Centraliza os itens lado a lado */
        gap: 20px;
        margin: 40px auto 20px auto;
    }

    .producer-mini-card {
        width: 140px; /* Largura ajustada para caberem lado a lado */
        padding: 10px;
    }

    .producer-mini-photo { /* Reduzindo fotos dos adicionais */
        width: 120px;
        height: 120px;
    }

    .producer-mini-details p strong {
        font-size: 0.9em;
        white-space: nowrap; /* Garante que não quebre */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .producer-mini-details .function {
        font-size: 0.75em;
        white-space: nowrap; /* Garante que não quebre */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* AJUSTES PARA PÁGINA DE PARTICIPAÇÕES (GUEST) NO MOBILE */
    .guest-grid {
    grid-template-columns: repeat(1, 1fr); /* Ajustado para EXATAMENTE 1 coluna */
    gap: 15px;
    padding: 0 10px;
}

    .guest-card {
        padding: 10px; /* Reduz padding do card no mobile */
        max-width: 80%; /* Garante que o card não fique muito grande */
    }

    .guest-photo {
        width: 150px;
        height: 150px;
        margin-bottom: 8px; /* Ajusta margem abaixo da foto */
        border-radius: 50%; /* Garante círculo para guests no mobile */
        border: 2px solid #007bff; /* Borda circular para guests no mobile */
    }

    .guest-card p strong {
        font-size: 0.95rem; /* Ajusta fonte do nome no mobile */
        white-space: nowrap; /* Garante que não quebre */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .guest-card .guest-role {
        font-size: 0.8rem; /* Ajusta fonte da função no mobile */
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ================================================================= */
/* ===== CÓDIGO DE AJUSTE PARA O CABEÇALHO MOBILE ===== */
/* ================================================================= */

/* --- 1. AJUSTE DA BARRA BRANCA SUPERIOR (MOBILE) --- */

/* Faz a barra branca crescer para acomodar os links */
.white-label {
    height: auto;
    padding: 30px 15px;
}

/* Faz os links quebrarem a linha e se centralizarem */
.high-links-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 15px; /* Controla o espaçamento entre os links */
    margin: 0;
    width: 100%;
}

/* Remove a margem individual dos links para o 'gap' funcionar melhor */
.high-links {
    margin: 0;
    font-size: 13px;
}

/* --- 2. AJUSTE DA FAIXA CINZA DO LOGO (MOBILE) --- */

/* Aumenta a altura da faixa do logo adicionando mais espaço vertical */
.site-header {
    display: flex;
    flex-direction: column;
    align-items: center; /* Esta é a propriedade chave para centralizar */
    padding: 15px 15px; /* Mantém a altura que definimos */
}

.site-header img.top-banner {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

}

/* --- Estilos para a Página de Galeria (Gallery) --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colunas no desktop */
    gap: 30px; /* Espaçamento entre as fotos */
    margin: 40px auto; /* Margem superior e inferior para a grade */
    max-width: 950px; /* Largura máxima para a grade, ajustável */
    padding: 0 20px; /* Padding lateral para a grade */
    justify-items: center; /* Centraliza as fotos dentro das células da grid */
    align-items: center; /* Centraliza as fotos verticalmente */
}

.gallery-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    transform: rotate(var(--rotation, 0deg)); 
    transition: transform 0.2s ease-in-out;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.4)); /* ADICIONE ESTA LINHA */
}

/* Removido as rotações fixas :nth-child(even/odd) se existiam, agora o PHP cuida */

.gallery-item:hover {
    transform: scale(1.02) rotate(0deg); /* Desfaz rotação no hover e aumenta um pouco */
    z-index: 5; /* Garante que a foto em hover fique por cima */
}

/* Removido: Pseudo-elementos para a moldura estilo polaroid (se ainda existissem) */
.gallery-item::before,
.gallery-item::after {
    display: none; /* Garante que os pseudo-elementos não apareçam */
}

.gallery-photo {
    display: block;
    width: 450px; /* Tamanho exato da foto */
    height: 450px; /* Tamanho exato da foto */
    object-fit: cover;
    border: none;
    background-color: transparent;
    filter: sepia(50%) grayscale(50%);
}

/* --- AJUSTE PARA GALERIA (RECORTAR FUNDO PRETO DAS IMAGENS) --- */
.gallery-photo {
    /* Recorta uma porcentagem de cada borda da imagem (topo, direita, base, esquerda) */
    clip-path: inset(12% 15.5%);
}


/* --- Responsividade Geral (Mobile) --- */
@media (max-width: 768px) {
    /* ... suas outras regras existentes para mobile ... */

    /* AJUSTES PARA PÁGINA DE GALERIA (GALLERY) NO MOBILE */
    .gallery-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
        padding: 0 10px;
    }

    .gallery-item {
        padding: 0;
        /* AQUI: Remove explicitamente a rotação para mobile */
        /*transform: rotate(0deg) !important; /* !important para garantir que sobrescreva o inline style do PHP */
        width: 100%;
        max-width: 450px;
    }

    .gallery-photo {
        width: 100%;
        height: auto;
        max-height: 450px;
        aspect-ratio: 1 / 1; /* Força a proporção 1:1 (quadrada) */
        object-fit: cover;
    }
    
    /* Removido: Pseudo-elementos específicos do mobile (se ainda existissem) */
    .gallery-item::before,
    .gallery-item::after {
        display: none;
    }
}

/* --- Estilos para a Página de Contato (Contact) --- */

.contact-section {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}

.contact-form-container,
.contact-info-container {
    background-color: #00a6ea; /* [ALTERADO] Cor de fundo para o azul principal */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    flex-basis: 50%;
    max-width: 500px;
    color: #fff; /* Garante que o texto padrão seja branco */
}

.contact-section h3 {
    font-size: 1.6rem;
    margin-bottom: 25px;
    color: #fff; /* [ALTERADO] Título branco para contrastar com o fundo azul */
    text-align: center;
}

/* Estilos do Formulário */
.contact-form .form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.contact-form label {
    font-size: 1.05rem;
    margin-bottom: 8px;
    color: #fff; /* [ALTERADO] Labels em branco */
    font-weight: 600;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.5); /* [ALTERADO] Borda branca semitransparente */
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.2); /* [ALTERADO] Fundo branco semitransparente */
    color: #fff; /* [ALTERADO] Cor do texto digitado para branco */
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.7); /* [NOVO] Estilo para o texto de placeholder */
}

.contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #fff; /* [ALTERADO] Borda branca ao focar */
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); /* [ALTERADO] Sombra branca ao focar */
}

.contact-form .submit-button {
    background-color: #fff; /* [ALTERADO] Fundo do botão para branco */
    color: #00a6ea; /* [ALTERADO] Cor do texto do botão para azul */
    border: none;
    padding: 15px 25px;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%;
    margin-top: 15px;
}

.contact-form .submit-button:hover {
    background-color: #e6e6e6; /* [ALTERADO] Efeito hover para um cinza claro */
    transform: translateY(-2px);
}

/* Estilos da Informação de Contato */
.contact-info-container p {
    text-align: left;
    margin-bottom: 10px;
}

.contact-item {
    margin-bottom: 20px;
}

.contact-item p strong {
    font-size: 1.1rem;
    color: #fff; /* [ALTERADO] Cor do texto em negrito para branco */
}

.contact-link {
    color: #fff; /* [ALTERADO] Cor do link para branco */
    text-decoration: underline; /* Adiciona sublinhado para melhor identificação */
    font-size: 1.05rem;
    font-weight: normal;
}

.contact-link:hover {
    color: #e6e6e6; /* [ALTERADO] Cor do link no hover */
}

.whatsapp-link {
    /* Remova o padding-left que pode ter sido usado para espaçar o emoji */
    /* padding-left: 25px; /* Exemplo de padding se o ícone for maior */
    background-image: url('media/icons/whatsapp-icon.png'); /* Caminho para seu ícone WhatsApp */
    background-size: 20px 20px; /* Ajuste o tamanho do ícone aqui */
    background-repeat: no-repeat;
    background-position: left center; /* Posiciona o ícone à esquerda do texto */
    padding-left: 25px; /* Adiciona padding para o texto não sobrepor o ícone */
}

.instagram-link {
    background-image: url('media/icons/instagram-icon.png'); /* Caminho para seu ícone Instagram */
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 25px;
}

.facebook-link {
    background-image: url('media/icons/facebook-icon.png'); /* Caminho para seu ícone Facebook */
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 25px;
}

.email-link {
    background-image: url('media/icons/email-icon.png'); /* Opcional: Caminho para seu ícone de e-mail */
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 25px;
}

/* Responsividade para Mobile */
@media (max-width: 768px) {
    .contact-section {
        flex-direction: column; /* Empilha formulário e informações de contato no mobile */
        gap: 30px; /* Ajusta espaçamento */
        padding: 0 15px; /* Ajusta padding lateral */
    }

    .contact-form-container,
    .contact-info-container {
        flex-basis: auto; /* Remove a base fixa */
        max-width: none; /* Remove limite máximo de largura */
        width: 100%; /* Ocupa largura total */
    }

    .contact-section h3 {
        font-size: 1.4rem; /* Reduz tamanho do título */
    }

    .contact-form .submit-button {
        padding: 12px 20px;
        font-size: 1rem;
    }

    .contact-link {
        font-size: 1rem;
    }
}

/* --- Estilos para a Nova Barra de Navegação Azul --- */
.main-navigation-bar {
    background-color: #00a6ea; /* Cor azul da barra */
    padding: 0 20px;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.main-navigation-bar .nav-container {
    display: flex;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    height: 60px; /* Valor alterado */
}

/* O #desktop-menu-placeholder ocupa o espaço à esquerda */
#desktop-menu-placeholder {
    flex-grow: 1; 
}

/* Container para os links de ação à direita */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaço entre os links */
    margin-left: auto; /* Empurra os links para a direita */
}

/* Estilo de cada link de ação */
.nav-action-link {
    display: flex;
    align-items: center;
    gap: 6px; /* Espaço entre o ícone e o texto */
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 5px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.nav-action-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Tamanho e alinhamento dos ícones */
.nav-action-link ion-icon {
    font-size: 1.3em; 
}