/* ==========================================================================
   fix.css — overrides/ajustes pontuais do template (carregado após index.css)
   ========================================================================== */

/* Ícone do X (Twitter) no header: o SVG é branco e, em header de fundo claro,
   ficaria invisível. Usa máscara para colori-lo conforme --header-text-color
   (preto em header claro, branco em header escuro). O footer (fundo escuro)
   continua usando o SVG branco normal. */
header .icon__twitter {
    background: var(--header-text-color, #000) !important;
    -webkit-mask: url(../img/icons/twitterx-color.svg) no-repeat center / contain;
    mask: url(../img/icons/twitterx-color.svg) no-repeat center / contain;
}

/* Banner "Quer vender ...": ícone de moto quando a loja é só de motos
   (store_type = motorcycles). Sobrescreve a imagem de fundo do .icon-vender. */
.icon-vender.is-moto {
    background-image: url(../img/icons/icon-vender-moto.png);
    background-size: contain;
    background-position: center;
}

/* Página do veículo: ícone de moto (categoria e modelo) reutilizando o mesmo
   desenho do banner "Quer vender sua moto" (icon-vender-moto.png), colorido
   com a cor primária via mask. Gerado por vehicleMotorcycleIconSvg(). */
.car-detail--icons li .vehicle-moto-icon {
    display: inline-block;
    width: 32px;
    height: 35px;
    background-color: var(--main-primary-color);
    -webkit-mask: url(../img/icons/icon-vender-moto.png) no-repeat center / contain;
    mask: url(../img/icons/icon-vender-moto.png) no-repeat center / contain;
}

/* ==========================================================================
   Sliders de Ano/Valor (jRange) nos filtros
   ========================================================================== */

/* Rótulo de valor que aparecia ACIMA da trilha (pointer-label). Os valores
   mín/máx já são exibidos embaixo pela escala, então este de cima ficava
   duplicado. Escondemos: como é position:absolute, o espaço acima da trilha
   vem do padding do .slider-container e é mantido — o layout não desloca. */
.search-component .slider-container .back-bar .pointer-label,
.slider-container .back-bar .pointer-label,
.theme-green .back-bar .pointer-label {
    display: none;
}
.search-component .slider-container .scale ins,
.slider-container .scale ins {
    color: var(--main-text-color, #fff);
    opacity: .65;
}

/* --- Marcas: ocupar toda a largura (em vez de espremidas à esquerda) ------ */
/* Sobrescreve as regras conflitantes do index.css (width:80vw, overflow scroll,
   grid-auto-flow:column) por um flex que distribui os ícones na largura cheia. */
#marcas {
    display: flex !important;
    flex-direction: row !important; /* sobrescreve o flex-direction:column do .field-group--left no mobile */
    flex-wrap: wrap;
    gap: 12px;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 8px 0;
    margin-bottom: 14px;
    justify-content: center;
}
#marcas .brand {
    flex: 1 1 90px;
    max-width: 150px;
    height: 56px; /* box uniforme em todas as larguras, independente do logo */
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ───────────────────────────────────────────────────────────────────────
   Logo de marca — classe REUTILIZÁVEL (.brand-logo)
   Uso em qualquer tela:
       <span class="brand-logo" style="--brand-logo-size:64px">
           <img src="/assets/img/brand/honda.png" alt="Honda">
       </span>
   - O box é um quadrado de --brand-logo-size (default 48px).
   - object-fit:contain mantém a proporção, centraliza, sem overflow nem
     upscale além do box.
   - Pressupõe imagens de origem padronizadas (ver spec docs/brand-logos.md):
     canvas QUADRADO, logo aparado (sem margem transparente) e centralizado,
     ocupando ~85% do canvas — é isso que garante tamanho ótico uniforme.
   Vale para TODAS as larguras (substitui a regra antiga que só existia em
   @media (min-width:48em) e deixava o mobile sem limite). */
.brand-logo {
    --brand-logo-size: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--brand-logo-size);
    height: var(--brand-logo-size);
    flex: none;
}
.brand-logo img,
#marcas .brand img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* No filtro o cell tem 56px de altura; limita o logo a 40px. */
#marcas .brand img { max-height: 40px; }

/* --- Campos dos filtros: grid alinhado (substitui o flex-wrap, que quebrava
   torto e em várias linhas) -------------------------------------------------- */

/* HOME: tudo em uma linha; Buscar inline ao final (coluna auto). */
#filters2 {
    display: grid;
    grid-template-columns: 1.3fr 1.7fr 1.7fr 1.2fr 1.2fr auto;
    gap: 16px 22px;
    align-items: end;
    width: 100%;
}

/* ESTOQUE: todos os controles na MESMA linha
   (Modelo · Ano · Valor · Categoria · Ordenar · Visualização · Aplicar/Limpar). */
.search-component .field-group--left {
    display: grid;
    grid-template-columns: 1.2fr 1.6fr 1.6fr 1.1fr 1.1fr auto auto;
    gap: 14px 16px;
    align-items: end;
    width: 100%;
}
/* Aplicar/Limpar vão para o fim da linha (no HTML vêm logo após Valor). */
.search-component .field-group--left .field.button-group {
    order: 1;
}

/* Modelo é a 1ª coluna do grid e a caixa do select encostava na borda
   esquerda do container. Dá um respiro à esquerda em toda a linha de
   filtros (= ao gap entre colunas), mantendo tudo alinhado. */
.search-component .field-group--left,
#filters2 {
    padding-left: 16px;
    box-sizing: border-box;
}

/* Campos como itens de grid: ocupam a célula, sem flex/min-width herdado. */
.search-component .field {
    padding: 0;
    margin: 0;
    width: auto;
    min-width: 0;
}
/* Itens do grid preenchem a célula (remove o max-width:50% de .field--half,
   que deixava Categoria/Ordenar estreitos e desalinhados). */
#filters2 > .field,
.search-component .field-group--left > .field {
    max-width: none;
    width: 100%;
}
/* Selects preenchem a célula do grid (senão ficam estreitos e desalinhados). */
.search-component .select-wrapper {
    width: 100%;
    min-width: 0;
}
.search-component .field .slider-container {
    width: 100%;
    max-width: 100%;
    padding: 12px 2px;
    box-sizing: border-box; /* a largura px que o jRange fixa passa a incluir o padding → não estoura */
}
.search-component .field .button {
    white-space: nowrap;
    width: 100%;
}
/* Grupo Aplicar/Limpar: botões lado a lado, sem esticar. */
.search-component .field.button-group {
    flex-direction: row !important;
    gap: 8px;
}
.search-component .field.button-group .button {
    width: auto;
}
/* Visualização (grid/lista) não estica na célula. */
.search-component .field--view {
    justify-self: start;
}

@media only screen and (max-width: 64em) {
    #filters2,
    .search-component .field-group--left {
        grid-template-columns: 1fr 1fr;
    }
    /* Busca por texto (mobile): ocupa toda a largura, input cresce e botão fixo. */
    .search-component .search.hide-desk {
        display: flex;
        width: 100%;
        gap: 8px;
        align-items: stretch;
    }
    .search-component .search.hide-desk input[type="text"] {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        margin-bottom: 0;
    }
    .search-component .search.hide-desk .button {
        flex: 0 0 auto;
    }
}
@media only screen and (max-width: 40em) {
    #filters2,
    .search-component .field-group--left {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   "Outros veículos" (carrossel related da página do veículo)
   ========================================================================== */

/* .slider-others também é .car-list (display:flex). Depois do slick init o
   .slick-list vira o único filho flex e NÃO estica para 100% (item flex mede pela
   largura do conteúdo no eixo principal) — então o slick media uma largura errada
   e gerava slides estreitos/desiguais ocupando só o terço inicial. Voltar para
   block faz o .slick-list ocupar a largura toda e o slick medir certo. */
.related .slider-others {
    display: block;
}
/* O slick (slide:"article") aplica a largura inline em cada .car-card/slide a
   partir de slidesToShow. NÃO sobrescrever essa largura — apenas tirar o teto de
   260px e a margem do card base, e usar padding p/ o respiro entre os cards. */
.related .slider-others .car-card {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 12px;
}
/* Respiro vertical p/ a sombra dos cards não ser cortada pelo overflow:hidden
   do .slick-list (topo/base). */
.related .slider-others .slick-list {
    padding: 12px 0;
}
/* Superfície do card (só no carrossel "Outros veículos", via flag 'surface' no
   partial): dá contraste com o fundo da página e aparência de card. O gap entre
   os cards vem do padding lateral no slide (.car-card), por isso a superfície vai
   num wrapper interno — assim borda/raio/sombra não são engolidos pelo gap. */
.related .slider-others .car-card__surface {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
    overflow: hidden; /* arredonda a imagem no topo do card */
}
/* A superfície é sempre clara (#fff), mas o texto do card usa --main-text-color,
   que em temas escuros é branco e some no fundo branco. Fixamos uma cor escura
   legível dentro da superfície (não afeta temas claros, onde já era escuro). */
.related .slider-others .car-card__surface .card-content h3,
.related .slider-others .car-card__surface .card-content span,
.related .slider-others .car-card__surface .card-content p,
.related .slider-others .car-card__surface .card-content__title {
    color: #222;
}
.related .slider-others .car-card figure {
    overflow: hidden;
}
.related .slider-others .car-card img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   Página Sobre — filiais em colunas (até 3) quando há mais de uma filial
   ========================================================================== */
.about__branches-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: start;
}
.about__branches-grid .about__branch {
    margin-bottom: 0 !important;
    min-width: 0; /* permite o conteúdo encolher dentro da coluna do grid */
}
.about__branches-grid .iframe-container {
    margin: 16px 0 0;
}
.about__branches-grid .responsive-iframe {
    min-height: 200px;
}
@media only screen and (max-width: 64em) {
    .about__branches-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 40em) {
    .about__branches-grid { grid-template-columns: 1fr; }
}

/* Botão flutuante do WhatsApp (apenas mobile).
   Substitui a barra fixa do rodapé (.talk-floating) por um botão circular.
   O elemento .wpp-float é movido para o <body> via JS (ver footer) para que o
   position:fixed não fique preso a um containing-block ancestral. */
.wpp-float {
    display: none;
}

@media only screen and (max-width: 64em) {
    .wpp-float {
        position: fixed;
        bottom: 20px;
        right: 16px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: #27ae60;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
        z-index: 9999;
    }

    .wpp-float img {
        width: 30px;
        height: 30px;
    }

    /* esconde a barra antiga do WhatsApp no mobile */
    .floating-social .talk-floating {
        display: none !important;
    }
}

/* ==========================================================================
   Rodapé — CTAs "Ficha Cadastral" / "Quer vender seu veículo":
   tornar TODA a área da imagem clicável (não só o texto). Stretched-link:
   o <a> ganha um ::after absoluto cobrindo a .section--left/--right inteira.
   A .wrap é position:relative por padrão e capturaria esse ::after; por isso
   volta a static dentro do rodapé, ancorando o ::after na seção (relative).
   ========================================================================== */
.footer .section--left .wrap,
.footer .section--right .wrap {
    position: static;
}
/* Com a .wrap estática o texto vira conteúdo in-flow e passa a ser pintado ANTES
   do overlay escuro (:before, absoluto), que o cobria deixando-o acinzentado.
   Reposiciona o conteúdo do <a> acima do overlay. */
.footer .section--left a > *,
.footer .section--right a > * {
    position: relative;
    z-index: 3;
}
.footer .section--left a::after,
.footer .section--right a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2; /* acima do overlay escuro (.section--left/--right:before) */
}

/* ==========================================================================
   Página do veículo — botões de ação (Proposta via WhatsApp / Simular
   Financiamento / Compartilhar): a .btn base tem height:46px fixo, então o
   texto mais longo quebrava em 2 linhas e era cortado ("Proposta via",
   "Simular"). Deixa a altura crescer (min-height) e centraliza o conteúdo.
   ========================================================================== */
.btn-veiculo .btn {
    height: auto;
    min-height: 46px;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   CARD DE VEÍCULO — redesign do componente compartilhado
   (home "Destaque", estoque em grade e carrossel "Outros veículos").
   Tudo dirigido por --main-primary-color / --main-text-color, pois o card é
   reaproveitado por todos os clientes. Carregado após index.css → vence.
   ========================================================================== */

/* Superfície: grade (home/estoque, exceto lista e carrossel) + a superfície
   própria do carrossel. Mesmo cartão visual nos dois contextos. */
.car-list:not(.jplist-list):not(.slider-others) .car-card,
.related .slider-others .car-card__surface {
    background: var(--card-bg-color, #fff);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .10); /* fallback p/ navegadores sem color-mix */
    /* A intensidade dirige opacidade E tamanho (offset/blur), pra o slider ter
       impacto visível. Blur baixo = sombra concentrada/definida. */
    box-shadow:
        0
        calc(2px + var(--card-shadow-intensity, 8) * 0.12px)
        calc(5px + var(--card-shadow-intensity, 8) * 0.22px)
        color-mix(in srgb, var(--card-shadow-color, #000) calc(var(--card-shadow-intensity, 8) * 1%), transparent);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.car-list:not(.jplist-list):not(.slider-others) .car-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
}

/* Hover: elevação suave + sombra + borda na cor da marca. Substitui a sombra
   preta pesada legada e o overlay escuro com lupa. */
.car-list:not(.jplist-list):not(.slider-others) .car-card:hover,
.related .slider-others .car-card:hover .car-card__surface {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .18); /* fallback */
    box-shadow:
        0
        calc(6px + var(--card-shadow-intensity, 8) * 0.16px)
        calc(12px + var(--card-shadow-intensity, 8) * 0.3px)
        color-mix(in srgb, var(--card-shadow-color, #000) calc((var(--card-shadow-intensity, 8) + 10) * 1%), transparent);
    border-color: var(--main-primary-color);
}
.car-card:hover { box-shadow: none; }
.car-card figure::before,
.car-card figure::after { display: none !important; }

/* Carrossel "Outros veículos": o .car-card externo é apenas o slide (wrapper de
   posicionamento do slick). A base .car-card traz box-shadow + radius por padrão,
   o que desenhava uma moldura cinza MAIOR que o card atrás dele. Zera o visual do
   slide — quem desenha o cartão é o .car-card__surface interno. */
.related .slider-others .car-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Imagem: leve zoom no hover (afordância no lugar do overlay removido). */
.car-card figure { overflow: hidden; }
.car-card figure img { transition: transform .5s ease; }
.car-card:hover figure img { transform: scale(1.05); }

/* Conteúdo: hierarquia clara. */
.car-card .card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    flex: 1;
}
.car-card .card-content h3 {
    font-size: 1.02rem;
    font-weight: 700;
    min-height: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.car-card:hover .card-content__title { color: var(--main-primary-color); }

/* Resumo (ano • km • combustível) discreto. */
.car-card .card-content > span,
.car-card .card-content span.show-grid {
    font-size: .82rem;
    font-weight: 500;
    color: #6b7280;
}

/* Preço: protagonista, com divisória fininha acima (vira o "rodapé" do card). */
.car-card .card-content p,
.related .slider-others .car-card__surface .card-content p {
    margin: 12px 0;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--main-primary-color);
}

/* Alinha preço + botões na base, mesmo com títulos de alturas diferentes. */
.car-card .card-content > div:last-child { margin-top: auto; }

/* CTA "+ detalhes": botão sólido na cor da marca. */
.car-card .card-content .btn--secondary {
    background: var(--main-primary-color);
    color: #fff;
    border: 1px solid var(--main-primary-color);
    border-radius: 9px;
    font-weight: 700;
    height: 44px;
    line-height: 28px;
}
.car-card .card-content .btn--secondary:hover {
    background: var(--main-primary-color);
    color: #fff;
    filter: brightness(1.08);
}

/* Badges em pílula. */
.car-card__category,
.car-card__armored,
.car-card__branch {
    padding: 5px 11px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
}
.car-card__category {
    top: 12px;
    left: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.car-card__armored {
    top: 12px;
    right: 12px;
    background: rgba(20, 20, 20, .8);
}
.car-card__branch {
    left: 12px;
    bottom: 12px;
    text-transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

/* Redes sociais no mobile: reexibe os ícones sociais do rodapé,
   que o template esconde via .hide-xl abaixo de 64em. */
@media only screen and (max-width: 64em) {
    .social-footer ul li.hide-xl {
        display: list-item !important;
        visibility: visible !important;
        width: auto !important;
    }
}