/*
 * Facettenfilter der Speisekarte (Aufgabe 3.2.1).
 *
 * Eigene Datei statt eingebettetem Stil: die Sicherheitsrichtlinie des Shops
 * laesst keine inline styles zu.
 *
 * Die Leiste steht unter der Suche und soll dort nicht dominieren - sie ist
 * ein Werkzeug, kein Blickfang. Deshalb kleine Schrift, gedeckte Farben und
 * eine Auswahl, die man an der Fuellung erkennt, nicht an einem Rahmen.
 *
 * Firma: 4Unit Systems Integration GmbH
 */

/* ---------------------------------------------------------------------------
 * Auslöser
 *
 * Die Leiste steht über der Speisekarte und beginnt zugeklappt: sie darf die
 * Karte nicht nach unten drücken, bevor jemand filtern will. Die Zahl am Knopf
 * sagt, wie viele Filter gesetzt sind - sonst wüsste man im zugeklappten
 * Zustand nicht, warum weniger Artikel dastehen.
 * ------------------------------------------------------------------------ */

.cs-facet-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cs-facet-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    cursor: pointer;
}

.cs-facet-toggle:hover {
    background: #f3f4f6;
}

.cs-facet-toggle[aria-expanded="true"] {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

.cs-facet-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    background: #2563eb;
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

/* ---------------------------------------------------------------------------
 * Über der Karte
 * ------------------------------------------------------------------------ */

#catalog-facets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

/*
 * [hidden] muss hier ausdrücklich stehen: die Anzeigeart oben ist stärker als
 * die Voreinstellung des Browsers für das Attribut. Ohne diese Regel bliebe
 * die zugeklappte Leiste sichtbar.
 */
#catalog-facets[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------------
 * Seitenleiste
 *
 * Eingeschoben von links, über der Karte liegend statt neben ihr: die
 * Speisekarte hat rechts bereits den Warenkorb, und eine zweite feste Spalte
 * nähme dem Inhalt auf kleinen Fenstern den Platz.
 * ------------------------------------------------------------------------ */

/*
 * z-index 70, nicht 60: der Shop-Header ist fixiert und liegt selbst auf 60 -
 * bei Gleichstand gewinnt das spaetere Element, und die Kopfzeile deckte
 * genau das Schliessen-Kreuz der Seitenleiste ab. Im Browser gemessen, im
 * Quelltext nicht zu sehen. Ueber 70 beginnt bei 100 der Modal-Bereich; dort
 * darf die Seitenleiste nicht hin, sonst laege sie ueber dem Warenkorb.
 */
#catalog-facets.cs-facets-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 70;
    width: 300px;
    max-width: 85vw;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
    overflow-y: auto;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

#catalog-facets.cs-facets-sidebar .cs-facet {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.cs-facet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.cs-facet-head-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.cs-facet-close {
    border: none;
    background: none;
    padding: 4px 8px;
    color: #6b7280;
    font-size: 16px;
    cursor: pointer;
}

.cs-facet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 69;
    background: rgba(0, 0, 0, 0.35);
}

.cs-facet-backdrop[hidden] {
    display: none;
}

.cs-facet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.cs-facet-label {
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    margin-right: 2px;
}

.cs-facet-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    background: #fff;
    color: #374151;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
}

.cs-facet-value:hover {
    background: #f3f4f6;
}

.cs-facet-value[aria-pressed="true"] {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

.cs-facet-count {
    font-size: 11px;
    opacity: 0.65;
}

/*
 * Ein Wert ohne Treffer wird ausgegraut, nicht entfernt. Wer ihn eben noch
 * gesehen hat, soll nicht raten muessen, wohin er verschwunden ist.
 */
.cs-facet-value[disabled] {
    opacity: 0.4;
    cursor: default;
}

.cs-facet-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #6b7280;
}

.cs-facet-reset {
    border: none;
    background: none;
    padding: 0;
    color: #2563eb;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

/*
 * Ausgeblendet.
 *
 * Die lange Selektorliste ist kein Zierrat: die Kartenliste setzt
 * `.category-items.items-list .menu-item { display: grid !important }`. Zwei
 * !important entscheidet nicht die Reihenfolge, sondern die Spezifitaet - und
 * ein einzelnes `.cs-facet-hidden` verliert diesen Vergleich. Im Browser
 * gemessen: die Klasse stand an allen 92 Karten, die Karten blieben trotzdem
 * sichtbar.
 */
.cs-facet-hidden,
.category-items .menu-item.cs-facet-hidden,
.category-items.items-list .menu-item.cs-facet-hidden,
.category-items.items-grid .menu-item.cs-facet-hidden,
.menu-list-layout .menu-item.cs-facet-hidden,
.menu-grid-layout .menu-item.cs-facet-hidden {
    display: none !important;
}