/* WooCommerce Fast Filters Styles */

/*
 * --primary NUNCA foi definida neste site.
 *
 * Este ficheiro lê var(--primary, #0d6efd) em 20 sítios — foco, estados
 * selecionados, o track e as pegas do slider de preço, as bordas das
 * checkboxes. Como a variável não existe em nenhuma paleta (nem na ACSS nem
 * na "Dario Global"), o que aparecia no ecrã era sempre o fallback: o azul
 * #0d6efd do Bootstrap, num site cuja marca é âmbar e roxo.
 *
 * A correção é declarar as duas variáveis, o que arruma as 20 de uma vez.
 * Presas ao elemento dos filtros de propósito, NÃO no :root: os ficheiros do
 * ACSS (automatic.css, automatic-variables.css) também leem var(--primary…),
 * e defini-la globalmente mudava coisas que ninguém pediu.
 *
 * Foco à parte: os outlines passaram a --form-border-focus (âmbar), para
 * casarem com os campos do checkout e da conta. As dimensões dos campos aqui
 * também vêm dos tokens partilhados --form-* (bricks-child/includes/css/
 * custom/form-tokens.css), com fallback para os valores antigos.
 */
.wc-fast-filters-element,
.wc-fast-filters-wrapper {
    --primary: var(--purple, #282262);
    --primary-dark: var(--ink-2, #221D48);
}
.wc-fast-filters-wrapper {
    display: flex;
    position: relative;
    gap: calc(var(--space-xs, 0.5rem) / 2);
    flex-direction: column;
    flex-wrap: nowrap;
    margin-bottom: 1em;
}

/* Dropdown wrapper (positions the clear button over the toggle button) */
.wc-fast-filters-dropdown-wrapper {
    position: relative;
}

/* Button styles */
.wc-fast-filters-dropdown-btn {
    width: 100%;
    height: var(--form-height, 2.5rem);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    background: var(--neutral-ultra-light, #f8f9fa);
    border: 1px solid var(--form-border, rgba(33, 37, 41, 0.1));
    border-radius: var(--form-radius, 4px);
    text-align: left;
    font-size: var(--form-font, 14px);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.wc-fast-filters-dropdown-btn:hover {
    background: var(--neutral-ultra-light-hover, #e9ecef);
}

.wc-fast-filters-dropdown-btn:focus-visible {
    outline: 2px solid var(--form-border-focus, #FAAF40);
    outline-offset: 2px;
}

.wc-fast-filters-dropdown-wrapper.is-active .wc-fast-filters-dropdown-btn {
    background: var(--accent-soft, #eaf2ff);
    border-color: var(--primary, #0d6efd);
    padding-right: 2.75rem;
}

.wc-fast-filters-dropdown-btn span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
    color: var(--base-ultra-dark, #212529);
}

.wc-fast-filters-dropdown-wrapper.is-active .wc-fast-filters-dropdown-btn span {
    color: var(--primary-dark, var(--primary, #0d6efd));
    font-weight: 600;
}

/* Clear-this-filter button, shown next to the toggle when a value is active */
.dropdown-clear-btn {
    position: absolute;
    top: 50%;
    right: 1.9rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--primary, #0d6efd);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    z-index: 2;
    transition: background 0.2s ease;
}

.dropdown-clear-btn:hover {
    background: var(--primary-dark, #0a58ca);
}

.dropdown-clear-btn:focus-visible {
    outline: 2px solid var(--form-border-focus, #FAAF40);
    outline-offset: 2px;
}

/* Arrow icon */
svg.dropdown-arrow {
    max-width: 24px;
    fill: var(--neutral, #6c757d);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.wc-fast-filters-dropdown-btn[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown content */
.wc-fast-filters-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--neutral-ultra-light, #f8f9fa);
    border: 1px solid var(--base-ultra-dark-trans-10, rgba(33, 37, 41, 0.1));
    border-radius: 4px;
    margin-top: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 100;
    max-height: 400px;
    overflow: hidden;
}

/* Search field */
.dropdown-search {
    padding: 10px;
    border-bottom: 1px solid var(--base-ultra-dark-trans-10, rgba(33, 37, 41, 0.1));
}

.dropdown-search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--form-border, rgba(33, 37, 41, 0.1));
    border-radius: var(--form-radius, 4px);
    font-size: var(--form-font, 14px);
}

.dropdown-search input:focus-visible {
    outline: 2px solid var(--form-border-focus, #FAAF40);
    outline-offset: 1px;
}

/* Options list */
.dropdown-options {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--text-dark, #343a40);
    transition: background 0.2s;
    border-bottom: 1px solid #f0f0f0;
}

.dropdown-option:last-child {
    border-bottom: none;
}

.dropdown-option:hover {
    background: var(--accent-soft, #f5f5f5);
    color: var(--base-ultra-dark, #212529);
}

.dropdown-option:focus-visible {
    outline: 2px solid var(--form-border-focus, #FAAF40);
    outline-offset: -2px;
}

.dropdown-option.active {
    background: var(--accent-soft, #eaf2ff);
    font-weight: bold;
    color: var(--primary-dark, var(--primary, #0d6efd));
}

.dropdown-option .count {
    color: var(--base-ultra-dark-trans-70, rgba(33, 37, 41, 0.75));
    font-size: 0.9em;
    margin-left: 8px;
    font-weight: normal;
}

/* Custom scrollbar */
.dropdown-options::-webkit-scrollbar {
    width: 8px;
}

.dropdown-options::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.dropdown-options::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.dropdown-options::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* List view styles */
.wc-fast-filters-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wc-fast-filters-list li {
    margin-bottom: 5px;
}

.wc-fast-filters-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--text-dark, #343a40);
    border-radius: 4px;
    transition: background 0.2s;
}

.wc-fast-filters-list li a:hover {
    background: var(--accent-soft, #f5f5f5);
}

.wc-fast-filters-list li a:focus-visible {
    outline: 2px solid var(--form-border-focus, #FAAF40);
    outline-offset: 2px;
}

.wc-fast-filters-list li.chosen a {
    background: var(--accent-soft, #eaf2ff);
    color: var(--primary-dark, var(--primary, #0d6efd));
    font-weight: bold;
}

.wc-fast-filters-list .count {
    color: var(--base-ultra-dark-trans-70, rgba(33, 37, 41, 0.75));
    font-size: 0.9em;
}

/* Active filters styles */
.wc-active-filters {
    margin-bottom: 1.5em;
}

.active-filters-title {
    margin-bottom: 0.5em;
    font-size: 1rem;
}

.active-filters-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.active-filters-list li {
    margin: 0;
}

.active-filters-list a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-soft, #eaf2ff);
    border: 1px solid transparent;
    padding: 6px 8px 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    color: var(--primary-dark, var(--primary, #0d6efd));
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.active-filters-list a:hover {
    background: var(--accent-bg, #dbe9ff);
}

.active-filters-list a:focus-visible {
    outline: 2px solid var(--form-border-focus, #FAAF40);
    outline-offset: 2px;
}

.remove-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--primary, #0d6efd);
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    line-height: 1;
}

.remove-all-filters {
    background: transparent !important;
    color: var(--base-ultra-dark, #212529) !important;
    border: 1px solid var(--base-ultra-dark-trans-10, rgba(33, 37, 41, 0.2)) !important;
    font-weight: 600;
}

.remove-all-filters:hover {
    background: var(--neutral-ultra-light-hover, #e9ecef) !important;
}

.remove-all-filters .remove-icon {
    background: var(--base-ultra-dark, #212529);
}

/* Styles for filters in popups */
.popup-filters .wc-fast-filters-wrapper {
    position: relative;
}

.popup-filters .wc-fast-filters-dropdown-content {
    position: absolute;
    z-index: 999999;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .popup-filters .wc-fast-filters-dropdown-content {
        max-height: 50vh;
        overflow-y: auto;
    }
    
    .active-filters-list {
        flex-direction: column;
        gap: 6px;
    }
    
    .active-filters-list a {
        width: 100%;
        justify-content: space-between;
    }
    
    .wc-fast-filters-dropdown-btn {
        height: 2.75rem;
        padding: 0 0.75rem;
    }
}

/* Caixa de pesquisa (ver render_search_filter() em class-wc-fast-filters.php).
   Mesmas medidas e tokens dos campos do preco, para os dois blocos seguidos
   lerem como um so'. */
.wc-fast-filters-search-wrapper .filter-title {
    font-size: 14px;
    margin: 0 0 0.5em;
}

.wc-fast-filters-search-row {
    position: relative;
    display: flex;
    align-items: center;
}

.wc-fast-filters-search-input {
    width: 100%;
    min-width: 0;
    min-height: var(--form-height, 36px);
    padding: 6px 38px 6px 11px;
    border: 1px solid var(--form-border, rgba(33, 37, 41, 0.2));
    border-radius: var(--form-radius, 4px);
    font-size: var(--form-font, 14px);
    color: var(--form-text, inherit);
}

.wc-fast-filters-search-input::placeholder {
    color: var(--form-placeholder, rgba(33, 37, 41, 0.5));
}

.wc-fast-filters-search-input:focus-visible {
    border-color: var(--form-border-focus, #FAAF40);
    box-shadow: 0 0 0 3px var(--form-ring-focus, rgba(250, 175, 64, 0.25));
    outline: none;
}

/* O botao E' a lupa: sem fundo, sem moldura, encostado ao fim do campo. */
.wc-fast-filters-search-submit {
    position: absolute;
    inset-inline-end: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--form-radius, 4px);
    background: none;
    color: var(--form-placeholder, rgba(33, 37, 41, 0.6));
    cursor: pointer;
}

.wc-fast-filters-search-submit:hover {
    color: var(--form-text, inherit);
}

.wc-fast-filters-search-submit:focus-visible {
    box-shadow: 0 0 0 3px var(--form-ring-focus, rgba(250, 175, 64, 0.25));
    outline: none;
}

/* Price filter (see render_price_filter() in class-wc-fast-filters.php) */
.wc-fast-filters-price-wrapper .filter-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    margin: 0 0 0.5em;
}

.wc-fast-filters-price-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--primary, #0d6efd);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
}

.wc-fast-filters-price-clear:hover {
    background: var(--primary-dark, #0a58ca);
}

.wc-fast-filters-price {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--neutral-ultra-light, #f8f9fa);
    border: 1px solid var(--base-ultra-dark-trans-10, rgba(33, 37, 41, 0.1));
    border-radius: 4px;
}

.wc-fast-filters-price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wc-fast-filters-price-input {
    width: 100%;
    min-width: 0;
    padding: 6px 12px;
    border: 1px solid var(--form-border, rgba(33, 37, 41, 0.2));
    border-radius: var(--form-radius, 4px);
    font-size: var(--form-font, 14px);
    -moz-appearance: textfield;
}

.wc-fast-filters-price-input::-webkit-outer-spin-button,
.wc-fast-filters-price-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.wc-fast-filters-price-input:focus-visible {
    outline: 2px solid var(--form-border-focus, #FAAF40);
    outline-offset: 1px;
}

/* Dual-handle range track. Positions are set inline (left/right %) by
   WCFastFilters.updatePriceSlider() in script.js, kept in sync with the
   two number inputs above. */
.wc-fast-filters-price-slider {
    position: relative;
    height: 1.25rem;
    margin: 0 0.625rem;
}

.wc-fast-filters-price-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    transform: translateY(-50%);
    background: var(--base-ultra-dark-trans-10, rgba(33, 37, 41, 0.15));
    border-radius: 2px;
}

.wc-fast-filters-price-range {
    position: absolute;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
    background: var(--primary, #0d6efd);
    border-radius: 2px;
}

.wc-fast-filters-price-handle {
    position: absolute;
    top: 50%;
    width: 1.25rem;
    height: 1.25rem;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 2px solid var(--primary, #0d6efd);
    border-radius: 50%;
    padding: 0;
    cursor: grab;
    touch-action: none;
}

.wc-fast-filters-price-handle:active {
    cursor: grabbing;
}

.wc-fast-filters-price-handle:focus-visible {
    outline: 2px solid var(--form-border-focus, #FAAF40);
    outline-offset: 2px;
}

.wc-fast-filters-price-apply {
    align-self: flex-start;
}

/* iOS: por baixo de 16px o Safari da zoom automatico ao focar o campo.
   A guarda do tema (forms-base.css) nao chega aqui: usa :where() com
   especificidade zero e vive dentro de @layer bricks, enquanto este
   ficheiro entra sem layer nenhum e ganha sempre. Por isso repete-se aqui,
   no mesmo breakpoint do tema (782px), que nao e o dos ajustes de layout
   acima (768px). Em ecra largo os 14-15px mantem-se, de proposito.

   ATENCAO: dentro da sidebar da loja isto so pega na caixa de pesquisa.
   O archive-filters.css do tema redefine o preco e a pesquisa do dropdown
   com ".sidebar .wc-fast-filters-element ..." (0,3,0), tambem sem layer e
   carregado depois deste ficheiro, por isso ganha e esses campos continuam
   a 14px. A correcao desses dois tem de ser feita la. As regras abaixo
   valem na mesma para os filtros fora da sidebar (ex.: popup-filters). */
@media (max-width: 782px) {

    .wc-fast-filters-search-input,
    .wc-fast-filters-price-input,
    .dropdown-search input {
        font-size: 16px;
    }
}