/* Styl dla kroku 4 */
#step4 {
  background: #f9f9f9; /* Tło dla całego kroku 4 */
  padding: 20px;
  border-radius: 0px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Styl dla kontenera podsumowania */

/* Styl tabeli podsumowania */
.summary-table {
  display: grid;
  grid-template-columns: 1fr ;
  gap: 10px;
  padding: 20px;
  background: none; /* Remove background from inner elements */
}

/* Ustawienie każdego wiersza podsumowania jako siatki z dostosowaniem szerokości kolumn */
.summary-row {
  display: grid;
  grid-template-columns: 170px 170px; /* zmień wartości według potrzeb */
  align-items: center;
  gap: 0px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 3px;
  width: 340px; /* ustawia szerokość wiersza na 385px */
  background: none; /* Remove background from inner elements */
}

/* Etykiety i wartości */
.summary-label {
  font-weight: bold;
  text-align: left; /* wyjustowane do lewej */
}

.summary-value {
  text-align: center; /* wyjustowane do prawej */
}

/* Kontener na trzy kolumny podsumowania */
.summary-columns {
  margin-left: 20px;
  display: flex;
  gap: 20px;
  width: 100%;
  background: none; /* Remove background from inner elements */
}

/* Lewa kolumna (Specyfikacja) */
.summary-left {
  flex: 1;
  border: 0px solid #ccc; /* Added border */
  padding: 10px; /* Added padding */
  border-radius: 5px; /* Added border radius */
  width: 33.33%; /* Ensure equal width */
}

/* Prawa kolumna (od WYMIARY) */
.summary-right {
  flex: 1;
  margin-left: 0px; /* Adjusted margin to bring the right column closer to the left column */
  border: 0px solid #ccc; /* Added border */
  padding: 10px; /* Added padding */
  border-radius: 5px; /* Added border radius */
  width: 33.33%; /* Ensure equal width */
}

/* Trzecia kolumna (Zdjęcie) */
.summary-image {
  display: flex;
  justify-content: center; /* Center the image horizontally */
  align-items: center; /* Center the image vertically */
  border: 0px solid #ccc; /* Added border */
  padding: 10px; /* Added padding */
  border-radius: 5px; /* Added border radius */
  background: none; /* Remove background from inner elements */
  width: 33.33%; /* Ensure equal width */
}

/* Opcjonalne: wyrównanie nagłówków wewnątrz kolumn */
.summary-section h4.dynamic-heading {
  text-align: left;
}

.summary-left h4,
.summary-right h4 {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}

.summary-left h4::after,
.summary-right h4::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 135%; /* linia jest dłuższa o połowę długości nagłówka */
  height: 2px;
  background: linear-gradient(to right, transparent, #000, transparent);
}

/* Styl dla kontenera kodu zamówienia */
.order-code-container {
  margin-top: 10px;
  margin-bottom: 20px; /* Add margin below the product code */
  padding: 10px;
  background: #f1f1f1;
  border-radius: 5px;
  text-align: center;
}

.order-code-label {
  font-weight: bold;
  margin-right: 5px;
  /* Customize the appearance of the "Kod produktu" label here */
  font-size: 22px; /* Example: change font size */
  color: #000; /* Example: change text color */
}

.order-code-value {
  font-size: 22px;
  color: #000;
}

.order-code-value.bold {
  font-weight: bold;
}

/* Prevent horizontal scrolling in the summary section */
#dynamic-summary-content {
  overflow-x: hidden;
}