/* RESETOWANIE MARGINESÓW I PADDINGU */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* STYL PODSTAWOWY */
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

#app-container {
  display: flex;
  width: 100%;
}

/* SIDEBAR */
#sidebar {
  width: 250px;
  background-color: #3a3a3a; /* Ciemny szary kolor tła */
  color: white;
  padding: 15px; /* Zwiększono padding dla lepszego wyglądu */
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden; /* Disable horizontal scrolling */
  display: flex;
  flex-direction: column;
  position: relative;
}

#sidebar h3 {
  margin-bottom: 20px;
  text-align: center;
  color: #b3b3b3; /* Jasnoszary kolor zgodny z przyciskami */
}

#sidebar ul {
  list-style-type: none;
  padding: 0;
}

#sidebar ul li {
  margin-bottom: 10px;
}

/* PRZYCISKI KATEGORII (SZARE) */
.tab-button {
  width: 100%;
  padding: 10px;
  background-color: #4a4a4a; /* Szary */
  border: 1px solid #5a5a5a; /* Ciemniejsza szara ramka */
  color: white; /* Biały kolor tekstu */
  text-transform: uppercase; /* Drukowane litery */
  text-align: center; /* Wyśrodkowanie tekstu */
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s, border-color 0.3s;
}
.tab-button:hover {
  background-color: #5a5a5a; /* Slightly darker gray for hover */
}
.tab-button.active {
  background-color: #2e2e2e; /* Stonowany kolor dla aktywnego przycisku */
  color: white; /* Biały kolor tekstu dla aktywnego przycisku */
  border: 1px solid #5a5a5a; /* Ciemniejsza szara ramka */
}

/* PODGLĄD WYBRANEGO MODELU */
#chosen-product-summary {
  display: none; 
  border: 1px solid #5a5a5a; /* Ciemniejsza szara ramka */
}
.chosen-product-summary {
  margin-top: 20px;
  padding: 10px;
  background-color: #2e2e2e; 
  border-radius: 4px;
}

.chosen-product-summary h4 {
  margin-bottom: 10px;
  color: #fff;
  font-size: 16px;
}
.chosen-product-summary img {
  max-width: 100%;
  border-radius: 4px;
}

/* GŁÓWNA ZAWARTOŚĆ */
#main-content {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
  position: relative;
  padding-top: 0; /* Upewnij się, że nie ma nadmiarowego odstępu */
  margin-top: 0; /* Usuń niepotrzebny margines */
  overflow-x: hidden; /* Prevent horizontal scrolling in main content */
}

/* KROKI */
.step {
  display: none;
}
.step.active {
  display: block;
}

/* Ładna ramka i wyśrodkowanie nagłówka kroku */
.step h2 {
  text-align: center;
  background-color: #f0f0f0;
  border: 2px solid #ccc;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 20px;
}

/* Kontener dla zawartości kroku */
.step-content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Formularz parametrów */
.parameters-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px; /* Zmniejszono odstęp między elementami */
}

.parameters-form label {
  display: block;
  margin: 10px 0 5px; /* Zmniejszono odstępy między etykietami */
  font-weight: bold;
  font-size: 16px; /* Ensure consistent font size */
  margin-bottom: 3px; /* Zmniejszono odstęp między etykietą a polem */
}

.parameters-form input[type="number"], 
.parameters-form input[type="text"], 
.parameters-form input[type="radio"],
.parameters-form select {
  margin-bottom: 10px; /* Zmniejszono odstępy między polami */
  box-sizing: border-box;
  width: 135px;
  height: auto;
  padding: 8px;
  margin-bottom: 4px; /* Zmniejszono odstęp między polami */
  border: 1px solid #ccc;
  border-radius: 4px;
  line-height: 1.2; /* Zmniejszono interlinię w polach */
}

.radio-group {
  display: flex; /* Ustawienie opcji w jednej linii */
  gap: 10px; /* Odstęp między opcjami */
  align-items: flex-start; /* Wyrównanie do góry */
}

.radio-group label {
  display: flex;
  align-items: flex-start; /* Wyrównanie tekstu do góry */
  cursor: pointer;
  gap: 5px; /* Odstęp między radioboxem a tekstem */
  font-weight: normal; /* Usuń pogrubienie */
  position: relative; /* Dodaj pozycjonowanie względne */
  top: 0; /* Podnieś napisy o 0px */
}

.radio-group input[type="radio"] {
  appearance: none; /* Usuń domyślny wygląd */
  -webkit-appearance: none; /* Dla WebKit */
  -moz-appearance: none; /* Dla Gecko */
  width: 20px; /* Rozmiar kwadratu */
  height: 20px;
  background-color: #fff; /* Białe tło, takie jak pola wejściowe */
  border: 2px solid #ccc; /* Szare obramowanie */
  border-radius: 2px; /* Lekko zaokrąglone rogi */
  cursor: pointer;
  display: inline-block; /* Ustawienie jako blok w linii */
  position: relative;
  transition: background-color 0.3s ease, border-color 0.3s ease; /* Dodanie płynnych przejść */
  margin-top: -2px; /* Podnieś kwadraciki o 2px */
}

.radio-group input[type="radio"]:hover {
  background-color: #f0f0f0; /* Trochę ciemniejsze wnętrze podczas najechania */
}

.radio-group input[type="radio"]:checked {
  background-color: #000; /* Czarny środek po zaznaczeniu */
  border-color: #000; /* Czarny kolor obramowania po zaznaczeniu */
}

.radio-group input[type="radio"]:checked::after {
  content: '✔'; /* Symbol ptaszka */
  color: #fff; /* Biały ptaszek */
  font-size: 16px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* INNE STYLOWANIE FORMULARZY I PRZYCISKÓW */
label {
  display: block;
  margin-top: 15px;
  font-weight: bold;
}

input[type="text"]:not(.parameters-form input[type="text"]),
select:not(.f-form select) {
  padding: 8px;
  margin-top: 5px;
  margin-bottom: 15px;
  box-sizing: border-box;
}

button {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  transition: background-color 0.3s;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* WSTECZ */
.btn-back {
  background-color: #6c757d; 
  color: #fff;
}
.btn-back:hover:not(:disabled) {
  background-color: #5a6268;
}

/* DALEJ */
.btn-next {
  background-color: #9DCC45; /* Zielony */
  color: #fff;
}
.btn-next:hover:not(:disabled) {
  background-color: #86B03A; /* Slightly darker green for hover */
}

/* "Oblicz parametry" */
.btn-calc {
  background-color: #17a2b8; 
  color: #fff;
  margin-bottom: 15px;
}
.btn-calc:hover:not(:disabled) {
  background-color: #138496; 
}

/* STOPKA KROKU */
.step-footer {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  margin-top: 30px;
  padding-top: 10px;
  border-top: 1px solid #ddd;
}

/* LISTA PRODUKTÓW */
#product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center; /* Wyjustowanie do środka */
}

/* KAFELKI PRODUKTÓW */
.product-item {
  width: calc(33.333% - 20px);
  background-color: #e9ecef;
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s, border 0.3s;
}
.product-item:hover {
  background-color: #ced4da;
}
.product-item.selected {
  border: 2px solid #007bff;
  background-color: #d1ecf1;
}
.product-item.disabled {
  opacity: 0.5;
  position: relative;
  pointer-events: none;
}
.product-item img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.product-item .coming-soon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  border-radius: 4px;
  font-size: 16px;
  text-align: center;
}

/* LISTA PUNKTOWANA W OPISACH PRODUKTÓW */
.product-item ul {
  list-style-type: disc; /* Punkty w liście */
  margin: 10px 0 0 20px; /* Wcięcie dla listy */
  padding: 0; /* Usuń domyślny padding */
  text-align: left; /* Wyrównanie tekstu do lewej */
}

.product-item ul li {
  margin-bottom: 5px; /* Odstęp między punktami listy */
  line-height: 1.4; /* Popraw odstępy między wierszami */
}

/* RESPONSYWNOŚĆ */
@media (max-width: 1200px) {
  .product-item {
    width: calc(50% - 20px);
  }
}

@media (max-width: 768px) {
  #sidebar {
    width: 200px;
  }
  .product-item {
    width: 100%;
  }
}

@media (max-width: 480px) {
  #sidebar {
    display: none;
  }
  #main-content {
    padding: 20px;
  }
}

.step-indicator {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.step-indicator div {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-bottom: 3px solid #ddd;
  font-weight: bold;
  color: #6c757d;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}

.step-indicator div.active {
  color: #007bff;
  border-color: #007bff;
}

.step-indicator div:hover:not(.active) {
  color: #0056b3;
}

/* Kontener dla kroków */
.step-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}

/* Sekcje w kroku 2 */
.section {
  flex: 1;
  padding: 15px;
  position: relative;
}

.section h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px; /* Odstęp poniżej nagłówka */
  color: #333; /* Kolor tekstu */
  text-transform: uppercase; /* Tekst wielkimi literami */
  text-align: center; /* Wyśrodkowanie tekstu */
  border-bottom: 1px solid #ddd; /* Linia pod nagłówkiem */
  padding-bottom: 5px; /* Odstęp wewnętrzny dla estetyki */
  display: block;
  width: 90%; /* Ustawia długość linii na całą szerokość sekcji */
}

/* Linie między sekcjami */
.section:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(10% + 50px); /* Dodaj 50px do przesunięcia w dół */
  bottom: 10%; /* Zachowaj obecny margines na dole */
  right: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, #ccc, transparent);
  pointer-events: none;
  z-index: 1; /* Ustaw niski indeks warstwy */
}

/* Linie pionowe */
.vertical-lines {
  position: absolute;
  left: 0; /* Adjust the horizontal position */
  top: 0; /* Adjust the vertical position */
  display: flex;
  flex-direction: column;
  gap: 14px; /* Adjust the gap between lines */
}

.vertical-lines .line {
  width: 2px; /* Adjust the width of the lines */
  background-color: #000;
}

.vertical-lines .line1 {
  margin-top: 62px; /* Adjust the vertical position of the first line */
  height: 60px; /* Adjust the height of the first line */
}

.vertical-lines .line2 {
  margin-top: 0px; /* Adjust the vertical position of the second line */
  height: 70px; /* Adjust the height of the second line */
}

.vertical-lines .line3 {
  margin-top: 0px; /* Adjust the vertical position of the third line */
  height: 120px; /* Adjust the height of the third line */
}

.vertical-lines .line4 {
  margin-top: 0px; /* Adjust the vertical position of the fourth line */
  height: 60px; /* Adjust the height of the fourth line */
}

/* Formularz w pierwszej sekcji */
.parameters-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px; /* Zmniejszono odstęp między elementami */
}

.parameters-form label {
  margin-bottom: 3px; /* Zmniejszono odstęp między etykietą a polem */
  font-weight: bold;
}

.parameters-form input[type="number"],
.parameters-form select {
  font-size: 16px;
  width: 135px;
  height: auto;
  padding: 8px;
  margin-bottom: 4px; /* Zmniejszono odstęp między polami */
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  line-height: 1.2; /* Zmniejszono interlinię w polach */
  font-weight: bold;
}

.width-height-container {
  display: flex; /* Ustawia pola obok siebie */
  gap: 35px; /* Odstęp między polami */
  align-items: center; /* Wyrównanie w pionie */
  min-width: 200px; /* Ensure the container does not shrink smaller than the text */
}

.width-height-container label {
  display: flex;
  flex-direction: column; /* Ustaw elementy w kolumnie */
  font-weight: bold; /* Główna etykieta pozostaje pogrubiona */
}

.width-height-container .suggestion {
  font-size: 14px; /* Większy rozmiar tekstu */
  font-weight: normal; /* Cały tekst poza liczbą nie jest pogrubiony */
  color: #666; /* Jasnoszary kolor */
  margin-bottom: 1px; /* 1px odstępu od pola tekstowego */
  line-height: 1.2; /* Poprawiona wysokość linii */
  white-space: nowrap; /* Ensure the text does not wrap */
  flex-shrink: 0; /* Prevent the container from shrinking */
}

.width-height-container .suggestion .bold-number {
  font-size: 16px; /* Większy rozmiar tekstu */
  font-weight: bold; /* Liczba jest pogrubiona */
  color: #000; /* Opcjonalnie ciemniejszy kolor dla liczby */
}

.width-height-container input {
  font-size: 16px;
  padding: 5px; /* Wewnętrzne odstępy pola tekstowego */
  width: 100px; /* Szerokość pola */
  box-sizing: border-box; /* Uwzględnia padding w szerokości */
  font-weight: bold; 
}

/* Styl dla radioboxów */
.radio-group {
  display: flex; /* Ustawienie opcji w jednej linii */
  gap: 10px; /* Odstęp między opcjami */
  align-items: flex-start; /* Wyrównanie do góry */
}

.radio-group label {
  display: flex;
  align-items: flex-start; /* Wyrównanie tekstu do góry */
  cursor: pointer;
  gap: 5px; /* Odstęp między radioboxem a tekstem */
  font-weight: normal; /* Usuń pogrubienie */
  position: relative; /* Dodaj pozycjonowanie względne */
  top: 0; /* Podnieś napisy o 0px */
}

.radio-group input[type="radio"] {
  appearance: none; /* Usuń domyślny wygląd */
  -webkit-appearance: none; /* Dla WebKit */
  -moz-appearance: none; /* Dla Gecko */
  width: 20px; /* Rozmiar kwadratu */
  height: 20px;
  background-color: #fff; /* Białe tło, takie jak pola wejściowe */
  border: 2px solid #ccc; /* Szare obramowanie */
  border-radius: 2px; /* Lekko zaokrąglone rogi */
  cursor: pointer;
  display: inline-block; /* Ustawienie jako blok w linii */
  position: relative;
  transition: background-color 0.3s ease, border-color 0.3s ease; /* Dodanie płynnych przejść */
  margin-top: -2px; /* Podnieś kwadraciki o 2px */
}

.radio-group input[type="radio"]:hover {
  background-color: #f0f0f0; /* Trochę ciemniejsze wnętrze podczas najechania */
}

.radio-group input[type="radio"]:checked {
  background-color: #000; /* Czarny środek po zaznaczeniu */
  border-color: #000; /* Czarny kolor obramowania po zaznaczeniu */
}

.radio-group input[type="radio"]:checked::after {
  content: '✔'; /* Symbol ptaszka */
  color: #fff; /* Biały ptaszek */
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Nagłówki sekcji w kroku 2 */
.section h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px; /* Odstęp poniżej nagłówka */
  color: #333; /* Kolor tekstu */
  text-transform: uppercase; /* Tekst wielkimi literami */
  text-align: center; /* Wyśrodkowanie tekstu */
  border-bottom: 1px solid #ddd; /* Linia pod nagłówkiem */
  padding-bottom: 5px; /* Odstęp wewnętrzny dla estetyki */
  display: block;
  width: 90%; /* Ustawia długość linii na całą szerokość sekcji */
}

#main-content {
  padding-top: 0; /* Upewnij się, że nie ma nadmiarowego odstępu */
  margin-top: 0; /* Usuń niepotrzebny margines */
}

/* Usuń stylizację dla ikon "i" */
.info-icon {
  display: none;
}

/* Styl dla położenia ikony "i" */
.width-height-container label {
  display: flex;
  flex-direction: column;
  font-weight: bold; /* Nagłówki pozostają pogrubione */
  position: relative;
}

/* Przycisk kategorii */
#toggle-categories {
  width: 100%;
  padding: 10px;
  background-color: #4a4a4a; /* Szary kolor */
  border: 1px solid #5a5a5a; /* Ciemniejsza szara ramka */
  color: white; /* Biały kolor tekstu */
  text-transform: uppercase; /* Drukowane litery */
  text-align: center; /* Wyśrodkowanie tekstu */
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s, border-color 0.3s;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* Add gap between text and arrow */
}

#toggle-categories .arrow {
  transform: rotate(180deg); /* Ensure the arrow points upwards initially */
}

#toggle-categories:hover {
  background-color: #5a5a5a; /* Slightly darker gray for hover */
}

#categories-container {
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out, margin 0.3s ease-out;
  max-height: 500px; /* Ustawienie maksymalnej wysokości dla rozwiniętego menu */
}

#categories-container.collapsed {
  max-height: 0;
  padding: 0;
  margin: 0;
}

#categories-container.collapsed + #toggle-categories .arrow {
  transform: rotate(0deg); /* Strzałka skierowana w dół */
}

#categories-container:not(.collapsed) + #toggle-categories .arrow {
  transform: rotate(180deg); /* Strzałka skierowana w górę */
}

/* Logo w sidebar */
.sidebar-logo {
  display: block;
  margin: 0 auto 15px; /* Center the logo and add bottom margin */
  max-width: 100%;
  height: auto;
  cursor: pointer; /* Change cursor to pointer on hover */
}

/* Sekcja 2: PARAMETRY */
.section-parameters .vertical-lines {
  position: absolute;
  left: 0; /* Adjust the horizontal position */
  top: 0; /* Adjust the vertical position */
  display: flex;
  flex-direction: column;
  gap: 13px; /* Adjust the gap between lines */
}

.section-parameters .vertical-lines .line {
  width: 0.125em; /* Adjust the width of the lines using em units */
  background-color: #000;
}

.section-parameters .vertical-lines .line1 {
  margin-top: 62px; /* Adjust the vertical position of the first line */
  height: 44px; /* Adjust the height of the first line */
}

.section-parameters .vertical-lines .line2 {
  margin-top: 0px; /* Adjust the vertical position of the second line */
  height: 44px; /* Adjust the height of the second line */
}

.section-parameters .vertical-lines .line3 {
  margin-top: 0px; /* Adjust the vertical position of the third line */
  height: 44px; /* Adjust the height of the third line */
}

.section-parameters label {
  display: block;
  margin: 10px 0 5px; /* Zmniejszono odstępy między etykietami */
  font-weight: bold;
  font-size: 16px; /* Ensure consistent font size */
  line-height: 1.2; /* Ensure consistent line height */
}

.section-parameters h3 + label {
  margin-top: 20px; /* Adjust the top margin to match the spacing in the "CHARAKTERYSTYKA" section */
}

.section-parameters p {
  font-size: 18px; /* Set font size for parameter results */
  line-height: 1.2; /* Ensure consistent line height */
}

/* Sekcja 3: WYMIARY */
.section-wymiary {
  flex: 1;
  padding: 15px;
  position: relative;
}

.section-wymiary .vertical-lines {
  position: absolute;
  left: 0px; /* Adjust the horizontal position */
  top: 0; /* Adjust the vertical position */
  display: flex;
  flex-direction: column;
  gap: 13px; /* Adjust the gap between lines */
}

.section-wymiary .vertical-lines .line {
  width: 0.125em; /* Adjust the width of the lines using em units */
  background-color: #000;
}

.section-wymiary .vertical-lines .line1 {
  margin-top: 62px; /* Adjust the vertical position of the first line */
  height: 44px; /* Adjust the height of the first line */
}

.section-wymiary .vertical-lines .line2 {
  margin-top: 0px; /* Adjust the vertical position of the second line */
  height: 44px; /* Adjust the height of the second line */
}

.section-wymiary .vertical-lines .line3 {
  margin-top: 0px; /* Adjust the vertical position of the third line */
  height: 44px; /* Adjust the height of the third line */
}

.section-wymiary h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px; /* Odstęp poniżej nagłówka */
  color: #333; /* Kolor tekstu */
  text-transform: uppercase; /* Tekst wielkimi literami */
  text-align: center; /* Wyśrodkowanie tekstu */
  border-bottom: 1px solid #ddd; /* Linia pod nagłówkiem */
  padding-bottom: 5px; /* Odstęp wewnętrzny dla estetyki */
  display: block;
  width: 90%; /* Ustawia długość linii na całą szerokość sekcji */
}

.section-wymiary label {
  display: block;
  margin: 10px 0 5px; /* Zwiększono odstęp między nagłówkiem a pierwszym parametrem */
  font-weight: bold;
  font-size: 16px; /* Ensure consistent font size */
  line-height: 1.2; /* Ensure consistent line height */
}

.section-wymiary p {
  font-size: 18px; /* Set font size for parameter results */
  line-height: 1.2; /* Ensure consistent line height */
}

/* Sekcja 2: PARAMETRY */
.section-parameters .vertical-lines .line {
  width: 2px; /* Ustawienie grubości linii na 2px */
  background-color: #000;
}

/* Sekcja 3: WYMIARY */
.section-wymiary .vertical-lines .line {
  width: 2px; /* Ustawienie grubości linii na 2px */
  background-color: #000;
}

#catalog-card-button {
  display: none; /* UKRYJ PRZYCISK NA START */
  width: 100%;
  padding: 12px;
  background-color: #007bff;
  color: white;
  text-align: center;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 15px;
  transition: background-color 0.3s;
}

#catalog-card-button:hover {
  background-color: #0056b3;
}

/* DODANE STYLE DLA KAFELKA KONTAKTOWEGO */
#contact-tile {
  position: absolute;
  bottom: 10px; /* Odstęp od dolnej krawędzi */
  left: 10px;   /* Odstęp zgodny z paddingiem sidebaru */
  right: 10px;
  padding: 10px;
  background-color: #2e2e2e;
  border: 2px solid #7ea23b;
  color: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

#contact-tile h4 {
  margin-bottom: 10px;
  text-align: center;
  font-size: 1.1em; /* zwiększony rozmiar czcionki */
}
#contact-tile .contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  margin-left: 22px;
  font-size: 1.1em;
}

#version-info {
  font-size: 10px;
  text-align: left;
  position: absolute;
  bottom: 0px; /* Adjusted to position the text even lower */
  margin-left: 10px;
  width: 100%;
  color: #ccc; /* Optional: Change text color */
}

input:focus {
  outline: none;
}