/* =========================================================================
   SKIN "BASIC"  —  visual enxuto/tradicional (ref. barauto)
   -------------------------------------------------------------------------
   Carregada por layouts/guest.php SOMENTE quando layout_config.skin = 'basic'
   (o body recebe a classe .skin--basic). É uma CAMADA DE OVERRIDE sobre o
   markup e as custom properties já existentes (variaveis.css/index.css) — não
   substitui nada: reaproveita header/footer/cards/filtros e TODA a
   funcionalidade do template. As cores continuam vindo de variaveis.css.

   Estética alvo: container estreito e centrado, tipografia Rubik, cards "flat"
   (borda fina, cantos suaves, sem sombra pesada), botões retos, headings
   simples com acento, chrome minimalista.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');

/* ----- Tipografia global ------------------------------------------------- */
body.skin--basic,
body.skin--basic input,
body.skin--basic button,
body.skin--basic select,
body.skin--basic textarea {
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

body.skin--basic {
    background: var(--main-bg-color, #fff);
}

/* ----- Container mais estreito (basic ~1100px) --------------------------- */
body.skin--basic .wrap--bigger { max-width: 1140px; }
body.skin--basic .wrap--normal { max-width: 1140px; }

/* ----- Headings de seção: centralizado, maiúsculo, sem acento (barauto) ---
   ⚠️ `h1` entra em TODOS estes seletores junto com o `h2`: o cartão 864 (1.1.93) promoveu o
   título das páginas de `h2` a `h1`, e uma regra que só cita `h2` deixa de casar em silêncio —
   a basic perderia o maiúsculo/tamanho e ganharia de volta o traço que o barauto não usa, em
   /estoque, /sobre, /contato, /faq, ficha e venda. Nenhum site da frota está em `basic` hoje
   (46/46 em `complete`), então isto é armadilha desarmada, não conserto de site no ar. */
body.skin--basic .section-heading h1,
body.skin--basic .section-heading h2,
body.skin--basic .section-heading--spaced h1,
body.skin--basic .section-heading--spaced h2 {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 1.6rem;
    text-align: center;
    color: var(--main-text-color, #fff);
}
body.skin--basic .section-heading h1::after,
body.skin--basic .section-heading h2::after,
body.skin--basic .section-heading--spaced h1::after,
body.skin--basic .section-heading--spaced h2::after {
    display: none; /* barauto não usa o traço de acento */
}

/* ----- Cards de veículo: "flat", sem caixa (imagem + texto no fundo) ------
   Barauto: card sem borda/fundo/sombra — a imagem tem cantos suaves e o texto
   fica direto sobre o fundo da página; título e preço na cor do texto. -------- */
body.skin--basic .car-list .car-card,
body.skin--basic .car-card {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
    transition: transform .18s ease;
}
body.skin--basic .car-card:hover {
    transform: translateY(-5px);
    box-shadow: none !important;
}
body.skin--basic .car-card figure {
    border-radius: 6px;
    overflow: hidden;
    margin: 0;
}
body.skin--basic .car-card figure img {
    border-radius: 6px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}
body.skin--basic .car-card .card-content {
    padding: 12px 2px 4px;
    background: transparent;
}
body.skin--basic .car-card .card-content__title h3 {
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.3;
    min-height: 2.6em;
    color: var(--main-text-color, #fff);
}

/* Badges sobre a foto: retangulares, flat */
body.skin--basic .car-card__category,
body.skin--basic .car-card__armored,
body.skin--basic .car-card__branch {
    border-radius: 3px;
    font-size: .7rem;
    letter-spacing: .3px;
    text-transform: uppercase;
}

/* Specs no formato barauto: linhas "Rótulo: valor" (Ano: / Combustível: …) —
   substitui o resumo/ícones do complete; vem de partials/vehicle-card.php. */
body.skin--basic .car-specs--basic {
    list-style: none;
    margin: 4px 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body.skin--basic .car-specs--basic li {
    font-size: .85rem;
    color: var(--main-text-color, #fff);
    line-height: 1.4;
}
body.skin--basic .car-specs--basic li span {
    font-weight: 600;
    opacity: .8;
    margin-right: 3px;
}

/* Specs: compactos, na cor do texto (visíveis sobre o fundo) */
body.skin--basic .car-detail--icons { gap: 6px 14px; }
body.skin--basic .car-detail--icons li p {
    font-size: .8rem;
    color: var(--main-text-color, #fff);
}
body.skin--basic .card-content > span {
    color: var(--main-text-color, #fff);
    opacity: .85;
    font-size: .85rem;
}

/* Preço: em negrito, na cor do texto (barauto = branco) */
body.skin--basic .card-content > p,
body.skin--basic .card-content .price {
    color: var(--main-text-color, #fff);
    font-weight: 700;
    font-size: 1.35rem;
}

/* ----- Botões: retos e flat --------------------------------------------- */
body.skin--basic .btn,
body.skin--basic .button,
body.skin--basic .button--primary,
body.skin--basic .btn--primary,
body.skin--basic .btn--secondary {
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 600;
    box-shadow: none;
}
/* A tinta vem de `--*-ink` (emitida ao lado da cor em variaveis.css), nunca cravada aqui. A
   barra de menu desta skin já escreve em quase-preto por ser da cor PRIMÁRIA; o botão fazia o
   oposto, com branco fixo — cliente de primária amarela (#f3e703) tinha "Procurar", "Buscar" e
   "Limpar" em branco sobre amarelo. O contorno usa a variante `-on-light`, porque ali a cor de
   marca é o TEXTO, sobre o fundo claro do card. */
body.skin--basic .btn--primary,
body.skin--basic .button--primary {
    background: var(--main-primary-color, #b81700);
    color: var(--main-primary-color-ink, #fff);
    border: none;
}
body.skin--basic .btn--secondary {
    background: transparent;
    color: var(--main-primary-color-on-light, var(--main-primary-color, #b81700));
    border: 1px solid var(--main-primary-color, #b81700);
}
body.skin--basic .btn--secondary:hover {
    background: var(--main-primary-color, #b81700);
    color: var(--main-primary-color-ink, #fff);
}

/* ----- Header da skin basic: topo + barra de menu full-width (barauto) ---- */
.header-basic { position: relative; z-index: 50; }

/* Faixa 1 — topo (logo + busca + contato) */
.header-basic__top { background: var(--header-background-color, #030406); }
.header-basic__top-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 0;
}
.header-basic__logo { flex: 0 0 auto; }
.header-basic__logo img { display: block; max-height: 64px; width: auto; }
.header-basic__search {
    flex: 1 1 auto;
    display: flex;
    max-width: 560px;
}
.header-basic__search input[type="text"] {
    flex: 1 1 auto;
    height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 3px 0 0 3px;
    background: #fff;
    color: #222;
}
.header-basic__search .button--primary {
    height: 44px;
    border-radius: 0 3px 3px 0;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 600;
    border: none;
}
.header-basic__contact {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    /* `--header-text-color` é escolha do cliente e o fundo do topo também — nada garante que
       combinem. O Car Trucks tem `#000000` sobre `#231f20`: 1,29:1, medido no ar. A var
       `-legivel` respeita a escolha quando ela lê e cai na tinta do fundo quando não. */
    color: var(--header-text-color-legivel, var(--header-text-color, #fff));
}
.header-basic__contact a { color: var(--header-text-color-legivel, var(--header-text-color, #fff)); font-weight: 600; }
.header-basic .open-panel { display: none; background: none; border: none; color: var(--header-text-color-legivel, var(--header-text-color, #fff)); font-size: 1.7rem; cursor: pointer; }

/* Faixa 2 — barra de menu na cor primária, full-width */
.header-basic__nav-bar { background: var(--main-primary-color, #eca620); }
.header-basic__nav-bar .menu-navigation > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.header-basic__nav-bar .menu-navigation > ul > li > a {
    display: block;
    padding: 14px 18px;
    /* A barra é da cor PRIMÁRIA, então a tinta vem dela. Era `#111` cravado, e isso só
       funcionava para primária clara: na Djuly (`#020101`) o menu media 1,10:1 — invisível. */
    color: var(--main-primary-color-ink, #111);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9rem;
    transition: background .15s ease;
}
.header-basic__nav-bar .menu-navigation > ul > li > a:hover {
    background: rgba(0, 0, 0, .12);
}
.header-basic__nav-bar .menu-caret { font-size: .8em; }
.header-basic__nav-bar .close-panel { display: none; }

/* Submenu de filiais (desktop) */
@media only screen and (min-width: 65em) {
    .header-basic__nav-bar .menu-has-children { position: relative; }
    .header-basic__nav-bar .submenu {
        position: absolute; top: 100%; left: 0; min-width: 210px;
        background: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.16);
        padding: 6px 0; margin: 0; list-style: none; display: none; z-index: 200;
    }
    .header-basic__nav-bar .menu-has-children:hover > .submenu { display: block; }
    .header-basic__nav-bar .submenu li a { display: block; padding: 9px 18px; white-space: nowrap; color: #333; text-transform: none; font-weight: 500; }
    .header-basic__nav-bar .submenu li a:hover { background: #f2f2f2; }
}

/* Mobile: menu vira painel lateral (reaproveita o toggle do app.min.js) */
@media only screen and (max-width: 64.99em) {
    .header-basic .open-panel { display: block; }
    .header-basic__search { order: 3; flex-basis: 100%; max-width: none; }
    .header-basic__contact { display: none; }
    .header-basic__nav-bar .menu-navigation {
        position: fixed; top: 0; right: 0; height: 100%; width: 270px;
        background: var(--header-background-color, #030406); z-index: 300;
        transform: translateX(100%); transition: transform .25s ease; padding: 40px 0;
        overflow-y: auto;
    }
    .header-basic__nav-bar .menu-navigation.open-menu { transform: translateX(0); }
    .header-basic__nav-bar .menu-navigation > ul { flex-direction: column; }
    /* ⚠️ O painel deslizante tem o fundo do TOPO (`--header-background-color`), não a cor
       primária — então a tinta é a do topo, e `#fff` cravado só servia a topo escuro. A Djuly
       tem topo `#fbfbfb`: branco sobre quase-branco, menu invisível no celular. */
    .header-basic__nav-bar .menu-navigation > ul > li > a { color: var(--header-background-color-ink, #fff); }
    .header-basic__nav-bar .close-panel { display: block; position: absolute; top: 8px; right: 14px; background: none; border: none; color: var(--header-background-color-ink, #fff); font-size: 1.8rem; }
}

/* ----- Busca no header/home: campos retos -------------------------------- */
body.skin--basic .search input[type="text"],
body.skin--basic .search input[type="search"],
body.skin--basic .search-component input,
body.skin--basic .search-component select {
    border-radius: 3px;
}

/* ----- Filtros da vitrine: painel flat, enxuto --------------------------- */
body.skin--basic .search-home {
    background: #f5f5f5;
    border-bottom: 1px solid #e4e4e4;
}
body.skin--basic #filters .field label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #555;
}
body.skin--basic #filters .select-wrapper select {
    border-radius: 3px;
}

/* ----- Estoque: grid um pouco mais denso --------------------------------- */
body.skin--basic .car-list { gap: 20px; }

/* ----- Rodapé: preto tradicional ----------------------------------------- */
body.skin--basic footer.footer {
    background: var(--footer-background-color, #000);
    color: var(--footer-text-color, #fff);
}
body.skin--basic footer.footer h5 {
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
    border-bottom: 2px solid var(--main-primary-color, #b81700);
    display: inline-block;
    padding-bottom: 4px;
}
body.skin--basic .reserved-rights {
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: .78rem;
    opacity: .85;
}

/* ----- Social flutuante: quadrados, na cor primária ---------------------- */
body.skin--basic .social-floating ul li a {
    border-radius: 3px;
}

/* ----- Página de veículo: título e preço na estética basic --------------- */
body.skin--basic .single-vehicle h1,
body.skin--basic .vehicle-single h1 {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}