.wrapper {
  position: fixed;
  bottom: 30px;
  left: 30px;
  max-width: 400px;
  background: #180f20;
  padding: 45px 35px 0px;
  border-radius: 25px;
  border: 1px solid var(--tj-theme-primary);
  text-align: center;
  z-index: 9999;
  transition: transform 0.5s ease, opacity 0.5s ease; /* Dodanie płynnej animacji */
}

.wrapper.hide {
  transform: translateX(-150%); /* Przesunięcie w lewo poza ekran */
  opacity: 0; /* Stopniowe zanikanie */
}

.wrapper img{
  max-width: 90px;
}
.content{
  margin-top: 10px;
}
.content p{
  color: #fff;
  font-size: 15px;
}
.content .buttons{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* Umożliwia zawijanie przy mniejszej szerokości */
}
.buttons .item{
  margin: 0 10px;
}
.buttons a{
  color: #8750f7;
  text-decoration: none;
}

/* Styl dla mniejszych ekranów */
@media (max-width: 768px) {
  .wrapper {
    max-width: 90%; /* Dopasowanie szerokości */
    left: 5%; /* Wycentrowanie na mniejszych ekranach */
    bottom: 20px; /* Zmniejszenie dolnej odległości */
    padding: 35px 20px 0px; /* Dostosowanie paddingu */
  }

  .wrapper img {
    max-width: 70px; /* Zmniejszenie obrazka */
  }

  .content p {
    font-size: 14px; /* Mniejszy rozmiar tekstu */
  }

  .buttons .item {
    margin: 5px; /* Zmniejszenie odstępów między przyciskami */
  }
}

/* Styl dla bardzo małych ekranów (np. telefony) */
@media (max-width: 480px) {
  .wrapper {
    max-width: 90%; /* Cała szerokość ekranu */
    left: 5%; /* Wycentrowanie na mniejszych ekranach */
    border-radius: 15px; /* Mniejsze zaokrąglenia */
  }

  .content p {
    font-size: 13px; /* Jeszcze mniejszy tekst */
  }

  .buttons {
    flex-direction: column; /* Układ pionowy przycisków */
  }

  .buttons .item {
    margin: 5px 0; /* Mniejszy odstęp między elementami w pionie */
  }
}