﻿.tilter-orange {
    filter: invert(45%) sepia(94%) saturate(811%) hue-rotate(0deg) brightness(93%) contrast(102%);
}

.owl-item {
    height: 0;
}

    .owl-stage, .owl-item.active {
        height: auto !important;
    }

.owl-carouselOrange,
.owl-stage-outer {
    transition: height 500ms ease-in-out 0s;
}

.bContainerLogoBannerHistoria {
    max-width: 200px !important;
    height: 75px !important;
    display: inline-flex !important;
}

    .bContainerLogoBannerHistoria img {
        object-fit: contain;
        cursor: pointer;
    }


.bContainerImagemBanner {
    display: flex;
    height: 376px;
    max-height: 380px
}

    .bContainerImagemBanner img {
        cursor: pointer !important;
        aspect-ratio: 16 / 9 !important;
        width: 100% !important;
        object-fit: cover !important;
    }


.bContainerImagemAnuncio {
    height: 240px;
    max-height: 240px;
    display: flex;
}

    .bContainerImagemAnuncio img {
        border-radius: 10px 10px 0px 0px !important;
        cursor: pointer;
        aspect-ratio: 16 / 9 !important;
        width: 100% !important;
        object-fit: cover !important;
    }

.embed-responsive {
    height: 380px !important
}

/* Select2 - Marcas (verde) - borda */
#ddlFiltroMarca + .select2-container .select2-selection {
    border: 2px solid #138315 !important;
}

/* Select2 - Modelos (azul) - borda */
#ddlFiltroModelo + .select2-container .select2-selection {
    border: 2px solid #3351d8 !important;
}

/* Hover/foco verde - dropdown de Marcas */
.select2-marca .select2-results__option--highlighted {
    background-color: #138315 !important;
    color: #fff !important;
}

/* Hover/foco azul - dropdown de Modelos */
.select2-modelo .select2-results__option--highlighted {
    background-color: #3351d8 !important;
    color: #fff !important;
}


/* ===== PRODUTOS: FILTRO LATERAL XL ===== */
@media (min-width: 1860px) {
    .containerProdutos {
        position: relative !important;
        min-height: 2100px !important;
    }

    .filtroTopLG {
        display: none !important;
    }

    .filtroLateralXL {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: -310px !important;
        width: 250px !important;
        bottom: 0 !important;
        z-index: 1030 !important;
        background-color: #fff !important;
        border: 1px solid rgba(0, 0, 0, 0.2);
        padding: 20px !important;
        height: max-content !important;
    }

    .btnOrdenarLimparXL {
        display: block !important;
    }

    /* Força exibição em telas grandes */
    .filtroLateralXL.collapse {
        display: block !important;
        visibility: visible !important;
    }

    .bannerLateralXL {
        display: flex !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 0 !important;
        right: -310px !important;
        width: 260px !important;
        height: 2100px !important;
        z-index: 1030 !important;
    }
}

/* 2️⃣ TELAS MÉDIAS/PEQUENAS (<1860px): Colapso normal */
@media (max-width: 1859px) {
    .containerProdutos {
        position: static !important;
        min-height: auto !important;
    }

    .filtroTopLG {
        display: block !important;
    }

    .filtroLateralXL {
        display: none !important;
    }

        .filtroLateralXL.collapse.show {
            display: block !important;
        }

    .bannerLateralXL {
        display: none !important;
    }
}



/* ===== GRID RESPONSIVO DO divFiltros ===== */

/* Estilos do container de filtros */
#divFiltros .border {
    padding: 0 !important;
    border: none !important;
}

/* ≤1859px: COM border e padding (filtro no topo, colapso) */
@media (max-width: 1859px) {
    #divFiltros .border {
        padding: 1rem !important;
        border: 1px solid rgba(0, 0, 0, 0.125) !important;
        margin-bottom: 1rem !important;
    }
}

/* ≥1860px: SEM border e padding (filtro lateral) */
@media (min-width: 1860px) {
    #divFiltros .border {
        padding: 0 !important;
        border: none !important;
        margin-bottom: 0 !important;
    }
}

/* ===== GRID: mobile-first, 1 coluna como padrão ===== */
#divFiltros .row {
    display: grid !important;
    gap: 1.5rem;
    padding: 0 !important;
    margin: 0 !important;
    grid-template-columns: 1fr;
}

/* Tablet pequeno (481px–720px): 2 colunas */
@media (min-width: 481px) and (max-width: 720px) {
    #divFiltros .row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet grande (721px–1023px): 3 colunas */
@media (min-width: 721px) and (max-width: 1023px) {
    #divFiltros .row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop (1024px–1859px): 4 colunas */
@media (min-width: 1024px) and (max-width: 1859px) {
    #divFiltros .row {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* XL lateral (≥1860px): 1 coluna (filtro na lateral) */
@media (min-width: 1860px) {
    #divFiltros .row {
        grid-template-columns: 1fr;
    }
}

#divFiltros .filter-column {
    width: 100%;
}



/* ===== SKELETON PRODUTOS ===== */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skLoading 1.5s infinite;
}

@keyframes skLoading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-produto {
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #e8e8e8;
}

/* ===== COMENTARIOS/AVALIACAO (Conta/Produtos) ===== */
#reviews .btn.AbrirModalComentario,
#reviews .btn.EnviaAvaliacao,
#modalComentar .btn.EnviarComentario {
    background: rgba(201,160,90,.10) !important;
    border: 1px solid rgba(201,160,90,.30) !important;
    color: #c9a05a !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
}

#reviews .btn.AbrirModalComentario:hover,
#reviews .btn.EnviaAvaliacao:hover,
#modalComentar .btn.EnviarComentario:hover {
    background: rgba(201,160,90,.20) !important;
    border-color: rgba(201,160,90,.55) !important;
    color: #f3d58b !important;
}

    .skeleton-produto .sk-img {
        width: 100%;
        height: 200px;
        border-radius: 10px 10px 0 0;
    }

    .skeleton-produto .sk-body {
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

.sk-line {
    border-radius: 4px;
    height: 14px;
}

    .sk-line.short {
        width: 40%;
    }

    .sk-line.medium {
        width: 65%;
    }

    .sk-line.long {
        width: 90%;
    }

    .sk-line.title {
        width: 80%;
        height: 18px;
    }

    .sk-line.price {
        width: 50%;
        height: 20px;
    }

.produtos-fade-in {
    animation: prodFadeIn 0.4s ease-in;
}

@keyframes prodFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===== BANNER: reserva altura durante transição skeleton → real ===== */
#DivBanner {
    min-height: 376px;
}

#skeletonBannerProdutos,
#bannerRealProdutos {
    min-height: 376px;
}


#DivBanner.skeleton-ativo {
    background-image: none !important;
    background-color: #e8e8e8 !important;
    min-height: 376px;
}



/* ═══ Layout Banner Comércio (t66-hero) ═══ */
.t66-hero .owl-stage-outer,
.t66-hero .owl-carouselOrange {
    background: transparent !important;
}

.t66-hero .owl-nav button {
    background: transparent !important;
    border: 1px solid rgba(201,160,90,.3) !important;
    color: #c9a05a !important;
    border-radius: 8px !important;
    transition: background .2s !important;
}

    .t66-hero .owl-nav button:hover {
        background: rgba(201,160,90,.30) !important;
    }

@media (max-width: 991.98px) {
    .t66-hero .owl-nav {
        display: none !important;
    }
}

@media (min-width: 768px) {
    #DivBanner {
        max-height: 510px;
    }
}

.t66-hero .owl-item {
    height: auto !important;
}


.t66-eyebrow {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #c9a05a;
    display: block;
    margin-bottom: 6px;
}

.t66-underline-orange {
    height: 2px;
    width: 60px;
    margin: 8px auto 0;
    background: linear-gradient(90deg, #FF8000, #ffb347);
    border-radius: 2px;
}

/* skeleton sobre fundo escuro */
#DivBanner.skeleton-ativo {
    background: linear-gradient(180deg, #0d0d0d 0%, #111827 100%) !important;
}

.t66-hero .skeleton {
    background: linear-gradient(90deg, #1e2535 25%, #2a3347 50%, #1e2535 75%) !important;
    background-size: 200% 100% !important;
}


/* ═══════════════════════════════════════
           DARK THEME — Fundo geral da página
        ═══════════════════════════════════════ */
body {
    background-color: #0d0f1a !important;
}

/* ── Migalhas de Pão ── */
.page-title-wrapper {
    background: linear-gradient(180deg, #111827 0%, #0d0f1a 100%) !important;
    border-bottom: 1px solid rgba(201,160,90,.10);
}

    .page-title-wrapper .breadcrumb {
        background: transparent !important;
    }

    .page-title-wrapper .breadcrumb-item a,
    .page-title-wrapper .breadcrumb-item.active,
    .page-title-wrapper .breadcrumb-item + .breadcrumb-item::before {
        color: rgba(255,255,255,.45) !important;
    }

        .page-title-wrapper .breadcrumb-item a:hover {
            color: #c9a05a !important;
        }

    .page-title-wrapper .page-title {
        color: #fff !important;
    }

    .page-title-wrapper hr {
        border-color: rgba(201,160,90,.15) !important;
    }

    .page-title-wrapper .feather {
        color: rgba(255,255,255,.45);
    }

/* ── Container principal dos produtos ── */
.container-fluid[style*="background-color: #fdfdfd"],
.container[style*="background-color: #fdfdfd"] {
    background-color: #0d0f1a !important;
}

/* ── Toolbar (botão Filtros + Ordenar) ── */
.filtroTopLG {
    background: transparent !important;
}

    .filtroTopLG .btn-outline-primary {
        border-color: rgba(201,160,90,.45) !important;
        color: #c9a05a !important;
        background: transparent !important;
    }

        .filtroTopLG .btn-outline-primary:hover {
            background: rgba(201,160,90,.12) !important;
        }

    .filtroTopLG label {
        color: rgba(255,255,255,.55) !important;
    }

    .filtroTopLG .form-control,
    .filtroTopLG .custom-select {
        background-color: #1a2035 !important;
        border-color: rgba(255,255,255,.12) !important;
        color: #e2e8f0 !important;
    }

    .filtroTopLG .btn-secondary {
        background-color: #2a3347 !important;
        border-color: rgba(255,255,255,.15) !important;
        color: #e2e8f0 !important;
    }

/* ── Painel de Filtros (colapso / lateral) ── */
.filtroLateralXL,
#divFiltros .border {
    background-color: #111827 !important;
    border-color: rgba(201,160,90,.18) !important;
}

#divFiltros .widget-title,
#divFiltros h3 {
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    padding-bottom: 6px;
}

#divFiltros label,
#divFiltros .custom-control-label {
    color: rgba(255,255,255,.70) !important;
}

#divFiltros .form-control,
#divFiltros .custom-select {
    background-color: #1a2035 !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #e2e8f0 !important;
}

    #divFiltros .form-control option,
    #divFiltros .custom-select option {
        background-color: #1a2035 !important;
        color: #e2e8f0 !important;
    }

#divFiltros .btn-secondary,
#divFiltros .btn-outline-primary {
    background-color: #1e2a40 !important;
    border-color: rgba(201,160,90,.35) !important;
    color: #c9a05a !important;
}

    #divFiltros .btn-secondary:hover,
    #divFiltros .btn-outline-primary:hover {
        background-color: rgba(201,160,90,.15) !important;
    }

#divFiltros .input-group-text {
    background-color: #1a2035 !important;
    border-color: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.55) !important;
}

#divFiltros .text-danger {
    color: #f87171 !important;
}

/* ── Switches e Radios no tema dark ── */
#divFiltros .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #c9a05a !important;
    border-color: #c9a05a !important;
}

/* ── Select2 no tema dark ── */
.select2-container--default .select2-selection--single {
    background-color: #1a2035 !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #e2e8f0 !important;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #e2e8f0 !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-top-color: rgba(255,255,255,.45) !important;
    }

.select2-dropdown {
    background-color: #1a2035 !important;
    border-color: rgba(255,255,255,.12) !important;
}

.select2-results__option {
    color: #e2e8f0 !important;
}

.select2-container--default .select2-results__option--highlighted {
    background-color: #2a3a55 !important;
}

.select2-search--dropdown .select2-search__field {
    background-color: #111827 !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #e2e8f0 !important;
}

/* ── Skeleton produtos — tom escuro ── */
.skeleton-produto {
    background-color: #141c2e !important;
    border-color: rgba(255,255,255,.07) !important;
}

.skeleton {
    background: linear-gradient(90deg, #1e2535 25%, #2a3347 50%, #1e2535 75%) !important;
    background-size: 200% 100% !important;
}

/* ── Cards de produto gerados via JS ── */
#produtos-container .card,
#produtos-container .product-card {
    background-color: #141c2e !important;
    border-color: rgba(255,255,255,.08) !important;
}

#produtos-container .card-body {
    background-color: #141c2e !important;
}

#produtos-container .card-title,
#produtos-container .product-title {
    color: #e2e8f0 !important;
}

#produtos-container .text-muted {
    color: rgba(255,255,255,.45) !important;
}

/* ── Alerta sem anúncios ── */
#DivAlertaSemAnuncios {
    background-color: #1e2535 !important;
    border-color: rgba(201,160,90,.30) !important;
    color: rgba(255,255,255,.75) !important;
}

    #DivAlertaSemAnuncios a {
        color: #c9a05a !important;
    }

/* ── Paginação ── */
#pagination-produtos .pagination {
    gap: 4px;
}

#pagination-produtos button {
    background-color: #1a2035 !important;
    border: 1px solid rgba(201,160,90,.25) !important;
    color: rgba(255,255,255,.65) !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    transition: background .2s, border-color .2s !important;
}

    #pagination-produtos button:hover {
        background-color: rgba(201,160,90,.15) !important;
        border-color: #c9a05a !important;
        color: #c9a05a !important;
    }

    #pagination-produtos button.active,
    #pagination-produtos button[data-active="true"] {
        background-color: rgba(201,160,90,.25) !important;
        border-color: #c9a05a !important;
        color: #c9a05a !important;
        font-weight: 700 !important;
    }

/* ── Banner lateral XL ── */
.bannerLateralXL .itemBannerLateral {
    border: 1px solid rgba(201,160,90,.18) !important;
    border-radius: 10px;
    overflow: hidden;
    color: rgba(255,255,255,.60) !important;
    background-color: #111827 !important;
}

    .bannerLateralXL .itemBannerLateral a {
        color: #c9a05a !important;
    }

/* ── Filtro lateral XL — fundo dark ── */
@media (min-width: 1860px) {
    .filtroLateralXL {
        background-color: #111827 !important;
        border-color: rgba(201,160,90,.18) !important;
    }

    #divFiltros .btnOrdenarLimparXL label {
        color: rgba(255,255,255,.55) !important;
    }
}


/* ── Cards dark — hover glow dourado ── */
.t66-card-dark:hover {
    border-color: rgba(201,160,90,.45) !important;
    box-shadow: 0 4px 20px rgba(201,160,90,.12) !important;
}
/* ── body-hidden: fundo dark quando expande no hover ── */
#produtos-container .body-hidden {
    background-color: #1a2035 !important;
}
    /* ── lista de detalhes do card ── */
    #produtos-container .body-hidden ul li {
        color: rgba(255,255,255,.50) !important;
    }

        #produtos-container .body-hidden ul li b {
            color: rgba(255,255,255,.80) !important;
        }

/* ── Menu mobile: fundo gradiente ao expandir ── */
@media (max-width: 991.98px) {
    #menu.navbar-collapse.show,
    #menu.navbar-collapse.collapsing {
        background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
        border-top: 1px solid rgba(201,160,90,.10);
        padding: 8px 0 16px;
/*        margin-left: -0.5rem;
        margin-right: -0.5rem;*/
    }
}


    .anuncio-dark .alert-secondary {
        background-color: rgba(201, 160, 90, .09) !important;
        border-color: rgba(201, 160, 90, .22) !important;
        color: #e8edf7 !important;
    }



.owl-carouselOrange .owl-nav {
    top: -40px !important;
}