/* ==========================================================================
   AMAZZING FILTER — MODO ESCURO (mobile compact panel + geral)
   Este ficheiro NÃO faz parte do módulo Amazzing Filter (webkul/amazzingfilter).
   É carregado pelo módulo coolmaticasearch, DEPOIS do front.css do Amazzing
   Filter, para sobrepor apenas as cores fixas (brancas) que o módulo usa.
   Assim sobrevive a atualizações do Amazzing Filter.
   ========================================================================== */

/* -----------------------------------------------------------
   1. PAINEL MOBILE (compact view) — fundo e texto
   ----------------------------------------------------------- */
html[data-theme="dark"] .has-compact-filter #amazzing_filter,
body.dark-theme .has-compact-filter #amazzing_filter,
[data-bs-theme="dark"] .has-compact-filter #amazzing_filter,
.dark-mode .has-compact-filter #amazzing_filter {
    background: #1e1e1e !important;
}

html[data-theme="dark"] .has-compact-filter #amazzing_filter .title_block,
body.dark-theme .has-compact-filter #amazzing_filter .title_block,
[data-bs-theme="dark"] .has-compact-filter #amazzing_filter .title_block,
.dark-mode .has-compact-filter #amazzing_filter .title_block {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
}

/* Texto genérico dentro do painel (labels, nomes, subtítulos, links) */
html[data-theme="dark"] #amazzing_filter,
body.dark-theme #amazzing_filter,
[data-bs-theme="dark"] #amazzing_filter,
.dark-mode #amazzing_filter,
html[data-theme="dark"] #amazzing_filter .af_subtitle,
body.dark-theme #amazzing_filter .af_subtitle,
[data-bs-theme="dark"] #amazzing_filter .af_subtitle,
.dark-mode #amazzing_filter .af_subtitle,
html[data-theme="dark"] #amazzing_filter .name,
body.dark-theme #amazzing_filter .name,
[data-bs-theme="dark"] #amazzing_filter .name,
.dark-mode #amazzing_filter .name,
html[data-theme="dark"] #amazzing_filter label,
body.dark-theme #amazzing_filter label,
[data-bs-theme="dark"] #amazzing_filter label,
.dark-mode #amazzing_filter label,
html[data-theme="dark"] #amazzing_filter a,
body.dark-theme #amazzing_filter a,
[data-bs-theme="dark"] #amazzing_filter a,
.dark-mode #amazzing_filter a {
    color: #e0e0e0 !important;
}

/* Contadores "(25)" — um pouco mais discretos que o texto principal */
html[data-theme="dark"] #amazzing_filter .count,
body.dark-theme #amazzing_filter .count,
[data-bs-theme="dark"] #amazzing_filter .count,
.dark-mode #amazzing_filter .count,
html[data-theme="dark"] #amazzing_filter .af-total-count,
body.dark-theme #amazzing_filter .af-total-count,
[data-bs-theme="dark"] #amazzing_filter .af-total-count,
.dark-mode #amazzing_filter .af-total-count {
    color: #999999 !important;
}

/* -----------------------------------------------------------
   2. LINHAS / DIVISORES
   ----------------------------------------------------------- */
html[data-theme="dark"] #amazzing_filter .af_filter,
body.dark-theme #amazzing_filter .af_filter,
[data-bs-theme="dark"] #amazzing_filter .af_filter,
.dark-mode #amazzing_filter .af_filter {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

/* Seta de abrir/fechar cada secção (Interface, Formato, Cor, etc.) */
html[data-theme="dark"] #amazzing_filter .af_subtitle.toggle-content:before,
body.dark-theme #amazzing_filter .af_subtitle.toggle-content:before,
[data-bs-theme="dark"] #amazzing_filter .af_subtitle.toggle-content:before,
.dark-mode #amazzing_filter .af_subtitle.toggle-content:before {
    border-color: #999999 !important;
}

/* -----------------------------------------------------------
   3. PESQUISA RÁPIDA DENTRO DOS FILTROS (quick search)
   ----------------------------------------------------------- */
html[data-theme="dark"] #amazzing_filter .qsInput,
body.dark-theme #amazzing_filter .qsInput,
[data-bs-theme="dark"] #amazzing_filter .qsInput,
.dark-mode #amazzing_filter .qsInput {
    background: #2a2a2a !important;
    border-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}
html[data-theme="dark"] body #amazzing_filter .qsInput:focus,
body.dark-theme #amazzing_filter .qsInput:focus,
[data-bs-theme="dark"] #amazzing_filter .qsInput:focus,
.dark-mode #amazzing_filter .qsInput:focus,
html[data-theme="dark"] #amazzing_filter .qsInput.has-value,
body.dark-theme #amazzing_filter .qsInput.has-value,
[data-bs-theme="dark"] #amazzing_filter .qsInput.has-value,
.dark-mode #amazzing_filter .qsInput.has-value {
    background: #333333 !important;
    border-color: #555555 !important;
}
html[data-theme="dark"] #amazzing_filter .af-quick-search:before,
body.dark-theme #amazzing_filter .af-quick-search:before,
[data-bs-theme="dark"] #amazzing_filter .af-quick-search:before,
.dark-mode #amazzing_filter .af-quick-search:before,
html[data-theme="dark"] #amazzing_filter .af-quick-search:after,
body.dark-theme #amazzing_filter .af-quick-search:after,
[data-bs-theme="dark"] #amazzing_filter .af-quick-search:after,
.dark-mode #amazzing_filter .af-quick-search:after {
    border-color: #999999 !important;
}

/* -----------------------------------------------------------
   4. FILTROS SELECIONADOS (tags "cf" + "limpar tudo")
   ----------------------------------------------------------- */
html[data-theme="dark"] #amazzing_filter .selectedFilters .cf,
body.dark-theme #amazzing_filter .selectedFilters .cf,
[data-bs-theme="dark"] #amazzing_filter .selectedFilters .cf,
.dark-mode #amazzing_filter .selectedFilters .cf {
    background: #333333 !important;
    color: #e0e0e0 !important;
}
html[data-theme="dark"] #amazzing_filter .selectedFilters .clearAll,
body.dark-theme #amazzing_filter .selectedFilters .clearAll,
[data-bs-theme="dark"] #amazzing_filter .selectedFilters .clearAll,
.dark-mode #amazzing_filter .selectedFilters .clearAll {
    background: #3a3a3a !important;
}
html[data-theme="dark"] #amazzing_filter .selectedFilters .clearAll a,
body.dark-theme #amazzing_filter .selectedFilters .clearAll a,
[data-bs-theme="dark"] #amazzing_filter .selectedFilters .clearAll a,
.dark-mode #amazzing_filter .selectedFilters .clearAll a {
    color: #cccccc !important;
}

/* -----------------------------------------------------------
   5. CAIXAS DE TEXTO ("text boxes" — tamanhos, etc.)
   ----------------------------------------------------------- */
html[data-theme="dark"] #amazzing_filter .af_filter.tb li,
body.dark-theme #amazzing_filter .af_filter.tb li,
[data-bs-theme="dark"] #amazzing_filter .af_filter.tb li,
.dark-mode #amazzing_filter .af_filter.tb li {
    border-color: rgba(255, 255, 255, 0.2) !important;
}
html[data-theme="dark"] #amazzing_filter .af_filter.tb li.active,
body.dark-theme #amazzing_filter .af_filter.tb li.active,
[data-bs-theme="dark"] #amazzing_filter .af_filter.tb li.active,
.dark-mode #amazzing_filter .af_filter.tb li.active {
    background: #333333 !important;
    border-color: #fa4705 !important;
}

/* -----------------------------------------------------------
   6. CAIXAS DE COR ("swatches")
   ----------------------------------------------------------- */
html[data-theme="dark"] #amazzing_filter .active .af-color-box:after,
body.dark-theme #amazzing_filter .active .af-color-box:after,
[data-bs-theme="dark"] #amazzing_filter .active .af-color-box:after,
.dark-mode #amazzing_filter .active .af-color-box:after {
    border-color: #fa4705 !important;
}

/* -----------------------------------------------------------
   7. SELECT NATIVO (dropdown de filtro)
   ----------------------------------------------------------- */
html[data-theme="dark"] #amazzing_filter .af_filter select,
body.dark-theme #amazzing_filter .af_filter select,
[data-bs-theme="dark"] #amazzing_filter .af_filter select,
.dark-mode #amazzing_filter .af_filter select {
    background: #2a2a2a !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #e0e0e0 !important;
}

/* -----------------------------------------------------------
   8. BOTÃO FECHAR (X) DO PAINEL MOBILE + "VER MAIS FILTROS"
   ----------------------------------------------------------- */
html[data-theme="dark"] #amazzing_filter .compact-close,
body.dark-theme #amazzing_filter .compact-close,
[data-bs-theme="dark"] #amazzing_filter .compact-close,
.dark-mode #amazzing_filter .compact-close {
    color: #e0e0e0 !important;
}
html[data-theme="dark"] #amazzing_filter .toggleMoreFilters,
body.dark-theme #amazzing_filter .toggleMoreFilters,
[data-bs-theme="dark"] #amazzing_filter .toggleMoreFilters,
.dark-mode #amazzing_filter .toggleMoreFilters {
    background: #333333 !important;
    color: #e0e0e0 !important;
}
html[data-theme="dark"] #amazzing_filter .toggle-cut-off span,
body.dark-theme #amazzing_filter .toggle-cut-off span,
[data-bs-theme="dark"] #amazzing_filter .toggle-cut-off span,
.dark-mode #amazzing_filter .toggle-cut-off span {
    background: #1e1e1e !important;
    color: #999999 !important;
}

/* -----------------------------------------------------------
   9. BOTÕES GERAIS (ex: "VIEW PRODUCTS") — mantém a cor de
   destaque laranja da marca; só garante contraste do texto.
   ----------------------------------------------------------- */
html[data-theme="dark"] #amazzing_filter .btn:not(.viewFilteredProducts),
body.dark-theme #amazzing_filter .btn:not(.viewFilteredProducts),
[data-bs-theme="dark"] #amazzing_filter .btn:not(.viewFilteredProducts),
.dark-mode #amazzing_filter .btn:not(.viewFilteredProducts) {
    background: #333333 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #e0e0e0 !important;
}

/* -----------------------------------------------------------
   10. CONTADOR NO BOTÃO "VIEW PRODUCTS (886)" — FIX GLOBAL
   O Amazzing Filter aplica opacity:0.5 à .af-total-count, o que
   torna o número quase invisível em cima do fundo laranja.
   Isto acontece em claro E escuro, por isso corrige-se sempre.
   ----------------------------------------------------------- */
#amazzing_filter .viewFilteredProducts .af-total-count {
    opacity: 1 !important;
    font-weight: 700 !important;
    font-size: 1.05em !important;
}