/* Estilos gerais da barra lateral de filtros */
.filters-sidebar {
    background-color: var(--bg-color-white);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    box-shadow: var(--box-shadow-light);
    margin-bottom: var(--spacing-md);
}

/* Estilo do título principal */
.filters-sidebar .main_category_sidebar_title {
    font-size: 1.8em;
    color: var(--text-color-dark);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
}

.filter-search-center {
    padding: 0 var(--spacing-sm);
}

/* Estilo geral do formulário */
.auth_form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Grupo de faixa de preço (container para label, tooltips e slider) */
.filter-range-group {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    position: relative;
}

/* Label da faixa de preço */
.filter-range-label {
    font-size: 1em;
    font-weight: var(--weight-bold);
    color: var(--text-color-medium);
    display: block;
    margin-bottom: 30px; /* Espaço para os tooltips abaixo e acima do slider */
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Garante que elementos comentados ou não utilizados não apareçam */
.filter-range-values,
#min-price-display,
#max-price-display {
    display: none;
}

/* Estilização personalizada do noUiSlider */
#price-slider-ecommerce {
    margin-top: 15px; /* Ajuste para melhor posicionamento relativo ao label */
    margin-bottom: var(--spacing-md);
    height: 6px;
    background-color: var(--bg-color-medium-gray);
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

/* Conexão do slider (parte preenchida) */
#price-slider-ecommerce .noUi-connect {
    background: var(--color-filter-primary);
    border-radius: 3px;
}

/* Alças (handles) do slider */
#price-slider-ecommerce .noUi-handle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-color-white);
    border: 2px solid var(--color-filter-primary);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: grab;
    top: -8px;
}
#price-slider-ecommerce .noUi-handle:active {
    cursor: grabbing;
}
#price-slider-ecommerce .noUi-handle:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--color-primary-purple-transparent-20);
}

/* ESTILO E POSICIONAMENTO DOS TOOLTIPS (os balões com R\$ valor) */
.noUi-tooltip {
    display: inline-block;
    padding: 8px 15px;
    background-color: var(--bg-color-white);
    border: 1px solid var(--border-color-base);
    border-radius: var(--radius-sm);
    font-size: 1em;
    font-weight: var(--weight-bold);
    color: var(--text-color-dark);
    min-width: 90px;
    text-align: center;
    box-shadow: var(--specific-shadow-light);
    left: 50%;
    transform: translate(-50%, 0);
    top: -35px; /* Ajuste para posicionar abaixo do label 'Faixa de preço' */
    white-space: nowrap;
    z-index: 10;
}

/* Esconde o triângulo padrão dos tooltips */
.noUi-tooltip::before,
.noUi-tooltip::after {
    display: none;
}

/* Estilo dos botões */
.auth_form button {
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 1em;
    font-weight: var(--weight-bold);
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    width: 100%; /* Default para mobile e desktop se não for sobrescrito */
    text-align: center;
    /* Remover margin-top aqui para confiar no `gap` do auth_form */
    /* margin-top: 10px; */
    text-transform: uppercase;
    white-space: normal;
    line-height: 1.3;
}

.auth_form .btn-primary {
    background-color: var(--color-filter-accent);
    color: var(--text-color-inverted);
    border: 1px solid var(--color-filter-accent);
}
.auth_form .btn-primary:hover {
    background-color: var(--color-filter-accent-dark);
    border-color: var(--color-filter-accent-dark);
    transform: translateY(-1px);
}
.auth_form .btn-primary:active {
    transform: translateY(0);
}

.auth_form .btn-secondary {
    background-color: var(--bg-color-white);
    color: var(--color-filter-primary);
    border: 1px solid var(--color-filter-primary);
}
.auth_form .btn-secondary:hover {
    background-color: var(--bg-color-medium-gray);
    color: var(--color-filter-primary-dark);
    border-color: var(--color-filter-primary-dark);
    transform: translateY(-1px);
}
.auth_form .btn-secondary:active {
    transform: translateY(0);
}


/* RESPONSIVIDADE - AJUSTES PARA UM FILTRO MAIS DELICADO EM DESKTOP */

/* Estilos para telas grandes (Desktop - min-width: 769px) */
@media (min-width: 769px) {
    /* Ajustes para a sidebar em desktop, se necessário */
    .filters-sidebar {
        /* Ex: padding ligeiramente menor ou proporção diferente para desktop */
        padding: var(--spacing-md); /* Manter o mesmo padding ou ajustar */
    }

    /* Título principal ligeiramente menor para desktop */
    .filters-sidebar .main_category_sidebar_title {
        font-size: 1.6em; /* Reduzido de 1.8em */
        margin-bottom: var(--spacing-lg); /* Manter o espaçamento */
    }

    /* Label da faixa de preço ligeiramente menor para desktop */
    .filter-range-label {
        font-size: 0.95em; /* Reduzido de 1em */
        margin-bottom: 25px; /* Ligeiramente menos espaço para um visual mais compacto */
    }

    /* Tooltips ligeiramente menores para desktop */
    .noUi-tooltip {
        font-size: 0.9em; /* Reduzido de 1em */
        padding: 6px 12px; /* Padding menor */
        min-width: 80px; /* Largura mínima ajustada */
        top: -30px; /* Ajuste fino para posicionamento em desktop */
    }

    /* Slider com espaçamento ajustado para desktop */
    #price-slider-ecommerce {
        margin-top: 12px; /* Ajuste fino para desktop */
        margin-bottom: var(--spacing-md);
    }

    /* BOTÕES: Mais delicados para desktop (menores em largura, ainda empilhados) */
    .auth_form button {
        width: fit-content; /* Ocupa apenas a largura do conteúdo, não 100% */
        max-width: 220px; /* Limita a largura máxima do botão em desktop */
        padding: 10px 25px; /* Padding ajustado para um visual menor */
        font-size: 0.9em; /* Texto ligeiramente menor */
        /* Centraliza o botão dentro do seu espaço se ele for menor que 100% */
        margin-left: auto;
        margin-right: auto;
    }
}


/* Estilos para telas menores (Mobile - max-width: 768px) */
@media (max-width: 768px) {
    .filters-sidebar {
        padding: var(--spacing-sm);
    }
    .filters-sidebar .main_category_sidebar_title {
        font-size: 1.4em;
        margin-bottom: var(--spacing-md);
    }
    .auth_form {
        gap: var(--spacing-sm);
    }
    .filter-range-label {
        font-size: 0.95em;
        margin-bottom: 25px;
    }
    .noUi-tooltip {
        min-width: 70px;
        padding: 6px 10px;
        font-size: 0.9em;
        top: -30px;
    }
    #price-slider-ecommerce {
        margin-top: 10px;
        margin-bottom: var(--spacing-sm);
    }
    .auth_form button {
        padding: 10px 15px;
        font-size: 0.95em;
        width: 100%; /* Em mobile, voltam a ser 100% da largura */
    }
}