/* Estilizando o modal */
#sinopseModal .modal-content {
    background-color: #f5f5f5; /* Cor de fundo suave */
    border-radius: 10px; /* Arredondando bordas */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombras suaves */
}

/* Destacando o título */
#sinopseModal .modal-header {
    background-color: #757575af; /* Cor de fundo cinza */
    color: white; /* Texto branco */
    border-top-left-radius: 10px; /* Bordas arredondadas */
    border-top-right-radius: 10px;
    
}

#sinopseModal .modal-title {
    font-size: 20px; /* Aumentando o tamanho da fonte */
    font-weight: bold; /* Tornando o título mais proeminente */
    text-transform: uppercase; /* Transformando texto em maiúsculas */
    padding-top: 15px;
}

/* Estilizando o conteúdo da sinopse */
#sinopseModal .modal-body {
    padding: 15px;
    line-height: 1.6; /* Melhorando a legibilidade */
    color: #333; /* Cor do texto */
    
}

/* Estilizando o botão de fechar */
#sinopseModal .btn-secondary {
    background-color: #757575af; /* Cor cinza */
    border: none; /* Removendo borda */
    padding: 10px 10px;
    border-radius: 5px; /* Bordas arredondadas */
}

#sinopseModal .btn-secondary:hover {
    background-color: #c0c4c7c7; /* Cor diferente ao passar o mouse */
}

/* Centralizando o conteúdo do modal */
#sinopseModal .modal-dialog {
    max-width: 700px; /* Largura máxima do modal */
    margin: 30px auto; /* Centralizando */
    
}

#sinopseModal .modal-footer {
    border-top: none; /* Removendo borda superior */
    padding-top: 0;
}

/* Sombras suaves e efeitos para hover */
#sinopseModal .modal-content:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease-in-out;

}

/* Estilizando a container de avaliação para alinhar texto e estrelas lado a lado */
.avaliacao-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Espaço entre o texto e as estrelas */
}

.avaliacao-estrelas {
    color: #ddd; /* Cor cinza claro para estrelas não selecionadas */
    font-size: 14px; /* Tamanho maior para as estrelas */
    cursor: pointer;
    padding-bottom: 10px;
}

.avaliacao-estrelas .fa-star:hover,
.avaliacao-estrelas .fa-star.selected {
    color: #FFD700; /* Cor dourada para estrelas selecionadas */
}

/* Estilizando a média de avaliação */
#media-avaliacao {
    font-size: 14px; /* Diminui o tamanho da fonte para 14px */
    color: #666; /* Cor opcional mais suave */
    padding:0;
    font-weight: bold; /* Deixa o número em negrito */
}

/* Estilizando os botões de compartilhamento */
.compartilhar-redes-sociais {
    display: flex;
    align-items: center; /* Alinha os ícones e o texto verticalmente */
    gap: 10px; /* Espaçamento entre o texto e os ícones */
}

.social-btn {
    font-size: 28px;
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
    padding-bottom: 15px;
}

.social-btn:hover {
    color: #ce3232;
}

.social-btn .fa {
    font-size: 15px;
}

/* Estilização das abas na modal */
.nav-tabs {
    margin-bottom: 20px;
}

.nav-tabs .nav-link {
    color: #333;
    font-weight: bold;
}

.nav-tabs .nav-link.active {
    background-color: #ddd;
    color: #333;
}

/* Estilizando a aba de Detalhes para ter barra de rolagem */
#detalhes {
    max-height: 200px; /* Define a altura máxima da aba */
    overflow-y: auto;  /* Ativa a barra de rolagem quando o conteúdo excede a altura */
    padding-right: 10px; /* Adiciona um pouco de espaçamento à direita para evitar que o conteúdo fique sobreposto à barra de rolagem */
}

#elencoFilme li {
    margin-bottom: 5px;
    font-size: 12px; /* Aumentando o tamanho da fonte da sinopse */
}


#sinopseTexto {
    font-size: 12px; /* Fonte menor para a sinopse */
    color: #333; /* Cor neutra para o texto */
}

/* Estilizando os outros textos como autor, elenco, etc. */
#detalhes p, #detalhes ul {
    font-size: 12px; /* Fonte maior para os textos de detalhes como autor e elenco */
    color: #333; /* Cor neutra para o texto */
}

#detalhes ul {
    padding-left: 20px; /* Mantém espaçamento para a lista de elenco */
}

#detalhes ul li {
    margin-bottom: 5px; /* Espaçamento entre os itens da lista */
}

.social-btn i {
    font-size: 15px; /* Tamanho personalizado para os ícones */
}