/* ===============================
   CONFIGURAÇÕES GERAIS E FONTES
   =============================== */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    background-color: #f0f2f5;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ===============================
   CABEÇALHO E LOGO
   =============================== */
.main-header {
    background-color: #000000;
    width: 100%;
    padding: 15px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-logo {
    height: 50px;
    width: auto;
}

.details-header {
    padding: 20px 0;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
}

/* ===============================
   BANNER COM LOGO
   =============================== */
.hero-banner {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1552519507-da3b142c6e3d?q=80&w=2070&auto=format&fit=crop') no-repeat center center;
    background-size: cover;
    padding: 80px 20px; /* Padding ajustado */
    text-align: center;
    color: white;
}

/* Estilo para a logo DENTRO do banner */
.banner-logo {
    max-width: 350px; /* Largura máxima da logo no banner, ajuste se necessário */
    width: 80%; /* Ocupa 80% da largura em telas pequenas */
    height: auto;
    margin-bottom: 15px; /* Espaço entre a logo e o texto "Low cost" */
}

/* Estilo para a nova frase "Low cost" */
.hero-content h2 {
    font-family: 'Titillium Web', sans-serif;
    font-size: 2.5rem; /* Tamanho da fonte aumentado para dar impacto */
    font-weight: 900; /* Deixa a fonte bem forte */
    text-transform: uppercase; /* Transforma o texto em maiúsculas: LOW COST */
    letter-spacing: 3px; /* Espaçamento entre as letras */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}


/* ===============================
   GRID DE CARROS (PÁGINA PRINCIPAL)
   =============================== */
.car-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 25px;
    margin-top: 40px;
}

.car-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.car-card:hover { transform: translateY(-8px); box-shadow: 0 10px 25px rgba(0,0,0,0.12); }

.card-image-wrapper { aspect-ratio: 4 / 5; background-color: #e9e9e9; }
.card-image-wrapper img { width: 100%; height: 100%; object-fit: cover; }

.car-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.car-info h3 { font-family: 'Titillium Web', sans-serif; font-size: 1.4rem; font-weight: 600; }
.car-info .car-year { font-size: 0.9rem; color: #666; }
.car-info .car-price { font-size: 1.6rem; font-weight: bold; color: #0d6efd; }
.car-price-consult { font-size: 1.4rem; font-weight: bold; color: #28a745; }

.details-button {
    background-color: #0d6efd;
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    margin-top: auto;
    transition: background-color 0.2s;
}
.details-button:hover { background-color: #0b5ed7; color: white; }


/* ===============================
   ESTILOS DA PÁGINA DE DETALHES (detalhes.php)
   =============================== */
.single-car-container { padding-top: 0; }
.back-button-wrapper { margin-bottom: 30px; text-align: center; }
.back-to-grid-button {
    text-decoration: none;
    color: #495057;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 8px;
    background-color: #e9ecef;
    transition: background-color 0.2s;
    display: inline-block;
}
.back-to-grid-button:hover { background-color: #d8dde2; }
.back-to-grid-button i { margin-right: 8px; }

.single-car-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    align-items: flex-start;
}
.car-gallery .carousel { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.car-details-info h1 { font-family: 'Titillium Web', sans-serif; font-size: 2.8rem; font-weight: 700; margin-bottom: 5px; }
.car-details-info .details-year { font-size: 1.2rem; color: #6c757d; margin-bottom: 20px; }
.car-details-info .details-price { font-size: 2.5rem; font-weight: bold; color: #0d6efd; margin-bottom: 25px; }
.car-details-info .details-price-consult { font-size: 2rem; font-weight: bold; color: #28a745; margin-bottom: 25px; }

.whatsapp-contact-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background-color: #25d366; color: white; padding: 15px 25px; border-radius: 8px;
    text-decoration: none; font-size: 1.1rem; font-weight: 700; width: 100%;
    transition: background-color 0.2s;
}
.whatsapp-contact-button:hover { background-color: #128C7E; color: white; }

.features-title { font-family: 'Titillium Web', sans-serif; font-size: 1.5rem; margin-top: 40px; border-top: 1px solid #e9ecef; padding-top: 30px; }
.car-desc .features-list { list-style: none; padding-left: 0; margin-top: 20px; }
.car-desc .features-list li { display: flex; align-items: flex-start; margin-bottom: 12px; font-size: 1rem; line-height: 1.5; color: #495057; }
.car-desc .features-list li::before { margin-right: 12px; font-size: 1.1rem; position: relative; top: 2px; }
.feature-check::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f058"; color: #198754; }
.feature-bullet::before { content: "•"; color: #0d6efd; font-weight: 900; font-size: 1.5rem; top: -2px; }


/* ===============================
   BOTÃO WHATSAPP E RODAPÉ
   =============================== */
.whatsapp-button { position: fixed; bottom: 25px; right: 25px; background-color: #25d366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); text-decoration: none; transition: all 0.3s ease; z-index: 1000; }
.whatsapp-button:hover { transform: scale(1.1); background-color: #128C7E; }
footer { text-align: center; padding: 30px; margin-top: 40px; background-color: #343a40; color: #cccccc; }


/* ===============================
   RESPONSIVIDADE (MEDIA QUERIES)
   =============================== */
@media (max-width: 767px) {
    .container { padding: 15px; }
    .car-grid { gap: 15px; }
    .car-info { padding: 15px; }
    .car-info h3 { font-size: 1.1rem; }
    .car-info .car-price, .car-price-consult { font-size: 1.3rem; }
    
    .single-car-layout { grid-template-columns: 1fr; gap: 30px; }
    .car-details-info h1 { font-size: 2rem; }
    .car-details-info .details-price { font-size: 2rem; }
    
    .hero-content h2 { font-size: 2rem; letter-spacing: 2px; }
}