/* Szkielet widżetów GP. Wygląd (czcionki, kolory, odstępy) ustawia się w panelu Elementora. */

/* Przełącznik okresu */
.gp2-okres { text-align: center; }
.gp2-okres__tytul { margin: 0 0 20px; }
.gp2-okres__wiersz { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; }
.gp2-okres__etykieta--mies { justify-self: end; }
.gp2-okres__prawa { justify-self: start; display: inline-flex; align-items: center; }
.gp2-przelacznik .gp2-okres__wiersz { display: inline-flex; width: auto; }
.gp2-okres button { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; border-radius: 0; }
.gp2-okres button:hover, .gp2-okres button:focus { background: none; color: inherit; }
.gp2-okres__etykieta.is-aktywna { text-decoration: underline; }
.gp2-okres__suwak.gp2-okres__suwak { position: relative; box-sizing: border-box; width: 40px; height: 20px; border: 1px solid #f7a400; border-radius: 10px; }
.gp2-okres__kropka { position: absolute; top: -1px; left: -1px; width: 20px; height: 20px; border-radius: 50%; background: #f7a400; transition: left .2s ease, transform .2s ease; }
.gp2-okres[data-okres="rok"] .gp2-okres__kropka { left: calc(100% + 1px); transform: translateX(-100%); }
.gp2-okres__wstazka { display: inline-block; background: #f7a400; color: #000; }

/* Cena pakietu */
.gp2-cena { text-align: center; }
.gp2-cena__para { position: relative; display: inline-block; white-space: nowrap; }
.gp2-cena__jedn { position: relative; }
.gp2-cena--obok-yes .gp2-cena__jedn { position: absolute; left: 100%; bottom: auto; }
.gp2-cena .gp2-cena__kwota--promo { color: inherit; }
/* Która kwota jest widoczna (zwykła czy promocyjna) – reguły w <head>, inc/promo.php. */

/* Galeria – pokaz slajdów. Domyślne wartości jak w galeria.html szablonu; wszystko zmienia się w panelu. */
.gp2-galeria { position: relative; overflow: hidden; height: 100vh; background: #000; }
.gp2-galeria__slajd { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; opacity: 0; z-index: 0; }
.gp2-galeria__slajd.is-poprzedni { opacity: 1; z-index: 1; }
.gp2-galeria__slajd.is-aktywny { opacity: 1; z-index: 2; transition-property: opacity; transition-timing-function: linear; }
.gp2-galeria__strzalka.gp2-galeria__strzalka { position: absolute; top: 40%; z-index: 5; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; line-height: 0; cursor: pointer; color: #999; font-size: 40px; }
.gp2-galeria__strzalka:hover, .gp2-galeria__strzalka:focus { background: none; }
.gp2-galeria__strzalka--lewa { left: 2%; }
.gp2-galeria__strzalka--prawa { right: 2%; }
.gp2-galeria__strzalka img { display: block; width: 43px; height: 43px; }
.gp2-galeria__tytul-obszar { position: absolute; top: 0; left: 0; right: 0; height: 530px; z-index: 4; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.gp2-galeria__tytul { margin: 0; text-align: center; color: #fff; }
.gp2-galeria__pasek { position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 4; }
.gp2-galeria__miniatury { max-width: 1200px; margin: 0 auto; padding: 0; list-style: none; text-align: center; white-space: nowrap; overflow: hidden; }
.gp2-galeria__miniatura { display: inline-block; vertical-align: top; width: 140px; height: 80px; margin: 0 30px 0 0; border: 1px solid #fff; box-sizing: border-box; background-size: cover; background-position: 50% 50%; cursor: pointer; }
.gp2-galeria__miniatura:last-child { margin-right: 0; }
@media (max-width: 992px) { .gp2-galeria__strzalka img { width: 40px; height: 40px; } }

/* Przełącznik sekcji: ukrywanie wskazanych kontenerów (na telefonie albo zawsze). */
.gp2-ukryte { display: none !important; }
@media (max-width: 768px) { .gp2-ukryte-tel { display: none !important; } }
.gp2-przelacznik .gp2-okres__etykieta { font-weight: 300; text-decoration: none; }
.gp2-przelacznik .gp2-okres__etykieta.is-aktywna { font-weight: 700; text-decoration: none; }