/**
 * Kontrolka listy — WARIANT FORMULARZOWY (`md-sel-jak-input`).
 *
 * ⛔ OSOBNY PLIK, WCZYTYWANY TYLKO NA FORMULARZACH (checkout, reklamacje, zwroty/RMA,
 *    książka adresowa, wycena wysyłki w koszyku). Katalog — strona kategorii i produktu —
 *    zostaje przy palecie ZŁOTEJ z `md_select.css` i tego pliku nie widzi.
 *    Rozdział jest celowy: w katalogu lista jest elementem prezentacji i ma się wyróżniać,
 *    w formularzu jest POLEM i ma być nieodróżnialna od pola tekstowego obok.
 *
 * ⛔ WSZYSTKIE WARTOŚCI ODCZYTANE ZE SKLEPU, nie dobrane. Zmierzone 17.08.2026 na
 *    `input.form-control` tego motywu:
 *      spokój   → obwódka `#dddfe4`, białe tło, BEZ cienia, pismo 16 px, kolor `#2b2f33`,
 *                 promień 4 px, wysokość rysowana 44 px, dopełnienie `4px 12px 4px 10px`
 *      najechanie → `border-color: #2a87d5` + trójwarstwowy, miękki cień (poniżej)
 *      ognisko  → motyw ŚWIADOMIE gasi obwódkę i cień (`box-shadow: none !important`,
 *                 `border-color: #dddfe4 !important`)
 *
 * ⚠️ Dlatego niebieski `#2a87d5` jest tu „kolorem interakcji" — nie wymyśliłem go, tak
 *    zachowują się pola tego sklepu. Złoto `#C4A677` NIE MOŻE się tu pojawić.
 */

/* ── pole ──────────────────────────────────────────────────────────── */
.md-sel-jak-input .md-sel-przycisk {
  border-width: 1px;
  border-color: #dddfe4;
  border-radius: 4px;
  height: 44px;
  padding: 0 12px 0 10px;
  font-size: 16px;
  font-weight: 400;
  color: #2b2f33;
  box-shadow: none;
}

/* ⚠️ Cień przepisany ZNAK W ZNAK z `.no-touchevents input.form-control:hover`. Trzy warstwy
   z ujemnym rozmyciem dają miękkie podniesienie, którego nie da się podrobić jednym cieniem. */
.md-sel-jak-input .md-sel-przycisk:hover,
.md-sel-jak-input .md-sel-przycisk[aria-expanded="true"] {
  border-color: #2a87d5;
  box-shadow: rgba(0, 0, 0, .1) .3px .5px .7px,
              rgba(0, 0, 0, .1) .4px .8px 1px -1.2px,
              rgba(0, 0, 0, .1) 1px 2px 2.5px -2.5px;
}

/* ⚠️ Ognisko klawiatury ZOSTAJE WIDOCZNE, choć motyw gasi je na własnych polach.
   Pole obsługiwane klawiaturą bez żadnego znaku to bariera dostępności, a nie styl —
   dajemy więc delikatny pierścień w kolorze interakcji sklepu, nie złoty. */
.md-sel-jak-input .md-sel-przycisk:focus-visible {
  outline: 2px solid #2a87d5;
  outline-offset: 1px;
}

.md-sel-jak-input .md-sel-strzalka { stroke: #7b8794; }

/* ── rozwinięta lista ──────────────────────────────────────────────── */
/* ⛔ Obwódka listy w kolorze interakcji, nie złota — lista jest przedłużeniem pola,
   które właśnie jest otwarte. Promień 4 px, ten sam co pole. */
.md-sel-jak-input.md-sel-panel,
.md-sel-jak-input .md-sel-panel {
  border-width: 1px;
  border-color: #2a87d5;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
}

.md-sel-jak-input.md-sel-panel .md-sel-szukajka,
.md-sel-jak-input .md-sel-szukajka { border-bottom-color: #eef0f3; }

.md-sel-jak-input.md-sel-panel .md-sel-szukaj,
.md-sel-jak-input .md-sel-szukaj {
  border-color: #dddfe4;
  border-radius: 4px;
  font-size: 15px;
  color: #2b2f33;
}

.md-sel-jak-input.md-sel-panel .md-sel-szukaj:focus,
.md-sel-jak-input .md-sel-szukaj:focus {
  border-color: #2a87d5;
  box-shadow: none;
}

.md-sel-jak-input.md-sel-panel .md-sel-szukajka:focus-within .md-sel-lupa,
.md-sel-jak-input .md-sel-szukajka:focus-within .md-sel-lupa { stroke: #2a87d5; }

/* ── pozycje ───────────────────────────────────────────────────────── */
.md-sel-jak-input.md-sel-panel .md-sel-opcja,
.md-sel-jak-input .md-sel-opcja {
  font-size: 15.5px;
  color: #2b2f33;
  border-bottom-color: #f2f4f6;
  padding: 10px 12px;
}

/* Najechanie: rozjaśnienie w kolorze interakcji, bez zmiany koloru pisma —
   złoty odcień `#f5f0e8` i brąz `#8B7355` zostają w katalogu. */
.md-sel-jak-input.md-sel-panel .md-sel-opcja:hover,
.md-sel-jak-input .md-sel-opcja:hover { background: rgba(42, 135, 213, .08); color: #2b2f33; }

.md-sel-jak-input.md-sel-panel .md-sel-opcja[aria-selected="true"],
.md-sel-jak-input .md-sel-opcja[aria-selected="true"] {
  background: #2a87d5;
  color: #fff;
  font-weight: 600;
}

.md-sel-jak-input.md-sel-panel .md-sel-pusto,
.md-sel-jak-input .md-sel-pusto { color: #7b8794; font-size: 14.5px; }