/* ============================================================
   LISTY ROZWIJANE - jeden wzorzec (2026-09-28)
   Ladowane przez mu-plugins/bm-komunikaty.php na kazdej stronie.

   Zgloszenie: "dropdowny sa niespojne i miejscami brzydkie". Audyt
   382 podstron: <select> jest tylko w trzech miejscach - sortowanie
   w sklepie (pigulka, wlasna strzalka), pojemnosc na karcie produktu
   (wlasna strzalka) i formularz CF7 na /dla-profesjonalistow/
   ("Zawod", "Wojewodztwo"). Ten ostatni mial SYSTEMOWA strzalke
   przegladarki wcisnieta w krawedz i ciemny napis zastepczy, choc
   sasiednie pola maja go szarego.

   Wzorzec = lista "Pojemnosc" z karty produktu: granatowy szewron
   10x7 px, 16 px od prawej, bez wygladu systemowego.
   Selektor 'body:not(#bmx-k):not(#bmx-l)' ma wage DWOCH identyfikatorow
   celowo: reguly pol w strony.css to 'body.page #section-138-225 .wpcf7 select'
   (1,2,2), a ich skrot 'background:' kasowal strzalke. Bez !important.
   ============================================================ */

body:not(#bmx-k):not(#bmx-l) .wpcf7 select {
    -webkit-appearance: none;
            appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230B2240' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 16px) 50%;
    background-size: 10px 7px;
    cursor: pointer;
}

/* Nic nie wybrane (pierwsza pozycja "Zawod *" ma pusta wartosc) -
   napis w kolorze napisow zastepczych sasiednich pol. */
body:not(#bmx-k):not(#bmx-l) .wpcf7 select:has(option[value=""]:checked) {
    color: #7B8797;
}

/* Pozycje na rozwinietej liscie zawsze w kolorze tresci. */
body:not(#bmx-k):not(#bmx-l) .wpcf7 select option {
    color: var(--navy, #0B2240);
}

body:not(#bmx-k):not(#bmx-l) .wpcf7 select::-ms-expand { display: none; }


/* ============================================================
   PANEL LISTY (listy.js) - rozsuwany spod pola (2026-09-28)
   Gora przylega do dolnej krawedzi pola, zaokraglony tylko dol.
   Rozsuwanie przez 'clip-path' od gornej krawedzi - bez przesuniecia,
   wiec panel w trakcie animacji nie odrywa sie od pola.
   ============================================================ */
.bmx-lista {
    position: fixed;
    z-index: 99990;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: hidden;            /* przycina przewijana liste do zaokraglonego ksztaltu */
    background: #fff;
    border: 1px solid rgba(11, 34, 64, .16);
    border-top: 0;
    border-radius: 0 0 var(--r-s, 12px) var(--r-s, 12px);
    box-shadow: 0 14px 28px -12px rgba(11, 34, 64, .28), 0 2px 4px rgba(11, 34, 64, .05);
    font-family: var(--sans, "Inter", sans-serif);
    font-size: .92rem;
    line-height: 1.35;
    color: var(--navy, #0B2240);
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .26s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}

.bmx-lista.is-otwarta {
    opacity: 1;
    clip-path: inset(0 0 -40px 0);   /* ujemny dol - cien pod panelem nie jest przyciety */
}

.bmx-lista.is-zamykana {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .22s cubic-bezier(.4, 0, .6, 1), opacity .22s ease .04s;
}

/* Otwarcie w gore (brak miejsca pod polem) - lustrzanie. */
.bmx-lista.bmx-lista--w-gore {
    border-top: 1px solid rgba(11, 34, 64, .16);
    border-bottom: 0;
    border-radius: var(--r-s, 12px) var(--r-s, 12px) 0 0;
    box-shadow: 0 -14px 28px -12px rgba(11, 34, 64, .28);
    clip-path: inset(100% 0 0 0);
}
.bmx-lista.bmx-lista--w-gore.is-otwarta { clip-path: inset(-40px 0 0 0); }
.bmx-lista.bmx-lista--w-gore.is-zamykana { clip-path: inset(100% 0 0 0); }

.bmx-lista li {
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    /* Dlugie pozycje ("Kujawsko - Pomorskie: tylko Grudziadz") lamia sie
       na dwie linie zamiast wymuszac przewijanie w bok. */
    white-space: normal;
    overflow-wrap: anywhere;
    transition: background .15s ease, color .15s ease;
}

.bmx-lista li.is-aktywna {
    background: #F4F1EB;
}

.bmx-lista li.is-wybrana {
    font-weight: 600;
}

.bmx-lista li.is-wybrana::after {
    content: "";
    float: right;
    width: 12px;
    height: 12px;
    margin-top: 3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.6L10 3.3' fill='none' stroke='%23DB0632' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.bmx-lista li.is-wylaczona {
    color: #9AA3AE;
    cursor: default;
}

/* Pole z otwarta lista - dol pola i gora panelu tworza jedna calosc. */
select.bmx-lista-otwarta {
    border-color: var(--navy, #0B2240) !important;
}

@media (prefers-reduced-motion: reduce) {
    .bmx-lista, .bmx-lista.is-zamykana { transition: none; }
}

/* Sortowanie w sklepie: pigulka miala 189 px, wiec panel (wezszy o pol
   wysokosci z kazdej strony) mial ok. 150 px i opcje lamaly sie na dwie
   linie ("Cena: od / najnizszej"). Pole dostaje minimum szerokosci. */
body:not(#bmx-k):not(#bmx-l) .bm-shop-wrapper select {
    min-width: 230px;
}

/* Wnetrze panelu - tu dziala przewijanie (tylko w pionie). Cienki pasek
   w kolorach serwisu, odsuniety od gory i od zaokraglonego dolu. */
.bmx-lista__przewijak {
    box-sizing: border-box;
    max-height: 320px;
    margin: 0;
    padding: 6px;
    list-style: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* Standardowe 'scrollbar-width' w Chrome/Edge WYLACZA wlasny wyglad paska
   (::-webkit-scrollbar) i dokleja systemowe strzalki - wiec tylko Firefox. */
@supports not selector(::-webkit-scrollbar) {
    .bmx-lista__przewijak {
        scrollbar-width: thin;
        scrollbar-color: rgba(11, 34, 64, .28) transparent;
    }
}
.bmx-lista__przewijak::-webkit-scrollbar { width: 8px; }
.bmx-lista__przewijak::-webkit-scrollbar-button { display: none; height: 0; }
.bmx-lista__przewijak::-webkit-scrollbar-track { background: transparent; margin: 6px 0 14px; }
.bmx-lista__przewijak::-webkit-scrollbar-thumb {
    background: rgba(11, 34, 64, .28);
    border: 2px solid #fff;
    border-radius: 999px;
}
.bmx-lista--w-gore .bmx-lista__przewijak::-webkit-scrollbar-track { margin: 14px 0 6px; }