/* style.css - Visual Presbiteriano Moderno */

/* Definição de Cores Globais */
:root {
    --verde-presbiteriano: #006633; /* Um verde floresta sóbrio */
    --verde-claro: #008040;
    --bege-claro: #f4f1ea; /* Fundo suave para contraste */
    --branco: #ffffff;
    --preto-suave: #333333;
    --sombra: 0 4px 15px rgba(0,0,0,0.2);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fonte limpa */
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bege-claro);
    
    /* === O SEGREDO DO FUNDO === */
    /* 1. Definimos o fundo geral como o verde forte */
    background-image: 
        /* 2. Camada superior: O gradiente verde por cima de tudo */
        linear-gradient(135deg, rgba(0, 102, 51, 0.9) 0%, rgba(0, 128, 64, 0.8) 100%),
        /* 3. Camada inferior: A imagem da igreja */
        /* substitua 'sua-igreja.jpg' pelo caminho real na pasta assets/ */
        url('assets/igreja/bg01.png'); 
        
    /* Configurações da imagem */
    background-size: cover; /* Cobre toda a tela */
    background-position: left center; /* Alinha a igreja à esquerda */
    background-repeat: no-repeat;
    
    /* 4. O Efeito de Esmaecimento Diagonal */
    /* Usamos mask-image para "cortar" o fundo, não o contêiner */
    -webkit-mask-image: linear-gradient(110deg, black 40%, transparent 100%);
    mask-image: linear-gradient(110deg, black 40%, transparent 100%);
}

/* Centraliza o formulário de login por cima do fundo esmaecido */
.login-container {
    background: var(--branco);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--sombra);
    text-align: center;
    width: 350px;
    z-index: 10; /* Garante que fique acima do efeito de fundo */
    position: relative;
    border-top: 5px solid var(--verde-claro); /* Detalhe presbiteriano */
}

h1 {
    color: var(--verde-presbiteriano);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

input {
    width: 100%;
    padding: 12px 15px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 1rem;
    transition: border-color 0.3s;
}

input:focus {
    border-color: var(--verde-claro);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 128, 64, 0.1);
}

button {
    width: 100%;
    padding: 12px;
    background-color: var(--verde-presbiteriano);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.1s;
    margin-top: 10px;
}

button:hover {
    background-color: var(--verde-claro);
}

button:active {
    transform: scale(0.98);
}

#message {
    margin-top: 15px;
    color: #cc0000;
    font-size: 0.9rem;
}


/* Garante que o ícone do calendário não empurre o texto */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    padding: 5px;
    filter: invert(0.5); /* Deixa o ícone mais discreto se desejar */
}

/* Remove a aparência padrão que alguns navegadores forçam no date */
/* Remove o ícone de calendário e os controles nativos */
#reg-nascimento::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

#reg-nascimento::-webkit-inner-spin-button,
#reg-nascimento::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}

/* ======================================= */
/* Estilos para os novos botões de seleção */
.selection-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
}

.btn-selection {
    padding: 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: background 0.3s;
}

.btn-membro {
    background-color: var(--verde-presbiteriano);
    color: white;
}

.btn-visitante {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
}

.btn-visitante:hover {
    background-color: #e5e5e5;
}

/* Esconde o formulário inicialmente */
#login-section {
    display: none;
}

.btn-voltar {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 0.8rem;
    margin-bottom: 0px;
    text-decoration: none;
}

/* =============== BOTÃO VOLTAR ============ */
.btn-voltar-flutuante {
    position: absolute;
    top: 15px;
    left: 15px;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    width: 35px;
    height: 35px;
}

.btn-voltar-flutuante:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--verde-presbiteriano);
    transform: translateX(-3px); /* Leve animação para a esquerda */
}

/* Garante que o ícone SVG herde a cor */
.btn-voltar-flutuante svg {
    width: 20px;
    height: 20px;
}

.hidden {
    display: none !important;
}


/* --- AJUSTE PARA CELULAR (Telas menores que 480px) --- */
@media (max-width: 480px) {
    #selection-section.hidden, #login-section.hidden {
        display: none !important;
    }

    .login-container {
        padding-top: 45px;
    }

    .login-container h1 {
        font-size: 1.6rem;
        margin-top: 10px;
    }

    .btn-voltar-flutuante {
        top: 15px;
        left: 15px;
        width: 32px;  /* Seta menor no celular */
        height: 32px; /* Seta menor no celular */
        background: transparent; /* Remove o fundo no celular para ser mais discreto */
        border: none; /* Remove a borda para ocupar menos espaço visual */
    }

    .btn-voltar-flutuante svg {
        width: 18px; /* Ícone levemente menor */
        height: 18px;
    }

    .btn-selection {
        padding: 14px; /* Botões um pouco menores no celular para não empilhar feio */
        font-size: 0.95rem;
    }
    
    /* Ajuste o título para não bater na seta no celular */
    .login-container h1 {
        font-size: 1.4rem;
        margin-top: 10px;
    }
}