/**
 * Filter Everything Pro – Theme tweaks CSS
 */

.wpc-filter-header,
.wpc-filters-section {
    clear: both;
}

.wpc-edit-filter-set{
   display: none !important;
}

.wpc-filters-section {
    margin-bottom: 8px !important;
}

/* Nur im Farb- und Größen-Filter-Widget die eigentlichen Checkbox/Radio-Inputs verstecken */
.wpc-filters-main-wrap .wpc-filter-pa_farbe input[type="checkbox"],
.wpc-filters-main-wrap .wpc-filter-pa_farbe input[type="radio"],
.wpc-filters-main-wrap .wpc-filter-pa_groesse input[type="checkbox"],
.wpc-filters-main-wrap .wpc-filter-pa_groesse input[type="radio"] {
    display: none !important;
}

/* Enfold überschreibt Breite – hier zurücksetzen */
#top .wpc-filters-main-wrap .wpc-counter-length-1 .wpc-term-count {
    width: auto !important;
}

/* =====================================
   Grund-Layout für alle Filter-Items
   ===================================== */

/* Grund-Layout für label */
.wpc-term-item label {
    border: none !important;
    margin: 0 !important;
    display: inline-block;
}

/* Basis-Style für alle Label-Wrapper (Größen + Farben)
   → Standardbreite ohne Zähler */
.wpc-filter-label-wrapper {
    font-family: 'Oswald', sans-serif;
    font-size: .9rem !important;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 1.9rem;
    border: 1px solid #2b2b2b !important;
    border-radius: .3rem !important;
    background-image: linear-gradient(61deg, #f6f6f6 20%, #f3f3f3, #dfdfdf 80%);
    margin-right: 3px;
}

/* Wenn ein Zähler vorhanden ist → breitere Chips */
.wpc-term-item label:has(.wpc-term-count) .wpc-filter-label-wrapper {
    width: 3.5rem;
    margin-right: 3px;
}

/* Aktiver Zustand – nur, wenn wirklich selected */
.wpc-filters-main-wrap .wpc-filters-labels
li.wpc-term-selected label span.wpc-filter-label-wrapper {
    background-image: none !important;
    background-color: var(--enfold-main-color-primary) !important;
    border-color: var(--enfold-main-color-primary) !important;
    color: #fff !important;
}

/* Hover-Effekt NUR auf Geräten mit echter Maus (Desktop) */
@media (hover: hover) and (pointer: fine) {
    .wpc-filters-main-wrap .wpc-filters-labels
    li.wpc-term-item label span.wpc-filter-label-wrapper:hover {
        background-image: none !important;
        background-color: var(--enfold-main-color-primary) !important;
        border-color: var(--enfold-main-color-primary) !important;
        color: #fff !important;
    }
}

/* Links im Label folgen der Textfarbe */
.wpc-filters-main-wrap .wpc-filters-labels
li.wpc-term-item label span.wpc-filter-label-wrapper .wpc-filter-link {
    margin-right: 0;
    color: inherit;
}

/* =====================================
   Zähler – Grundlayout (Größen + Farben)
   ===================================== */

.wpc-filters-main-wrap .wpc-term-count {
    font-family: 'Open Sans Condensed', Helvetica, Arial, sans-serif;
    font-size: .8rem !important;
    margin-left: .3rem;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

/* =====================================
   Farb-Filter (pa_farbe)
   ===================================== */

/* Name & Overlay bei Farbfeldern ausblenden */
.wpc-filters-main-wrap .wpc-filter-pa_farbe .wpc-term-name,
.wpc-filters-main-wrap .wpc-filter-pa_farbe .image-overlay {
    display: none;
}

/* Bei Farben: keine Verläufe, Wrapper als Container nutzen */
.wpc-filters-main-wrap .wpc-filter-pa_farbe .wpc-filter-label-wrapper {
    background-image: none !important;
    background-color: transparent !important;
    position: relative;
    overflow: hidden;
}

/* Link füllt die komplette Fläche */
.wpc-filters-main-wrap .wpc-filter-pa_farbe
.wpc-filter-label-wrapper .wpc-filter-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Swatch über die gesamte Fläche */
.wpc-filters-main-wrap .wpc-filter-pa_farbe .wpc-term-swatch-wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    box-sizing: border-box;
    overflow: hidden;
}

/* Bild füllt Swatch komplett aus – kein Rand */
.wpc-filters-main-wrap .wpc-filter-pa_farbe .wpc-term-swatch-wrapper img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block !important;
    border-radius: .3rem !important;
}

/* Plugin-Haken auf Farbfeldern komplett abschalten */
.wpc-filters-main-wrap .wpc-filter-pa_farbe
.wpc-term-swatch-wrapper::before,
.wpc-filters-main-wrap .wpc-filter-pa_farbe
.wpc-term-swatch-wrapper::after {
    content: none !important;
}

/* Wrapper beim selektierten Farbfeld als Overlay-Container */
.wpc-filters-main-wrap .wpc-filter-pa_farbe
li.wpc-term-selected .wpc-filter-label-wrapper {
    position: relative;
}

/* =====================================
   COUNTER IM FARBFELD + KONTRAST
   ===================================== */

/* Basis-Einstellung im Farbfeld – absolut mittig */
.wpc-filters-main-wrap .wpc-filter-pa_farbe .wpc-term-count {
    margin: 0;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/* Heller Counter (auf dunklem Swatch) */
.wpc-filters-main-wrap .wpc-filter-pa_farbe .wpc-term-count.oc-count-light,
.wpc-filters-main-wrap .wpc-filter-pa_farbe .wpc-term-count.oc-count-light span {
    color: #ffffff !important;
}

/* Dunkler Counter (auf hellem Swatch) */
.wpc-filters-main-wrap .wpc-filter-pa_farbe .wpc-term-count.oc-count-dark,
.wpc-filters-main-wrap .wpc-filter-pa_farbe .wpc-term-count.oc-count-dark span {
    color: #000000 !important;
}

/* Wenn Farbfeld ausgewählt ist */
.wpc-filters-main-wrap .wpc-filter-pa_farbe
li.wpc-term-selected .wpc-term-count {
    justify-content: center;
    gap: .25rem;
}

/* Checkmark NUR anzeigen, wenn das selektierte Farbfeld
   keinen Counter enthält (Zähler-Funktion im Plugin aus). */
.wpc-filters-main-wrap .wpc-filter-pa_farbe
li.wpc-term-selected:not(:has(.wpc-term-count)) .wpc-filter-label-wrapper::after {
    content: "" !important;
    position: absolute;
    left: 56%;
    top: 50%;
    transform: translate(-75%, -50%) rotate(-45deg);
    width: 11px;
    height: 6px;
    box-sizing: border-box;
    border-left: 2px solid var(--enfold-main-color-primary);
    border-bottom: 2px solid var(--enfold-main-color-primary);
    pointer-events: none;
}

/* =====================================
   Leere Swatches (term-count-0)
   ===================================== */

.wpc-term-count-0 .wpc-filter-label-wrapper {
    position: relative;
    overflow: hidden;
    opacity: 1 !important;
    background: none !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #afafaf !important;
}

/* Hover für leere Swatches neutralisieren */
.wpc-filters-main-wrap .wpc-filters-labels
li.wpc-term-count-0 label span.wpc-filter-label-wrapper:hover {
    background: inherit !important;
    color: inherit !important;
}

/* Bild entfernen */
.wpc-term-count-0 .wpc-term-swatch-wrapper img {
    display: none !important;
}

/* Plugin-Pseudo-Elemente (z.B. Haken) auf leeren Swatches entfernen */
.wpc-term-count-0 .wpc-term-swatch-wrapper::before,
.wpc-term-count-0 .wpc-term-swatch-wrapper::after {
    content: none !important;
}

/* Schraffur als Hintergrund für leere Swatches */
.wpc-term-count-0 .wpc-filter-label-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.25) 0px,
        transparent 4px,
        transparent 12px
    );
    border-radius: .3rem;
}

/* =====================================
   Klammern um die Counter (global)
   ===================================== */

.wpc-filters-main-wrap .wpc-term-count::before {
    content: "(";
}

.wpc-filters-main-wrap .wpc-term-count::after {
    content: ")";
}

/* Falls das Plugin eigene Bracket-Spans rendert */
.wpc-filters-main-wrap .wpc-term-count-brackets-open,
.wpc-filters-main-wrap .wpc-term-count-brackets-close {
    display: none;
}

/* =====================================
   Ausklappbare Filter-Anzeige
   ===================================== */

/* Header / Toggle Button – BASIS = geschlossen (auch beim Initial-Load) */
.wpc-filter-title button {
    margin: 0 !important;
    padding: 2px 6px 5px !important;
    height: 51px !important;
    background: #2a2a2a !important;
    border: 1px solid #4e4e4e !important;
    font-family: 'Oswald', sans-serif;
    font-size: 16px !important;
    color: #fff !important;
}

/* Geöffneter Zustand: unten offen, nur oben Radius */
.wpc-opened .wpc-filter-title button {
    border-radius: 0.5em;
    border-bottom: none !important;
    border-bottom-left-radius: 0em;
    border-bottom-right-radius: 0em;
}

/* Explizit geschlossener Zustand – falls Klasse gesetzt wird */
.wpc-closed .wpc-filter-title button {
    border-radius: 0.5em;
}

.wpc-filter-title button:hover, .select2-selection:hover {
    background: var(--enfold-main-color-primary) !important;
}

/* Pfeil / Icon Farbe */
.wpc-open-icon {
    border-color: #fff !important;
}

/* Ausgewählte Werte unter Titel */
.wpc-filter-selected-values {
    font-size: 10px !important;
    color: #a2a2a2 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Widget Title bündig */
.widget-title.wpc-filter-title {
    margin-bottom: 0 !important;
}

/* Inhalt / Liste unter dem Toggle */
.wpc-filters-ul-list.wpc-filters-labels {
    padding: 15px 3px 5px 10px !important;
    margin-bottom: 9px !important;
    background: #333 !important;
    border: 1px solid #4e4e4e !important;
    border-top: none !important;
    border-radius: 0 0 0.5em 0.5em !important;
}

/* =====================================
   Weitere Layout-Anpassungen
   ===================================== */

.wpc-posts-found p {
   margin-bottom: 9px !important;
}

.wpc-filters-widget-top-container:before {
   background: #4e4e4e !important;
}

.wpc-widget-top-inside {
   margin-top: 20px;
   margin-bottom: 10px;
}

.wpc-filters-widget-top-container {
    background: none !important;
    margin-bottom: 12px;
}

/* Chips */

.wpc-filter-chips-list li {
    float: left !important;
    clear: none !important;
}

.wpc-filter-chip a {
    color: #fff !important;
    font-size: 14px !important;
}

.wpc-filter-chip a:hover {
    border-color: var(--enfold-main-color-primary) !important;
    background: var(--enfold-main-color-primary) !important;
    color: #fff !important;
}

/* Standardfarbe des Remove-Icons */
.wpc-chip-remove-icon {
    color: var(--enfold-main-color-primary) !important;
}

/* Beim Hover des gesamten Chips → Icon wird weiß */
.wpc-filter-chip:hover .wpc-chip-remove-icon {
    color: #ffffff !important;
}

li.wpc-chip-reset-all a {
   border-color: var(--enfold-main-color-primary) !important;
   background: var(--enfold-main-color-primary) !important;
   color: #fff !important;
}

/* Chips Widget */
.wpc-filter-chips-list {
   display: block !important;
}

/* Wenn keine Chips zum Anzeigen → Header + Posts-Found ausblenden */
.wpc-filters-widget-top-container:has(.wpc-empty-chips-container),
:has(.wpc-empty-chips-container) .wpc-posts-found {
   display: none !important;
   margin: 0 !important;
   padding: 0 !important;
}

/* Preis Balken */
.wpc-filters-range-wrapper {
   padding: 6px 3px 5px 4px !important;
   background: #333 !important;
   border: 1px solid #4e4e4e !important;
   border-top: none !important;
   border-radius: 0 0 0.5em 0.5em !important;
}

.wpc-filters-range-min, .wpc-filters-range-max {
    border: none !important;
    width: 50px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: transparent !important;
    margin-bottom: 0 !important;
}

.wpc-filters-range-slider-wrapper {
    margin: -24px 93px 0 76px !important;
}

/* Sortieren Widget */
.select2-container.select2-container--default {
   width: 100% !important;
}

.wpc-sorting-form {
    margin-bottom: 0 !important;
}

.select2-selection {
    background-color: #2a2a2a !important;
    border: 1px solid #4e4e4e !important;
    border-radius: 0.5em !important;
    font-family: 'Oswald', sans-serif;
    font-size: 16px !important;
    color: #fff !important;
}

.select2-selection__arrow {
   background-color: transparent !important;
}

.select2-selection__arrow b {
   border-color: #fff !important;
   right: 9px !important;
}

.select2-selection__rendered {
   padding: 6px 5px !important;
   min-height: 48px !important;
}

.select2-dropdown {
    border: 1px solid #4e4e4e !important;
    border-bottom-left-radius: 0.3rem !important;
    border-bottom-right-radius: 0.3rem !important;
    background-color: #333 !important;
}

.select2-results {
    color: #fff !important;
}

.select2-results__option:hover {
   background-color: var(--enfold-main-color-primary) !important;
}

.select2-results__option[aria-selected=true] {
   background-color: #616161 !important;
}

/* Filter button Mobil */

.wpc-filters-open-button-container {
    margin-bottom: 9px;
}

.wpc-open-close-filters-button {
    border: 1px solid #4e4e4e !important;
    border-radius: 0.5em !important;
    font-family: 'Oswald', sans-serif !important;
    font-size: 10px !important;
    color: #fff !important;
    text-transform: uppercase !important;
    background-color: #2a2a2a !important;
    margin-bottom: 0 !important;
}

.wpc-open-close-filters-button:hover {
    background-color: var(--enfold-main-color-primary) !important;
}

.wpc-icon-html-wrapper span {
    background: #fff !important;
}

/* Responsive */
@media (max-width: 767px) {
   .wpc-closed .wpc-filter-title button {
       margin-bottom: 9px !important;
   }
   .select2 {
      width: 100% !important;
   }
   .select2-selection--single {
      padding: 0px !important;
   }
   .wpc-filter-title button, .select2-selection--single {
        height: 45px !important;
    }
    .select2-selection__rendered {
         min-height: 42px !important;
     }
   .wpc-filters-section {
       margin-bottom: 0 !important;
    }
}