/* Estilo para o contêiner principal do formulário de pesquisa (bloco) */
/* Você talvez precise ajustar o seletor .views-exposed-form para a classe específica do seu bloco */
.views-exposed-form-calendario-page-1 {
    background-color: #ffffff; /* Fundo branco para o bloco */
    border: 1px solid #e9ecef; /* Borda sutil */
    border-radius: 8px; /* Bordas arredondadas */
    padding: 24px; /* Espaçamento interno */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Sombra suave para dar profundidade */
}

/* Estilo para o cabeçalho do bloco, como "EVENTOS" */
.views-exposed-form-calendario-page-1 .block-title,
.views-exposed-form-calendario-page-1 h2 {
    font-size: 1.5rem; /* Tamanho da fonte do título */
    font-weight: 600; /* Peso da fonte */
    color: #343a40; /* Cor do texto do título */
    margin-top: 0;
    margin-bottom: 24px; /* Espaçamento abaixo do título */
    padding-bottom: 16px;
    border-bottom: 1px solid #e9ecef; /* Linha separadora */
}

/* Contêiner de cada item do formulário (rótulo + campo) */
.form-item {
    margin-bottom: 10px; /* Espaçamento entre os campos */
}

/* Estilo para os rótulos (Título, Projeto, etc.) */
.form-item label {
    display: block; /* Garante que o rótulo fique em sua própria linha */
    font-weight: 500; /* Peso da fonte intermediário */
    color: #495057; /* Cor do texto do rótulo */
    margin-bottom: 6px; /* Espaço entre o rótulo e o campo */
}

/* Estilo geral para os campos de texto e select */
.form-text,
.form-select {
    width: 210%; /* Ocupa toda a largura disponível */
    padding: 12px; /* Espaçamento interno dos campos */
    font-size: 1rem; /* Tamanho da fonte */
    color: #495057; /* Cor do texto */
    background-color: #f8f9fa; /* Fundo sutilmente cinza */
    border: 1px solid #ced4da; /* Borda padrão */
    border-radius: 6px; /* Bordas arredondadas */
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Transição suave */
    box-sizing: border-box; /* Garante que padding não afete a largura total */
}

/* Efeito ao focar em um campo (clicar ou navegar com Tab) */
.form-text:focus,
.form-select:focus {
    outline: none; /* Remove o contorno padrão do navegador */
    border-color: #007bff; /* Cor da borda ao focar (azul) */
    background-color: #ffffff; /* Fundo branco ao focar */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Sombra externa para destaque */
}

/* Estilo para o botão de busca */
.form-submit {
    width: 100%; /* Ocupa toda a largura */
    padding: 12px 20px; /* Espaçamento interno */
    font-size: 1rem; /* Tamanho da fonte */
    font-weight: 600; /* Texto em negrito */
    color: #ffffff; /* Texto branco */
    background-color: #007bff; /* Cor de fundo azul (pode alterar para o azul da sua imagem) */
    border: none; /* Remove a borda padrão */
    border-radius: 6px; /* Bordas arredondadas */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    transition: background-color 0.2s ease, transform 0.1s ease; /* Transição suave */
    margin-top: 10px; /* Espaço acima do botão */
}

/* Efeito ao passar o mouse sobre o botão */
.form-submit:hover {
    background-color: #0056b3; /* Cor de fundo mais escura */
}

/* Efeito ao clicar no botão */
.form-submit:active {
    transform: scale(0.98); /* Leve encolhimento ao clicar */
}