/* ==========================================================================
   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ótulos dos valores (arraste e escala) ficavam com fundo branco — ilegíveis
   sobre fundo escuro. Deixa transparente e herda a cor de texto do tema. */
.search-component .slider-container .back-bar .pointer-label,
.slider-container .back-bar .pointer-label,
.theme-green .back-bar .pointer-label {
    background: transparent;
    color: var(--main-text-color, #fff);
    font-size: 11px;
    font-weight: 700;
    top: -19px;
}
.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;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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