/* search-custom-filter/assets/css/my-custom-filter.css */

/* IMPORT GOOGLE FONTS - Montserrat */
/* É melhor enfileirar via functions.php (já está no search-custom-filter.php) */
/* @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap"); */

/* Font Awesome for icons (se não for carregado pelo tema/Bricks) */
/* É melhor enfileirar via functions.php (já está no search-custom-filter.php) */
/* @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"); */


/* Reset/base styles to ensure consistency */
.scf-main-search-wrapper,
.scf-filter-panel,
.scf-filter-panel *,
.brx-button {
    box-sizing: border-box; /* Garante que padding/border seja incluído na largura/altura total do elemento */
    font-family: 'Montserrat', sans-serif; /* Aplica a fonte Montserrat */
}

/* CONTAINER GERAL DA BARRA DE BUSCA E TOGGLE */
.scf-main-search-wrapper {
    position: relative; /* CRUCIAL: Para posicionamento absoluto do painel de filtro */
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Espaço abaixo do elemento */
    /* Este wrapper DEVE ser o elemento que está à direita na sua barra de navegação/cabeçalho.
       Se ele não estiver na posição exata desejada na página, o 'right: 80px' no painel será relativo a ele. */
}

/* ESTILO DA BARRA DE PESQUISA (INPUT E ÍCONES) */
.scf-search-input-container {
    position: relative;
    flex-grow: 1;
    display: flex
;
    align-items: center;
    background: linear-gradient(111.96deg, rgba(255, 255, 255, 0.4) 20.52%, rgba(153, 153, 153, 0.4) 97.35%);
    border-radius: 8.2rem;
    padding: 0.1rem 0.8rem;
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    max-width: 100%;
    color: #ffffff;
}

.scf-search-icon {
    color: #ffffff; /* Cor da lupa */
    font-size: 1rem;
    margin-right: 0.7rem;
}

.scf-filter-icon {
    cursor: pointer;
    margin-left: auto; /* Empurra o ícone de filtro para a direita */
    padding: 0 0.4rem; /* Área clicável para o ícone */
    color: #ffffff; /* Cor do ícone de filtro */
}

.scf-search-input {
    border: none;
    outline: none;
    flex-grow: 1;
	line-height:2vw;
    padding: 0.1rem 0;
    font-size: 1em;
    background-color: transparent;
    color: #ffffff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: 'Montserrat', sans-serif; /* Garante a fonte para o input */
}

.scf-search-input::placeholder {
    color: #ffffff;
}


/* ESCONDER O TOGGLE SWITCH */
.scf-toggle-switch {
    display: none; /* ESCONDE COMPLETAMENTE O TOGGLE SWITCH */
}

/* ESTILOS DO PAINEL DE FILTRO (SUBMENU)*/
.scf-filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 1.2rem);
    right: 0rem;
    width: 25rem;
    max-width: calc(100vw - 6rem);
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 999;
    overflow: hidden;
    border: 1px solid #ddd;
    opacity: 0;
    transform: translateY(-0.6rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: opacity, transform;
}

/* Estado ativo do painel (visível) */
.scf-filter-panel.is-active {
    /* 'display: block;' é agora controlado pelo JavaScript via slideDown/Up */
    opacity: 1;
    transform: translateY(0);
}

.scf-filter-panel-content {
    padding: 1rem;
    box-sizing: border-box; /* Inclui padding na largura/altura total */
    max-height: 70vh; /* Limita a altura do modal para evitar overflow em telas pequenas */
    overflow-y: auto; /* Adiciona scroll se o conteúdo for muito alto */
    scrollbar-width: thin; /* Para Firefox */
    scrollbar-color: #ccc #f1f1f1; /* Para Firefox */
}

/* Estilo da barra de rolagem para navegadores WebKit (Chrome, Safari) */
.scf-filter-panel-content::-webkit-scrollbar {
    width: 8px;
}
.scf-filter-panel-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0.6rem;
}
.scf-filter-panel-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 0.6rem;
}
.scf-filter-panel-content::-webkit-scrollbar-thumb:hover {
    background: #999;
}


/* ESTILOS DO ACORDEÃO */
.scf-accordion-item {
    margin-bottom: 0;
    border-bottom: 1px solid #eee; /* Linha divisória */
    padding-bottom: 0;
}

.scf-accordion-item:last-child {
    border-bottom: none;
}

.scf-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1em; /* Ajuste o tamanho da fonte para o cabeçalho */
    font-weight: 700; /* Bold como na imagem */
    color: #2F6C92; /* Azul da sua imagem */
    padding: 0.9rem 0; /* Padding para o cabeçalho */
    margin: 0;
    text-transform: uppercase; /* Maiúsculas como na imagem */
}

.scf-accordion-icon {
    font-size: 0.9em;
    color: #2F6C92; /* Cor da seta */
    transition: transform 0.3s ease;
}

.scf-accordion-header.is-active .scf-accordion-icon {
    transform: rotate(180deg); /* Gira a seta para cima quando aberto */
}

.scf-accordion-content {
    padding: 0.6rem 0 0 0; /* Padding para o conteúdo do acordeão */
    display: none; /* CONTROLADO PELO JS (slideUp/slideDown) */
    overflow: hidden; /* Garante que o conteúdo não vaze durante a animação */
}

.filter-parent-category {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

.filter-parent-category h4 {
    /* Este h4 foi removido do HTML para corresponder ao modelo onde apenas as opções de rádio são visíveis */
    display: none; /* Se por algum motivo ele aparecer, esta linha o esconde */
}

.filter-subcategories label {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem; /* Espaço entre as opções de rádio */
    cursor: pointer;
    font-size: 0.9em; /* Tamanho da fonte para os labels */
    color: #444;
    padding-left: 0; /* Sem indentação extra */
}

/* ESTILOS PERSONALIZADOS DO RADIO BUTTON */
.filter-subcategories input[type="radio"] {
    display: none; /* Esconde o radio button padrão do navegador */
}

.scf-custom-radio {
    width: 1rem; /* Tamanho do círculo externo */
    height: 1rem;
    border: 2px solid #ccc; /* Borda cinza para não selecionado */
    border-radius: 50%;
    margin-right: 0.6rem; /* Espaço entre o rádio e o texto */
    display: inline-block;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
    background-color: #fff; /* Fundo branco para o círculo */
}

.filter-subcategories input[type="radio"]:checked + .scf-custom-radio {
    border-color: #2F6C92; /* Borda azul quando selecionado */
    background-color: #2F6C92; /* Fundo azul quando selecionado */
}

.filter-subcategories input[type="radio"]:checked + .scf-custom-radio::after {
    content: '';
    width: 0.4rem; /* Tamanho do ponto interno */
    height: 0.4rem;
    background: #fff; /* Ponto branco dentro */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
}

/* ESTILOS DOS BOTÕES DE AÇÃO */
.filter-actions {
    display: flex;
    justify-content: center; /* Centraliza os botões */
    gap: 0.8rem;
    margin-top: 1.2rem; /* Espaço acima dos botões */
    padding-top: 0.8rem;
    border-top: 1px solid #eee;
}

/* Estilos de botão base (adaptados do Bricks, se aplicável) */
.brx-button {
    font-family: 'Montserrat', sans-serif; /* Garante a fonte para os botões */
    padding: 0.3rem 1.4rem; /* Ajuste o padding para o tamanho dos botões */
    border: none;
    border-radius: 25px; /* Mais arredondado como na imagem */
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 600; /* Semibold como na imagem */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    display: inline-flex; /* Use flex para alinhar conteúdo (se tiver ícones) */
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra sutil para os botões */
}

.brx-button:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.scf-clear-button {
    background-color: #a0a0a0; /* Cinza para limpar */
    color: #fff;
}

.scf-clear-button:hover {
    background-color: #888;
}

.scf-apply-button {
    background-color: #2F6C92; /* Azul da sua imagem */
    color: #fff;
}

.scf-apply-button:hover {
    background-color: #265573;
}

h3.scf-accordion-header {
    font-size: 1rem;
}

/* Media Queries para responsividade, se necessário */
@media (max-width: 768px) {
    .scf-filter-panel {
        right: 20px; /* Ajusta a margem da direita em telas menores */
        width: calc(100% - 40px); /* Largura quase total */
    }
}