/* ---- Importação da Fonte Oswald do Google Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400&display=swap');

/* ---- VARIÁVEIS DE COR E FONTES ---- */
:root {
    --sulsul-red: #D20A0A;
    --sulsul-purple: #6f1e3b;
    --sulsul-purple-transparent: color-mix(in srgb, var(--sulsul-purple) 90%, transparent);
    --sulsul-dark: #121212;
    --sulsul-gray: #1d1d1d;
    --sulsul-title-gray: #e6e6e6;
    --sulsul-light-gray: #a0a0a0;
    --sulsul-event-gray: #d0d2d3;
    --sulsul-green: #84c1a7;
    --bs-body-font-family: 'Montserrat', sans-serif;
    --bs-body-bg: var(--sulsul-dark);
    --bs-body-color: #fff;

    /* Forms */

    --sulsul-ink-oss: #384942;   /* anotado no layout para rótulos (Oswald Bold 14) */
    --sulsul-rose-oss: #dea2c8;  /* anotado no layout para destaques/títulos */
}

/* ---- AJUSTES GERAIS ---- */
body {
    padding-top: 60px; /* Espaçamento para o cabeçalho fixo */
    background-color: #000000;
}

main {
    margin-bottom: 200px;
}

a {
    text-decoration: none;
}

/* Estilo personalizado para a linha horizontal */
.hr-custom {
    border: 0; /* Remove a borda padrão do navegador */
    height: 2px; /* Define a ESPESSURA da linha. Mude este valor conforme desejar (ex: 1px, 3px, etc.) */
    background-color: var(--sulsul-purple); /* Define a COR da linha. Mude para a cor que preferir (ex: #FFFFFF, #ff0000, etc.) */
    opacity: 1; /* IMPORTANTE: O Bootstrap deixa o <hr> com opacidade 0.25. Definimos como 1 para a cor ficar sólida. */
}

/* ---- CABEÇALHO (NAVBAR) ---- */
.navbar-custom {
    background-color: var(--sulsul-purple) !important;
}

.navbar-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

/* ---- Estilos para os Links de Menu ---- */
.navbar-nav .nav-link {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 50px;
    color: #d0d2d3;
    letter-spacing: 0.5px;
    padding-left: 20px;
    padding-right: 20px;
    transition: color 0.2s ease-in-out;
}

.navbar-nav .nav-link:hover {
    color: #ffffff;
}

.navbar-nav .nav-link:focus {
    box-shadow: none;
}

.search-input {
    background-color: rgba(0,0,0,0.2);
    border: none;
    color: #fff;
    font-size: 0.85rem;
    width: 350px; /* Ajuste a largura conforme necessário */
}
.search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* ---- Estilos para os Botões de Autenticação ---- */
.auth-buttons .btn-auth {
    /* Estilização da Fonte (conforme solicitado) */
    font-family: 'Oswald', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 20px;
    line-height: 50px; /* Isso controlará a altura dos botões */
    color: #d0d2d3;
    letter-spacing: 0.5px;
    /*text-transform: uppercase; /* Deixa o texto em maiúsculas, como no design */

    /* Resetando estilos do Bootstrap */
    background-color: transparent;
    border: none; /* Remove todas as bordas por padrão */
    border-radius: 0; /* Remove as bordas arredondadas */
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 20px; /* Espaçamento horizontal */
    padding-right: 20px;

    /* Efeito suave de transição */
    transition: color 0.2s ease-in-out;
}

/* Adiciona a borda APENAS no segundo botão, criando a divisória */
.auth-buttons .btn-auth + .btn-auth {
    border-left: 1px solid rgba(208, 210, 211, 0.5); /* Borda com a mesma cor do texto, mas com 50% de opacidade */
}

/* Efeito ao passar o mouse */
.auth-buttons .btn-auth:hover {
    color: #ffffff; /* Deixa o texto branco puro ao passar o mouse */
}

/* Garante que o Bootstrap não adicione uma "sombra" de foco */
.auth-buttons .btn-auth:focus {
    box-shadow: none;
}

.notification-bell {
    /* Cor do ícone, igual à dos botões de login */
    color: #d0d2d3;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.notification-bell:hover {
    color: #ffffff; /* Clareia no hover */
}

/* Ajustes finos no badge (círculo vermelho) */
.notification-bell .badge {
    /* Cor de fundo */
    background-color: var(--sulsul-green);
    color: var(--sulsul-gray);

    /* Borda para efeito de recorte */
    border: 3px solid var(--sulsul-purple);

    /* Tamanho da fonte e espaçamento */
    font-size: 0.50em;
    font-weight: bold;
    padding: 0.3em 0.5em;

    /* NOVA POSIÇÃO PERSONALIZADA
      (substituindo as classes do Bootstrap)
    */
    top: -6%;
    right: -52%;

    /* DICA: Experimente mudar estes valores em pixels
      (ex: top: 2px; right: 2px;) até encontrar a posição exata que você mais gosta!
    */
}

.bordered-icon-button {
    border: 2px solid var(--sulsul-green);
    /*padding: 2px; */
    background-color: var(--sulsul-purple);
}

/* ---- SEÇÃO HERO ---- */
.hero-section {
    /* background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/assets/img/banner_1_taturana.png'); */
    background: url('/assets/img/banner_1_taturana.png');
    background-size: cover;
    background-position: center;
    min-height: 65vh;
    color: #fff;
}

.hero-section .title-hero-section {
    background-color: var(--sulsul-purple-transparent);
    font-family: 'Oswald', sans-serif;
    font-weight: 600; /* Semibold */
    font-size: 70px;
    color: var(--sulsul-title-gray);
}

.hero-section .lead {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 21px;
    color: #ffffff;
    background-color: var(--sulsul-purple-transparent);
}

/* ---- TÍTULOS DE SEÇÃO E LINKS ---- */
.section-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 500; /* Semibold */
    font-size: 28px;
    color: var(--sulsul-purple);
    letter-spacing: 5px;
    text-transform: uppercase;
}
.see-all-link {
    font-family: 'Oswald', sans-serif;
    font-weight: 500; /* Semibold */
    text-decoration: none;
    color: var(--sulsul-light-gray);
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: bold;
}
.see-all-link:hover {
    color: #fff;
}

.icon-semibold {
    /* Estas propriedades adicionam um contorno ao ícone */
    -webkit-text-stroke-width: 1.5px; /* Controle a espessura aqui */
    -webkit-text-stroke-color: currentColor; /* Usa a cor atual do texto/ícone */
}

/* ---- CARD DE EVENTO ---- */
.event-card {
    background-color: var(--sulsul-gray);
    border-radius: 8px;
    display: flex;
    overflow: hidden;
    height: 302px; /* Altura fixa para alinhamento */
}
.date-block {
    font-family: 'Oswald', sans-serif;
    font-weight: 700; /* Semibold */
    text-transform: uppercase;
    font-size: 28px;
    letter-spacing: -0.5px;
    background-color: var(--sulsul-purple);
    color: var(--sulsul-event-gray);
    text-align: center;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    min-width: 80px;
}
.date-block span {
    font-size: 40px;
    letter-spacing: -0.5px;
}
.info-block {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
}
.event-title {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--sulsul-event-gray);
    margin: 0;
    letter-spacing: -0.5px;
}
.event-details {
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    color: var(--sulsul-event-gray);
    margin: 0;
    letter-spacing: -0.5px;
}

.event-space {
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    color: var(--sulsul-event-gray);
    margin: 0;
    letter-spacing: -0.5px;
}

/* ---- CONTROLES DO CARROSSEL ---- */
.carousel-control-prev,
.carousel-control-next {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--sulsul-purple);
    opacity: 1;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-control-prev {
    left: -20px;
}
.carousel-control-next {
    right: -20px;
}

/* --- Estilos para o Card de Impact Projects --- */

.impact-card {

    /* [OPCIONAL] Defina uma largura máxima se não quiser que ele estique demais */
    max-width: 394px;
    /* [OPCIONAL] Força o card a ocupar 100% da altura da coluna, para alinhamento vertical */
    height: 100%;

    /* Centraliza o card DENTRO da coluna, se a coluna for maior que a max-width */
    margin: 0 auto;
}

#impactCarousel .row {
    display: inline-flex;  /* Faz a linha se comportar como um bloco inline que respeita o flexbox */
    width: auto;           /* Faz a linha ter a largura exata do seu conteúdo (os cards + seus vãos) */
    float: none;           /* Garante que não haja comportamentos de float inesperados */
}

/* Para manter uma proporção visualmente agradável na imagem */
.impact-card .card-img-top {
    width: 100%;
    aspect-ratio: 4 / 3; /* Proporção de 4:3, um padrão comum. Ajuste se necessário. */
    object-fit: cover;
    border-radius: 8px;
}


.impact-card .card-img-top {
    border-radius: 8px; /* Bordas levemente arredondadas na imagem */
}

/* Contêiner da sobreposição do título */
.card-title-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); /* Fundo em gradiente para suavizar a transição */
    color: #fff;
    padding: 1.5rem 1rem 1rem 1rem; /* Mais espaço na parte de baixo */
    border-radius: 0 0 8px 8px; /* Arredonda apenas os cantos inferiores */
}

.card-title-overlay .card-title {
    font-size: 1.1rem;
    line-height: 1.2;
    font-weight: 300; /* Deixa a primeira linha mais fina */
}

.card-title-overlay .card-title {
    /* Estilização da Fonte (conforme solicitado) */
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 21px;
    line-height: 25px; /* Isso controlará a altura dos botões */
    color: #d0d2d3;
}

.card-title-overlay .card-title strong {
    /* Estilização da Fonte (conforme solicitado) */
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 21px;
    line-height: 15px; /* Isso controlará a altura dos botões */
    color: #d0d2d3;
    text-transform: uppercase; /* Deixa o texto em maiúsculas, como no design */
}

/* Corpo do card */
.impact-card .card-text {
    font-family: 'Oswald', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 18px;
    color: var(--sulsul-light-gray); /* Reutilizando a variável de cor que já definimos */
    margin-bottom: 1rem;
}

/* Ícones de "rating" */
.rating-icons {
    color: var(--sulsul-purple); /* Reutilizando a variável de cor vermelha */
    font-size: 0.8rem;
    letter-spacing: 2px;
}

/* --- Estilos para o Card de Filme Recomendado --- */

.movie-card {
    /* Define uma altura fixa para o card. Se o pôster for menor, o fundo aparecerá */
    height: 450px;
    border-radius: 8px;
    overflow: hidden; /* Garante que a imagem não vaze para fora das bordas arredondadas */

    /* Prepara o card para ter um fundo, que será preenchido pelo JS */
    background-color: #1d1d1d; /* Cor de fallback caso o script falhe */

    /* Alinha o pôster no topo */
    display: flex;
    align-items: flex-start;

    transition: background-color 0.5s ease; /* Transição suave da cor de fundo */
}

.movie-poster {
    width: 100%;
    /* A altura será automática, mas nunca maior que o card */
    max-height: 100%;
    object-fit: contain;
}

footer {
    background-color: var(--sulsul-purple);
}

/* --- Estilização Personalizada para os Controles do Carrossel --- */

/* Estilos comuns para AMBOS os botões (prev e next) */
.carousel-control-prev,
.carousel-control-next {
    /* Remove o fundo e a borda padrão */
    background: none;
    border: none;

    /* Garante que a opacidade seja total (Bootstrap às vezes reduz) */
    opacity: 1;

    /* Ajusta o tamanho e o alinhamento vertical */
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    width: auto;

    /* Define a cor e o tamanho do ícone */
    color: var(--sulsul-gray); /* Um tom de roxo (BlueViolet). Mude para o seu roxo exato. */
    font-size: 3rem; /* Tamanho do ícone. Ajuste conforme necessário. */

    /* Efeito suave de transição */
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* Posiciona o botão "Anterior" FORA da área do carrossel, à esquerda */
.carousel-control-prev {
    left: -60px; /* Ajuste este valor para aumentar/diminuir o afastamento */
}

/* Posiciona o botão "Próximo" FORA da área do carrossel, à direita */
.carousel-control-next {
    right: -60px; /* Ajuste este valor para aumentar/diminuir o afastamento */
}

/* Efeito ao passar o mouse */
.carousel-control-prev:hover,
.carousel-control-next:hover {
    color: var(--sulsul-purple); /* Um tom de roxo mais escuro */
    transform: translateY(-50%) scale(1.1); /* Aumenta um pouco o ícone */
}


/* ====== PÁGINA DE REGISTRO DE USUÁRIO (NOVO) ====== */

.form-page {
    padding: 100px 20px;
}

.form-container {
    max-width: 600px; /* Largura máxima do formulário para legibilidade */
    margin: 0 auto;
}

/* --- Cabeçalho do Formulário --- */
.form-header {
    text-align: center;
    margin-bottom: 40px;
}

.avatar-uploader {
    display: inline-flex;
    width: 200px; /* fonte: imagem */
    height: 200px; /* fonte: imagem */
    margin-bottom: 20px;
}

.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--sulsul-ink-oss);
}

/* Avatar 200x200 + botão de 50x50 (aprox) usado como “Change Picture” */
.avatar-uploader { position: relative; width: 200px; height: 200px; }
.avatar-img{
    width: 200px; height: 200px; object-fit: cover;
    /* border: 2px solid var(--sulsul-purple);
     border-radius: 8px; background: var(--sulsul-gray);*/
}

.change-picture-label {
    display: block;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
    font-size: 23px; /* fonte: imagem */
    font-weight: 400; /* Regular */
    color: #dea2c8; /* fonte: imagem */
    letter-spacing: 0.5px; /* Entreletras: 50 */
    margin-bottom: 10px;
}

.icon-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.icon-actions img {
    width: 50px; /* fonte: imagem */
    height: 50px; /* fonte: imagem */
}

/* Ícones */
.btn-icon {
    width: 50px;
    height: 50px;
    border-radius: 10%;
    /* border: 2px solid var(--sulsul-green); */
    background-color: var(--sulsul-purple);
    color: var(--sulsul-rose-oss);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    transition: all 0.2s ease-in-out;
}

.btn-icon:hover {
    background-color: var(--sulsul-green);
    color: var(--sulsul-gray);
}


.form-title {
    font-family: 'Oswald', sans-serif;
    font-size: 25px; /* fonte: imagem */
    font-weight: 700; /* Bold */
    color: #d0d2d3; /* fonte: imagem */
    letter-spacing: 4px; /* Entreletras: 200 */
    text-transform: uppercase;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

/* --- Logins Sociais (AJUSTADO) --- */
.social-login-row {
    display: flex;
    gap: 20px; /* Mantém o espaçamento entre os botões */
    margin-bottom: 40px;
}

.btn-social-oss {
    /* 1. FAZ OS BOTÕES OCUPAREM 100% DA LARGURA */
    flex: 1; /* Faz com que cada botão cresça para preencher o espaço disponível */

    /* 2. ALINHA O ÍCONE E O TEXTO DENTRO DO BOTÃO */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 30px; /* Adiciona um espaço entre o ícone e o texto */

    /* Estilos existentes */
    text-decoration: none;
    color: var(--sulsul-rose-oss);
    /* padding: 12px 16px; /* Aumentei um pouco o padding vertical para mais altura */
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 2px;
    border-radius: 0 !important;

}

/* Deixa o ícone um pouco maior para um bom equilíbrio visual */
.btn-social-oss i {
    font-size: 40px;
    line-height: 1;
}

.btn-social-oss.google {
    background-color: var(--sulsul-purple);
}

/* --- Estilo para ícone vindo de um arquivo de imagem (PNG) --- */

.icon-google-from-png {
    display: inline-block; /* Essencial para que o elemento <i> aceite dimensões */
    vertical-align: middle; /* Ajuda a alinhar o ícone com o texto ao lado */

    /* As dimensões que você pediu */
    width: 40px;
    height: 40px;

    /* Propriedades para mostrar a imagem como fundo */
    background-size: contain; /* Garante que a imagem caiba inteira dentro dos 50px */
    background-repeat: no-repeat;
    background-position: center;
    padding: 0px;
}

/* Define a imagem específica para o ícone do Google */
#google-icon {
    /* IMPORTANTE: Substitua 'path/to/your/icon-google.png' pelo caminho correto do seu arquivo */
    background-image: url('/assets/img/icons/google-logo-144.png');
}
.btn-social-oss.facebook {
    background-color: var(--sulsul-purple);
}


/* --- Adicione esta Media Query para responsividade em telas pequenas --- */
@media (max-width: 600px) {
    .social-login-row {
        flex-direction: column; /* Empilha os botões verticalmente */
    }
}

/* --- Estrutura do Formulário --- */
.form-group {
    margin-bottom: 25px;
}

.form-label-oss {
    display: block;
    margin-bottom: 8px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 18px; /* fonte: imagem */
    color: var(--sulsul-event-gray); /* fonte: imagem */
    letter-spacing: 4px; /* Entreletras: 50 */
    text-transform: uppercase;
}

.form-control-oss {
    width: 100%;
    height: 55px; /* fonte: imagem */
    background-color: var(--sulsul-purple);
    border: 1px solid var(--sulsul-purple);
    padding: 0 15px;
    box-sizing: border-box;
    color: var(--sulsul-rose-oss); /* fonte: imagem */
    font-family: 'Oswald', sans-serif;
    font-size: 32px; /* fonte: imagem */
    font-weight: 400; /* Bold */
}
.form-control-oss:focus {
    outline: none;
    border-color: #dea2c8;
    box-shadow: 0 0 8px rgba(222, 162, 200, 0.4);
}

.form-row {
    display: flex;
    gap: 20px;
}
.form-row .form-group {
    flex: 1; /* Faz os campos dividirem o espaço igualmente */
}

/* --- Estilos para o campo de data customizado (Solução Universal) --- */

.date-input-wrapper {
    position: relative; /* Contêiner para o ícone posicionado absolutamente */
}

/* Nosso ícone customizado */
.date-input-icon {
    position: absolute;
    top: 50%;
    right: 15px; /* Posição à direita */
    transform: translateY(-50%);
    color: var(--sulsul-rose-oss); /* A cor que você quer para o ícone! */
    pointer-events: none; /* Permite que o clique "atravesse" o ícone e ative o input */
    font-size: 30px;
}

/* Modifica o input de data para esconder o ícone padrão */
.form-control-oss[type="date"] {
    /* Adiciona espaço à direita para o texto não passar por baixo do nosso ícone */
    padding-right: 40px;
}

/* Esconde o ícone padrão em navegadores WebKit */
.form-control-oss[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer; /* Mantém o cursor de clique */
}

/* Esconde o ícone padrão no Firefox (melhor esforço) */
/* O Firefox não permite esconder, mas podemos torná-lo da mesma cor do fundo */
/* Esta regra pode precisar de ajuste dependendo do seu estilo exato */
@supports (-moz-appearance:none) {
    .form-control-oss[type="date"] {
        color-scheme: dark;
    }
}

/* --- Tópicos de Interesse --- */
.topics-title {
    color: var(--sulsul-event-gray) !important; /* fonte: imagem */
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 4px !important; /* Entreletras: 200 */
}

.topics-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.chip {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 14px;
    display: inline-block;
    position: relative;
}

.chip input[type="checkbox"] {
    display: none; /* Esconde o checkbox real */
}

.chip span {
    display: block;
    padding: 8px 16px;
    /* border: 1px solid #384942; */
    border-radius: 50px; /* O design mostra cantos levemente arredondados */
    background-color: var(--sulsul-purple);
    color: var(--sulsul-rose-oss);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.chip span:hover {
    background-color: var(--sulsul-green);
    color: var(--sulsul-ink-oss);
    transition: all 0.2s ease;
}

.chip.active span {
    background-color: var(--sulsul-green);
    color: var(--sulsul-ink-oss);
}

/* --- Opt-ins (Checkboxes) --- */
.opt-in-group {
    margin-bottom: 40px;
}
.form-check-oss {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    cursor: pointer;
}
.form-check-oss input[type="checkbox"] {
    display: none; /* Esconde o checkbox real */
}
.form-check-oss span {
    font-family: 'Oswald', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 21px; /* fonte: imagem */
    color: var(--sulsul-rose-oss); /* fonte: imagem */
    letter-spacing: 1px; /* Entreletras: 50 */
    position: relative;
    padding-left: 35px; /* Espaço para a caixa customizada */
}
.form-check-oss span::before { /* A caixa customizada */
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 2px solid var(--sulsul-purple);
    background-color: var(--sulsul-purple);
}
.form-check-oss input:checked + span::after { /* O "check" */
    content: '';
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 7px;
    height: 12px;
    border: solid #dea2c8;
    border-width: 0 3px 3px 0;
}

/* --- Botão de Submissão --- */
.submit-container {
    text-align: center;
}
.btn-submit-oss {
    width: 215px; /* fonte: imagem */
    height: 67px; /* fonte: imagem */
    background-color: var(--sulsul-purple);
    border: none;
    border-radius: 0 !important;
    font-family: 'Oswald', sans-serif;
    font-size: 23px; /* fonte: imagem */
    font-weight: 400; /* Regular */
    color: var(--sulsul-rose-oss); /* fonte: imagem */
    letter-spacing: 1px; /* Entreletras: 50 */
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-submit-oss:hover {
    filter: brightness(1.2);
    background-color: var(--sulsul-green);
    color: var(--sulsul-ink-oss);
}

/* ====== START PÁGINA DE EVENTO ====== */

/* --- Utilitário de Layout para Contêiner Estreito --- */
.container-narrow {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    background-color: var(--sulsul-purple);
}

.event-hero {
    padding: 4rem 0;
}

.event-main-info {
    background-color: var(--sulsul-dark);
    border-style: solid;
    border-color: var(--sulsul-purple);
    border-width: 2px;
    /* Adicionado para garantir um padding interno consistente */
    padding: 1.5rem;
}

.event-main-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 51px;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
    color: var(--sulsul-green);
}

.event-main-description {
    background-color: var(--sulsul-purple);
    /*margin-top: 2rem; /* Garante o espaçamento da seção de cima */
}

.event-meta {
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
    color: var(--sulsul-light-gray);
}

.event-meta p {
    margin-bottom: 0.5rem;
}

.event-description {
    font-family: 'Oswald', sans-serif;
    color: var(--sulsul-light-gray);
    font-size: 0.9rem;
    /* Adiciona o espaçamento interno solicitado */
    padding: 20px 30px;
}

.event-page-card {
    position: relative;
    padding: 0; /* Remove o padding da coluna */
    margin-top: 2px;
    padding-right: 1px;
    background-color: var(--sulsul-purple);
    overflow: hidden;
}

/* Barra superior direita com 3 ícones (editar, foto, excluir) */
.event-image-toolbar{
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    gap: 8px;
}

/* Botões redondos, 50x50, seguindo sua paleta */
.btn-event-icon{
    width: 35px;
    height: 35px;
    border-radius: 10%;
    background-color: var(--sulsul-purple);
    color: var(--sulsul-rose-oss);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 0;
    transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-event-icon:hover,
.btn-event-icon:focus{
    background-color: var(--sulsul-green);
    color: var(--sulsul-gray);
    transform: translateY(-1px);
    outline: none;
}

/* Botão inferior direito “Visit Website” */
.btn-visit-site{
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    height: 35px;                /* proporção com os ícones */
    padding: 0 8px;
    border-radius: 7%;
    background: var(--sulsul-purple);
    color: var(--sulsul-rose-oss);
    text-decoration: none;

    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .05em;

    transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-visit-site:hover,
.btn-visit-site:focus{
    background-color: var(--sulsul-green);
    color: var(--sulsul-gray);
    transform: translateY(-1px);
    outline: none;
}

.card-event-image {
    /* Define uma altura fixa para o card. Se o pôster for menor, o fundo aparecerá */
    width: 100%;
    /* height: 300px; */
    border-radius: 8px;
    overflow: hidden; /* Garante que a imagem não vaze para fora das bordas arredondadas */

    /* Prepara o card para ter um fundo, que será preenchido pelo JS */
    background-color: #1d1d1d; /* Cor de fallback caso o script falhe */

    /* Alinha o pôster no topo */
    display: flex;
    align-items: flex-start;

    transition: background-color 0.5s ease; /* Transição suave da cor de fundo */
}

/* Ajustes responsivos */
@media (max-width: 576px){
    .event-image-toolbar{
        top: 8px;
        right: 8px;
        gap: 6px;
    }
    .btn-event-icon{
        width: 44px; height: 44px; font-size: 18px;
    }
    .btn-visit-site{
        right: 8px; bottom: 8px; height: 44px; padding: 0 14px; font-size: 16px;
    }
}

.event-hero-image {
    width: 100%;
    /* height: 100%; /* Força a imagem a ocupar 100% da altura */
    /* object-fit: cover; /* Cobre a área sem distorcer */
    border-radius: 0 !important;
}

/* --- Seção de Programação (Schedule) --- */

.section-title {
    color: var(--sulsul-green);
    letter-spacing: 7px;
}

.section-title-icon {
    color: var(--sulsul-rose-oss);
}

.schedule-scroller {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding-bottom: 20px; /* Espaço para a barra de rolagem não cortar a sombra */
    scroll-snap-type: x mandatory;
}

/* Esconde a barra de rolagem */
.schedule-scroller::-webkit-scrollbar {
    display: none;
}

.schedule-card {
    flex: 0 0 260px; /* Largura fixa para os cards */
    border: 1px solid var(--sulsul-gray);
    background-color: #0c0c0c;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
}

.card-date {
    background-color: var(--sulsul-purple);
    color: var(--sulsul-event-gray);
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    padding: 4px 0;
}

.card-image img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.play-icon:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.schedule-card .card-body {
    padding: 1rem;
    flex-grow: 1; /* Faz o corpo do card crescer para preencher o espaço */
}

.schedule-card-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--sulsul-event-gray);
}

.schedule-card .card-footer {
    padding: 0 1rem 1rem 1rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--sulsul-event-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.schedule-card .card-footer .bi-bookmark-fill {
    color: var(--sulsul-purple);
}

/* Variação para card de discussão */
.schedule-card--discussion {
    background-color: var(--sulsul-gray);
}
.participants-list {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: var(--sulsul-light-gray);
}

/* --- Seções Coletivos e Conexões --- */
.logo-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.logo-list img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 2px solid var(--sulsul-gray);
}


/* --- Responsividade para o formulário --- */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    .form-row .form-group {
        margin-bottom: 25px; /* Restaura o espaçamento quando empilhado */
    }
    .form-row .form-group:last-child {
        margin-bottom: 0;
    }
}

/* Media query para telas menores */
@media (max-width: 768px) {
    .carousel-control-prev {
        left: -10px;
    }
    .carousel-control-next {
        right: -10px;
    }
    .hero-section {
        text-align: center;
    }
}

/* -------- SweetAlert2 (Moviementa Theme) -------- */
.swal2-moviementa {
    background: #050505 !important;
    border: 1px solid var(--sulsul-purple);
    border-radius: 12px;
    padding: 32px 36px;
}
.swal2-moviementa-title {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
}
.swal2-moviementa-content {
    font-family: 'Montserrat', sans-serif;
    color: var(--sulsul-rose-oss);
    font-size: 0.95rem;
}
.swal2-moviementa-confirm,
.swal2-moviementa-cancel {
    border: none;
    padding: 10px 26px;
    border-radius: 0;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 6px;
}
.swal2-moviementa-confirm {
    background: var(--sulsul-purple);
    color: var(--sulsul-rose-oss);
}
.swal2-moviementa-cancel {
    background: var(--sulsul-ink-oss);
    color: var(--sulsul-rose-oss);
}
.swal2-moviementa-confirm:focus,
.swal2-moviementa-cancel:focus {
    box-shadow: none;
}