/**
 * Style stron ofertowych Klucz Mobile (PL / UA / ENG).
 *
 * Wcześniej ten sam arkusz siedział w bloku <style> w treści każdej z trzech stron,
 * w trzech kopiach po ~33,5 KB. Realne różnice między nimi to 9 linii — zebrane
 * na końcu pliku i ograniczone klasami page-id-*, które WordPress dokleja do <body>.
 *
 * Baza pochodzi z wersji polskiej (strona ID 119).
 */


/* Były tu dwa @import fontu Source Sans Pro. Usunięte: w całym CSS serwisu nie ma
   ani jednej deklaracji font-family z tą rodziną, a @import blokuje renderowanie. */

*,
*::before,
*::after{
  box-sizing: border-box;
}

ul,
ol[class]{
  padding: 0;
}

a{
  color: inherit;
  text-decoration: none;
}

.package-container-h2,
.tarrif-standart-title,
a{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li ,
figure,
figcaption,
blockquote,
dl,
dd{
  margin: 0;
  padding: 0;
}

li>ol, li>ul{
    margin-bottom: 0;
    margin-left: 0;
}

body{
  min-height: 100vh;
  background-color: #ffffff !important;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

ol[class]{
  list-style: none;
}

a:not([class]){
  text-decoration-skip-ink: auto;
}

img{
  max-width: 100%;
  display: block;
}

article > * + *{
  margin-top: 1em;
}

input,
button,
textarea,
select{
  font: inherit;
}

.slider{
  margin-top: 110px;
}

.slider .item{
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
}

/* Wszystkie banery poza pierwszym schowane od razu, zanim ruszy skrypt.

   Bez tego przy wejsciu na strone widac przez chwile wszystkie trzy ulozone
   jeden pod drugim — strona jest wtedy trzy razy dluzsza i podskakuje, gdy
   skrypt schowa nadmiarowe. Im wolniejsze lacze, tym dluzej to trwa.

   Selektor `.item ~ .item` trafia w kazdy element, przed ktorym stoi inny
   `.item` — czyli we wszystkie poza pierwszym. Nie zalezy od rodzaju
   znacznika ani od tego, co jeszcze jest w srodku, wiec przetrwa zmiane
   markupu. Skrypt i tak nadpisze to stylem liniowym.

   Pierwszy zostaje widoczny celowo: bez JavaScriptu uzytkownik zobaczy
   jeden baner zamiast pustego miejsca. */
.slider .item ~ .item{
  display: none;
}

.more-content.promo{
  color: var(--kolor-tekst);
  text-align: left;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
  padding: 10px;

}

.more-content p{
  text-align: center;
}

.more-content.promo .promo-title{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.875rem;
  margin-bottom: 10px
}

.more-content.promo .promo-steps{
  counter-reset: step;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-left: 10px;
  list-style: none;
  margin-left: 0px;
}

.more-content.promo .promo-steps li{
  position: relative;
  margin-bottom: 0.3rem;
  padding-left: 1.5em;
  font-size: 0.8rem;
}

.promo-steps li span{
  font-weight: 600;
  font-size: 1.125rem;
}

.more-content.promo .promo-link{
  color: var(--pakiet-red);
  display: block;
  text-decoration: underline;
  font-weight: 500;
  font-size: 0.625rem;
  text-align: right;

}

.more-content.promo .promo-link:hover{
  text-decoration: none;
}

.promo_transfer,
.promo_allegro{
  display: flex;
  justify-content: center;
  align-items: center;
}

.promo_transfer{
  flex-direction: column;
}

.slider{
  position: relative;
  margin: auto;
  margin-bottom: 15px;
}

.slider .prev, .slider .next{
  cursor: pointer;
  position: absolute;
  bottom: -55px;
  width: auto;
  margin-top: -32px;
  padding: 16px;
  color: var(--pakiet-red);
  font-weight: bold;
  font-size: 1.125rem;
  transition: 0.1s ease-in;
  border-radius: 8px;
  background-color: #ffffff00;
}

.slider .next{
  right: 30%;
}

.slider .prev{
  left: 30%;
}

.slider .prev:hover,
.slider .next:hover{
  background-color: rgba(136, 136, 136, 0.119);
}

.item{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  border-radius: 0px;
}

.slider_inside_img{
  width: 155px;
  /* Dawniej stal tu filtr brightness(0) invert(1), ktory zamienial kazdy rysunek
     w biala sylwetke — stad wczesniejsze ilustracje musialy byc rysowane sama kreska.
     Nowe maja wlasne barwy i kremowe kolo, wiec filtr trzeba bylo zdjac: zostawiony
     robil z calego rysunku jednolity bialy krazek. Zostaje sam cien. */
  filter: drop-shadow(2px 3px 6px rgba(51, 51, 51, 0.32));
}

.slider-dots{
  text-align: center;
}

.slider-dots_item{
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #ddd;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.2s ease;
}

.active-slider,
.slider-dots_item:hover{
  background-color: var(--pakiet-red);
}

.slider .item,
.backgraund-one,
.backgraund-sec,
.backgraund-trd{
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1s;
  animation-name: fade;
  animation-duration: 1s;
}

@-webkit-keyframes fade{from{
      opacity: 0.5
  }

to{
      opacity: 1
  }
}

@keyframes fade{from{
      opacity: 0.5
  }

to{
      opacity: 1
  }
}

#internet-package .package-container,
#internet-eu .package-container, 
#gen-info .package-container{
  margin-top: 90px;
  margin-bottom: 60px;
}

.tooltip:before,
.tooltip:after{
  position: absolute;
  content: "";
  opacity: 0;
  transition: all 0.4s ease;
}

.tooltip:after{
  content: attr(data-tooltip);
  background: #ffffff;
  width: 200px;
  font-size: 0.75rem;
  font-weight: 300;
  top: -15px;
  left: -205px;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
  -webkit-box-shadow: 0px 2px 26px 3px rgba(0,0,0,0.23);
  -moz-box-shadow: 0px 2px 26px 3px rgba(0,0,0,0.23);
  box-shadow: 0px 2px 26px 3px rgba(0,0,0,0.23);
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
}

@keyframes shake{0%{
    transform: rotate(2deg);
  }

50%{
    transform: rotate(-3deg);
  }

70%{
    transform: rotate(3deg);
  }

100%{
    transform: rotate(0deg);
  }
}

/*
 * USUNIĘTA REGUŁA `header h1` — 11 sierpnia 2026.
 *
 * Wskazywała tło pod adresem `http://10.10.27.199/klucznew/…/cennik_header.png`:
 * prywatny adres maszyny deweloperskiej, po HTTP. Na produkcji oznaczałoby to
 * treść mieszaną i naruszenie `img-src` w Content-Security-Policy, a obrazek
 * nie wczytałby się nigdy.
 *
 * Sprawdzone przed usunięciem: `<h1>` wewnątrz `<header>` nie występuje na
 * ŻADNEJ z dwunastu stron serwisu. Reguła nie miała na co trafić.
 *
 * Usunięta w całości, a nie tylko pozbawiona adresu, bo była pułapką:
 * `header h1` to selektor elementowy. Wystarczyłoby, żeby ktoś kiedyś wstawił
 * tytuł strony jako `<h1>` w nagłówku, a nagłówek dostałby 200 px sztywnej
 * wysokości, biały tekst i martwy obrazek w tle — bez żadnego związku
 * z tym, co ta osoba by robiła.
 *
 * Plik z obrazkiem istnieje (`uploads/2017/09/cennik_header.png`). Gdyby nagłówek
 * cennika miał wrócić, trzeba go przenieść do `assets/img/` motywu i wskazać
 * ścieżką względną — adres bezwzględny nie przetrwa przeprowadzki na produkcję.
 */

.main-hero{
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-second{
  display: flex;
  flex-direction: column;
  padding-top: 25px;
  background-color: rgb(247, 247, 247);
  
}
/* --------------------------- чому Klucz Mobile ----------------------- */

.gallery-why-klucz{
	display: flex;
	overflow: scroll;
  margin-top: 40px;
	scroll-snap-type: both mandatory;
  scroll-behavior: smooth;
	scroll-padding: 1 rem;
  margin-bottom: 50px;
  -webkit-overflow-scrolling: touch;
  margin-right: 20px;
  margin-left: 20px;
  position: relative;
  z-index: 1;
}

.active-why-klucz{
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.gallery-why-klucz-card{
	scroll-snap-align: none;
	display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 260px;
  height: 240px;
  margin-bottom: 40px;
  padding-bottom: 15px;
  padding-right: 20px;
  padding-left: 20px;
	border-radius: 3px;
	font-size: 1rem;
  background-color: #ffffff;
  border: 1px solid #f3f3f3;
  -webkit-box-shadow: 0px 2px 12px -5px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 2px 12px -5px rgba(0, 0, 0, 0.473);
  box-shadow: 0px 2px 12px -5px rgba(0, 0, 0, 0.425);
}

.gallery-why-klucz-card:not(:last-child){
  margin-right: 10px;
}

.gallery-why-klucz-card > .title-2{
  color: var(--kolor-tekst);
  text-align: center;
  pointer-events: none;
}

.card-2-title-svg{
  fill: var(--pakiet-red);
}

/* --------------------------------------------------------------------- */

.tab-buttons{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
  transition-property: all;
  position: relative;
  z-index: 1;
  margin-left: 10px;
  margin-right: 10px;
}

.tablink{
  background-color: #677880;
  color: white;
  margin: 2px 2px;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px 10px;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  font-weight: 500;
  transition-property: all;
  transition: 200ms linear ;
}

.tablink:hover{
  color: #fff !important;
  background-color: rgba(var(--pakiet-red-rgb), 0.629) !important;
  -webkit-box-shadow: 0px 0px 9px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 9px -2px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 9px -2px rgba(0,0,0,0.75);
}

.tabcontent{
  max-width: 1425px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  color: var(--kolor-tekst);
  display: none;
  height: 100%;
}

/* Pierwsza zakladka widoczna od razu, bez czekania na skrypt.

   Wszystkie panele byly ukryte az do uruchomienia JavaScriptu, przez co strona
   przy wejsciu podskakiwala o ponad tysiac pikseli w chwili, gdy skrypt pokazal
   pierwszy z nich. Przy okazji bez JavaScriptu nie bylo widac zadnej taryfy.

   Skrypt otwiera dokladnie ten panel, wiec stan poczatkowy sie zgadza; gdy
   uzytkownik przelaczy zakladke, styl liniowy i tak przykryje te regule. */
.tabcontent:first-of-type{
  display: block;
}

#internet-package{background-color: #ffffff;}

#all-in-one{background-color:  transparent;}

#internet-eu{background-color:  #ffffff;}

#gen-info{background-color:  #ffffff;}

.package-container{
  position: relative;
  display: block;
  border-radius: 7px 7px 7px 7px;
  margin-left: 20px;
  margin-right: 20px;
  border: 1px solid rgba(var(--pakiet-red-rgb), 0.212);
}

.pkg-nav{
  display: none;
}

.package-container:not(:last-child){
  margin-bottom: 75px;
}

.package-container  .package-container-h2{
  display: flex;
  align-items: center;
  justify-content: center;
  top: -39px;
  left: 50%;
  width: 100%;
  color: #ffffff;
  background-color: rgba(var(--pakiet-red-rgb), 0.933);
  border-radius: 0px;
  font-size: 1.625rem;
  text-transform: uppercase;
  padding-left: 5px;
  padding-right: 5px;
  font-weight: 700;
}

.package-container  .border_round_h2{
  border-radius: 4px 4px 0 0px;
}

.lejek{
  font-size: 1.375rem;
  font-weight: 600;
  text-decoration: underline;
}

.dezaktywuj{
  color: var(--pakiet-red);
}

.accordion{
  background-color: #ffffff;
  color: var(--kolor-tekst);
  cursor: pointer;
  padding: 5px 10px;
  margin-top: 5px;
  width: 100%;
  border: none;
  border-radius: 6px;
  text-align: left;
  outline: none;
  font-size: 1.25rem;
  font-weight: 500;
  transition: 0.2s;
  transition: all 330ms ease-out;
}

.active, .accordion:hover{
  transform: scale(1.01);
  color: #ffffff;
  background-color: var(--pakiet-red);
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.75);
  -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.75);
  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1);
  transition: all 100ms ease-out;
  }

.active.accordion{
  transition: all 100ms ease-out;
  color: #ffffff;
  background-color: var(--pakiet-red);
  margin-bottom: 7px;
}

.panel{
  padding-right: 22px;
  padding-left: 22px;
  background-color: #ffffff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  border-radius: 5px;
}

.question-accordion{
  border: none;
  border-radius: 5px;
  margin-bottom: 1px;
  background-color: #ececec4a;
  color: var(--kolor-tekst);
}

.add-information-title{
  padding-bottom: 10px;
  text-align: center;
  color: var(--pakiet-red);
  font-size: 1.875rem;
  font-weight: 600;
}

.add-information{
  padding: 20px;
  margin-top: 65px;
  margin-bottom: 50px;
  border-radius: 5px;
  border: 1px solid var(--pakiet-red);
  margin-left: 15px;
  margin-right: 15px;
}

.answear-box{
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 20px;
}

.answear{
  font-size: 1.125rem;
  line-height: 1.2;
}

.answear:not(:last-child){
  margin-bottom: 5px;
  padding: 0;
}

/* ----------------- USSD CODES ---------------- */

.tables-container{
  display: flex;
  gap: 1rem;
  margin: 1rem;
  justify-content: center;
  align-items: flex-start;
  margin-left: auto;
  margin-right: auto;
}

table{
  width: 100%;
  border-collapse: separate;
  overflow: hidden;
  table-layout: fixed;   
  background: #ffffff;
  border-radius: 6px;
  border-spacing: 0;     
  border: 1px solid rgba(var(--pakiet-red-rgb), 0.212);
  max-width: 500px;
  font-weight: 550;
  font-size: 1.0625rem;
}

thead{
  background: #d65d5d;
  color: #fff;
}

th, td{
  padding: 0.75rem 0.5rem;
  border: 1px solid rgba(var(--pakiet-red-rgb), 0.459);
  text-align: left;
  vertical-align: middle;  
  word-wrap: break-word;
}

@media (max-width: 600px){th, td{
    font-size: 0.875rem;
  }
}

@media screen and (min-width: 365px){
}

@media screen and (min-width: 400px){.package-container{
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
  }

}

@media screen and (min-width: 768px){.package-container{
    max-width: 100%;
    margin-left: 20px;
    margin-right: 20px;
  }
}

@media screen and (min-width: 1024px){.slider_inside_img{
    width: 200px;
  }

.ua_map{
    padding-right: 30px;
  }

}

@media screen and (min-width: 600px){.tablink{
    font-size: 0.875rem;
  }

header h1{
    font-size: 2.8125rem;
  }
}

@media screen and (min-width: 768px){header h1{
    font-size: 3.4375rem;
  }

.tablink{
    font-size: 1.125rem;
  }

.package-tab{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

.package-container{
    width: calc(100% / 2 - 20px);
  }
  
}

@media screen and (min-width: 1024px){.more-content.promo .promo-title{
    font-size: 1.25rem;

  }

.more-content.promo .promo-steps li{
      font-size: 1rem;
  }

.slider{
    width: 100%;
  }

.gallery-why-klucz{
    display: flex;
    flex-wrap: wrap;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    overflow:-moz-hidden-unscrollable;
    overflow: visible;
    scroll-snap-type: none;
  }

.gallery-why-klucz-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    font-size: 1rem;
    min-width: 100px;
    height: 190px;
    -webkit-box-shadow: 0px 2px 12px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 12px -5px rgba(0, 0, 0, 0.473);
    box-shadow: 0px 2px 12px -5px rgba(0, 0, 0, 0.425);
  }

.gallery-why-klucz-card > .title-2{
    color: var(--kolor-tekst);
    text-align: center;
  }

.title-2{
    width: 150px;
  }

.card-2-title-svg{
    width: 80px;
    height: 80px;
  }

header h1{
    font-size: 4.0625rem;
  }

.container_offer{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    background: transparent;
    flex-direction: column;
    margin-top: 60px;
  }

.accordion{
  font-size: 1rem;
  }

#internet-package .package-container,
  #internet-eu .package-container, 
  #gen-info .package-container{
    margin-top: 60px;
  }

.package-container{
    transition: all 200ms cubic-bezier(.17,.67,.83,.67);
    width: min-content;
  }

.package-container:hover{
    -webkit-box-shadow: 0px 0px 23px -7px rgba(66, 68, 90, 0.75);
    -moz-box-shadow: 0px 0px 23px -7px rgba(66, 68, 90, 0.75);
    box-shadow: 0px 0px 23px -7px rgba(66, 68, 90, 0.75);
  }

.tablink{
    font-size: 1.1875rem;
  }

.centered-flex{
    justify-content: center;
  }

.add-information{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 50px;
    margin-top: 60px;
    margin-left: 10%;
    margin-right: 10%;
    background-color: var(--kolor-pas-tlo);
    /*
     * USUNIĘTE TŁO — 11 sierpnia 2026.
     *
     * Stało tu `url('http://localhost/klucznew/…/ugtuf-1-1.png')`. Adres z nazwą
     * `localhost` i ze starą nazwą projektu, wpisany na stałe w arkusz produkcyjny.
     *
     * Ta reguła JEST żywa — `.add-information` występuje na trzech stronach oferty.
     * Ale plik nie istnieje: ani w tych uploadach, ani w `klucznew`, ani nigdzie
     * na dysku. Serwer zwraca na ten adres 404 także w starym projekcie. Obrazka
     * nie widać dziś w żadnym z nich, więc usunięcie nie zmienia wyglądu —
     * zostaje `background-color: #e74f4f`, czyli to, co i tak było widać.
     *
     * Gdyby to tło miało wrócić, plik trzeba położyć w `assets/img/` motywu
     * i wskazać ścieżką względną.
     */
    background-position: center;
    background-size: contain;
  }

.add-information-title{
    color: #ffffff;
    margin-right: 50px;
    font-size: 3.625rem;
    font-weight: 1000;
  }

.question-accordion{
    background-color: #ffffff;
    font-size: 1.25rem;
    font-weight: 400;
  }

.width{
    width: 200px;
  }

.package-ue-width{
    min-width: 350px;
  }

.panel{
    transition: all 300ms ease-out;
    padding-right: 10px;
    padding-left: 10px;
  }

@keyframes pulse{
    0% {
      box-shadow: 0 0 0 0 rgb(255, 0, 0 );
    }
    70% {
      box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
  }

  /* ------------------------- why Klucz ----------------------- */

  .header4{
    height: 25vh;
    /*
     * USUNIĘTA WARSTWA ZDJĘCIA — 11 sierpnia 2026.
     *
     * Drugą warstwą tła było `url('http://10.10.27.199/klucznew/…/Pakiet-Klucz-Premium-1024x683.jpg')`
     * — prywatny adres maszyny deweloperskiej, po HTTP. Pliku nie ma ani w tych
     * uploadach, ani w `klucznew`.
     *
     * `.header4` nie występuje na żadnej z dwunastu stron serwisu. Zostawiam samą
     * regułę z gradientem, a nie kasuję jej w całości, bo cały ten blok
     * (`.header4`, `.text-box`, `.heading-primary`) wygląda na sekcję zaczętą
     * i nieskończoną — a przy sprzątaniu wolę zdjąć to, co szkodzi, niż to,
     * co ktoś mógł planować dokończyć. Do rozstrzygnięcia przy przeglądzie
     * martwego kodu, razem z resztą listy z `dokumentacja/rozpoznanie-css.md`.
     */
    background-image:
    linear-gradient(to right bottom,
    rgba(76, 216, 255, 0.8),
    rgba(30, 108, 217, 0.8));
    background-size: cover;
    background-position: center;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 20vh, 0 100%);
  }


  
}

/* —— KARUZELA ALL-IN-ONE (1024px+) —— */

@media (min-width:768px){
  .scroll-wrapper .package-container {
    margin-bottom: 0;
    min-width: 320px;
  }

  #all-in-one {
    background-color: transparent;
  }

  #all-in-one .package-carousel {
    position: relative;
    padding-left: 100px;
    padding-right: 100px;
  }

  #all-in-one .package-carousel .scroll-wrapper::-webkit-scrollbar {
    display: none;
  }
  #all-in-one .package-carousel .scroll-wrapper {
    box-sizing: content-box;
    overflow-x: auto;
    position: relative;
    /* 36 px, nie 25: tyle plakietka wystaje ponad kartkę, odkąd straciła tło
       i wyszła nad obrys w całości (patrz `pakiety.css`). Przy 25 px górna
       krawędź napisu „NEW!” wchodziła pod przyciski zakładek. */
    padding: 36px 0px 15px 0px;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth !important;    
  }

  #all-in-one .package-carousel::-webkit-scrollbar { display: none; }
  #all-in-one .package-carousel { -ms-overflow-style: none; scrollbar-width: none; }

  #all-in-one .package-tab {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: nowrap;
  }

  #all-in-one .pkg-nav {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 6rem;
    height: 100%;
    background: transparent;
    /* Strzałki karuzeli: barwa z palety, krycie 0,75 zamiast 0,558.
       Przy 0,558 wychodziło na bieli rgb(235, 138, 138) i 2,46:1 — poniżej
       progu 3:1 dla elementu sterującego (WCAG 1.4.11). 0,75 daje 3,35:1
       i zostawia strzałkę wyciszoną, o co w niej chodziło. */
    color: rgba(var(--pakiet-red-rgb), 0.75);
    border: none;
    font-size: 15rem;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    z-index: 99;
    border-radius: 8px;
    background-color: transparent;
  }

  #all-in-one .pkg-nav.prev { left: 0; }
  #all-in-one .pkg-nav.next { right: 0; }

  .fake-gap {
    min-width: 30px;
    height: 1px;
    background-color: transparent;
    padding: 0;
    margin: 0;
    border: none;
    pointer-events: none;
    list-style: none;
  }

}

@media screen and (min-width: 1360px){.slider_inside_img{
    width: 300px;
  }

}


/* =============================================================
   Różnice wersji językowych
   ============================================================= */

/* UA (49) i ENG (127) mają w tym miejscu dodatkowy odstęp; PL nie. */
@media screen and (min-width: 1024px){
	.page-id-49 .slideText,
	.page-id-127 .slideText {
		padding-right: 70px;
	}
}

/* ---------------------------------------------------------------------------
   Baner: ruch i glebia

   Reguly stoja na koncu pliku swiadomie. Szerokosc .slider_inside_img ustawiaja
   zapytania medialne wyzej — gdyby te reguly trafily przed nie, kolejnosc zrodlowa
   zjadlaby czesc ustawien. Tutaj dokladamy wylacznie wlasciwosci animacji,
   wiec z niczym nie kolidują.

   Caly ruch siedzi w @media (prefers-reduced-motion: no-preference). Osoba, ktora
   w systemie poprosila o ograniczenie animacji, dostaje baner nieruchomy — dla
   czesci osob ruch na ekranie znaczy zawroty glowy albo mdlosci, a nie ozdobe.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference){

	/* Wejscie slajdu. Skrypt pokazuje slajd, zmieniajac display — a to samo w sobie
	   uruchamia animacje od nowa, wiec nie potrzeba do tego zadnej klasy. */
	@keyframes klucz-slajd-wejscie {
		from { opacity: 0; transform: translateY(14px); }
		to   { opacity: 1; transform: none; }
	}

	.slider .item {
		animation: klucz-slajd-wejscie 0.45s ease-out both;
	}

	/* Ilustracja wchodzi chwile pozniej niz napis — oko ma za czym powedrowac. */
	@keyframes klucz-ilustracja-wejscie {
		from { opacity: 0; transform: translateX(-22px) scale(0.94); }
		to   { opacity: 1; transform: none; }
	}

	.slider_inside_img {
		animation: klucz-ilustracja-wejscie 0.7s 0.12s ease-out both;
	}

	/* Ozdoby unosza sie leniwie. Roznica dlugosci cykli sprawia, ze nie ida rownym
	   krokiem — inaczej caly baner falowalby jak jeden blok. */
	@keyframes klucz-ozdoba-unos {
		from { transform: translateY(0); }
		to   { transform: translateY(-14px); }
	}

	.slider_decor_1,
	.slider_decor_2,
	.slider_decor_3,
	.slider_decor_4,
	.slider_decor_5,
	.slider_decor_6,
	.slider_decor_7 {
		animation: klucz-ozdoba-unos 6s ease-in-out infinite alternate;
	}

	.slider_decor_2 { animation-duration: 7.5s; animation-delay: 0.4s; }
	.slider_decor_3 { animation-duration: 8.5s; animation-delay: 1.1s; }
	.slider_decor_4 { animation-duration: 6.8s; animation-delay: 0.7s; }
	.slider_decor_5 { animation-duration: 9s;   animation-delay: 1.6s; }
	.slider_decor_6 { animation-duration: 7.2s; animation-delay: 0.2s; }
	.slider_decor_7 { animation-duration: 8s;   animation-delay: 1.3s; }

	/* Przycisk pod napisem. Uniesienie jest drobne, zeby nie przesuwac sasiadow. */
	.slideText-desc > .aktywuj-code {
		transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
	}

	.slideText-desc > .aktywuj-code:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	}
}

/* Cien pod ilustracja: buduje glebie i oddziela rysunek od gradientu.
   Filtr wybielajacy zostal stad usuniety razem z tym wyzej — zostawiony w JEDNYM
   z dwoch miejsc i tak wygrywal kolejnoscia, przez co caly rysunek byl bialym krazkiem. */
.slider_inside_img{
	filter: drop-shadow(2px 3px 6px rgba(51, 51, 51, 0.32));
}

/* Kartka pakietu bez zdjecia.

   Cena i wstazka sa pozycjonowane bezwzglednie wzgledem kartki i normalnie leza
   na zdjeciu. Kartka bez zdjecia wciagala nazwe pod nie i napisy nachodzily na
   siebie. Zdarza sie to przy nowym pakiecie, do ktorego ktos nie dodal jeszcze
   grafiki — a wtedy strona wyglada na zepsuta, choc jest tylko niekompletna.

   :has() wybiera kartke, w ktorej NIE MA ramki na zdjecie. Przegladarki bez
   obslugi :has() po prostu pomina te regule — kartka wroci do dawnego zachowania,
   nic sie nie wywroci. */
.package-container:not(:has(.image_crop)) > .package-title-container{
	margin-top: 42px;
}

/* Kody USSD czcionką o stałej szerokości.

   W czcionce proporcjonalnej „1" jest wąska, a „*" i „#" szerokie, więc *101*11*01#
   i *101*00*01# w sąsiednich kolumnach nie ustawiają się w pionie i gwiazdki zlewają
   się w plamę. Przy stałej szerokości każdy znak zajmuje tyle samo — kody układają
   się znak w znak i różnicę między aktywacją a dezaktywacją widać na pierwszy rzut oka.

   Kolumna pierwsza zostaje przy zwykłej czcionce: to nazwa usługi, czyli proza. */
#ussd-codes table td:not(:first-child){
	font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
	/* Krój o stałej szerokości bywa optycznie większy przy tym samym rozmiarze. */
	font-size: 0.95em;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* Wyrównanie rysunku względem pionowej kreski.

   Napis jest odsunięty od kreski o 45 px (padding-left w .slider_text_box), a rysunek
   przylegał do niej bezpośrednio. Cała para wyglądała przez to na przesuniętą w lewo,
   mimo że blok jako całość stał na środku. Ten sam odstęp po drugiej stronie ustawia
   kreskę pośrodku odstępu, a nie tuż przy rysunku. */
@media screen and (min-width: 768px){
	.slideText-part-one .slider_inside_img {
		margin-right: 45px;
	}
}

/* ---------------------------------------------------------------------------
   Zatrzymanie ruchu na banerze

   Rysunki slajdów są wstawiane wprost w stronę (patrz Klucz_Slajdy::ilustracja),
   więc ich animacje da się wyłączyć z zewnątrz — klasą na elemencie html.
   Robią to dwie rzeczy: tryb wysokiego kontrastu i przycisk „Zatrzymaj ruch”
   w pasku dostępności.

   W kontraście ruch znika bez pytania: ten tryb włączają osoby, które i tak walczą
   z czytelnością, a poruszający się rysunek tylko im przeszkadza.

   `!important` jest tu na miejscu — reguła ma wygrać z animacją zapisaną w samym
   pliku rysunku, a to jedyny sposób, żeby użytkownik miał ostatnie słowo.
   --------------------------------------------------------------------------- */

html.klucz-kontrast .slider_inside_img *,
html.klucz-bez-ruchu .slider_inside_img *{
	animation: none !important;
}

/* Elementy, które w spoczynku są przezroczyste, bo pokazuje je dopiero animacja.
   Po jej wyłączeniu muszą być widoczne — bez kropek rysunek gubi sens połączenia,
   a bez łuku i karty slajd MNP przestaje cokolwiek opowiadać. */
html.klucz-kontrast .ua-kropki,
html.klucz-bez-ruchu .ua-kropki,
html.klucz-kontrast .mnp-luk,
html.klucz-bez-ruchu .mnp-luk,
html.klucz-kontrast .mnp-karta,
html.klucz-bez-ruchu .mnp-karta,
html.klucz-kontrast .st-karta,
html.klucz-bez-ruchu .st-karta{
	opacity: 1 !important;
}

/* Rysunki slajdów o 20% większe.

   Powiększamy CAŁY rysunek, a nie samo koło w środku pliku: koło ma promień 92
   w płótnie 200×200, więc rozciągnięte w środku wyszłoby poza krawędź i zostałoby
   ucięte. Skala na zewnątrz powiększa koło razem z zawartością i nic nie przycina. */
.slider_inside_img{
	width: 224px;
	/* Rysunek jest teraz wstawiony jako <svg> z atrybutem height="200". Sama szerokosc
	   rosla, a wysokosc zostawala przy 200 px — i to ona przycinala kolo, bo SVG
	   wpisuje sie w mniejszy z dwoch wymiarow. `auto` oddaje wysokosc proporcjom. */
	height: auto;
}

@media screen and (min-width: 1024px){.slider_inside_img{
		width: 290px;
	}
}

/* Zamykanie okienka „Szczegóły”.

   PRZYCZYNA SKOKU: max-width było ustawione WYŁĄCZNIE na .active (68% i 60% na
   szerszych ekranach). Okienko otwierało się więc zwężając, a przy zamykaniu wracało
   do 90% — czyli rozszerzało się w trakcie odjeżdżania. Ten sam ograniczik w stanie
   spoczynku zostawia do animowania już tylko przesunięcie i przezroczystość.

   Czasy też były rozjechane: 0,7 s na ruch przy 0,2 s na zanikanie. Okienko znikało,
   zanim dojechało, co przy zmianie szerokości czytało się jak szarpnięcie. */

@media screen and (min-width: 1024px){
	.slider .more-overlay {
		max-width: 68%;
	}
}

@media screen and (min-width: 1360px){
}

/* Wjazd gradientu przy wejściu na stronę.

   Tło startuje powiększone i przesunięte, po czym dojeżdża dokładnie do stanu,
   w jakim stoi dzisiaj: background-size 100% i pozycja 0% 0%. Dlatego animowane są
   OBIE właściwości — gdyby wracał tylko position, na końcu zostałoby tło większe
   niż trzeba i kadr różniłby się od obecnego.

   Jednorazowo, nie w pętli: to ma być wejście, nie falujące tło pod czytanym napisem.
   `both` zatrzymuje animację w klatce końcowej.

   1,2 s z krzywą wyhamowującą — ruch pod tekstem męczy szybciej niż ruch rysunku,
   więc jest krótszy i spokojniejszy niż animacje w kołach. */

@keyframes klucz-gradient-wjazd{
	from {
		background-size: 200% 200%;
		background-position: 100% 0%;
	}
	to {
		background-size: 100% 100%;
		background-position: 0% 0%;
	}
}

/* Ten sam wyłącznik co przy rysunkach: tryb kontrastu i przycisk „Zatrzymaj ruch”. */
html.klucz-kontrast .slider .item .slideText,
html.klucz-bez-ruchu .slider .item .slideText{
	animation: none !important;
}

/* Rysunek z mapą był mniejszy od pozostałych.

   Klasa .ua_map ma padding-right: 30px, a w całym arkuszu obowiązuje
   box-sizing: border-box — padding odejmuje się więc od zadanej szerokości
   i z 290 px zostawało 260 na sam rysunek.

   Odstęp od napisu daje teraz wspólny margines wszystkich trzech rysunków,
   więc ten padding nie jest już do niczego potrzebny. */
.slider_inside_img.ua_map{
	padding-right: 0;
}

/* Obracający się kąt gradientu.

   Przeglądarka nie animuje gradientu z jednego kąta na drugi — background-image nie
   jest własnością, którą da się płynnie przeliczyć. Obejście: kąt wyprowadzony
   do ZAREJESTROWANEJ zmiennej. @property nadaje jej typ <angle>, dzięki czemu
   przestaje być zwykłym tekstem i zaczyna podlegać animacji jak każda liczba.

   Przeglądarka bez obsługi @property uzna var() za wartość nieprawidłową i cofnie
   się do wcześniejszej deklaracji tła — gradient stanie nieruchomo pod kątem 323°,
   czyli tak, jak wyglądał zawsze. */

@property --klucz-kat-gradientu{
	syntax: "<angle>";
	inherits: false;
	/* Z lewej na prawa (90 stopni). Jasniejsza czerwien zaczyna sie przy zdjeciu
	   i ciemnieje w strone napisu, wiec tekst ma pod soba najciemniejsze tlo —
	   dokladnie tam, gdzie potrzebuje najwiekszego kontrastu. */
	initial-value: 90deg;
}

@keyframes klucz-gradient-wjazd{from{
		--klucz-kat-gradientu: 66deg;
		background-size: 200% 200%;
		background-position: 100% 0%;
	}

to{
		--klucz-kat-gradientu: 90deg;
		background-size: 100% 100%;
		background-position: 0% 0%;
	}
}

/* Wjazd gradientu tylko przy wejściu na stronę, nie przy każdym slajdzie.

   Każdy slajd ma własne tło, a skrypt pokazuje slajdy przez display — a to znaczy,
   że animacja rusza od nowa przy KAŻDYM pokazaniu. Zawężenie do pierwszego slajdu
   sprawia, że przy przełączaniu na drugi i trzeci nic się nie dzieje.

   Zostaje jeden przypadek: powrót na pierwszy slajd odtworzy wjazd jeszcze raz.
   Żeby to wyciąć, animacja musiałaby być podpięta pod klasę zdejmowaną skryptem
   po pierwszym przebiegu — do zrobienia przy okazji zaglądania do pages.js. */
.slider .item:not(:first-child) .slideText{
	animation: none;
}

/* Wjazd gradientu wyłącznie w chwili wejścia na stronę.

   Zastępuje wcześniejsze zawężenie do pierwszego slajdu, które nie wystarczało:
   powrót na pierwszy slajd odtwarzał animację, bo przeglądarka widzi wtedy po prostu
   element pojawiający się na nowo.

   Klasę `klucz-wjazd` dokłada skrypt przy starcie i zdejmuje po 1,5 s (patrz pages.js).
   Po jej zniknięciu nie ma już czego uruchomić — przełączanie slajdów w obie strony
   zostawia tło nieruchome. */
.slider .item .slideText{
	animation: none;
}

/* Zdjęcie zamiast rysunku na slajdzie.

   Rysunki mają kremowe koło narysowane w środku pliku; zdjęcie jest prostokątne,
   więc koło trzeba zrobić z zewnątrz. Obramowanie w tej samej barwie co koło
   utrzymuje spójność z pozostałymi slajdami.

   object-fit: cover kadruje zdjęcie do kwadratu bez rozciągania — inaczej twarze
   wychodziłyby spłaszczone. */
img.slider_inside_img{
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	border: 9px solid #FBF3E7;
	background: #FBF3E7;
}

/* Zdjęcie na lewej krawędzi slajdu MNP — obok koła, nie zamiast niego.

   Pas na całą wysokość banera, wtopiony w tło miękkim przejściem po prawej stronie.
   Bez tego przejścia zdjęcie wyglądałoby jak naklejone: ostra pionowa krawędź
   w miejscu, gdzie zaczyna się czerwony gradient.

   Tylko slajd pierwszy — rozpoznawany po klasie tła, którą ma w znaczniku. */
.slider .item.backgraund-trd::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	/* Szerzej, zeby pas dochodzil pod kolo z rysunkiem — koniec zdjecia ma sie
	   gubic za nim, a nie urywac w polowie czerwonego tla. */
	/* Sama wartosc procentowa zawodzila na wezszych ekranach: 42 procent z mniejszej
	   szerokosci to za malo, zeby dojsc pod kolo, wiec zdjecie urywalo sie w powietrzu.
	   clamp trzyma dolna granice w pikselach — pas zawsze dochodzi pod rysunek,
	   a na bardzo szerokich ekranach nie rozlewa sie bez konca. */
	width: clamp(340px, 46%, 760px);
	/* Kadr trzymany przy GORNEJ krawedzi. Zdjecie jest poziome, a pas wysoki, wiec
	   cover przycina je w pionie — przy srodkowaniu ucinalo czubek glowy. */
	background: url("../img/slider/mnp-foto.jpg") left top / cover no-repeat;
	-webkit-mask-image: linear-gradient(to right, #000 68%, transparent 100%);
	mask-image: linear-gradient(to right, #000 68%, transparent 100%);
	pointer-events: none;
	/* Nad gradientem slajdu. Przy z-index 1 zdjecie chowalo sie POD nieprzezroczystym
	   tlem .slideText i nie bylo go w ogole widac. */
	z-index: 3;
}

@media screen and (max-width: 767px){
	/* Na wąskim ekranie pas zjadałby połowę banera i wchodził pod napis. */
	.slider .item.backgraund-trd::before{
		display: none;
	}
}

/* Kolo z rysunkiem i napis nad zdjeciem — zdjecie ma pod nie ZAJECHAC, a nie je
   przykryc. Warstwa nadana czesci z trescia, a nie calemu .slideText: tamto
   przykryloby ozdoby tla, ktore stoja na tej samej wysokosci. */
.slider .item.backgraund-trd .slideText-part-one{
	position: relative;
	z-index: 4;
}

/* Treść slajdu MNP przesunięta w prawo, żeby zrobić miejsce zdjęciu.

   Odstęp z lewej na kontenerze, a nie margines na samej treści: kontener wyśrodkowuje
   swoją zawartość, więc powiększenie odstępu po jednej stronie przesuwa ją w drugą
   i nie trzeba nic odejmować od szerokości.

   Tylko od 768 px, bo poniżej zdjęcie i tak jest schowane i przesuwanie treści
   zostawiałoby pustkę przy lewej krawędzi. */
@media screen and (min-width: 768px){
	.slider .item.backgraund-trd .slideText {
		/* Odstep wyliczony z TEJ SAMEJ miary co szerokosc zdjecia, a nie dobrany na oko.
		   Zdjecie ma clamp(340px, 46%, 760px) i gasnie od 68 procent swojej szerokosci,
		   wiec miejsce faktycznie przez nie zajete to mniej wiecej dwie trzecie tego.
		   Dzieki temu tresc zaczyna sie tam, gdzie zdjecie przestaje byc gestе,
		   a wolna przestrzen dzieli sie rowno przy kazdej szerokosci ekranu. */
		padding-left: clamp(230px, 31%, 515px);
	}

	/* Napis „Szczegóły” jest pozycjonowany od środka banera, więc trzeba go przesunąć
	   osobno — inaczej zostałby pod zdjęciem, z dala od treści, do której należy. */
	.slider .item.backgraund-trd .more-btn {
		/* Srodek tego, co zostalo po zdjeciu: polowa banera plus polowa odstepu. */
		left: calc(50% + clamp(230px, 31%, 515px) / 2);
	}
}


/* Okienko „Szczegóły” nad wszystkim, co jest na slajdzie.

   Miało warstwę 3, a rysunek z napisem dostał 4, gdy trzeba było podnieść go nad
   zdjęcie — i od tej pory koło przebijało przez otwarte okienko. Okienko jest
   najwyższą warstwą slajdu, więc dostaje wartość wyższą niż cokolwiek pod nim. */
.slider .more-overlay{
	z-index: 6;
}

/* Delikatny promień przechodzący z lewej na prawo.

   Wąska smuga rozjaśnienia sunąca w kółko przez baner. Krycie 10% i szerokie,
   miękkie krawędzie — smuga ma być wyczuwalna kątem oka, a nie czytana jako element.
   Dziewięć sekund na przejście, bo szybszy ruch pod tekstem męczy.

   Delikatność ma tu drugie dno: smuga przechodzi także pod białym napisem, więc
   każdy procent rozjaśnienia obniża jego kontrast. Przy 10% spadek jest poniżej
   progu, w którym tekst przestawałby spełniać wymagania czytelności. */
.slideText::after{
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		transparent 38%,
		rgba(255, 255, 255, 0.1) 50%,
		transparent 62%
	);
	background-size: 260% 100%;
	background-repeat: no-repeat;
	animation: klucz-promien 9s ease-in-out infinite;
}

@keyframes klucz-promien{from{ background-position: -60% 0; }

to{ background-position: 160% 0; }
}
