/* Variáveis CSS para cores globais */
:root {
    --primary-color: #0056b3; /* Um azul mais vibrante */
    --secondary-color: #6c757d;
    --text-color: #333;
    --light-bg: #f8f9fa;
    --dark-bg: #343a40;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    background-color: var(--light-bg);
}

/* Estilos da barra de navegação */
.navbar {
    background-color: var(--dark-bg) !important;
    border-bottom: 3px solid var(--primary-color);
}

.navbar .nav-link {
    color: white !important;
    transition: color 0.3s ease;
}

.navbar .nav-link:hover {
    color: var(--primary-color) !important;
}

.navbar-brand {
    color: white !important;
    font-weight: bold;
    font-size: 1.8rem;
}

/* Estilos da seção Hero (cabeçalho principal) - adaptado para páginas internas */
.hero-mini {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('images/hero-bg.jpg') center center no-repeat;
    background-size: cover;
    min-height: 80px; /* Reduza este valor para diminuir a altura mínima */
    padding-top: 15px; /* Adicione um padding superior */
    padding-bottom: 15px; /* Adicione um padding inferior */
    position: relative;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    margin-bottom: 30px;
}
/* Hero da Index, ligeiramente diferente */
.hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('images/hero-bg.jpg') center center no-repeat;
    background-size: cover;
    min-height: 150px; /* Maior para a página inicial */
    position: relative;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    animation: fadeIn 1s ease-out;
    margin-bottom: 50px;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


.hero h1, .hero-mini h1 {
    font-size: 2.8rem;
    margin-bottom: 15px;
}

.hero .input-group-lg .form-control, .hero .input-group-lg .btn,
.hero-mini .input-group-lg .form-control, .hero-mini .input-group-lg .btn {
    border-radius: 50px;
    padding: 0.5rem 1.2rem;
}
.hero .btn-primary, .hero-mini .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.hero .btn-primary:hover, .hero-mini .btn-primary:hover {
    background-color: #003d80;
    border-color: #003d80;
    transform: translateY(-2px);
}

/* Estilos para títulos de seção */
h2 {
    color: var(--primary-color);
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}

h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80px;
    height: 4px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

/* --- Estilos Comuns para Cards de Veículo --- */
.card.vehicle-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%; /* Garante que todos os cards da linha tenham a mesma altura */
    display: flex;
    flex-direction: column;
    position: relative; /* Importante: O card precisa ter position para o botão absoluto dentro dele */
    background-color: white;
}

.card.vehicle-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

/* Adicionado: position relative para o wrapper da imagem */
.card-img-wrapper {
    position: relative; /* ESSENCIAL: Permite que o botão com position: absolute se posicione corretamente */
    overflow: hidden;
}

.card-img-top {
    height: 200px; /* Altura fixa para as imagens dos veículos */
    width: 100%;
    object-fit: cover; /* Recorta a imagem para cobrir o espaço */
    display: block;
}

.card-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-title {
    display: block;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
    line-height: 1.3;
}
.card-title:hover {
    color: var(--primary-color);
}

.card-text {
    font-size: 1.10rem;
    color: var(--secondary-color);
    margin-bottom: 8px;
}

.card-text strong {
    color: var(--text-color);
}

.card-price-standard {
    font-size: 1.10rem;
    color: var(--secondary-color);
    margin-top: auto; /* Empurra para baixo */
    margin-bottom: 0; /* Remove margem inferior para alinhamento */
    padding-top: 8px; /* Espaçamento com o item acima */
    border-top: 1px solid #eee; /* Linha de separação */
}
.card-price-standard strong {
    font-size: 1rem; /* Um pouco maior para o valor do preço */
    color: var(--primary-color);
}

.placa-preta-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #333;
    color: gold;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 5px;
}
.placa-preta-badge .fas.fa-star {
    color: gold;
    text-shadow: 0 0 5px gold;
}

/* --- Estilos para Cards de Encontro --- */
.card.encontro-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative; /* Importante: O card de encontro também precisa ter position */
    background-color: white;
}

.card.encontro-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.card.encontro-card .card-img-top {
    height: 220px;
}

.card.encontro-card .card-text {
    font-size: 0.9rem;
}

.event-meta {
    font-size: 0.85rem;
    color: var(--secondary-color);
    margin-bottom: 5px;
}

/* Overlay para o botão de detalhes (para ambos os cards) */
.btn-details-overlay {
    position: absolute;
    bottom: 10px; /* Posição na parte inferior do card-img-wrapper */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    opacity: 1; /* <-- Garante que esteja SEMPRE VISÍVEL por padrão */
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 2; /* Garante que o botão fique acima da imagem */
    white-space: nowrap; /* Evita que o texto quebre em várias linhas em espaços pequenos */
}

/* Removida qualquer regra de hover que afetaria a opacidade do botão, como:
   .card:hover .btn-details-overlay { opacity: 1; }
   .card-img-wrapper:hover .btn-details-overlay { opacity: 1; } */

/* Efeito hover no próprio botão */
.btn-details-overlay:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateX(-50%) scale(1.05); /* Pequeno efeito de zoom no hover */
}


/* Estilos para a página de detalhes (encontro_detalhes.php e futuro veiculo_detalhe.php) */
.encontro-detail-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 30px;
}

.encontro-image-full {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 25px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.info-item {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: var(--text-color);
}

.info-item i {
    color: var(--primary-color);
    margin-right: 10px;
    font-size: 1.2em;
}

.info-item strong {
    color: var(--dark-bg);
}

.description-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin-top: 20px;
}

.back-button-container {
    margin-top: 40px;
    text-align: center;
}

.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #5a6268;
    transform: translateY(-2px);
}

/* Estilos do rodapé */
footer {
    background-color: var(--dark-bg);
    color: white;
    padding: 30px 0;
    margin-top: 50px;
}

footer small {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
}

/* --- Estilos para o Botão Flutuante do WhatsApp --- */
.whatsapp-float {
    position: fixed; /* Fixa o botão na tela */
    width: 60px;
    height: 60px;
    bottom: 30px; /* Distância do fundo */
    right: 30px; /* Distância da direita */
    background-color: #25D366; /* Cor verde do WhatsApp */
    color: #FFF;
    border-radius: 50px; /* Deixa o botão redondo */
    text-align: center;
    font-size: 28px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000; /* Garante que o botão fique acima de outros elementos */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none; /* Remove sublinhado do link */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #1DA851; /* Tom mais escuro no hover */
    transform: scale(1.05); /* Pequeno efeito de zoom */
    color: #FFF; /* Garante que a cor do ícone permaneça branca no hover */
}

/* Media Queries para responsividade */
@media (max-width: 767.98px) {
    .hero h1, .hero-mini h1 {
        font-size: 2rem;
    }
    .hero p.lead, .hero-mini p.lead {
        font-size: 1rem;
    }
    .hero .input-group-lg, .hero-mini .input-group-lg {
        flex-direction: column;
    }
    .hero .input-group-lg .form-control, .hero-mini .input-group-lg .form-control {
        width: 100% !important;
        margin-bottom: 10px;
    }
    .hero .input-group-lg .btn, .hero-mini .input-group-lg .btn {
        width: 100% !important;
    }
    .navbar-brand {
        font-size: 1.5rem;
    }
    .placa-preta-badge {
        font-size: 0.7rem;
        padding: 4px 8px;
    }

    /* O botão de detalhes não precisa de regras específicas de opacidade aqui,
       pois ele já é `opacity: 1` por padrão na regra geral.
       Mantenha o posicionamento absoluto para que ele continue sobre a imagem. */
    .btn-details-overlay {
        /* Nenhuma alteração de posicionamento ou opacidade é necessária aqui. */
    }

    /* Removida a regra de hover para o botão de detalhes em mobile. */

    .card-img-wrapper {
        height: 250px; /* Ajuste para melhor visualização em telas menores */
    }
    .card-img-top {
        height: 100%;
    }
    .encontro-detail-card {
        padding: 20px;
    }
    .info-item {
        font-size: 1rem;
    }
    .btn-secondary.btn-lg {
        font-size: 1rem;
        padding: 10px 20px;
    }
}