/* Przelacznik miast - wspolny komponent dla stron miast (294) i hubow wojewodztw (16).
   Markup: template-parts/city-switcher.php  Zachowanie: assets/js/city-switcher.js
   Wyciagniete z city-page.css 2026-08-31 przy dokladaniu komponentu na huby -
   druga kopia stylu byla by dlugiem, a nie ponownym uzyciem. */

/* ============================================================================
   PRZELACZNIK MIAST (2026-08-31)
   Powod pomiarowy: 61% ruchu w glab z sesji ladujacych na stronie miasta to byla
   proba znalezienia INNEJ lokalizacji (46% hub wojewodztwa, 15% lista /miasta/),
   a do konkretnej innej strony miasta docieraly 2 odslony na 112.
   ========================================================================== */
.mm-switcher__card {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.mm-switcher__label {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--mm-navy, #0f172a);
    margin-bottom: 14px;
}
.mm-switcher__wrap { position: relative; text-align: left; }
.mm-switcher__icon {
    /* top:50% zamiast stalej wartosci - lista wynikow jest position:absolute, wiec
       wrapper ma DOKLADNIE wysokosc pola i ikona centruje sie sama, niezaleznie od
       tego, jak zmieni sie padding czy rozmiar czcionki. Stale 23px rozjechalo sie
       o 2px, gdy pole urroslo z 44 do 50px. */
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #94a3b8; pointer-events: none; line-height: 0;
}
/* Selektor CELOWO dwuklasowy (0-2-0). GeneratePress ma w main.min.css regule
   `input[type="text"] { padding: 10px 15px }` o specyficznosci 0-1-1, ktora bije
   pojedyncza klase - zmierzone: padding-left wychodzil 15px zamiast 44px i ikona
   lupy nachodzila na wpisywany tekst. Podnosimy specyficznosc, nie siegamy po
   !important. */
.mm-switcher__wrap .mm-switcher__input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    /* 16px to nie estetyka: ponizej tej wartosci iOS PRZYBLIZA strone przy focusie */
    font-size: 16px;
    line-height: 1.4;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    transition: border-color .15s, box-shadow .15s;
}
.mm-switcher__wrap .mm-switcher__input:focus {
    border-color: var(--mm-orange, #ff8426);
    box-shadow: 0 0 0 3px rgba(255, 132, 38, .18);
    outline: none;
}
.mm-switcher__results {
    display: none;
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    z-index: 30;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
    max-height: 320px;
    overflow-y: auto;
}
.mm-switcher__results.is-open { display: block; }
.mm-switcher__item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}
.mm-switcher__item:last-child { border-bottom: 0; }
.mm-switcher__item:hover,
.mm-switcher__item.is-active { background: #fff7ed; }
.mm-switcher__city { font-weight: 600; }
.mm-switcher__region { font-size: 12px; color: #64748b; white-space: nowrap; }
.mm-switcher__hit { background: #ffe8d4; color: inherit; padding: 0 1px; border-radius: 2px; }
.mm-switcher__empty { padding: 14px 16px; color: #64748b; font-size: 14px; }
.mm-switcher__empty a { color: var(--mm-orange, #ff8426); }
.mm-switcher__help { margin: 10px 0 0; font-size: 13px; color: #64748b; }