body {
  margin: 0; /* Usuń domyślne marginesy */
  background-color: #f4f4f4; /* Tło strony */
  height: 100vh; /* Wysokość ekranu */
  position: relative;
}

/* Usunięto media query wymuszające kolumnę, flex-wrap zapewnia responsywność */

/* Kontener dla całego cennika */
.cennik-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%; /* Szerokość kontenera */
  max-width: 900px; /* Maksymalna szerokość */
  text-align: center; /* Wyrównanie tekstu */
  z-index: 10; /* Ustawienie na wierzchu */
}

/* Stylizacja dla nagłówka cennika */
.cennik-header h1 {
  font-size: 2.5rem;
  color: #333;
  font-weight: bold;
  margin-bottom: 5px; /* Odstęp od sekcji pricing-tabs */
}

/* Kontener dla zakładek i tabelki */
.pricing-box {
  background-color: rgba(255, 255, 255, 0.95); /* Tło z lekką przezroczystością */
  border-radius: 15px; /* Zaokrąglone rogi */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Lekki cień */
  padding: 20px; /* Wewnętrzne odstępy */
}

/* Stylizacja dla sekcji pricing-tabs */
.pricing-section {
  text-align: center;
}

.tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tab-button {
  padding: 10px 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.8); /* Przezroczystość */
  cursor: pointer;
  border-radius: 25px; /* Zaokrąglone rogi */
  font-weight: bold;
  color: #333;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.tab-button.active {
  background-color: #2e8bff; /* Aktywny kolor */
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Lekki cień */
}

.tab-content {
  display: none;
  padding: 20px;
  padding-bottom: 0px;
}

.tab-content.active {
  display: block;
}

/* Stylizacja dla nagłówków h3 w sekcji Karnety Tenis */
.tab-content h3:nth-of-type(2) {
  margin-top: 20px; /* Dodaje odstęp nad sekcją Karnety Tenis */
}

/* Stylizacja dla nagłówków h3 w sekcji Sprzęt */
.tab-content h3 {
  font-size: 1.5rem; /* Rozmiar czcionki */
  color: #2e8bff; /* Kolor tekstu */
  text-align: center; /* Wyrównanie do środka */
  margin-top: 20px; /* Odstęp od góry */
  margin-bottom: 15px; /* Odstęp od dołu */
  font-weight: bold; /* Pogrubienie tekstu */
}

h1 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 20px; /* Odstęp od sekcji pricing-tabs */
  color: #333;
  font-weight: bold;
}

h2 {
  margin-bottom: 20px; /* Odstęp między nazwą tabelki a tabelą */
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  text-align: center; /* Wyrównanie tekstu na środku */
}

table {
  width: 100%;
  border-collapse: collapse;
  /* margin-bottom: 20px; */
  background-color: rgba(255, 255, 255, 0.8); /* Przezroczystość */
  border-radius: 10px; /* Zaokrąglone rogi */
  overflow: hidden; /* Ukrycie ostrych krawędzi */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Lekki cień */
}

table th, table td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px;
  text-align: center;
  font-size: 1rem;
}

table th {
  background-color: #2e8bff; /* Kolor nagłówka */
  color: #fff;
  font-weight: bold;
}

table tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.05); /* Kolor dla parzystych wierszy */
}

table tr:hover {
  background-color: rgba(46, 139, 255, 0.1); /* Efekt hover */
}

footer {
  text-align: center;
  margin-top: 20px;
  font-size: 0.9rem;
  color: #555;
}

/* Stylizacja dla przycisków */
.action-button {
  text-decoration: none; /* Usuwa podkreślenie */
  display: inline-block; /* Ustawia przycisk jako blok inline */
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  background-color: #2e8bff;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.action-button:hover {
  background-color: #1c6ed5;
  transform: scale(1.05);
}

.action-button:active {
  transform: scale(0.95);
}

/* Stylizacja dla informacji o kartach */
.info {
  margin-top: 15px;
  font-size: 0.9rem;
  color: #555;
  text-align: center;
  line-height: 1.5;
}

/* Stylizacja dla przycisków sub-tabs w sekcji Sprzęt */
.sub-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sub-tab-button {
  padding: 10px 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  border-radius: 25px;
  font-weight: bold;
  color: #333;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.sub-tab-button.active {
  background-color: #2e8bff;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.sub-tab-content {
  display: none;
}

.sub-tab-content.active {
  display: block;
}

/* MEDIA QUERY: Responsywność dla szerokości 800px i mniej */
@media (max-width: 800px) {
  .cennik-container {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    padding: 5px 16px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    /* min-height: 100vh; */
    margin-top: 70px;
  }

  .pricing-box {
    padding: 10px;
    border-radius: 8px;
  }

  .tabs, .sub-tabs {
     flex-direction: row;
     gap: 5px;
     justify-content: center;
     align-items: center;
  }

  .tab-button, .sub-tab-button {
    padding: 12px 8px;
    font-size: 1rem;
    border-radius: 18px;
    max-width: 100px;
  }

  h1 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  h2 {
    font-size: 1.1rem;
    margin-bottom: 10px;
  }

  .tab-content h3 {
    font-size: 1.1rem;
    margin-top: 10px;
    margin-bottom: 8px;
  }

  table th, table td {
    padding: 6px;
    font-size: 0.9rem;
  }

  table {
    font-size: 0.9rem;
    border-radius: 5px;
    display: block;
    width: 100%;
    overflow-x: auto;
    max-width: 100vw;
  }

  .action-button {
    padding: 8px 12px;
    font-size: 0.95rem;
    border-radius: 18px;
    margin-top: 10px;
  }

  .info {
    font-size: 0.85rem;
    margin-top: 8px;
  }
}