/* --- 1. CORES DO SLIDER DE PREÇO --- */
.af_filter_content .af-slider .slider-bar .selected-bar {
    background-color: #fa4705 !important;
}

.af_filter_content .af-slider .slider-bar .pointer {
    background-color: #fa4705 !important;
    border-color: #fa4705 !important; 
}

.af_filter_content .af-slider .slider-bar .pointer:hover,
.af_filter_content .af-slider .slider-bar .pointer.active {
    background-color: #cc5200 !important;
    border-color: #cc5200 !important;
}

/* --- 2. BOTÃO MORE FILTERS (FORÇADO) --- */
button.btn.toggleMoreFilters {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #fa4705 !important;
    box-shadow: none !important;
}

/* Força a cor laranja no texto e no ícone no estado normal */
button.btn.toggleMoreFilters,
button.btn.toggleMoreFilters span,
button.btn.toggleMoreFilters i {
    color: #fa4705 !important;
    transition: all 0.3s ease-in-out !important;
}

/* Estado Hover (Rato por cima) */
button.btn.toggleMoreFilters:hover,
button.btn.toggleMoreFilters:focus,
button.btn.toggleMoreFilters:active {
    background: #fa4705 !important;
    background-color: #fa4705 !important;
    border-color: #fa4705 !important;
}

/* Força o texto e ícone a ficarem brancos no Hover */
button.btn.toggleMoreFilters:hover span,
button.btn.toggleMoreFilters:hover i,
button.btn.toggleMoreFilters:focus span,
button.btn.toggleMoreFilters:focus i {
    color: #ffffff !important;
}

/* --- 3. BOTÃO MORE FILTERS (MODO ESCURO - DEFINITIVO) --- */

/* Forçar as variáveis do Bootstrap e as cores normais */
[data-bs-theme="dark"] button.btn.toggleMoreFilters {
    --bs-btn-bg: transparent !important;
    --bs-btn-border-color: #ffffff !important;
    --bs-btn-color: #ffffff !important;
    --bs-btn-hover-bg: #fa4705 !important;
    --bs-btn-hover-border-color: #fa4705 !important;
    --bs-btn-hover-color: #ffffff !important;
    
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Garante que o texto e o ícone herdam a cor principal do botão no estado normal (Branco) */
[data-bs-theme="dark"] button.btn.toggleMoreFilters span,
[data-bs-theme="dark"] button.btn.toggleMoreFilters i {
    color: inherit !important;
}

/* Estado Hover (Rato por cima): Fundo laranja, borda laranja */
[data-bs-theme="dark"] button.btn.toggleMoreFilters:hover,
[data-bs-theme="dark"] button.btn.toggleMoreFilters:focus,
[data-bs-theme="dark"] button.btn.toggleMoreFilters:active {
    background: #fa4705 !important;
    background-color: #fa4705 !important;
    border-color: #fa4705 !important;
    color: #ffffff !important;
}

/* Garante que o texto e o ícone ficam brancos no Hover */
[data-bs-theme="dark"] button.btn.toggleMoreFilters:hover span,
[data-bs-theme="dark"] button.btn.toggleMoreFilters:hover i {
    color: #ffffff !important;
}

/* --- 4. CORES DAS CHECKBOXES --- */

/* Altera a cor de preenchimento nativa (Válido para Chrome, Firefox, Edge, Safari modernos) */
.af_filter_content input[type="checkbox"].af.checkbox,
.af_filter_content input[type="checkbox"] {
    accent-color: #fa4705 !important;
}

/* Força o laranja caso o tema use as checkboxes personalizadas do Bootstrap 5 */
.af_filter_content input[type="checkbox"].af.checkbox:checked,
.af_filter_content input[type="checkbox"]:checked {
    background-color: #fa4705 !important;
    border-color: #fa4705 !important;
}

/* Sombra/Brilho ao clicar na checkbox (opcional, para combinar com a cor) */
.af_filter_content input[type="checkbox"].af.checkbox:focus,
.af_filter_content input[type="checkbox"]:focus {
    box-shadow: 0 0 0 0.25rem rgba(250, 71, 5, 0.25) !important;
    border-color: #fa4705 !important;
}

/* --- 5. FILTROS ATIVOS / CLEAR ALL (MODO ESCURO - CORRIGIDO) --- */

/* 1. Botão "Clear" (Com espaçamento e fundo transparente) */
[data-bs-theme="dark"] .clearAll {
    background: transparent !important;
}

[data-bs-theme="dark"] .clearAll a.all {
    background: transparent !important;
    color: #fa4705 !important;
    border: 1px solid #fa4705 !important;
    border-radius: 4px !important;
    padding: 6px 14px !important; /* Espaçamento interno para criar o formato de botão */
    display: inline-block !important; /* Garante que o espaçamento é respeitado */
    text-decoration: none !important;
}

[data-bs-theme="dark"] .clearAll a.all:hover {
    background: #fa4705 !important;
    color: #ffffff !important;
}

/* 2. Etiquetas dos filtros aplicados (Forçar Fundo Transparente e Texto Branco) */
[data-bs-theme="dark"] #js-active-search-filters .filter-block,
[data-bs-theme="dark"] .active_filters .filter-block,
[data-bs-theme="dark"] .af-active-filter,
[data-bs-theme="dark"] .active-filter,
[data-bs-theme="dark"] ul.filter-blocks li {
    background-color: transparent !important;
    background: transparent !important;
    border: 1px solid #777777 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Forçar texto branco dentro da etiqueta e impedir spans com fundo branco */
[data-bs-theme="dark"] #js-active-search-filters .filter-block *,
[data-bs-theme="dark"] .active_filters .filter-block *,
[data-bs-theme="dark"] .af-active-filter *,
[data-bs-theme="dark"] .active-filter *,
[data-bs-theme="dark"] ul.filter-blocks li * {
    color: #ffffff !important;
    background: transparent !important; 
}

/* 3. Ícone de remover (X) - Laranja */
[data-bs-theme="dark"] #js-active-search-filters .filter-block .close,
[data-bs-theme="dark"] .active_filters .filter-block .close,
[data-bs-theme="dark"] .af-active-filter .close,
[data-bs-theme="dark"] .active-filter .close,
[data-bs-theme="dark"] .active-filter a.close {
    color: #fa4705 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    text-decoration: none !important;
}

[data-bs-theme="dark"] #js-active-search-filters .filter-block .close:hover,
[data-bs-theme="dark"] .active_filters .filter-block .close:hover,
[data-bs-theme="dark"] .af-active-filter .close:hover,
[data-bs-theme="dark"] .active-filter .close:hover {
    color: #ffffff !important;
}

/* --- 6. ETIQUETA ESPECÍFICA (.cf) --- */

/* Fundo transparente, borda cinza e texto branco */
[data-bs-theme="dark"] .af_filter_content .cf,
[data-bs-theme="dark"] .cf {
    background-color: transparent !important;
    background: transparent !important;
    border: 1px solid #777777 !important;
    color: #ffffff !important;
    padding: 4px 10px !important; /* Espaçamento interno para ficar bonito */
    display: inline-block !important;
    margin-right: 5px !important;
    border-radius: 4px !important;
}

/* Força o texto "In stock" a ficar branco e sem fundos */
[data-bs-theme="dark"] .cf * {
    color: #ffffff !important;
    background: transparent !important;
}

/* O ícone/link 'X' de remover fica laranja */
[data-bs-theme="dark"] .cf a.close,
[data-bs-theme="dark"] .cf a.u-times {
    color: #fa4705 !important;
    text-decoration: none !important;
    margin-left: 8px !important; /* Espaço entre o texto e o X */
}

/* O 'X' fica branco quando passa o rato */
[data-bs-theme="dark"] .cf a.close:hover,
[data-bs-theme="dark"] .cf a.u-times:hover {
    color: #ffffff !important;
}

/* --- 7. FILTROS ATIVOS E CLEAR ALL (MODO CLARO) --- */

/* 1. Botão "Clear" (Com espaçamento e fundo transparente) */
[data-bs-theme="light"] .clearAll {
    background: transparent !important;
}

[data-bs-theme="light"] .clearAll a.all {
    background: transparent !important;
    color: #fa4705 !important;
    border: 1px solid #fa4705 !important;
    border-radius: 4px !important;
    padding: 6px 14px !important;
    display: inline-block !important;
    text-decoration: none !important;
}

[data-bs-theme="light"] .clearAll a.all:hover {
    background: #fa4705 !important;
    color: #ffffff !important;
}

/* 2. Etiquetas dos filtros aplicados (.cf, .active-filter, etc.) */
[data-bs-theme="light"] #js-active-search-filters .filter-block,
[data-bs-theme="light"] .active_filters .filter-block,
[data-bs-theme="light"] .af-active-filter,
[data-bs-theme="light"] .active-filter,
[data-bs-theme="light"] ul.filter-blocks li,
[data-bs-theme="light"] .af_filter_content .cf,
[data-bs-theme="light"] .cf {
    background-color: transparent !important;
    background: transparent !important;
    border: 1px solid #cccccc !important; /* Borda cinza clara para combinar com o fundo */
    color: #333333 !important; /* Texto escuro para ser legível */
    padding: 4px 10px !important;
    display: inline-block !important;
    margin-right: 5px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

/* Forçar texto escuro dentro das etiquetas e impedir spans com fundo cinza */
[data-bs-theme="light"] #js-active-search-filters .filter-block *,
[data-bs-theme="light"] .active_filters .filter-block *,
[data-bs-theme="light"] .af-active-filter *,
[data-bs-theme="light"] .active-filter *,
[data-bs-theme="light"] ul.filter-blocks li *,
[data-bs-theme="light"] .cf * {
    color: #333333 !important;
    background: transparent !important;
}

/* 3. Ícone de remover (X) - Laranja */
[data-bs-theme="light"] #js-active-search-filters .filter-block .close,
[data-bs-theme="light"] .active_filters .filter-block .close,
[data-bs-theme="light"] .af-active-filter .close,
[data-bs-theme="light"] .active-filter .close,
[data-bs-theme="light"] .active-filter a.close,
[data-bs-theme="light"] .cf a.close,
[data-bs-theme="light"] .cf a.u-times {
    color: #fa4705 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    text-decoration: none !important;
    margin-left: 8px !important;
}

/* Efeito ao passar o rato no 'X' (fica um laranja ligeiramente mais escuro em vez de branco) */
[data-bs-theme="light"] #js-active-search-filters .filter-block .close:hover,
[data-bs-theme="light"] .active_filters .filter-block .close:hover,
[data-bs-theme="light"] .af-active-filter .close:hover,
[data-bs-theme="light"] .active-filter .close:hover,
[data-bs-theme="light"] .cf a.close:hover,
[data-bs-theme="light"] .cf a.u-times:hover {
    color: #cc5200 !important; 
}