/* Wyszukiwalna lista wyboru (js/wybor-listy.js).
 *
 * Arkusz opisuje TYLKO zamiennik <select> budowany przez modul. Celowo nie
 * jest zakotwiczony w zadnym #id, bo ten sam widget stoi w lewej kolumnie
 * (panel #Filters, shop_filter.php) i w pasku narzedzi listy zakupionych
 * modeli (#content .mm-tools, view_meine_modelle.php). Strona-gospodarz
 * dopasowuje rozmiary u siebie - selektory z ID i tak wygraja specyficznoscia.
 *
 * Widocznosc panelu i krzyzyka ustawia JS wprost w elemencie (style.display).
 * Tu ich nie ma, zeby brak tego arkusza nie rozlal listy na cala strone.
 *
 * Paleta jak w reszcie przebudowanych widokow:
 *   akcent #4E5461   ramka #d9d9d9   ramka panelu #c4c4c4
 *   separator #f2f2f2   tlo hover #eef0f2   tekst wyciszony #888
 *
 * 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 i css/sidebar-filtr.css.
 */

/* =====================================================================
 * OPAKOWANIE I UKRYTY ORYGINAL
 *
 * Oryginalny <select> zostaje w dokumencie - nadal niesie wartosc do
 * formularza i nadal jest celem zdarzenia 'change'. Modul ukrywa go tez
 * stylem wpisanym wprost w element, wiec ta regula jest tylko zapasem.
 * ===================================================================== */
.wl {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    /* #Filters td ma line-height:6px - regula wprost na elemencie bije
       wartosc odziedziczona, niezaleznie od specyficznosci selektorow */
    line-height: normal;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
}

.wl-zrodlo {
    display: none;
}

/* =====================================================================
 * POLE WYSZUKIWANIA
 *
 * To zwykly input[type=text], wiec w panelu filtrow przejmuje wyglad
 * pol tego panelu (#Filters input[type="text"] w css/sidebar-filtr.css).
 * Ponizsze wartosci sa domyslne dla stron, ktore nic nie narzucaja.
 * ===================================================================== */
.wl-pole {
    box-sizing: border-box;
    width: 100%;
    height: 28px;
    padding: 3px 24px 3px 6px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    background: #fff;
    color: #222;
    font-family: inherit;
    font-size: 12px;
    line-height: normal;
}

.wl-pole:hover {
    border-color: #4E5461;
    background: #fafafa;
}

.wl-pole:focus {
    outline: none;
    border-color: #4E5461;
}

.wl.otwarty .wl-pole {
    border-color: #4E5461;
}

/* =====================================================================
 * KRZYZYK CZYSZCZACY
 *
 * Pokazuje sie dopiero, gdy cos jest wybrane - JS przelacza display.
 * Rozciaga sie na cala wysokosc pola, wiec dziala tez tam, gdzie strona
 * narzuca polu inna wysokosc (34px w pasku "Meine Modelle").
 * ===================================================================== */
.wl-czysc {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 22px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #999;
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.wl-czysc:hover {
    color: #222;
}

/* =====================================================================
 * PANEL Z POZYCJAMI
 *
 * Sedno calego rozwiazania: lista NIE rosnie w nieskonczonosc, tylko ma
 * wlasne okno przewijania. Natywny <select> z kilkuset pozycjami tego
 * nie potrafi.
 * ===================================================================== */
.wl-drop {
    position: absolute;
    z-index: 60;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 180px;
    max-height: 260px;
    overflow-y: auto;
    margin: 3px 0 0;
    border: 1px solid #c4c4c4;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
    text-align: left;
}

.wl-poz {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 9px;
    border-bottom: 1px solid #f2f2f2;
    color: #333;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    cursor: pointer;
}

.wl-poz:last-child {
    border-bottom: 0;
}

/* .wybrany dostaje pozycja wskazana strzalkami - musi wygladac tak samo
   jak najechana myszka, bo to ta sama rola */
.wl-poz:hover,
.wl-poz.wybrany {
    background: #eef0f2;
}

/* pozycja odpowiadajaca aktualnej wartosci <select> */
.wl-poz--aktywna {
    font-weight: bold;
}

.wl--wiele .wl-poz--aktywna {
    font-weight: normal;
    color: #222;
}

/* pozycja zerujaca wybor ("Auswahlen", "Alle Autoren") */
.wl-poz--pusta {
    color: #888;
}

.wl-etykieta {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================================
 * POLE WYBORU (tylko <select multiple>)
 *
 * To <span>, nie <input type=checkbox>: prawdziwy checkbox przelaczalby sie
 * jeszcze sam przy click, a pozycje obslugujemy na mousedown - zaznaczenie
 * gasloby zaraz po ustawieniu. Stan niesie klasa .wl-poz--aktywna wiersza,
 * a dla czytnikow ekranu aria-selected.
 * ===================================================================== */
.wl-box {
    flex: 0 0 auto;
    position: relative;
    width: 13px;
    height: 13px;
    box-sizing: border-box;
    border: 1px solid #b4b4b4;
    border-radius: 2px;
    background: #fff;
}

.wl-poz--aktywna .wl-box {
    border-color: #4E5461;
    background: #4E5461;
}

/* ptaszek narysowany dwoma krawedziami obroconego prostokata - bez obrazka */
.wl-poz--aktywna .wl-box:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 4px;
    width: 3px;
    height: 6px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Wiersz zerujacy w trybie wielokrotnym nie ma wlasnego pola wyboru -
   jest poleceniem "zdejmij wszystkie", a nie kolejna pozycja listy. */
.wl--wiele .wl-poz--pusta .wl-box {
    visibility: hidden;
}

/* wyroznienie wpisanego fragmentu */
.wl-etykieta b {
    font-weight: bold;
    color: #4E5461;
}

/* opcjonalny licznik z atrybutu data-liczba na <option> */
.wl-liczba {
    flex: 0 0 auto;
    color: #999;
    font-size: 11px;
}

/* =====================================================================
 * SEPARATOR GRUP
 *
 * Oddziela przypietych na gorze zaznaczonych autorow od reszty listy.
 * CELOWO sama kreska, bez tekstu - napis trzeba by tlumaczyc na trzy
 * jezyki, a nie niesie zadnej informacji, ktorej nie widac z ukladu.
 * Nie ma klasy .wl-poz, wiec nie da sie go kliknac ani zlapac strzalkami.
 * ===================================================================== */
.wl-sep {
    height: 0;
    margin: 4px 0;
    border-top: 1px solid #d9d9d9;
}

.wl-brak {
    padding: 10px 9px;
    color: #888;
    font-size: 12px;
    text-align: center;
}

/* =====================================================================
 * REGULY RESPONSYWNE - CELOWO NA KONCU PLIKU
 *
 * Media query NIE podnosi specyficznosci. Kazda nowa regula responsywna
 * ma trafiac tutaj, ponizej regul podstawowych, inaczej te podstawowe
 * wygraja kolejnoscia na kazdej szerokosci.
 *
 * Viewport sklepu ma initial-scale=0.6, wiec telefon 390px renderuje
 * uklad ~650px - stad prog 700px, nie 480px. Ponizej niego kazdy cel
 * dotykowy (pole, krzyzyk, pozycja listy) ma co najmniej 44px.
 * ===================================================================== */
@media only screen and (max-width: 700px) {
    .wl-pole {
        height: 44px;
        padding-right: 44px;
        font-size: 14px;
    }

    /* pelna wysokosc pola i 44px szerokosci - zmierzone: przy wcieciu 1px
       krzyzyk mial 42x42, czyli ponizej progu celu dotykowego */
    .wl-czysc {
        top: 0;
        right: 0;
        bottom: 0;
        width: 44px;
        font-size: 20px;
    }

    .wl-drop {
        max-height: 300px;
    }

    .wl-poz {
        min-height: 44px;
        box-sizing: border-box;
        align-items: center;
        padding: 11px 10px;
        font-size: 14px;
    }

    .wl-box {
        width: 18px;
        height: 18px;
    }

    .wl-poz--aktywna .wl-box:after {
        top: 2px;
        left: 6px;
        width: 4px;
        height: 8px;
    }

    .wl-liczba {
        font-size: 12px;
    }

    .wl-sep {
        margin: 6px 0;
    }

    .wl-brak {
        padding: 15px 10px;
        font-size: 14px;
    }
}