/* BANER ZGÓD. Uzasadnienie przeniesienia z Tag Managera: js/zgody.js
 *
 * Kolory z palety serwisu: czerń #222 (nagłówki), szarość #7e8188 (tekst
 * pomocniczy), #c6c7cb (tło strony). Pierwsza wersja przejęła granat #163276
 * ze starego banera w GTM, żeby przeniesienie nie było przy okazji zmianą
 * wyglądu — ale ten granat był jedyną nasyconą plamą w całym serwisie
 * i odstawał. Zmienione 09.08.2026 po obejrzeniu zrzutów ekranu.
 *
 * PO CO OSOBNY PLIK, a nie dopisek do style.css: baner ma się pokazać razem
 * z pierwszym widokiem strony, a style.css jest duży. Osobny, mały arkusz
 * ładuje się szybciej i nie miesza się z układem serwisu.
 */

.zgody {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    width: min(60rem, calc(100vw - 4rem));
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    z-index: 2000;
    background: #fff;
    color: #222;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
    padding: 2.4rem;
    font-size: 1.5rem;
    line-height: 1.5;
}

/* `hidden` musi wygrać z `display:flex` i podobnymi — bez tego atrybut
   przestaje działać w chwili, gdy ktoś doda tu regułę z display. */
.zgody[hidden], .zgody-klodka[hidden], [hidden] { display: none !important; }

.zgody__tytul { font-size: 2rem; margin: 0 0 1rem; font-weight: 700; }
.zgody__opis { margin: 0 0 1.2rem; }
.zgody__opis--dodatkowy { color: #555; }

.zgody__wiecej {
    background: none; border: 0; padding: 0;
    font: inherit; color: #222; font-weight: 700;
    text-decoration: underline; cursor: pointer;
}

.zgody__lista { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.zgody__pozycja { margin: 0 0 .8rem; }
.zgody__etykieta { display: flex; align-items: center; gap: .6rem; font-weight: 600; cursor: pointer; }
.zgody__etykieta input[disabled] { cursor: not-allowed; }
.zgody__wyjasnienie { display: block; margin-left: 2.2rem; color: #666; font-size: 1.3rem; }

.zgody__guziki { display: flex; flex-wrap: wrap; gap: .8rem; }

.zgody__guzik {
    flex: 1 1 auto;
    padding: 1rem 1.6rem;
    font: inherit;
    border: 1px solid #222;
    border-radius: 4px;
    background: #fff;
    color: #222;
    cursor: pointer;
}
.zgody__guzik:hover { background: #f4f2f2; }
.zgody__guzik--glowny { background: #222; color: #fff; }
.zgody__guzik--glowny:hover { background: #000; }

/* KŁÓDKA. Położenie zostaje takie jak w wersji z Tag Managera, żeby
   odwiedzający nie musiał jej szukać gdzie indziej. Zmienia się kolor
   i rozmiar, i to z powodu, który widać na zrzucie ekranu.

   Stara kłódka była pełnym, nasyconym granatem (#163276) — jedynym mocno
   nasyconym elementem na całej stronie. Serwis jest wyciszony: tło #c6c7cb,
   tekst #7e8188, białe kafle, czerń tylko w nagłówkach. Kolorowe koło czytało
   się jak obcy widżet doklejony do galerii, a nie jej część.

   Teraz jest biała, z cienką obwódką i szarym rysunkiem — czyli w tej samej
   palecie co reszta. To jest kontrolka pomocnicza, a nie wezwanie do
   działania, więc ma nie przyciągać wzroku mocniej niż prace. Mniejsza
   (48 zamiast 60 px) z tego samego powodu.

   Kolory z arkusza serwisu, nie wymyślone: #7e8188 to barwa tekstu
   pomocniczego, #c6c7cb to tło strony. */
.zgody-klodka {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #c6c7cb;
    border-radius: 50%;
    background: #fff;
    color: #7e8188;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    cursor: pointer;
    z-index: 1001;
    transition: color .2s, border-color .2s, transform .2s;
}
.zgody-klodka:hover { color: #222; border-color: #7e8188; transform: scale(1.05); }
.zgody-klodka:focus-visible { outline: 2px solid #222; outline-offset: 2px; }

@media only screen and (max-width: 37.5em) {
    .zgody { bottom: 0; width: 100vw; border-radius: 8px 8px 0 0; padding: 1.8rem; }
    .zgody__guzik { flex: 1 1 100%; }
}