:root {
    /* Cores */
    --cor-principal: #f07a22;
    --cor-texto: white;
    --cor-erro: #FF5733;
    --cor-sucesso: #4CAF50;
    --cor-aviso: #FFC107;
    --cor-fundo: #fff4e7; /* branco para fundo */
    --cor-acento: #007bff; /* azul para elementos de ação */
    --cor-fundo-botao: white;
    --cor-texto-botao: #f07a22;
    --cor-hover-botao: #f8a52b;
    --cor-botao-ranking: #4CAF50;
    --cor-hover-botao-ranking: #388E3C;
    --cor-sombra: rgba(0, 0, 0, 0.1);
    --gradiente-motivacional: linear-gradient(135deg, #f07a22, #ffae52); /* Cores alinhadas com a identidade do site */

    /* Fontes e Tamanhos */
    --tamanho-fonte-h1: 36px;
    --tamanho-fonte-h2: 24px;
    --tamanho-fonte-padrao: 1rem;
    --tamanho-fonte-status: 20px;
    --tamanho-icone-lupa: 1.5rem;
    --fonte-motivacional1: 'Orbitron', sans-serif;
    --fonte-motivacional2: 'Roboto', sans-serif;

    /* Outros */
    --raio-borda: 5px;
    --margem-padrao: 10px;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--cor-principal);
    background-image: url('https://blooming-cove-88341-3f0299714f13.herokuapp.com/images/background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: var(--cor-texto);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    width: 80%;
    max-width: 700px;
    margin: 2rem auto;
    padding: 1rem;
    border-radius: var(--raio-borda);
    box-shadow: 0 4px 8px var(--cor-sombra);
    display: flex;
    flex-direction: column; /* Organiza o conteúdo em coluna */
    align-items: center; /* Centraliza o conteúdo horizontalmente */
}

header {
    text-align: center;
    padding: var(--margem-padrao) 0;
}

#logo {
    width: 300px;
    margin: 0 auto;
    display: block;
}

.motivational-section {
    background-image: var(--gradiente-motivacional); /* Aplicando o novo gradiente */
    color: var(--cor-texto);
    padding: 20px; /* Aumentado para melhor visualização */
    margin: 2rem 0;
    font-size: var(--tamanho-fonte-h2);
    font-family: var(--fonte-motivacional);
    border-radius: var(--raio-borda);
    box-shadow: 0 2px 4px var(--cor-sombra);
    display: flex;
    width: 90%;
    flex-direction: row; /* Mudado para linha */
    align-items: center; /* Alinhamento centralizado vertical */
    justify-content: center; /* Alinhamento centralizado horizontal */
    position: relative;
    gap: 10px; /* Espaço entre ícone e texto */
}

.motivational-section .material-icons {
    font-size: 1.5rem; /* Tamanho ajustado para alinhar com o texto */
    color: var(--cor-texto);
    opacity: 0.9;
}

.motivational-section p {
    font-family: var(--fonte-motivacional1);
    margin: 0; /* Remover a margem padrão para alinhar com o ícone */
    animation: fadeIn 2s ease-in-out;
    display: flex;
    align-items: center; /* Alinha o texto com o ícone */
}

/* Animação de fade-in */
@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.extra-message-section {
    width: 90%;
    color: var(--cor-principal); /* Cor principal do site */
    padding: var(--margem-padrao);
    margin: 1rem 0; /* Espaço acima e abaixo da nova seção */
    font-size: var(--tamanho-fonte-padrao);
    font-family: var(--fonte-motivacional2);
    text-align: center; /* Texto centralizado */
    border-radius: var(--raio-borda);
    box-shadow: 0 2px 4px var(--cor-sombra);
    background-color: var(--cor-fundo); /* Cor de fundo suave */
}

#extraMessage {
    margin: 0; /* Removendo qualquer margem padrão */
}

.search-section {
    background: var(--cor-fundo);
    padding: var(--margem-padrao);
    width: 90%;
    display: flex;
    flex-direction: column; /* Organiza os elementos em colunas */
    gap: 10px; /* Espaçamento entre as linhas */
    align-items: center;
    border-radius: 8px;

}

.search-row {
    width: 100%; /* Faz com que a linha ocupe toda a largura da search-section */
    display: flex;
    justify-content: left; /* Distribui o espaço igualmente entre os elementos */
    align-items: center;
}


#cpfInput {
    min-width: 300px; /* Tamanho mínimo para acomodar um CPF completo */
    padding: 10px;
    border: none;
    border-top-left-radius: var(--raio-borda); /* Arredondado apenas no canto superior esquerdo */
    border-bottom-left-radius: var(--raio-borda); /* Arredondado apenas no canto inferior esquerdo */
    border-top-right-radius: 0; /* Canto superior direito reto */
    border-bottom-right-radius: 0; /* Canto inferior direito reto */
    font-size: var(--tamanho-fonte-padrao);
    box-shadow: 0 4px 6px var(--cor-sombra);
    transition: transform 0.3s, box-shadow 0.3s;
}

#cpfInput:focus {
    outline: none; /* Remove o contorno ao focar */
}


.botao-ranking {
    padding: 10px;
    border: none;
    border-radius: 4px; /* Curvatura consistente nas pontas */
    font-size: var(--tamanho-fonte-padrao);
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer; /* Cursor em forma de mãozinha */
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
}

.search-button {
    padding: 5.5px;
    border: none;
    border-top-right-radius: var(--raio-borda); /* Arredondado apenas no canto superior direito */
    border-bottom-right-radius: var(--raio-borda); /* Arredondado apenas no canto inferior direito */
    border-top-left-radius: 0; /* Canto superior esquerdo reto */
    border-bottom-left-radius: 0; /* Canto inferior esquerdo reto */
    background-color: var(--cor-acento);
    color: var(--cor-texto);
    font-size: var(--tamanho-fonte-padrao);
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
    margin-right: 30px; /* Espaço entre o botão de busca e o de ranking */
}

.botao-ranking {
    background-color: var(--cor-botao-ranking);
    color: var(--cor-texto);
    white-space: nowrap; /* Impede a quebra de linha do texto no botão */
    flex-grow: 0; /* Não permite que o botão de ranking cresça */
}

.search-button:hover, .botao-ranking:hover {
    background-color: var(--cor-hover-botao);
}



#cpfStatus {
    font-size: var(--tamanho-fonte-status);
    font-weight: 700;
    padding: 10px;
    border-radius: var(--raio-borda);
    margin-top: var(--margem-padrao);
    /* Os estilos específicos de cores são definidos pelos IDs de status (success, warning, error) */
}

.infoBox {
    display: none; /* Ocultar inicialmente */

    background-color: var(--cor-fundo-botao);
    color: var(--cor-texto-botao);
    padding: 10px;
    border-radius: var(--raio-borda);
    box-shadow: 0 4px 6px var(--cor-sombra);
    text-align: center;
    font-size: var(--tamanho-fonte-infoBox);
    /* As infoBoxes estão ocultas por padrão, seu estilo de exibição é alterado via JavaScript */
}

#infoContainer {
    display: flex;
    flex-direction: column; /* Alinhar verticalmente */
    align-items: center;
    width: 100%; /* Ocupar toda a largura */
    gap: 10px; /* Espaçamento entre as boxes */
}

/* Classe para status de sucesso */
.success {
    color: #fff;
    background-color: #28a745; /* Verde */
    border-color: #28a745;
}

/* Classe para status de erro */
.error {
    color: #fff;
    background-color: #dc3545; /* Vermelho */
    border-color: #dc3545;
}

/* Classe para status de aviso */
.warning {
    color: #fff;
    background-color: #ffc107; /* Amarelo */
    border-color: #ffc107;
}

/* Classe para status inativo ou outros */
.inactive, .other {
    color: #fff;
    background-color: #6c757d; /* Cinza */
    border-color: #6c757d;
}