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

.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;
    border-bottom: 1px solid #222;
}

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

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

/* ===============================
   BANNER COM LOGO
   =============================== */
.hero-banner {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('banner-loja.jpg') no-repeat center center;
    background-size: cover;
    padding: 80px 20px;
    text-align: center;
    color: white;
}
.banner-logo { max-width: 350px; width: 80%; height: auto; margin-bottom: 15px; }
.hero-content h2 { font-family: 'Titillium Web', sans-serif; font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; 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: #1e1e1e;
    border: 1px solid #282828;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    overflow: hidden; /* ESSENCIAL para a faixa funcionar */
    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.3); border-color: #F5A623; }

.card-image-wrapper { aspect-ratio: 4 / 5; background-color: #2a2a2a; position: relative; } /* Posição relative é crucial */
.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; color: #ffffff; }
.car-info .car-year { font-size: 0.9rem; color: #a0a0a0; }
.car-info .car-price { font-size: 1.6rem; font-weight: bold; color: #F5A623; }
.car-price-consult { font-size: 1.4rem; font-weight: bold; color: #28a745; }

.details-button { background-color: #F5A623; 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: #d88e14; 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: #f0f0f0; font-weight: 500; padding: 10px 15px; border-radius: 8px; background-color: #333; transition: background-color 0.2s; display: inline-block; }
.back-to-grid-button:hover { background-color: #444; }
.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; color: #ffffff; }
.car-details-info .details-year { font-size: 1.2rem; color: #a0a0a0; margin-bottom: 20px; }
.car-details-info .details-price { font-size: 2.5rem; font-weight: bold; color: #F5A623; 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 #282828; padding-top: 30px; color: #ffffff; }
.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: #a0a0a0; }
.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: #F5A623; 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: #000000; color: #777; border-top: 1px solid #222; }

/* ===============================
   ETIQUETAS DE STATUS (NOVO ESTILO DE FAIXA)
   =============================== */
.status-tag {
    position: absolute;
    top: 25px;
    left: -45px;
    background-color: #F5A623; /* Cor padrão para Destaque */
    color: white;
    padding: 8px 40px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-45deg); /* A mágica da rotação */
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    z-index: 2;
}

/* Cores específicas para cada status */
.status-tag.vendido {
    background-color: #dc3545; /* Vermelho */
}
.status-tag.reservado {
    background-color: #6c757d; /* Cinza */
}
/* A cor do 'destaque' já é a padrão laranja */


/* ===============================
   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; }
}