/* Estilos Gerais e Reset Básico */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa; /* Fundo mais claro */
    color: #343a40;
    line-height: 1.6;
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura/altura */
}

*, *::before, *::after {
    box-sizing: inherit; /* Herda box-sizing para todos os elementos */
}

/* Base para todas as seções */
section {
    padding: 60px 0;
    margin-bottom: 20px;
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden; /* Para garantir que sombras internas não vazem */
}

section:nth-of-type(even) { /* Estilo para seções alternadas */
    background-color: #e9ecef;
}

.container {
    width: 90%;
    max-width: 1200px; /* Largura máxima para o conteúdo central */
    margin: 0 auto;
    padding: 0 15px; /* Adiciona padding nas laterais para telas menores e maiores */
}

h2 {
    text-align: center;
    color: #212529;
    margin-bottom: 50px;
    font-size: 2.5em; /* Tamanho maior para títulos */
    position: relative;
    padding-bottom: 10px;
}

h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: #e74c3c; /* Linha de destaque */
    border-radius: 2px;
}

/* --- Header --- */
header {
    background-color: #2c3e50;
    color: #fff;
    padding: 15px 0;
    border-bottom: 5px solid #e74c3c;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Permite que os itens quebrem a linha */
}

.logo img {
    max-height: 70px; /* Logo um pouco maior */
    width: auto;
    display: block;
}

nav {
    display: flex;
    gap: 15px; /* Espaçamento entre os botões */
}

nav a {
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: bold;
    text-align: center;
    white-space: nowrap; /* Impede que o texto quebre a linha dentro do botão */
}

nav a:hover {
    background-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.btn-login-header {
    background-color: #3498db; /* Azul vibrante */
}

.btn-criar-conta-header {
    background-color: #28a745; /* Verde de sucesso */
}

/* --- Seção Quem Somos --- */
.about-us p {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    font-size: 1.15em;
    color: #555;
}

/* --- Seção Donos --- */
.owner-cards {
    display: flex;
    flex-wrap: wrap; /* Permite que os cards quebrem a linha */
    justify-content: center; /* Centraliza os cards */
    gap: 40px; /* Mais espaço entre os cards */
}

.owner-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    width: 280px; /* Largura fixa para os cards em telas maiores */
    flex-shrink: 0; /* Impede que o card encolha mais do que o necessário */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.owner-card:hover {
    transform: translateY(-8px); /* Efeito de elevação ao passar o mouse */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.owner-photo {
    width: 150px; /* Fotos maiores */
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 5px solid #3498db; /* Borda um pouco mais grossa */
    box-shadow: 0 0 0 5px rgba(52, 152, 219, 0.3); /* Efeito de anel */
}

.owner-card h3 {
    margin: 10px 0 15px;
    color: #2c3e50;
    font-size: 1.6em;
}

.whatsapp-link {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #25D366; /* Cor do WhatsApp */
    color: #fff;
    border-radius: 50%;
    width: 50px; /* Ícone maior */
    height: 50px;
    font-size: 1.5em; /* Ícone maior */
    position: absolute;
    bottom: 20px;
    right: 20px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, background-color 0.3s ease;
}

.whatsapp-link:hover {
    transform: scale(1.15) rotate(5deg); /* Efeito mais dinâmico */
    background-color: #1DA851; /* Tom um pouco mais escuro ao hover */
}

/* --- Seção Localização, App OnMotor, Parceiros --- */
.location, .app-onmotor, .partners {
    text-align: center;
    padding: 60px 20px; /* Garante padding interno */
}

.btn-location, .btn-app {
    display: inline-flex; /* Usar inline-flex para alinhar ícone e texto */
    align-items: center;
    justify-content: center;
    background-color: #e74c3c;
    color: #fff;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.2em;
    margin-top: 25px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    min-width: 250px; /* Garante largura mínima para botões */
    max-width: 100%; /* Permite que o botão ocupe toda a largura disponível em telas pequenas */
    box-sizing: border-box; /* Garante que padding e border não extrapolem a largura */
}

.btn-location:hover, .btn-app:hover {
    background-color: #c0392b;
    transform: translateY(-3px);
}

.btn-location i, .btn-app i {
    margin-right: 12px;
}

.onmotor-logo {
    height: 35px; /* Tamanho da logo do OnMotor dentro do botão */
    margin-right: 12px;
}

.partners p {
    font-size: 1.1em;
    color: #777;
}

/* --- Footer --- */
footer {
    background-color: #2c3e50;
    color: #dee2e6; /* Cor mais suave para o texto do footer */
    text-align: center;
    padding: 25px 0;
    margin-top: 30px;
    border-top: 5px solid #e74c3c;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* --- Responsividade (Media Queries) --- */

/* Para telas menores que 992px (tablets e alguns notebooks pequenos) */
@media (max-width: 992px) {
    .owner-cards {
        gap: 30px; /* Reduz um pouco o espaçamento entre os cards */
    }

    .owner-card {
        width: calc(50% - 30px); /* Tenta colocar 2 cards por linha */
        max-width: 320px; /* Garante que não fiquem muito grandes */
    }
}

/* Para telas menores que 768px (smartphones maiores e alguns tablets na vertical) */
@media (max-width: 768px) {
    h2 {
        font-size: 2em;
        margin-bottom: 40px;
    }

    .header-content {
        flex-direction: column; /* Empilha logo e navegação */
        text-align: center;
    }

    .logo {
        margin-bottom: 15px;
    }

    nav {
        flex-direction: column; /* Botões de navegação empilhados */
        width: 100%;
        gap: 10px;
    }

    nav a {
        margin: 0 auto; /* Centraliza botões */
        width: 90%; /* Ocupa a largura total do container */
        max-width: 300px; /* Limita a largura máxima */
    }

    .owner-cards {
        flex-direction: column; /* Cards dos donos empilhados */
        align-items: center; /* Centraliza os cards */
        gap: 30px;
    }

    .owner-card {
        width: 90%; /* Ajusta para ocupar mais espaço em telas menores */
        max-width: 350px; /* Limita a largura máxima em telas menores */
        padding: 25px;
    }

    .whatsapp-link {
        width: 45px;
        height: 45px;
        font-size: 1.3em;
        bottom: 15px;
        right: 15px;
    }

    .btn-location, .btn-app {
        font-size: 1.1em;
        padding: 12px 25px;
        width: 90%; /* Ocupa mais largura */
        max-width: 350px; /* Limita largura */
        margin-left: auto; /* Centraliza */
        margin-right: auto; /* Centraliza */
    }

    section {
        padding: 40px 0;
    }
}

/* Para telas muito pequenas (smartphones) */
@media (max-width: 480px) {
    h2 {
        font-size: 1.7em;
        margin-bottom: 30px;
    }

    .logo img {
        max-height: 60px;
    }

    nav a {
        font-size: 0.9em;
        padding: 8px 15px;
    }

    .owner-photo {
        width: 120px;
        height: 120px;
    }

    .whatsapp-link {
        width: 40px;
        height: 40px;
        font-size: 1.2em;
        bottom: 10px;
        right: 10px;
    }

    .about-us p {
        font-size: 1em;
    }

    .btn-location, .btn-app {
        font-size: 1em;
        padding: 10px 20px;
    }
}

/* --- Estilos Específicos para a Página de Autenticação (auth.html) --- */

.auth-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Garante que o corpo ocupe a altura total da viewport */
    background-color: #e9ecef; /* Um fundo levemente diferente para a página de autenticação */
}

.auth-main {
    flex-grow: 1; /* Faz com que o conteúdo principal ocupe o espaço restante */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.auth-container {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px; /* Largura máxima para a caixa de login/cadastro */
    padding: 30px;
    text-align: center;
}

.auth-box {
    width: 100%;
}

.auth-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #e9ecef;
}

.tab-button {
    background: none;
    border: none;
    padding: 15px 25px;
    font-size: 1.1em;
    font-weight: bold;
    color: #6c757d;
    cursor: pointer;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 2px solid transparent;
    flex-grow: 1; /* Faz os botões preencherem o espaço */
    z-index: 2; /* Garante que os botões de aba estejam acima de outros elementos se houver sobreposição */
    position: relative; /* Necessário para z-index funcionar */
}

.tab-button.active {
    color: #2c3e50;
    border-bottom: 2px solid #e74c3c;
}

.tab-button:hover:not(.active) {
    color: #3498db;
}

/* Oculta os formulários por padrão */
.auth-form {
    display: none;
    /* Removido o animation para evitar possíveis interferências iniciais na depuração. */
    /* animation: fadeIn 0.5s ease-out; */
    z-index: 1; /* Garante que os formulários estejam em uma camada abaixo dos botões de aba, mas acima do fundo */
    position: relative; /* Necessário para z-index funcionar */
}

/* Mostra o formulário ativo */
.auth-form.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-form h3 {
    color: #2c3e50;
    margin-bottom: 25px;
    font-size: 1.8em;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #495057;
}

.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"],
.form-group input[type="tel"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="text"]:focus,
.form-group input[type="tel"]:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
    outline: none;
}

.btn-submit {
    background-color: #28a745;
    color: #fff;
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%;
    margin-top: 15px;
}

.btn-submit:hover {
    background-color: #218838;
    transform: translateY(-2px);
}

/* Garante que a mensagem esteja visível e tenha espaço */
.auth-message {
    margin-top: 20px;
    font-weight: bold;
    text-align: center; /* Centraliza o texto da mensagem */
    min-height: 20px; /* Garante que o elemento tenha uma altura mínima mesmo vazio */
    padding: 5px 0; /* Um pouco de padding para espaço */
    visibility: visible; /* Garante que não esteja hidden por alguma outra regra */
    opacity: 1; /* Garante que não esteja transparente */
    transition: opacity 0.3s ease; /* Transição suave se o conteúdo mudar */
    /* REMOVIDO: A cor padrão agora é definida apenas pelo JavaScript para evitar conflitos */
    /* color: #333; */
}

/* Estilos para mensagens de erro e sucesso definidos pelo JS.
   Estas regras **NÃO** precisam de !important se o JavaScript estiver definindo o estilo inline.
   O estilo inline tem a maior prioridade. */
/* Se a cor for definida diretamente no JS, estas regras são redundantes para a cor,
   mas podem ser úteis para outras propriedades. */
/* Removendo as regras com !important, já que o JS setará o inline style. */
/* .auth-message[style*="color: green"] {
    color: green;
}
.auth-message[style*="color: red"] {
    color: red;
} */

/* Se você ABSOLUTAMENTE precisar de uma garantia via CSS, pode usar isso: */
.auth-message.success {
    color: green !important;
}
.auth-message.error {
    color: red !important;
}

/* E no JS, você adicionaria/removeria a classe:
   if (status === 'success') {
       messageElement.classList.add('success');
       messageElement.classList.remove('error');
   } else {
       messageElement.classList.add('error');
       messageElement.classList.remove('success');
   }
*/

/* No entanto, a solução mais limpa é deixar o JS definir a cor inline e remover a cor padrão do CSS. */

/* --- Novas Classes para Mensagens (Adicione ao seu style.css) --- */
.auth-message.message-success {
    color: green; /* Cor para mensagens de sucesso */
}

.auth-message.message-error {
    color: red; /* Cor para mensagens de erro */
}

/* IMPORTANTE: Se você ainda tiver 'color: #333;' na regra base .auth-message, REMOVA-A!
   Exemplo de como NÃO DEVE ESTAR:
   .auth-message {
       color: #333; // <-- REMOVA ESTA LINHA!
       margin-top: 20px;
       font-weight: bold;
       text-align: center;
       min-height: 20px;
       padding: 5px 0;
       visibility: visible;
       opacity: 1;
       transition: opacity 0.3s ease;
   }
*/