/* =============================================================
   Cards de veículo do frontend do tenant.
   Carregado por tenant/layouts/frontend/styles.blade.php.

   Parte 1 — slider "Nossos maravilhosos carros" da home
   (tenant/layouts/frontend/portifolio.blade.php)

   O tema entregava esse bloco em tela cheia, com 2,2 slides
   centralizados e o card de conteúdo flutuando fora da imagem —
   preço e ficha só apareciam no slide ativo, e cada veículo
   ocupava quase meia tela.

   Aqui o veículo vira um card compacto e fechado: imagem em
   proporção fixa, ficha sempre visível e vários carros por tela.
   Tudo escopado em .vehicles-showcase para não afetar as demais
   seções do tema (nem a face central).

   Convenção de cor: texto que fica POR CIMA de um fundo
   `var(--color-primary)` usa `var(--color-primary-contrast)`, não
   `var(--color-white)`. A primária é escolhida pela revenda
   (PaletaService); branco fixo em cima de uma primária clara vira
   texto invisível. O serviço calcula o contraste e devolve branco
   sempre que ele for a melhor opção — inclusive no vermelho padrão,
   então nada muda de aparência enquanto ninguém personalizar.
   ============================================================= */

/* Elevação do hover. Sombras com spread negativo: o alcance real
   fica em ~7px (offset + blur/2 - spread), então ela cabe dentro do
   padding do slider e não é cortada pelo overflow:hidden do .swiper.
   As sombras do tema (0 30px 20px) descolavam do card e "vazavam"
   por cima do slide seguinte. */
:root {
    --vitrine-sombra: 0 1px 2px rgba(16, 24, 40, 0.04);
    --vitrine-sombra-hover: 0 6px 14px -6px rgba(16, 24, 40, 0.14), 0 2px 6px -2px rgba(16, 24, 40, 0.07);
    --vitrine-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.vehicles-showcase .section-inner {
    margin-top: 50px;
}

/* .swiper do tema é overflow:hidden — o padding impede que a
   elevação do hover seja cortada nas bordas. Ele precisa ser maior
   que o alcance da sombra (ver --vitrine-sombra-hover). */
.vehicles-showcase .vehicles-slider {
    padding: 10px 12px 18px;
}

.vehicles-showcase .vehicles-slider .swiper-wrapper {
    align-items: stretch;
}

.vehicles-showcase .vehicles-slider .swiper-slide {
    height: auto;      /* cards da mesma altura, independente do título */
    overflow: visible; /* o tema corta o slide e comeria a sombra */
}

/* --------------------------------------------------------------
   Card do veículo
   -------------------------------------------------------------- */
.vehicle-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-white);
    border: 1px solid rgba(85, 85, 85, 0.15);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--vitrine-sombra);
    transition: transform 0.35s var(--vitrine-easing),
                box-shadow 0.35s var(--vitrine-easing),
                border-color 0.35s ease;
}

/* A borda NÃO muda no hover: só sobem a elevação e o deslocamento.
   Clarear a borda (era 0.08) sobre o fundo branco da página fazia
   ela sumir, e o card parecia perder o contorno justo no momento em
   que ganhava destaque. Mesma decisão vale para o card da listagem,
   mais abaixo. */
.vehicle-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--vitrine-sombra-hover);
}

.vehicle-card .image-area {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f1f1f1;
}

.vehicle-card .image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--vitrine-easing);
}

.vehicle-card:hover .image-area img {
    transform: scale(1.04);
}

/* Quem pediu menos animação no SO não deve levar zoom nem deslocamento. */
@media (prefers-reduced-motion: reduce) {
    .vehicle-card,
    .vehicle-card .image-area img {
        transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .vehicle-card:hover {
        transform: none;
    }

    .vehicle-card:hover .image-area img {
        transform: none;
    }
}

/* Ano do veículo sobre a foto */
.vehicle-card .card-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: rgba(37, 37, 37, 0.85);
    color: var(--color-white);
    border-radius: 30px;
    padding: 6px 12px 5px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

/* Selos (Destaque/Vendido). O CSS original mora em
   resources/sass/public.scss, que NÃO é carregado no frontend do
   tenant — por isso a regra é redeclarada aqui.

   Vale para os dois cards: o da home (.vehicle-card) e o da grade de
   /veiculos (.project-wrapper2), que monta o mesmo selo. Enquanto a
   regra esteve só no primeiro, o "Destaque" saía como texto solto
   sobre a foto na listagem — sem posição, sem fundo. */
.vehicle-card .vehicle-badge,
.rts-portfolio-area.inner .project-wrapper2 .vehicle-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-block;
    padding: 5px 12px 4px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-white);
}

.vehicle-card .vehicle-badge-sold,
.rts-portfolio-area.inner .project-wrapper2 .vehicle-badge-sold {
    background-color: #1f2937;
}

.vehicle-card .vehicle-badge-featured,
.rts-portfolio-area.inner .project-wrapper2 .vehicle-badge-featured {
    background-color: #f59e0b;
    color: #1f2937;
}

.vehicle-card .content-area {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px 18px 18px;
}

.vehicle-card .title {
    font-size: 17px;
    line-height: 1.4;
    font-weight: 500;
    margin: 0 0 12px;
    /* trava em 2 linhas para que títulos longos não desalinhem os cards */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}

.vehicle-card .title a {
    color: var(--color-heading-1);
    transition: var(--transition);
}

.vehicle-card .title a:hover {
    color: var(--color-primary);
}

.vehicle-card .feature-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 16px;
    padding: 0;
}

.vehicle-card .feature-area li {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-primary);
    color: var(--color-body);
}

.vehicle-card .feature-area li img {
    width: 18px;
    height: 13px;
    object-fit: contain;
}

.vehicle-card .card-footer-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(85, 85, 85, 0.15);
}

.vehicle-card .vehicle-price {
    font-family: var(--font-primary);
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-primary);
}

.vehicle-card .card-footer-area .rts-btn {
    font-size: 13px;
    line-height: 1;
    padding: 11px 14px 10px;
    max-width: max-content;
    white-space: nowrap;
}

/* --------------------------------------------------------------
   Estado vazio
   -------------------------------------------------------------- */
.vehicles-showcase .showcase-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 30px;
    border: 1px dashed rgba(85, 85, 85, 0.25);
    border-radius: 14px;
    background: var(--color-gray);
    text-align: center;
}

.vehicles-showcase .showcase-empty p {
    margin-bottom: 0;
    color: var(--color-body);
}

/* --------------------------------------------------------------
   Controles do slider (setas + paginação)
   -------------------------------------------------------------- */
.vehicles-showcase .showcase-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 30px;
}

.vehicles-showcase .showcase-nav {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(85, 85, 85, 0.2);
    background: var(--color-white);
    color: var(--color-heading-1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.vehicles-showcase .showcase-nav i {
    font-size: 14px;
    line-height: 1;
}

.vehicles-showcase .showcase-nav:hover {
    background: var(--color-primary);
    border-color: transparent;
    color: var(--color-primary-contrast);
}

.vehicles-showcase .showcase-nav.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.vehicles-showcase .showcase-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    line-height: 1;
}

.vehicles-showcase .showcase-pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0;
    opacity: 0.35;
    background: var(--color-heading-1);
    transition: var(--transition);
}

.vehicles-showcase .showcase-pagination .swiper-pagination-bullet-active {
    width: 26px;
    border-radius: 20px;
    opacity: 1;
    background: var(--color-primary);
}

/* --------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    .vehicles-showcase .section-inner {
        margin-top: 36px;
    }

    .vehicle-card .content-area {
        padding: 14px 15px 16px;
    }

    .vehicle-card .title {
        font-size: 16px;
    }

    .vehicle-card .vehicle-price {
        font-size: 18px;
    }
}

@media only screen and (max-width: 479px) {
    .vehicle-card .card-footer-area {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .vehicle-card .card-footer-area .rts-btn {
        max-width: 100%;
        text-align: center;
    }
}

/* --------------------------------------------------------------
   Cards da listagem (/veiculos) — x-tenant.public.vehicle-list-card

   O tema eleva esses cards com `box-shadow: 0 30px 20px`: o
   deslocamento de 30px joga a sombra para baixo do card, longe
   dele, como um borrão solto. Aqui ela usa a mesma elevação da
   vitrine. Só vale no frontend do tenant — a face central carrega
   apenas o CSS do tema.
   -------------------------------------------------------------- */
.rts-portfolio-area .project-wrapper2,
.rts-portfolio-area .project-wrapper3 {
    transition: transform 0.35s var(--vitrine-easing),
                box-shadow 0.35s var(--vitrine-easing),
                border-color 0.35s ease;
}

/* A variante `.inner` (usada em /veiculos) precisa aparecer explícita:
   o tema declara a sombra nessa especificidade.

   `border-color` repetido igual ao estado de repouso porque o tema
   faz `border: 1px solid transparent` no hover: sobre o fundo branco
   da página a borda simplesmente sumia, e o card parecia perder o
   contorno na hora em que a sombra o destacava. Só a elevação muda. */
.rts-portfolio-area .project-wrapper2:hover,
.rts-portfolio-area .project-wrapper3:hover,
.rts-portfolio-area.inner .project-wrapper2:hover {
    transform: translateY(-3px);
    border-color: rgba(85, 85, 85, 0.15);
    box-shadow: var(--vitrine-sombra-hover);
}

.rts-portfolio-area .project-wrapper2 .image-area img,
.rts-portfolio-area .project-wrapper3 .image-area img {
    transition: transform 0.5s var(--vitrine-easing);
}

.rts-portfolio-area .project-wrapper2:hover .image-area img,
.rts-portfolio-area .project-wrapper3:hover .image-area img {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .rts-portfolio-area .project-wrapper2:hover,
    .rts-portfolio-area .project-wrapper3:hover,
    .rts-portfolio-area.inner .project-wrapper2:hover {
        transform: none;
    }

    .rts-portfolio-area .project-wrapper2:hover .image-area img,
    .rts-portfolio-area .project-wrapper3:hover .image-area img {
        transform: none;
    }
}

/* --------------------------------------------------------------
   Parte 2 — cards da listagem (/veiculos), em grade

   O tema só faz `width: 100%` na foto, então a altura do card
   seguia a proporção natural de cada imagem: anúncio com foto
   panorâmica (3:1) virava um card baixo, com foto 4:3 virava um
   card alto, e a grade ficava desalinhada.

   Aqui a foto ganha proporção fixa com recorte, e o miolo é
   flex-column com o rodapé empurrado para baixo — assim todos os
   cards fecham na mesma altura, independente do tamanho do título
   ou de quantas linhas a ficha ocupa.
   -------------------------------------------------------------- */
.rts-portfolio-area.inner .project-wrapper2 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rts-portfolio-area.inner .project-wrapper2 .image-area {
    flex: 0 0 auto;
    aspect-ratio: 4 / 3;
    background: #f1f1f1;
}

/* O tema envolve a foto num <a> inline; sem altura ele não repassa
   a caixa da proporção para a imagem. O `:not(.gallery-image)` exclui
   o contador de fotos, que é o outro <a> sobreposto à imagem. */
.rts-portfolio-area.inner .project-wrapper2 .image-area > a:not(.gallery-image) {
    display: block;
    width: 100%;
    height: 100%;
}

.rts-portfolio-area.inner .project-wrapper2 .image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ícones sobrepostos não devem ser esticados pela regra acima. */
.rts-portfolio-area.inner .project-wrapper2 .image-area .gallery-image img {
    width: 20px;
    height: 14px;
    object-fit: contain;
}

.rts-portfolio-area.inner .project-wrapper2 .content-area {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Título travado em 2 linhas: é o que faz o miolo ter altura
   previsível em vez de variar com o nome do veículo. */
.rts-portfolio-area.inner .project-wrapper2 .content-area .title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 20px;
    line-height: 1.35;
    min-height: 2.7em;
    margin-bottom: 14px;
}

/* Reserva as duas linhas que a ficha pode ocupar, para o rodapé
   não subir e descer entre um card e outro. */
.rts-portfolio-area.inner .project-wrapper2 .content-area .feature-area {
    flex-wrap: wrap;
    row-gap: 8px;
    min-height: 40px;
    margin-bottom: 20px;
}

.rts-portfolio-area.inner .project-wrapper2 .button-area {
    margin-top: auto;
}

/* --------------------------------------------------------------
   Densidade do card da grade

   O tema dimensiona o .project-wrapper2 para dois por linha em
   container inteiro: 30px de padding lateral, título de 24px, preço
   de 24px e os selos da foto a 30px das bordas. Com três por linha
   dentro da coluna da direita o card tem ~240px, e essa escala
   comia o card inteiro em respiro.

   Os valores acompanham os do card da home (.vehicle-card, Parte 1),
   para os dois lugares onde o veículo aparece terem a mesma
   densidade. O que NÃO muda é a proporção 4/3 da foto e o
   `min-height` da ficha, acertados acima — é o que mantém a grade
   alinhada.
   -------------------------------------------------------------- */
.rts-portfolio-area.inner .project-wrapper2 {
    border-radius: 14px;
}

.rts-portfolio-area.inner .project-wrapper2 .content-area {
    padding: 16px 0 18px;
}

.rts-portfolio-area.inner .project-wrapper2 .content-area .title,
.rts-portfolio-area.inner .project-wrapper2 .content-area .feature-area,
.rts-portfolio-area.inner .project-wrapper2 .button-area {
    padding-left: 16px;
    padding-right: 16px;
}

.rts-portfolio-area.inner .project-wrapper2 .content-area .title {
    font-size: 16px;
    margin-bottom: 10px;
}

.rts-portfolio-area.inner .project-wrapper2 .content-area .feature-area {
    gap: 10px;
    min-height: 34px;
    margin-bottom: 14px;
}

.rts-portfolio-area.inner .project-wrapper2 .content-area .feature-area li {
    font-size: 12px;
}

.rts-portfolio-area.inner .project-wrapper2 .button-area {
    padding-top: 14px;
}

.rts-portfolio-area.inner .project-wrapper2 .button-area p {
    font-size: 18px;
}

.rts-portfolio-area.inner .project-wrapper2 .button-area .rts-btn {
    font-size: 11px;
    padding: 8px 12px 7px;
}

/* Selos e ícones sobre a foto: a 30px das bordas eles quase se
   encostavam no meio de um card de 240px. */
.rts-portfolio-area.inner .project-wrapper2 .image-area .tag {
    top: 12px;
    left: 12px;
    padding: 6px 10px 5px;
    font-size: 12px;
}

.rts-portfolio-area.inner .project-wrapper2 .image-area .gallery-image {
    left: 12px;
    bottom: 12px;
    gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
}

.rts-portfolio-area.inner .project-wrapper2 .price {
    font-size: 18px;
    top: 12px;
    left: 12px;
    padding: 8px 12px 7px;
}

/* --------------------------------------------------------------
   Parte 3 — filtros em painel deslizante no mobile (/veiculos)

   Abaixo de 992px a coluna de filtros empilhava acima da lista:
   eram várias telas de rolagem antes do primeiro veículo. Aqui ela
   sai do fluxo e vira um painel que abre pelo botão "Filtrar
   veículos".

   O estado aberto mora numa classe no <html> — que é o único nó
   que o `replaceWith` do AJAX não substitui. Assim o painel
   continua aberto quando o usuário marca um filtro e a lista é
   recarregada.
   -------------------------------------------------------------- */
.vehicles-filters-toggle,
.vehicles-filters-header,
.vehicles-filters-backdrop {
    display: none;
}

@media only screen and (max-width: 991.98px) {
    .vehicles-filters-toggle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 26px;
        padding: 12px 20px;
        border: 1px solid rgba(85, 85, 85, 0.18);
        border-radius: 8px;
        background: var(--color-white);
        color: var(--color-heading-1);
        font-family: var(--font-primary);
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        cursor: pointer;
        box-shadow: var(--vitrine-sombra);
        transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .vehicles-filters-toggle:hover {
        border-color: var(--color-primary);
        box-shadow: var(--vitrine-sombra-hover);
    }

    .vehicles-filters-toggle i {
        font-size: 16px;
        color: var(--color-primary);
    }

    .vehicles-filters-toggle__count {
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--color-primary);
        color: var(--color-primary-contrast);
        font-size: 12px;
        font-weight: 600;
        line-height: 22px;
        text-align: center;
    }

    .vehicles-filters-toggle__count[hidden] {
        display: none;
    }

    /* A coluna sai do fluxo e vira o painel. */
    .rts-portfolio-area.inner [data-filters-col] {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1600;
        width: min(370px, 88vw);
        padding: 0;
        background: var(--color-white);
        box-shadow: 6px 0 34px rgba(5, 11, 32, 0.18);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        transition: transform 0.32s var(--vitrine-easing);
    }

    .filtros-abertos .rts-portfolio-area.inner [data-filters-col] {
        transform: translateX(0);
    }

    /* Dentro de um painel fixo, sticky não tem o que grudar. */
    .rts-portfolio-area.inner [data-filters-col] .sticky-top {
        position: static;
    }

    .rts-portfolio-area.inner [data-filters-col] .left-side-bar {
        padding: 0 18px 28px;
    }

    .vehicles-filters-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        position: sticky;
        top: 0;
        z-index: 2;
        margin: 0 -18px 14px;
        padding: 14px 18px;
        background: var(--color-white);
        border-bottom: 1px solid rgba(85, 85, 85, 0.15);
    }

    .vehicles-filters-header__title {
        font-family: var(--font-primary);
        font-size: 18px;
        font-weight: 600;
        line-height: 1;
        color: var(--color-heading-1);
    }

    .vehicles-filters-header__close {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        padding: 0;
        border: 1px solid rgba(85, 85, 85, 0.18);
        border-radius: 50%;
        background: var(--color-white);
        color: var(--color-heading-1);
        cursor: pointer;
        transition: var(--transition);
    }

    .vehicles-filters-header__close:hover {
        background: var(--color-primary);
        border-color: transparent;
        color: var(--color-primary-contrast);
    }

    .vehicles-filters-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1590;
        background: rgba(5, 11, 32, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .filtros-abertos .vehicles-filters-backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* Trava a rolagem da página; a do painel continua valendo. */
    .filtros-abertos {
        overflow-y: hidden;
    }
}

@media only screen and (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .rts-portfolio-area.inner [data-filters-col],
    .vehicles-filters-backdrop {
        transition: none;
    }
}

/* --------------------------------------------------------------
   Parte 4 — densidade do painel de filtros (/veiculos)

   O tema dimensiona .side-box para uma sidebar de blog: 30px de
   padding, 30px entre caixas, título de 20px. Com nove caixas de
   filtro isso passava de duas telas de rolagem só para chegar ao
   último filtro, e no desktop a coluna nunca cabia inteira.

   Tudo aqui é escopado em [data-filters-col] — o atributo existe
   só na coluna de filtros desta tela, então as demais sidebars do
   tema (blog, detalhe do veículo) seguem com o espaçamento
   original.
   -------------------------------------------------------------- */
[data-filters-col] .side-box {
    padding: 16px 18px;
    border-radius: 8px;
}

[data-filters-col] .side-box:not(:last-child) {
    margin-bottom: 12px;
}

[data-filters-col] .side-box h2 {
    font-size: 15px;
    margin-bottom: 10px;
}

[data-filters-col] .side-box .cross {
    top: 16px;
    right: 18px;
    font-size: 13px;
}

/* Busca. O seletor do tema exige um <form> dentro de .search-area;
   aqui o form envolve a caixa, então a regra precisa ser refeita. */
[data-filters-col] .side-box.search-area .input-wrapper {
    position: relative;
    z-index: 1;
}

[data-filters-col] .side-box.search-area .input-wrapper input {
    border-radius: 6px;
    border: none;
    background: var(--color-gray);
    padding: 9px 14px 9px 36px;
    font-size: 14px;
    color: var(--color-heading-1);
}

[data-filters-col] .side-box.search-area .input-wrapper input::placeholder {
    color: var(--color-body) !important;
}

[data-filters-col] .side-box.search-area .input-wrapper button {
    border: none;
    max-width: max-content;
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    z-index: 1;
    padding: 0;
    font-size: 14px;
}

[data-filters-col] .condition-options ul {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

[data-filters-col] .condition-options ul li {
    background: var(--color-gray);
    line-height: 1;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 13px;
}

[data-filters-col] .condition-options .checkbox-label {
    cursor: pointer;
}

/* Listas de marca/modelo/cor. Rolagem interna a partir de ~7 itens:
   sem isso uma revenda com 40 marcas empurra os filtros seguintes
   para fora da tela e a coluna deixa de funcionar como sticky. */
[data-filters-col] .side-box.car-make .checkbox-list {
    max-height: 224px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(85, 85, 85, 0.28) transparent;
}

[data-filters-col] .side-box.car-make .checkbox-list::-webkit-scrollbar {
    width: 6px;
}

[data-filters-col] .side-box.car-make .checkbox-list::-webkit-scrollbar-thumb {
    background: rgba(85, 85, 85, 0.28);
    border-radius: 999px;
}

[data-filters-col] .side-box.car-make .checkbox-item {
    padding: 6px 0;
}

[data-filters-col] .side-box.car-make .checkbox-label {
    gap: 8px;
}

[data-filters-col] .side-box.car-make .checkbox-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--color-primary);
}

[data-filters-col] .side-box.car-make .checkbox-item span,
[data-filters-col] .side-box.car-make .checkbox-label span {
    font-size: 14px;
    line-height: 1.35;
}

[data-filters-col] .side-box input[type="checkbox"] {
    accent-color: var(--color-primary);
}

/* Ano e KM — mesmo campo cinza sem borda da busca logo acima e do
   formulário de proposta (Parte 5), na altura do `form-control-sm`.
   O branco com borda do Bootstrap destoava: era o único campo do
   painel com contorno próprio.

   `border: none` derruba a borda de foco herdada de
   css/tenant/frontend.blade.css, mas o anel (box-shadow) daquele
   arquivo continua valendo — o campo segue sinalizando o foco. */
[data-filters-col] .side-box .form-control {
    height: auto;
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    background: var(--color-gray);
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-heading-1);
}

[data-filters-col] .side-box .form-control::placeholder {
    color: #8a8a8a;
    opacity: 1;
}

/* Preço */
[data-filters-col] .side-box.price-box .histogram {
    margin-bottom: 12px;
}

[data-filters-col] .side-box.price-box .histogram-bar.is-active {
    background: var(--color-primary);
}

[data-filters-col] .side-box.price-box .price-labels {
    margin-top: 16px;
    font-size: 14px;
}

[data-filters-col] .side-box.price-box .price-labels + .price-labels {
    margin-top: 8px;
    font-size: 12px;
    color: var(--color-body);
}

/* Categoria, combustível, transmissão */
[data-filters-col] .side-box.tag-area ul {
    gap: 8px;
}

[data-filters-col] .side-box.tag-area ul li {
    padding: 6px 10px;
    font-size: 13px;
}

/* --------------------------------------------------------------
   Ação de limpar os filtros, acima da coluna. As caixas têm um "x"
   cada uma; faltava desfazer a busca inteira sem passar caixa por
   caixa.

   Uma pílula só, do tamanho do texto, encostada na direita. As duas
   versões anteriores ocupavam a largura toda da coluna: primeiro um
   cartão com borda e sombra em volta de tudo, depois — já sem o
   cartão — o rótulo "Filtros" à esquerda e o botão à direita, que
   mantinha a linha esticada de ponta a ponta. A contagem de filtros
   ativos foi para dentro do botão, então não sobrou nada à esquerda
   e a linha inteira colapsa na largura da pílula.
   -------------------------------------------------------------- */
.vehicles-filters-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
    padding: 0 2px;
}

/* O contador herda a cor do texto do botão (branco no repouso, o
   contraste da primária no hover) e o fundo sai de uma sombra do
   próprio botão — assim ele não some quando o fundo da pílula muda
   de --color-heading-1 para a primária da revenda. */
.vehicles-filters-clear__count {
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
}

/* Sólido e escuro de propósito: na primeira versão era branco com borda
   fina de 1px e passava por campo de texto, não por ação.

   `flex: 0 0 auto` + `width: fit-content` prendem a largura ao
   conteúdo: o botão é um item flex da linha acima e, se algum dia
   cair num container que estique os filhos (`align-items: stretch`,
   `flex-direction: column`, um `.w-100` do Bootstrap herdado), ele
   voltaria a atravessar a coluna. `margin-left: auto` mantém a
   direita mesmo sem o `justify-content` do pai.

   O tamanho é deliberadamente menor que o de um botão de formulário —
   é uma ação de desfazer, não a ação principal da coluna. */
.vehicles-filters-clear {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    gap: 5px;
    padding: 5px 11px;
    border: none;
    border-radius: 999px;
    background: var(--color-heading-1);
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
}

/* `inherit` para o ícone acompanhar o botão no hover, quando o fundo
   passa de --color-heading-1 para a primária e o texto muda de cor. */
.vehicles-filters-clear i {
    font-size: 11px;
    color: inherit;
}

.vehicles-filters-clear:hover:not(:disabled) {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.vehicles-filters-clear:disabled {
    background: rgba(5, 11, 32, 0.35);
    cursor: default;
}

/* =============================================================
   Parte 5 — formulário "Tenho interesse" (/veiculo/{id}/detalhes)

   Estas regras existiam em resources/sass/public.scss, que o
   layout público não carrega (não há @vite em
   tenant/layouts/frontend/base.blade.php): os campos vinham com
   a borda nativa do navegador. Ficam aqui, junto do resto do CSS
   da vitrine, que é o que de fato chega à página.
   ============================================================= */
.proposta-box .proposta-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Isca da proteção anti-bot: fica fora da tela, e não escondida com
   `display: none` ou `visibility: hidden` — é exatamente isso que os
   robôs de formulário testam antes de decidir preencher um campo.

   `position: absolute` + deslocamento não gera barra de rolagem: o
   frontend do tenant declara `overflow-x: clip` no body (ver
   css/tenant/frontend.blade.css). A altura zerada tira a isca do
   fluxo do flex, para não abrir um vão entre os campos reais. */
.proposta-box .proposta-isca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 0;
    overflow: hidden;
}

.proposta-box .proposta-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
}

.proposta-box .proposta-field label {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 0;
}

/* Campo cinza sem borda, igual à busca do painel de filtros, na
   altura reduzida do `form-control-sm` (~32px em vez de ~42px):
   o formulário inteiro cabe em menos tela no celular. */
.proposta-box .proposta-field input,
.proposta-box .proposta-field textarea {
    width: 100%;
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    background: var(--color-gray);
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-heading-1);
}

.proposta-box .proposta-field input::placeholder,
.proposta-box .proposta-field textarea::placeholder {
    color: var(--color-body);
}

/* Sem borda, o foco precisa de outro sinal — anel interno, que não
   desloca o campo nem devolve a moldura. */
.proposta-box .proposta-field input:focus,
.proposta-box .proposta-field textarea:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px #c9ced6;
}

.proposta-box .proposta-field textarea {
    resize: vertical;
}

.proposta-box .proposta-hint {
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    color: #6b7280;
}

.proposta-box .proposta-feedback {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 8px;
}

.proposta-box .proposta-feedback ul {
    margin: 0;
    padding-left: 18px;
}

.proposta-box .proposta-feedback-ok {
    background: #ecfdf5;
    color: #065f46;
}

.proposta-box .proposta-feedback-erro {
    background: #fef2f2;
    color: #991b1b;
}

/* =============================================================
   Parte 6 — respiro antes do rodapé (/veiculos e /veiculo/{id}/detalhes)

   `.rts-section-gapNew` do tema só declara `padding-top`. Nas duas
   telas que o usam, o último elemento do conteúdo (a grade de cards
   e o formulário de proposta) encostava direto no `.rts-footer-area`.
   Na listagem o botão "Carregar mais" mascarava isso com a própria
   margem; sem ele o encosto ficou evidente.

   O valor espelha o padding-top da própria classe — inclusive a
   redução do tema na faixa de tablet. A home NÃO entra aqui de
   propósito: ela termina no `.cta-inner`, que tem `bottom: -120px`
   para invadir o rodapé de propósito, e um padding no fim do
   conteúdo desfaria essa sobreposição.
   ============================================================= */
.rts-portfolio-area.inner.rts-section-gapNew {
    padding-bottom: 80px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .rts-portfolio-area.inner.rts-section-gapNew {
        padding-bottom: 50px;
    }
}

/* =============================================================
   Parte 7 — largura das duas colunas (/veiculos)

   Era `col-lg-4` + `col-lg-8`: um terço do container só para uma
   lista de checkboxes, ~380px no xl, e sobra para apenas três
   cards. Agora a coluna de filtros tem largura fixa e a lista
   fica com o resto exato, então a sobra vai toda para os cards e
   cabem quatro por linha a partir de 1200px.

   As DUAS colunas declaram largura explícita e `flex: 0 0 auto`,
   somando 100% — é o mesmo mecanismo do `col-4`/`col-8` que
   estava aqui antes, só que com os valores que queremos. A
   tentativa anterior usava `col-lg-auto` + `col-lg` (largura
   automática + flex-grow) e a lista caía para baixo dos filtros:
   numa linha flex que pode quebrar, o tamanho considerado para
   decidir a quebra é o mínimo automático do conteúdo, não o
   flex-basis. Daí também o `min-width: 0`, que desliga esse
   mínimo — sem ele o conteúdo de uma das colunas pode empurrar a
   outra para a linha de baixo de novo.

   A largura aproxima a coluna de um card: ~236px de conteúdo
   (260 menos as calhas) contra ~230px do card no xxl.

   Só a partir de 992px: abaixo disso a coluna de filtros é
   `position: fixed` e a largura vem da Parte 3 (min(370px, 88vw)),
   com a lista ocupando a tela inteira.
   ============================================================= */
@media only screen and (min-width: 992px) {
    .rts-portfolio-area.inner [data-filters-col],
    .rts-portfolio-area.inner [data-vehicles-col] {
        flex: 0 0 auto;
        min-width: 0;
    }

    .rts-portfolio-area.inner [data-filters-col] {
        width: 260px;
        max-width: 260px;
    }

    .rts-portfolio-area.inner [data-vehicles-col] {
        width: calc(100% - 260px);
        max-width: calc(100% - 260px);
    }
}

@media only screen and (min-width: 1400px) {
    .rts-portfolio-area.inner [data-filters-col] {
        width: 285px;
        max-width: 285px;
    }

    .rts-portfolio-area.inner [data-vehicles-col] {
        width: calc(100% - 285px);
        max-width: calc(100% - 285px);
    }
}

/* O histograma do tema tem 26 barras de 8px fixos (208px) com
   `justify-content: space-between`. Nos 236px de conteúdo da
   coluna nova elas ficariam praticamente coladas. Deixando a
   barra elástica, o desenho passa a acompanhar a largura
   disponível em qualquer breakpoint. */
[data-filters-col] .side-box.price-box .histogram {
    gap: 2px;
}

[data-filters-col] .side-box.price-box .histogram-bar {
    flex: 1 1 0;
    width: auto;
    min-width: 3px;
}

/* =============================================================
   Botão "Detalhes" dos cards — outline em repouso, preenchido no hover

   O `.rts-btn` do tema é invertido: o `::after` (pintado com
   --color-primary) cobre o botão em scaleY(1) e RECUA no hover,
   revelando o background do próprio botão. Ou seja, o repouso é o
   estado preenchido e o hover é o vazado — o oposto do que se espera
   de um botão secundário dentro de um card.

   Aqui o movimento do mesmo `::after` é invertido (scaleY 0 → 1), em
   vez de trocá-lo por transição de `background`: assim a animação de
   entrada continua sendo a do tema, só que na direção certa.

   A borda fica sempre na primária — no hover ela some visualmente
   dentro do preenchimento, então não há salto de layout entre os
   estados. O `::after` é posicionado pelo padding box, ou seja, ele
   preenche por dentro da borda e não a cobre.

   Vale para os dois cards da vitrine: `.vehicle-card` (slider da home)
   e `.project-wrapper2` da listagem /veiculos. Escopado nos cards de
   propósito — os demais `.rts-btn.btn-primary` do tema (banner, CTA)
   continuam preenchidos.
   ============================================================= */
.vehicle-card .card-footer-area .rts-btn.btn-primary,
.rts-portfolio-area.inner .project-wrapper2 .button-area .rts-btn.btn-primary {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    transition-property: color, border-color;
    transition-duration: 0.3s;
}

.vehicle-card .card-footer-area .rts-btn.btn-primary::after,
.rts-portfolio-area.inner .project-wrapper2 .button-area .rts-btn.btn-primary::after {
    background: var(--color-primary);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}

.vehicle-card .card-footer-area .rts-btn.btn-primary:hover,
.rts-portfolio-area.inner .project-wrapper2 .button-area .rts-btn.btn-primary:hover {
    /* Texto sobre a primária: contraste calculado pelo PaletaService,
       nunca branco fixo — a revenda pode escolher uma primária clara. */
    color: var(--color-primary-contrast);
}

.vehicle-card .card-footer-area .rts-btn.btn-primary:hover::after,
.rts-portfolio-area.inner .project-wrapper2 .button-area .rts-btn.btn-primary:hover::after {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}