/* Panel "Produktfilter" w lewej kolumnie sklepu - wnetrze panelu,
 * czyli <div id="Filters"> wypisywany przez shop_filter.php.
 *
 * Naglowek panelu (<div class="HeaderNew filtrHeader"> z links.php)
 * NIE nalezy do tego arkusza - ma juz swoje reguly w
 * include/tabs/sortiment.css. Powody sa opisane nizej.
 *
 * Arkusz NIE wymaga zmian w znacznikach. Opiera sie na tym, co realnie
 * generuje shop_filter.php: tabela bez klas (width="90%"), trzy listy
 * <ul><li> z polami radio/checkbox rozdzielonymi <br>, naglowki sekcji
 * jako <strong>, puste wiersze <td>&nbsp;</td> zamiast odstepow, dwa
 * suwaki jQuery (span.jslider.jslider_plastic) i dwa <select>.
 *
 * Paleta jak w sortymencie, koszyku i kasie:
 *   akcent #4E5461   czerwien marki #960001   ramka #d9d9d9
 *   separator #ececec   tlo hover #fafafa   tekst mocny #222
 *   tekst wyciszony #888   promien 2-3px   Arial
 *
 * Plik jest czystym ASCII - strony sklepu sa w ISO-8859-1.
 *
 * UWAGA: reguly responsywne sa CELOWO na koncu pliku. Media query NIE
 * podnosi specyficznosci, wiec regula o rownej specyficznosci umieszczona
 * PO bloku @media wygrywa na kazdej szerokosci. Tak samo zbudowany jest
 * css/sortiment.css.
 */

/* =====================================================================
 * NAGLOWEK PANELU I PRZYCISK "ZURUCKSETZEN"
 *
 * CELOWO BEZ REGUL. Nachodzenie przycisku na czerwona wstege jest juz
 * naprawione w include/tabs/sortiment.css (blok ".filtrHeader"), na
 * klasach filtrHeader / filtrHeader__title / filtrHeader__reset, ktore
 * links.php dopisuje obok HeaderNew. Tamten arkusz robi z naglowka uklad
 * elastyczny o wlasnej wysokosci i gasi wstege (:before {content:none}).
 *
 * Sprawdzone w przegladarce po tamtej poprawce: przycisk ma 26px i konczy
 * sie 11px nad dolna krawedzia naglowka, wiec nie ma juz czego rozdzielac.
 *
 * Wlasne reguly bylyby tu szkodliwe: zakotwiczone w #left albo #Filters
 * mialyby wyzsza specyficznosc niz tamte klasy i przejmowaly uklad
 * naglowka mimo pozniejszego ladowania tamtego arkusza. Ten sam wniosek
 * jest opisany przy stronicowaniu w css/sortiment.css.
 *
 * Dla porzadku, co tam bylo nie tak (zmierzone przed poprawka, kolumna
 * #left ma 217px): .HeaderNew mial sztywne height:30px, a wstega to jego
 * pseudoelement :before - trojkat z ramki (border-width:10px 110px 0)
 * w kolorze #960001 na bottom:-10px, czyli tuz PONIZEJ naglowka.
 * W naglowku plywaly dwa pudelka: podpis szeroki na sztywne 126px i
 * odnosnik 86px. 126 + 86 = 212px nie miescilo sie w 207px tresci, wiec
 * prawy plywak spadal o linie nizej i jego dol wypadal 18px pod
 * naglowkiem - dokladnie na wstedze, ktora jako element pozycjonowany
 * malowala sie na napisie.
 * ===================================================================== */

/* =====================================================================
 * PANEL - PODSTAWA
 *
 * Panel dziedziczyl 12px Verdana po stronie; reszta sklepu (sortyment,
 * koszyk, kasa) jest w Arialu.
 * ===================================================================== */
#Filters {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #222;
    /* Panel dotykal krawedzi kolumny - pola wyboru, suwaki i listy zaczynaly
       sie w pikselu 0. Odstep idzie na KONTENER, a nie na poszczegolne
       kontrolki, zeby wszystkie dostaly go raz i w tej samej wielkosci.
       Dolne 14px odsuwa koniec panelu od ostatniej kontrolki.
       Tabela ma w atrybutach width="90%" align="center", ale regula
       "#Filters > table {width:100%}" nizej i tak oddaje jej pelna
       szerokosc - po dodaniu paddingu tresc ma 197px z 217px kolumny. */
    padding: 0 10px 14px;
}

/* Tabela ma w HTML width="90%" - atrybut prezentacyjny przegrywa z
   arkuszem, wiec wystarczy zwykla regula. W kolumnie 217px te brakujace
   10% to okolo 20px, a lista wersji i tak jest ciasna. */
#Filters > table {
    width: 100%;
    table-layout: fixed;
}

/* Odstepy miedzy sekcjami robia w szablonie puste wiersze <td>&nbsp;</td>.
   Nie da sie ich wskazac selektorem (maja tresc - twarda spacje), a kazdy
   z nich byl wysoki na jedna linie tekstu tego wiersza, stad przypadkowe
   przerwy. Interlinia samego <td> ustala im teraz stala wysokosc 6px;
   elementy, ktore naprawde niosa tekst, dostaja interlinie z powrotem. */
#Filters td {
    line-height: 6px;
    text-align: left;
}

#Filters td ul,
#Filters td strong,
#Filters td select,
#Filters .layout-slider,
#Filters .layout-slider td {
    line-height: normal;
}

/* =====================================================================
 * NAGLOWKI SEKCJI ("Sonderauswahl", "Aktionspreis", "Preisspanne", ...)
 *
 * W szablonie to gole <strong> w <td align="center">, kazdy z innym
 * otoczeniem pustych wierszy - stad rozne odstepy i wrazenie, ze kazdy
 * naglowek jest inny. Jeden rozmiar, jedna grubosc, ten sam padding i
 * separator nad sekcja daja rowny rytm bez ruszania znacznikow.
 * ===================================================================== */
#Filters td strong {
    display: block;
    padding: 9px 0 5px;
    border-top: 1px solid #ececec;
    color: #4E5461;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
}

/* Pierwszy wiersz tabeli to pusty <strong></strong> - z separatorem
   rysowalby kreske nad lista wersji, bez tresci. */
#Filters td strong:empty {
    display: none;
}

/* =====================================================================
 * LISTY OPCJI (wersje EEP, Sonderauswahl, Aktionspreis)
 *
 * OGRANICZONA WYSOKOSC: lista wersji ma kilkanascie pozycji (14 w kodzie,
 * historycznie do 16 - "bis EEP 18" ... "bis EEP 6" i "Ausblenden EEP 6").
 * Przy 20px na wiersz to okolo 280px, czyli kilka ekranow przewijania na
 * telefonie i polowa wysokosci calego panelu na monitorze - suwaki ceny i
 * wybor autora byly przez to wypychane pod krawedz ekranu. Wlasny obszar z
 * max-height i wlasnym przewijaniem pokazuje siedem pozycji, a reszta jest
 * na wyciagniecie kolka myszy.
 *
 * Regula obejmuje wszystkie trzy listy panelu, bo tylko lista wersji jest
 * dosc dluga, zeby dobic do max-height; przy jednej czy dwoch pozycjach
 * overflow-y:auto nie rysuje niczego. Ramka, ktora pokazuje, ze to
 * osobny obszar, trafia juz tylko na liste wersji (:has nizej).
 * ===================================================================== */
#Filters ul {
    margin: 0;
    padding: 0;
    max-height: 170px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}

#Filters ul li {
    list-style: none;
}

/* Ramka i tlo tylko dla listy wersji EEP - to jedyna lista, ktora
   naprawde sie przewija. :has() nie jest tu warunkiem poprawnosci:
   starsza przegladarka pominie regule i dostanie liste bez ramki,
   ale nadal przewijana.

   OUTLINE, NIE BORDER - i to jest tu istotne. Border wchodzi do ukladu i
   przesuwa tresc listy w prawo. Zmierzone przed poprawka, od lewej
   krawedzi panelu: pole wyboru 8px (1px ramki + 7px paddingu wiersza),
   podpis sekcji 0px, <select> autora 0px - trzy rozne linie pionowe.
   Outline rysuje sie POZA pudelkiem, wiec tresc listy zaczyna sie tam,
   gdzie pudelko, czyli w tej samej linii co podpisy i pola wyboru.
   Przegladarka bez promienia na outline narysuje prostokat - lista
   dziala tak samo. */
#Filters ul:has(input[name="version"]) {
    box-sizing: border-box;
    outline: 1px solid #d9d9d9;
    border-radius: 3px;
    background: #fff;
}

/* ---------------------------------------------------------------------
 * WIERSZE LISTY
 *
 * W szablonie nie ma ani jednego <label> ani zadnego opakowania wiersza -
 * jest goly <input>, po nim tekst i <br>. Siatka CSS robi z tego wiersze
 * bez ruszania HTML: kazde pole i kazdy przylegly do niego tekst staja sie
 * osobnymi elementami siatki, wiec ida do dwoch kolumn, a ukryte <br>
 * przestaje decydowac o lamaniu. Dzieki temu pola stoja w jednej kolumnie,
 * podpisy sa wyrownane do lewej, a odstepy w pionie sa rowne.
 *
 * @supports jest zapora: gdyby przegladarka nie znala siatki, <br> musi
 * zostac widoczne, inaczej cala lista sklei sie w jedna linie.
 * ------------------------------------------------------------------- */
@supports (display: grid) {
    #Filters ul li {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-auto-rows: minmax(24px, auto);
        align-items: center;
        column-gap: 8px;
        margin: 0;
        /* bez wciecia poziomego - pole wyboru ma stanac dokladnie na tej
           samej pionowej linii co podpis sekcji i <select> (patrz komentarz
           przy ramce listy wyzej) */
        padding: 3px 0;
    }

    #Filters ul li br {
        display: none;
    }
}

#Filters ul li input[type="radio"],
#Filters ul li input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;
    accent-color: #4E5461;
    cursor: pointer;
}

#Filters ul li input[type="radio"]:hover,
#Filters ul li input[type="checkbox"]:hover {
    outline: 2px solid #fafafa;
}

#Filters ul li input[type="radio"]:focus,
#Filters ul li input[type="checkbox"]:focus {
    outline: 2px solid #4E5461;
    outline-offset: 1px;
}

/* =====================================================================
 * LISTY ROZWIJANE (autor, sortowanie) I POLA TEKSTOWE
 *
 * Panel ma dzisiaj tylko dwa <select> - wtyczka suwaka nie wstawia
 * zadnego pola tekstowego. Regula obejmuje input[type=text] na zapas,
 * zeby ewentualne pole "cena od/do" nie wypadlo z palety.
 * ===================================================================== */
#Filters select,
#Filters input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    height: 28px;
    padding: 3px 6px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    background: #fff;
    color: #222;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#Filters select {
    cursor: pointer;
}

#Filters select:hover,
#Filters input[type="text"]:hover {
    border-color: #4E5461;
    background: #fafafa;
}

#Filters select:focus,
#Filters input[type="text"]:focus {
    outline: none;
    border-color: #4E5461;
}

/* Pole wyszukiwarki dlugiej listy (js/wybor-listy.js, tu: lista autorow)
   jest zwyklym input[type=text], wiec regula wyzej daje mu wyglad panelu
   i to jest w porzadku. Trzeba tylko zrobic miejsce na krzyzyk czyszczacy
   wiszacy przy prawej krawedzi.

   Selektor musi byc dokladnie taki, jak jest. Regula wyzej to
   "#Filters input[type=text]", czyli specyficznosc (1 id, 1 atrybut,
   1 element) = 1,1,1. Samo "#Filters .wl-pole" ma 1,1,0 i PRZEGRYWA -
   zmierzone w przegladarce: padding-right zostawal 6px, a krzyzyk
   nachodzil na tekst. "#Filters .wl input.wl-pole" ma 1,2,1 i wygrywa. */
#Filters .wl input.wl-pole {
    padding-right: 24px;
}

/* Suwak ceny CELOWO nie dostaje tu zadnego wlasnego odstepu poziomego.
   W szablonie ma juz wpisane w atrybut style: <div class="layout-slider"
   style="width:90%"> i <span style="...padding:20px 5px">. Te 5px sluzy
   uchwytom suwaka, zeby nie obcinaly sie na koncach szyny. Dolozenie
   drugiego paddingu zrobiloby suwak wezszy od reszty kontrolek. Odstep od
   krawedzi kolumny bierze on z paddingu calego panelu, tak samo jak
   wszystko inne. */

/* =====================================================================
 * SUWAKI ZAKRESU (cena, czas od premiery)
 *
 * jquery.slider.js buduje span.jslider.jslider_plastic, a skorka
 * "plastic" maluje szyne i uchwyty jednym sprite'em (js/jslider/img/
 * jslider.plastic.png) w niebieskosciach nie z palety sklepu. Zamiast
 * podmieniac obrazek wystarczy go wylaczyc i narysowac szyne tlem.
 * Selektory sa zakotwiczone w #Filters, zeby nie ruszyc suwakow poza
 * panelem filtrow, i zeby wygrac specyficznoscia z jslider.css
 * niezaleznie od kolejnosci ladowania arkuszy.
 * ===================================================================== */
#Filters .jslider {
    font-family: Arial, Helvetica, sans-serif;
}

#Filters .jslider .jslider-bg i {
    height: 4px;
    background-image: none;
    background-color: #ececec;
    border-radius: 2px;
}

/* zaznaczony zakres miedzy uchwytami */
#Filters .jslider .jslider-bg .v {
    height: 4px;
    background-image: none;
    background-color: #4E5461;
    border-radius: 2px;
}

#Filters .jslider .jslider-pointer {
    box-sizing: border-box;
    width: 13px;
    height: 14px;
    top: -5px;
    background-image: none;
    background-color: #fff;
    border: 2px solid #4E5461;
    border-radius: 3px;
}

#Filters .jslider .jslider-pointer:hover,
#Filters .jslider .jslider-pointer-hover {
    background-color: #fafafa;
    border-color: #960001;
}

/* dymek z aktualna wartoscia */
#Filters .jslider .jslider-value {
    padding: 1px 4px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    color: #222;
    font-size: 10px;
}

/* wartosci brzegowe i podpisy skali */
#Filters .jslider .jslider-label {
    color: #888;
    opacity: 1;
    font-size: 10px;
}

#Filters .jslider .jslider-scale ins {
    color: #888;
    font-size: 10px;
}

#Filters .jslider .jslider-scale span {
    border-left-color: #d9d9d9;
}

/* =====================================================================
 * REGULY RESPONSYWNE - CELOWO NA KONCU PLIKU
 *
 * Media query NIE podnosi specyficznosci. Regula o rownej specyficznosci
 * postawiona PO bloku @media wygrywalaby na kazdej szerokosci, wiec blok
 * musi byc ostatni - tak jak w css/sortiment.css.
 *
 * Prog 700px jak w sortiment.css: viewport ma initial-scale=0.6, wiec
 * telefon 390px renderuje uklad okolo 650px.
 *
 * UWAGA: dzisiaj css/mobile.css chowa cala lewa kolumne (#left
 * display:none ponizej 1024px), wiec ten blok jest zapasem na wypadek
 * pokazania panelu na waskim ekranie - nie zmienia niczego na produkcji.
 * ===================================================================== */
@media only screen and (max-width: 700px) {

    /* Naglowka panelu i przycisku "Zurucksetzen" nie ma tu celowo -
       ich wersje dotykowa (44px) ustawia include/tabs/sortiment.css. */

    #Filters {
        font-size: 14px;
    }

    /* Cel dotykowy wiersza listy: 44px wysokosci i wieksze pole wyboru.
       Lista wersji pokazuje wtedy piec pozycji zamiast siedmiu.
       grid-auto-rows dziala tylko tam, gdzie zadzialal blok @supports
       wyzej; przegladarka bez siatki po prostu je pominie. */
    #Filters ul {
        max-height: 230px;
    }

    #Filters ul li {
        grid-auto-rows: minmax(44px, auto);
        column-gap: 10px;
    }

    #Filters ul li input[type="radio"],
    #Filters ul li input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    #Filters select,
    #Filters input[type="text"] {
        height: 44px;
        font-size: 14px;
    }

    /* krzyzyk czyszczacy rosnie do celu dotykowego, wiec miejsca na niego
       tez musi byc wiecej (o specyficznosci - patrz komentarz wyzej) */
    #Filters .wl input.wl-pole {
        padding-right: 44px;
    }

    /* Uchwyt suwaka tez jest celem dotykowym. */
    #Filters .jslider .jslider-pointer {
        width: 22px;
        height: 22px;
        top: -9px;
        margin-left: -11px;
    }
}