/* PurePlugins Woo Filter - frontend.
 *
 * UX-ronde 2026-08-04: facet-blokken met in/uitklap-koppen, pills,
 * kleur-swatches, schuifje, prijs-schuifbalk, prijsbanden, "Toon meer" en het
 * zoekveldje. Kleuren leunen op currentColor plus rgba zodat het blok in
 * lichte EN donkere themes leesbaar blijft; accenten zijn per widget te
 * stylen in Elementor. */

.pwf-filters {
    display: block;
    max-width: 100%;
}

/* --- Facet-blok met kop --- */

.pwf-facet {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 12px;
    max-width: 100%;
}

/* De kop is een button (in/uitklappen); themes drukken daar hun knop-styling
 * op (achtergrond, hover-kleur, uppercase). Harde reset met !important zodat
 * de kop standaard ECHT kaal is (zelfde les als de verzendmeter-balk en de
 * wensenlijst-knop, bevinding Marco op CK).
 *
 * De instelbare eigenschappen lopen via CSS-variabelen (--pwf-kop-*): de
 * Stijl-pagina en de Elementor-widget zetten alleen de variabele. Nodig omdat
 * Elementor bij GLOBALE kleuren de regel zonder !important schrijft en dan
 * van deze reset zou verliezen (bevinding Marco op CK); een variabele-waarde
 * heeft dat gevecht niet. */
.pwf-facet__kop,
.pwf-facet__kop:hover,
.pwf-facet__kop:focus,
.pwf-facet__kop:active {
    /* Ook de layout-props hard: themes zetten display/text-align op buttons
     * en dan schuift de titel naar het midden met de pijl ernaast
     * (bevinding Marco op CK na de eerste reset-ronde). */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: var(--pwf-kop-padding, 0) !important;
    background: none !important;
    background-color: var(--pwf-kop-bg, transparent) !important;
    border: 0 !important;
    border-radius: var(--pwf-kop-radius, 0) !important;
    box-shadow: none !important;
    color: var(--pwf-kop-kleur, inherit) !important;
    font: inherit;
    font-weight: 600 !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: inherit !important;
    text-decoration: none !important;
    min-height: 0 !important;
    line-height: inherit !important;
    cursor: default;
}

.pwf-facet__kop:hover,
.pwf-facet__kop:focus-visible {
    color: var(--pwf-kop-kleur-hover, var(--pwf-kop-kleur, inherit)) !important;
    background-color: var(--pwf-kop-bg-hover, var(--pwf-kop-bg, transparent)) !important;
}

.pwf-facet__title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.pwf-facet__kop--js {
    cursor: pointer;
}

.pwf-facet__kop:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
}

.pwf-facet__pijl {
    display: none;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    flex: 0 0 auto;
}

.pwf-facet__kop--js .pwf-facet__pijl {
    display: inline-block;
}

.pwf-facet--dicht .pwf-facet__pijl {
    transform: rotate(-45deg);
}

.pwf-facet__body {
    margin-top: 10px;
}

.pwf-facet--dicht .pwf-facet__body {
    display: none;
}

/* --- Opties: aanvink-lijst --- */

.pwf-options {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}

.pwf-options li {
    margin: 0 0 6px;
}

.pwf-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    max-width: 100%;
}

.pwf-options label:hover .pwf-option__label,
.pwf-options input:focus-visible ~ .pwf-option__label {
    text-decoration: underline;
}

.pwf-option__label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pwf-option__count {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 0.78em;
    line-height: 1.6;
    padding: 0 7px;
    border-radius: 99px;
    background: rgba(128, 128, 128, 0.15);
    opacity: 0.9;
}

/* Ingeklapte lange lijsten plus zoekveld-filtering. */
.pwf-options--ingeklapt .pwf-option--extra,
.pwf-option--zoek-mis {
    display: none;
}

.pwf-options--zoekt {
    max-height: 280px;
}

/* Ook een button, dus dezelfde harde reset als de facet-kop: zonder
 * !important drukt het theme er zijn knop-styling op (roze CK-knop op
 * "Toon meer", bevinding Marco). Hij hoort een tekst-linkje te zijn. */
.pwf-toon-meer,
.pwf-toon-meer:hover,
.pwf-toon-meer:focus,
.pwf-toon-meer:active {
    display: inline-block !important;
    width: auto !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* Instelbaar via de variabele (Stijl-pagina plus widget, ook met
     * Elementors globale kleuren). */
    color: var(--pwf-meer-kleur, inherit) !important;
    font: inherit;
    font-size: 0.88em !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: inherit !important;
    text-decoration: underline !important;
    min-height: 0 !important;
    line-height: inherit !important;
    cursor: pointer;
    opacity: 0.85;
}

.pwf-toon-meer:hover,
.pwf-toon-meer:focus-visible {
    opacity: 1;
}

.pwf-zoek {
    width: 100%;
    max-width: 100%;
    margin-bottom: 8px;
    padding: 5px 10px;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: 0.9em;
}

/* --- Pills en kleur-swatches --- */

.pwf-options--pills,
.pwf-options--kleur {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: none;
    overflow: visible;
}

.pwf-options--pills li,
.pwf-options--kleur li {
    margin: 0;
}

.pwf-option--pill label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid rgba(128, 128, 128, 0.4);
    border-radius: 99px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pwf-option--pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pwf-option--pill label:hover {
    border-color: currentColor;
}

.pwf-option--pill label:hover .pwf-option__label {
    text-decoration: none;
}

.pwf-option--pill input:checked ~ .pwf-option__label {
    font-weight: 600;
    text-decoration: none;
}

li.pwf-option--pill:has(input:checked) label {
    border-color: currentColor;
    background: rgba(128, 128, 128, 0.12);
    box-shadow: inset 0 0 0 1px currentColor;
}

li.pwf-option--pill:has(input:focus-visible) label {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Kleur-swatch: rondje plus naam. */
.pwf-option--kleur label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 4px;
    border: 1px solid rgba(128, 128, 128, 0.4);
    border-radius: 99px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pwf-option--kleur input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pwf-option--kleur label:hover {
    border-color: currentColor;
}

.pwf-option--kleur label:hover .pwf-option__label {
    text-decoration: none;
}

li.pwf-option--kleur:has(input:checked) label {
    border-color: currentColor;
    background: rgba(128, 128, 128, 0.12);
    box-shadow: inset 0 0 0 1px currentColor;
}

li.pwf-option--kleur:has(input:focus-visible) label {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.pwf-kleur-dot {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(128, 128, 128, 0.45);
    flex: 0 0 auto;
}

/* --- Dropdown --- */

.pwf-dropdown {
    width: 100%;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 6px;
    background: transparent;
    color: inherit;
}

/* --- Ja/nee-schuifje --- */

.pwf-option--toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pwf-toggle {
    display: inline-block;
    position: relative;
    width: 34px;
    height: 19px;
    border-radius: 99px;
    background: rgba(128, 128, 128, 0.4);
    transition: background-color 0.15s ease;
    flex: 0 0 auto;
}

.pwf-toggle__knop {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.pwf-option--toggle input:checked ~ .pwf-toggle {
    background: currentColor;
}

.pwf-option--toggle input:checked ~ .pwf-toggle .pwf-toggle__knop {
    left: 17px;
}

.pwf-option--toggle input:focus-visible ~ .pwf-toggle {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* --- Prijs: velden, banden en schuifbalk --- */

.pwf-price {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.pwf-price input {
    width: 90px;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 6px;
    background: transparent;
    color: inherit;
}

.pwf-slider {
    position: relative;
    padding: 8px 0 2px;
}

.pwf-slider__balk {
    position: relative;
    height: 4px;
    border-radius: 99px;
    background: rgba(128, 128, 128, 0.3);
}

.pwf-slider__bereik {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 99px;
    background: currentColor;
}

.pwf-slider input[type="range"] {
    position: absolute;
    top: 4px;
    left: 0;
    width: 100%;
    height: 12px;
    margin: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}

.pwf-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: #fff;
    cursor: pointer;
    pointer-events: auto;
}

.pwf-slider input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: #fff;
    cursor: pointer;
    pointer-events: auto;
}

.pwf-slider input[type="range"]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.pwf-slider__labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 0.85em;
    opacity: 0.85;
}

/* --- Acties --- */

.pwf-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.pwf-reset {
    font-size: 0.9em;
}

.pwf-admin-notice {
    border: 1px dashed #c00;
    color: #c00;
    padding: 8px 10px;
    font-size: 0.9em;
}

/* Laad-status: grid iets dimmen zodat de bezoeker feedback ziet. */
body.pwf-loading ul.products {
    opacity: 0.4;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

/* Mobiel: compacter, nooit breder dan het scherm. */
@media (max-width: 782px) {
    .pwf-facet {
        padding: 10px 12px;
    }

    .pwf-options {
        max-height: 220px;
    }
}