/* =========================================
   Estilo da Barra de Rolagem Verde Personalizada
   (Compatível com Chrome, Edge, Safari)
   ========================================= */

/* 1. Define a largura total da barra de rolagem */
::-webkit-scrollbar {
    width: 12px;               /* Largura da barra vertical */
    height: 12px;              /* Altura da barra horizontal, se houver */
}

/* 2. Estiliza o fundo da barra de rolagem (a "pista") */
::-webkit-scrollbar-track {
    background-color: #f1f1f1;  /* Uma cor cinza bem clara e limpa para o fundo */
    border-radius: 10px;       /* Cantos arredondados */
}

/* 3. Estiliza o controle deslizante (a "mão") que o usuário move */
::-webkit-scrollbar-thumb {
    background-color: #007f5f;  /* A cor verde vibrante do projeto (Emerald Green) */
    border-radius: 10px;       /* Cantos arredondados para um visual moderno */
    border: 2px solid #f1f1f1; /* Cria um espaço (respiro) entre a mão e a pista */
}

/* 4. Altera a cor do controle deslizante quando o usuário passa o mouse por cima */
::-webkit-scrollbar-thumb:hover {
    background-color: #005f45;  /* Um verde mais escuro para feedback visual */
}

/* 5. Estiliza o canto onde as barras vertical e horizontal se encontram */
::-webkit-scrollbar-corner {
    background-color: #f1f1f1; /* Mantém a mesma cor da pista */
}

/* =========================================
   Estilo Adicional para Firefox
   (O Firefox usa uma sintaxe diferente)
   ========================================= */
html {
    scrollbar-color: #007f5f #f1f1f1; /* Cor da mão e cor da pista */
    scrollbar-width: thin;             /* Define a espessura como fina */
}

/* Estilo para o painel de conteúdo arredondado e transparente */
.church-content-panel {
    background-color: rgba(255, 255, 255, 0.7); /* Fundo branco semi-transparente */
    border-radius: 20px;                         /* Cantos bem arredondados */
    padding: 30px;                             /* Espaçamento interno */
    width: 400px;                              /* Uma largura fixa como no projeto */
    height: 400px;                             /* Uma altura fixa para forçar a rolagem */
    overflow-y: scroll;                        /* Habilita a rolagem vertical */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);  /* Sombra suave */
}

/* Aplicando o estilo de barra de rolagem verde APENAS a este painel */
.church-content-panel::-webkit-scrollbar {
    width: 10px;
}

.church-content-panel::-webkit-scrollbar-track {
    background-color: transparent; /* Deixa o fundo do painel visível */
}

.church-content-panel::-webkit-scrollbar-thumb {
    background-color: #007f5f;
    border-radius: 10px;
}