/*
 * Tłumacz stron - przełącznik językowy.
 * Autor: Tomasz Skubela
 */

.ts-widget {
    --ts-tlo: #171d27;
    --ts-tekst: #f3f5f8;
    --ts-obramowanie: rgba(255, 255, 255, .12);
    --ts-akcent: #3b82f6;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    z-index: 60;
}

.ts-widget--dol-prawo,
.ts-widget--dol-lewo {
    position: fixed;
    bottom: 18px;
}
/* Prawy dolny róg zajmuje już przycisk „Wróć na górę” rdzenia CMS-a (46px, 22px od
   krawędzi) - przełącznik siada nad nim, żeby się nie zasłaniały. */
.ts-widget--dol-prawo { right: 18px; bottom: 84px; }
.ts-widget--dol-lewo { left: 18px; }

.ts-widget--gorny-pasek {
    display: inline-flex;
    vertical-align: middle;
}

/* Wersja "w menu" chowa dymek - skrypt.js wstawia przełącznik jako pozycję
   głównego menu. Gdyby nie znalazł menu (motyw bez .tkw-menu w nagłówku),
   dostaje klasę ts-zapasowy i wraca do pływającego dymku, żeby nic nie zniknęło. */
.ts-widget--w-menu { display: none; }
.ts-widget--w-menu.ts-zapasowy {
    display: block;
    position: fixed;
    right: 18px;
    bottom: 84px;
}

.ts-widget__przycisk {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--ts-tlo);
    color: var(--ts-tekst);
    border: 1px solid var(--ts-obramowanie);
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    cursor: pointer;
    font: inherit;
    line-height: 1.2;
}
.ts-widget__przycisk:hover,
.ts-widget__przycisk:focus-visible { border-color: var(--ts-akcent); }

.ts-widget--flagi .ts-widget__przycisk { display: none; }

.ts-widget__etykieta { white-space: nowrap; }

.ts-widget__lista {
    list-style: none;
    margin: 8px 0 0;
    padding: 6px;
    background: var(--ts-tlo);
    border: 1px solid var(--ts-obramowanie);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
    max-height: 60vh;
    overflow-y: auto;
    min-width: 180px;
}
.ts-widget--dol-prawo .ts-widget__lista,
.ts-widget--dol-lewo .ts-widget__lista { position: absolute; bottom: calc(100% + 8px); }
.ts-widget--dol-prawo .ts-widget__lista { right: 0; }
.ts-widget--dol-lewo .ts-widget__lista { left: 0; }
.ts-widget--gorny-pasek .ts-widget__lista { position: absolute; top: calc(100% + 8px); left: 0; }

.ts-widget--flagi .ts-widget__lista {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    max-height: none;
}

.ts-widget__lista a {
    display: block;
    padding: 8px 12px;
    color: var(--ts-tekst);
    text-decoration: none;
    border-radius: 8px;
    white-space: nowrap;
}
.ts-widget--flagi .ts-widget__lista a { padding: 6px 8px; font-size: 18px; border-radius: 6px; }
.ts-widget__lista a:hover,
.ts-widget__lista a:focus-visible { background: rgba(255, 255, 255, .1); }
.ts-widget__lista a.jest-aktywny { color: var(--ts-akcent); font-weight: 600; }

@media (max-width: 560px) {
    .ts-widget--dol-prawo,
    .ts-widget--dol-lewo,
    .ts-widget--w-menu.ts-zapasowy { bottom: 74px; }
    .ts-widget--dol-prawo,
    .ts-widget--w-menu.ts-zapasowy { right: 12px; }
    .ts-widget--dol-lewo { left: 12px; }
    .ts-widget__etykieta { display: none; }
    .ts-widget__przycisk { padding: 11px; border-radius: 50%; }
}

/* Wstawiony do prawdziwego menu - wyglada jak kazda inna pozycja z podmenu */
.ts-menu-pozycja > .ts-widget__przycisk-w-menu {
    display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
    color: inherit; font: inherit; cursor: pointer; padding: inherit;
}