/**
 * WC Smart Filters - Frontend Styles
 * Compatible with Tailwind CSS / Flavstarter theme
 */

/* ==========================================================================
   Base Styles
   ========================================================================== */

.wcsf-filters {
    --wcsf-primary: #2563eb;
    --wcsf-primary-hover: #1d4ed8;
    --wcsf-text: #252524;
    --wcsf-text-muted: #76766F;
    --wcsf-border: #D1D1CB;
    --wcsf-border-light: #E8E8E5;
    --wcsf-bg: #ffffff;
    --wcsf-bg-hover: #f9fafb;
    --wcsf-radius: 1rem;
    --wcsf-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.wcsf-filters * {
    box-sizing: border-box;
}

/* ==========================================================================
   Filter Container
   ========================================================================== */

.wcsf-filter-container {
    position: relative;
    background: var(--wcsf-bg);
    border-radius: 16px;
}

/* Clip de loading-bar netjes binnen de afgeronde hoeken tijdens het filteren. */
.wcsf-filtering .wcsf-filter-container {
    overflow: hidden;
}

.wcsf-layout-sidebar .wcsf-filter-container {
    padding: 0;
}

.wcsf-layout-sidebar .wcsf-filter-elements {
    padding: 1px 28px 28px;
}

.wcsf-layout-horizontal .wcsf-filter-container {
    padding: 1rem;
}

.wcsf-layout-horizontal .wcsf-filter-elements {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.wcsf-layout-horizontal .wcsf-filter-element {
    flex: 1;
    min-width: 200px;
    border: none;
}

/* ==========================================================================
   Filter Element
   ========================================================================== */

.wcsf-filter-element {
    border-bottom: none;
}

.wcsf-filter-element:last-child {
    border-bottom: none;
}

.wcsf-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 0px 12px 0px;
    margin-top: 28px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.wcsf-filter-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;
    color: var(--wcsf-text);
    flex: 1;
}

.wcsf-filter-toggle {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--wcsf-text-muted);
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wcsf-filter-header.collapsed .wcsf-filter-toggle {
    transform: none;
}

.wcsf-filter-content {

    border-top: 1px solid var(--wcsf-border);
    /* margin-top: 12px; */
    padding-top: 16px;
}

.wcsf-no-options {
    color: var(--wcsf-text-muted);
    font-size: 0.875rem;
    font-style: italic;
    margin: 0;
}

/* ==========================================================================
   Checkbox & Radio Lists
   ========================================================================== */

.wcsf-checkbox-list,
.wcsf-radio-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wcsf-checkbox-item,
.wcsf-radio-item {
    margin-bottom: 0.5rem;
}

.wcsf-checkbox-item:last-child,
.wcsf-radio-item:last-child {
    margin-bottom: 0;
}

.wcsf-checkbox-label,
.wcsf-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--wcsf-text-muted);
    transition: color 0.15s ease;
}

.wcsf-checkbox-label:hover,
.wcsf-radio-label:hover {
    color: var(--wcsf-text);
}

.wcsf-checkbox-input,
.wcsf-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wcsf-checkbox-custom,
.wcsf-radio-custom {
    width: 23px;
    height: 23px;
    border: 1px solid var(--wcsf-border);
    background: var(--wcsf-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.wcsf-checkbox-custom {
    border-radius: 0.25rem;
}

.wcsf-radio-custom {
    border-radius: 50%;
}

.wcsf-checkbox-input:checked + .wcsf-checkbox-custom,
.wcsf-radio-input:checked + .wcsf-radio-custom {
    border: 2px solid var(--color-dark, #252524);
    border-radius: 4px;
    background-color: var(--wcsf-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='13' viewBox='0 0 14 13' fill='none'%3E%3Cpath d='M13.0602 0.186614C13.4898 0.49902 13.5859 1.0998 13.2735 1.52936L5.58351 12.1031C5.41829 12.3314 5.16296 12.4726 4.8806 12.4966C4.59823 12.5206 4.32487 12.4155 4.12661 12.2173L0.281616 8.37226C-0.093872 7.99677 -0.093872 7.38697 0.281616 7.01149C0.657104 6.636 1.2669 6.636 1.64239 7.01149L4.69135 10.0605L11.7205 0.396887C12.0329 -0.0326711 12.6337 -0.128796 13.0632 0.18361L13.0602 0.186614Z' fill='%23252524'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 12px;
}

.wcsf-checkbox-input:checked ~ .wcsf-checkbox-text,
.wcsf-radio-input:checked ~ .wcsf-radio-text {
    color: var(--wcsf-text);
}

.wcsf-checkbox-input:checked + .wcsf-checkbox-custom::after {
    content: none;
}

.wcsf-radio-input:checked + .wcsf-radio-custom::after {
    content: none;
}

.wcsf-checkbox-input:focus + .wcsf-checkbox-custom,
.wcsf-radio-input:focus + .wcsf-radio-custom {
    box-shadow: 0 0 0 3px rgba(37, 37, 36, 0.15);
}

.wcsf-checkbox-text,
.wcsf-radio-text {
    flex: 1;
}

.wcsf-checkbox-count,
.wcsf-radio-count {
    color: var(--wcsf-text-muted);
    font-size: 0.75rem;
}

.wcsf-checkbox-item.wcsf-disabled,
.wcsf-radio-item.wcsf-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Dynamisch verbergen van lege opties (hide_empty) na AJAX update */
.wcsf-hidden-empty {
    display: none !important;
}

/* Hele filtergroep verbergen als geen enkele optie meer zichtbaar is (hide_empty + AJAX) */
.wcsf-filter-group-hidden-empty {
    display: none !important;
}

/* Verborgen extra opties voor "Meer tonen" functionaliteit */
.wcsf-more-item {
    display: none;
}

.wcsf-show-more {
    border: none;
    background: none;
    color: var(--wcsf-text);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.wcsf-show-more:hover {
    color: var(--color-primary);
}

.wcsf-show-more-icon {
    transition: transform 0.2s ease;
}

.wcsf-show-more[data-expanded="true"] .wcsf-show-more-icon {
    transform: rotate(180deg);
}

/* Hierarchical (indented) */
.wcsf-hierarchical .wcsf-checkbox-item[data-depth="1"] {
    padding-left: 1.5rem;
}

.wcsf-hierarchical .wcsf-checkbox-item[data-depth="2"] {
    padding-left: 3rem;
}

/* ==========================================================================
   Dropdown
   ========================================================================== */

.wcsf-dropdown-select {
    width: 100%;
    padding: 0.625rem 2rem 0.625rem 0.75rem;
    font-size: 15px;
    border: 1px solid var(--wcsf-border);
    border-radius: 8px;
    background: var(--wcsf-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") right 0.5rem center no-repeat;
    background-size: 1.25rem;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wcsf-dropdown-select:hover {
    border-color: var(--wcsf-primary);
}

.wcsf-dropdown-select:focus {
    outline: none;
    border-color: var(--wcsf-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* ==========================================================================
   Range Slider
   ========================================================================== */

.wcsf-range-slider-wrap {
    position: relative;
    height: 2rem;
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

.wcsf-filter-title-unit {
    color: inherit;
    font-weight: inherit;
}

.wcsf-range-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--wcsf-primary);
    border-radius: 10px;
    transform: translateY(-50%);
}

.wcsf-range-progress {
    position: absolute;
    height: 100%;
    background: var(--wcsf-primary);
    border-radius: 10px;
}

.wcsf-range-inputs {
    position: relative;
    height: 100%;
}

.wcsf-range-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.wcsf-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    background: var(--wcsf-bg);
    border: 2px solid var(--wcsf-primary);
    border-radius: 100px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: none;
    transition: transform 0.15s ease;
}

.wcsf-range-input::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.wcsf-range-input::-moz-range-thumb {
    width: 26px;
    height: 26px;
    background: var(--wcsf-bg);
    border: 2px solid var(--wcsf-primary);
    border-radius: 100px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: none;
}

.wcsf-range-values {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.wcsf-range-value-min,
.wcsf-range-value-max {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.wcsf-range-prefix,
.wcsf-range-suffix {
    color: var(--wcsf-text-muted);
    font-size: 15px;
}

.wcsf-range-number {
    width: 80px;
    height: 47px;
    padding: 0.375rem 0.5rem;
    font-size: 15px;
    border: 1px solid var(--wcsf-border);
    border-radius: 8px;
    text-align: center;
    color: var(--wcsf-text-muted);
}

.wcsf-range-number:focus {
    outline: none;
    border-color: var(--wcsf-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.wcsf-range-separator {
    color: var(--wcsf-text-muted);
}

/* ==========================================================================
   Color Swatches
   ========================================================================== */

.wcsf-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wcsf-color-swatch {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.wcsf-color-style-circle_label .wcsf-color-swatch {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    width: 100%;
    justify-content: flex-start;
}

.wcsf-color-style-circle_label.wcsf-color-swatches {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.wcsf-color-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wcsf-color-swatch-inner {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--wcsf-border-light, var(--wcsf-border));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-shadow: none;
}

.wcsf-color-style-circle .wcsf-color-swatch-inner {
    border-radius: 50%;
   
}

.wcsf-color-style-square .wcsf-color-swatch-inner {
    border-radius: 0;
}

.wcsf-color-style-rounded .wcsf-color-swatch-inner {
    border-radius: 0.375rem;
}

.wcsf-color-style-circle_label .wcsf-color-swatch-inner {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-left: 4px;
    border: none;
    box-shadow: none;
}

.wcsf-color-swatch:hover .wcsf-color-swatch-inner {
    transform: scale(1.1);
}

.wcsf-color-swatch.selected .wcsf-color-swatch-inner {
    border-color: var(--color-dark, #252524);
    box-shadow: 0 0 0 2px var(--color-dark, #252524);
}

/* In de circle_label variant geeft de checkbox al de selectie-indicatie,
   dus geen extra ring rond het kleurbolletje. */
.wcsf-color-style-circle_label .wcsf-color-swatch.selected .wcsf-color-swatch-inner {
    border: none;
    box-shadow: none;
}

.wcsf-color-check {
    color: white;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}

.wcsf-color-swatch.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.wcsf-color-count {
    font-size: 0.625rem;
    color: var(--wcsf-text-muted);
}

.wcsf-color-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--wcsf-text-muted);
    transition: color 0.15s ease;
}

.wcsf-color-swatch:hover .wcsf-color-label {
    color: var(--wcsf-text);
}

/* Align checkbox style for circle_label with normal checkbox look */
.wcsf-color-style-circle_label .wcsf-color-swatch {
    gap: 0.5rem;
}

.wcsf-checkbox-custom-wrapper {
    display: inline-flex;
    align-items: center;
}

/* circle_label: zelfde rij-layout als .wcsf-checkbox-label — label vult ruimte, count rechts */
.wcsf-color-style-circle_label .wcsf-checkbox-custom-wrapper,
.wcsf-color-style-circle_label .wcsf-color-swatch-inner {
    flex-shrink: 0;
}

.wcsf-color-style-circle_label .wcsf-color-label {
    flex: 1;
    min-width: 0;
}

.wcsf-color-style-circle_label .wcsf-color-count {
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ==========================================================================
   Toggle Switch
   ========================================================================== */

.wcsf-filter-toggle-element {
    padding: 28px;
}

.wcsf-toggle-wrap {
    display: flex;
    align-items: center;
}

.wcsf-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    width: 100%;
}

.wcsf-toggle-text {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;
    color: var(--wcsf-text);
}

.wcsf-toggle-count {
    color: var(--wcsf-text-muted);
    font-size: 0.75rem;
}

.wcsf-toggle-switch {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.wcsf-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wcsf-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--wcsf-border);
    border-radius: 1rem;
    transition: background-color 0.2s ease;
}

.wcsf-toggle-slider::before {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.wcsf-toggle-input:checked + .wcsf-toggle-slider {
    background: var(--wcsf-primary);
}

.wcsf-toggle-input:checked + .wcsf-toggle-slider::before {
    transform: translateX(1.25rem);
}

.wcsf-toggle-input:focus + .wcsf-toggle-slider {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* ==========================================================================
   Search
   ========================================================================== */

.wcsf-search-wrap {
    position: relative;
}

.wcsf-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.wcsf-search-icon {
    position: absolute;
    left: 0.75rem;
    color: var(--wcsf-text-muted);
    pointer-events: none;
}

.wcsf-search-input {
    width: 100%;
    padding: 0.625rem 2.25rem 0.625rem 2.5rem;
    font-size: 15px;
    border: 1px solid var(--wcsf-border);
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wcsf-search-input:focus {
    outline: none;
    border-color: var(--wcsf-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.wcsf-search-input::placeholder {
    color: var(--wcsf-text-muted);
}

.wcsf-search-clear {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.wcsf-search-clear:hover {
    color: var(--color-primary);
}

/* ==========================================================================
   Active Filters
   ========================================================================== */

.wcsf-active-filters {
    padding: 28px 28px 0 28px;
    background: transparent;
    border-bottom: none;
}

.wcsf-active-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.wcsf-active-filters-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.wcsf-active-filters-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wcsf-active-filters-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;
    color: var(--wcsf-text);
}

.wcsf-clear-all {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    color: var(--color-dark);
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.wcsf-clear-all:hover {
    color: var(--color-primary);
}

.wcsf-active-filters-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.25rem;
}

.wcsf-active-filter-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    line-height: 1.8;
    color: var(--wcsf-text-muted);
}

.wcsf-chip-source {
    font-weight: 400;
}

.wcsf-chip-value {
    font-weight: 600;
}

.wcsf-remove-filter {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--wcsf-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.wcsf-remove-filter:hover {
    color: #ef4444;
}

/* ==========================================================================
   Submit Button
   ========================================================================== */

.wcsf-filter-submit {
    padding: 28px;
    border-top: 1px solid var(--wcsf-border);
}

.wcsf-submit-btn {
    width: 100%;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    background: var(--wcsf-primary);
    border: none;
    border-radius: var(--wcsf-radius);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.wcsf-submit-btn:hover {
    background: var(--wcsf-primary-hover);
}

/* ==========================================================================
   Product Count
   ========================================================================== */

.wcsf-product-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0.75rem 28px;
    font-size: 13px;
    color: var(--wcsf-text-muted);
    text-align: left;
    border-top: 1px solid var(--wcsf-border);
}

.wcsf-product-count__total {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.wcsf-count-number {
    font-weight: 600;
    color: var(--wcsf-text);
}

.wcsf-product-count__parent {
    font-size: 13px;
    color: var(--wcsf-text-muted);
    text-decoration: underline;
    text-decoration-color: currentColor;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.wcsf-product-count__parent:hover,
.wcsf-product-count__parent:focus-visible {
    color: var(--color-primary);
    text-decoration-color: var(--color-primary);
}

/* ==========================================================================
   Mobile Modal
   ========================================================================== */

.wcsf-mobile-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-white);
    background: var(--color-primary);
    border: 1px solid var(--wcsf-border);
    border-radius: 100px;
    cursor: pointer;
    width: 100%;
    justify-content: center;
}

.wcsf-mobile-toggle:hover {
    background: var(--wcsf-bg-hover);
    color: var(--color-primary);
}

.wcsf-mobile-fab {
    display: none;
}

.wcsf-active-count {
    background: var(--color-white);
    color: var(--color-primary);
    font-size: 0.625rem;
    font-weight: 700;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.wcsf-modal-header,
.wcsf-modal-footer {
    display: none;
}

.wcsf-modal-overlay {
    display: none;
}

/* Mobile styles */
@media (max-width: 768px) {
    .wcsf-mobile-modal .wcsf-mobile-toggle {
        display: flex;
    }

    .wcsf-mobile-modal .wcsf-mobile-fab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 1rem;
        bottom: 1rem;
        width: 3.25rem;
        height: 3.25rem;
        border: 0;
        border-radius: 999px;
        background: var(--wcsf-primary);
        color: #ffffff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        z-index: 9997;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
        pointer-events: none;
    }

    .wcsf-mobile-modal.wcsf-show-mobile-fab .wcsf-mobile-fab {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .wcsf-mobile-modal.wcsf-modal-open .wcsf-mobile-fab {
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        pointer-events: none;
    }

    .wcsf-mobile-modal .wcsf-filter-container {
        position: fixed;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        border-radius: 16px;
        overflow: hidden;
        z-index: 9999;
        background: var(--wcsf-bg);
        display: flex;
        flex-direction: column;
        transform: translateX(calc(-100% - 20px));
        transition: transform 0.3s ease;
 
    }

    .wcsf-mobile-modal.wcsf-modal-open .wcsf-filter-container {
        transform: translateX(0);
    }

    .wcsf-mobile-modal .wcsf-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        border-bottom: 1px solid var(--wcsf-border);
        flex-shrink: 0;
    }

    .wcsf-modal-title {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--wcsf-text);
    }

    .wcsf-modal-close {
        background: none;
        border: none;
        padding: 0.5rem;
        cursor: pointer;
        color: var(--wcsf-text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wcsf-mobile-modal .wcsf-filter-form {
        flex: 1;
        overflow-y: auto;
    }

    .wcsf-mobile-modal .wcsf-modal-footer {
        display: block;
        padding: 1rem;
        border-top: 1px solid var(--wcsf-border);
        background: var(--wcsf-bg);
        flex-shrink: 0;
    }

    .wcsf-modal-apply {
        width: 100%;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
        font-weight: 600;
        color: white;
        background: var(--wcsf-primary);
        border: none;
        border-radius: var(--wcsf-radius);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        text-align: center;
    }

    .wcsf-modal-count {
        margin-left: 0.25rem;
    }

    .wcsf-mobile-modal .wcsf-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
    }

    .wcsf-mobile-modal.wcsf-modal-open .wcsf-modal-overlay {
        display: block;
    }

    body.wcsf-modal-active {
        overflow: hidden;
    }

    /* Hide submit button in mobile modal (use footer button instead) */
    .wcsf-mobile-modal .wcsf-filter-submit {
        display: none;
    }

    /* Hide product count in mobile (shown in footer) */
    .wcsf-mobile-modal .wcsf-product-count {
        display: none;
    }

    /* Meer lucht onder de actieve filters zodat de eerstvolgende inhoud er
       niet strak tegenaan plakt bij scroll. */
    .wcsf-mobile-modal .wcsf-active-filters {
        padding: 16px 16px 20px;
        border-bottom: 1px solid var(--wcsf-border);
    }

    /* Minder padding links/rechts binnen het mobiele filterpaneel */
    .wcsf-mobile-modal .wcsf-layout-sidebar .wcsf-filter-elements {
        padding: 1px 16px 16px;
    }

    /* In de mobiele modal zit de loading bar in de flex-flow direct ná de
       modal-header. Zo is hij altijd duidelijk zichtbaar, in plaats van
       verstopt achter de afgeronde rand bovenaan. */
    .wcsf-mobile-modal .wcsf-filter-container > .wcsf-loading-bar {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        height: 4px;
        flex-shrink: 0;
        border-radius: 0;
    }
}

/* ==========================================================================
   Loading States
   ========================================================================== */

/* Shimmer keyframe */
@keyframes wcsf-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

/* Progress-bar keyframe voor het filter panel.
   Een indeterminate progress indicator dat steeds heen en weer beweegt. */
@keyframes wcsf-progress {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}

/* ── Filter panel loading bar ─────────────────────────────────── */

/* De balk zelf — fungeert als track */
.wcsf-loading-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--wcsf-border-light, #E8E8E5);
    overflow: hidden;
    z-index: 10000;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Het bewegende stukje — een smalle balk die continu heen en weer beweegt. */
.wcsf-loading-bar-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 33%;
    height: 100%;
    background: var(--wcsf-primary, #2563eb);
    animation: wcsf-progress 1.2s linear infinite;
}

/* Fade-out bij afronding */
.wcsf-loading-bar--done {
    opacity: 0;
}

/* Filter panel blijft volledig zichtbaar tijdens AJAX; de loading-bar bovenaan
   toont de laadstatus. Pointer-events blokkeren we wel kort, om dubbele
   interacties tijdens een fetch te voorkomen. */
.wcsf-filters.wcsf-filtering {
    opacity: 1;
    pointer-events: none;
}

/* ── Spinner-overlay in de mobiele filtermodal tijdens AJAX ──
   Op desktop toont de skeleton-productlijst al dat er iets gebeurt; in de
   mobiele modal is die productlijst echter niet zichtbaar, dus daar
   projecteren we een duidelijke spinner in het paneel zelf. */
@keyframes wcsf-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .wcsf-mobile-modal .wcsf-filter-container::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        margin: -22px 0 0 -22px;
        border-radius: 50%;
        border: 3px solid rgba(37, 37, 36, 0.15);
        border-top-color: var(--wcsf-primary, #2563eb);
        opacity: 0;
        visibility: hidden;
        transform: rotate(0deg);
        transition: opacity 0.2s ease, visibility 0.2s ease;
        pointer-events: none;
        z-index: 10001;
    }

    .wcsf-filters.wcsf-filtering.wcsf-mobile-modal .wcsf-filter-container::after {
        opacity: 1;
        visibility: visible;
        animation: wcsf-spin 0.8s linear infinite;
    }
}

.wcsf-filters {
    position: relative;
    transition: opacity 0.2s ease;
}

/* ── Skeleton product cards ───────────────────────────────────── */
.wcsf-skeleton-products {
    list-style: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5% !important;
}

.wcsf-skeleton-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: calc(25% - 1.5%) !important;
    box-sizing: border-box;
}

.wcsf-skeleton {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 600px 100%;
    animation: wcsf-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
}

.wcsf-skeleton-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
}

.wcsf-skeleton-title {
    height: 1rem;
    width: 70%;
}

.wcsf-skeleton-price {
    height: 1rem;
    width: 40%;
}

/* Stagger shimmer timing per card so it feels natural */
.wcsf-skeleton-card:nth-child(2) .wcsf-skeleton { animation-delay: 0.1s; }
.wcsf-skeleton-card:nth-child(3) .wcsf-skeleton { animation-delay: 0.2s; }
.wcsf-skeleton-card:nth-child(4) .wcsf-skeleton { animation-delay: 0.3s; }
.wcsf-skeleton-card:nth-child(5) .wcsf-skeleton { animation-delay: 0.4s; }
.wcsf-skeleton-card:nth-child(6) .wcsf-skeleton { animation-delay: 0.5s; }

/* Legacy — kept for safety */
.wcsf-loading-overlay { display: none; }
.wcsf-spinner { display: none; }

/* ==========================================================================
   Tailwind / Flavstarter Integration
   ========================================================================== */

/* Use theme colors if available via CSS custom properties */
.wcsf-filters {
    --wcsf-primary: var(--color-primary, var(--color-brand-primary, #E1251B));
    --wcsf-primary-hover: var(--color-brand-primary-dark, var(--color-primary, #E1251B));
}

/* Button styles matching theme */
.wcsf-submit-btn,
.wcsf-modal-apply {
    font-family: inherit;
}

/* Match form input styles */
.wcsf-dropdown-select,
.wcsf-search-input,
.wcsf-range-number {
    font-family: inherit;
}

/* ==========================================================================
   Icon Chevron
   ========================================================================== */

.wcsf-icon-chevron {
    transition: transform 0.2s ease;
}

.wcsf-filter-header.collapsed .wcsf-icon-chevron {
    transform: rotate(180deg);
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .wcsf-filters {
        display: none;
    }
}