/* --- Ogólne style dla całego konfiguratora --- */
.product-configurator {
  margin-bottom: 1.5rem;
}
.product-configurator .configurator-group {
  margin-bottom: 1.5rem;
}
.product-configurator .group-title {
  margin-bottom: 8px;
}

.product-extra__content ul {
  list-style: disc;
  margin-left: 24px;
}

/* ======================================================= */
/* === STYL KAFELKOWY (dla przycisków RADIO)           === */
/* ======================================================= */

/* Ustawiamy kafelki obok siebie w kontenerze flex */
.product-configurator .options-wrapper.type-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.product-configurator .options-wrapper.type-radio .option-tile {
}

/* Ukrywamy domyślne kółko radio */
.product-configurator .options-wrapper.type-radio .option-tile input[type="radio"] {
  display: none;
}

/* Stylizujemy etykietę, aby wyglądała jak kafelek */
.product-configurator .options-wrapper.type-radio .option-tile label {
  display: block;
  padding: 16px 40px;
  border: 2px solid var(--shade);
  background-color: #FFF;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-align: center;
  height: 100%;
}

/* Efekt najechania myszką na kafelek */
.product-configurator .options-wrapper.type-radio .option-tile label:hover {
  border-color: var(--border-y-light);
}

/* Styl dla ZAZNACZONEGO kafelka radio */
.product-configurator .options-wrapper.type-radio .option-tile input[type="radio"]:checked + label {
  border-color: var(--bg-yellow);
  background-color: var(--bg-yellow);
  box-shadow: 0;
}

/* Styl dla tekstu wewnątrz kafelków */
.product-configurator .options-wrapper.type-radio .option-tile label .option-label {
  display: block;
  font-weight: 600;
}
.product-configurator .options-wrapper.type-radio .option-tile label .option-price {
  display: block;
  font-size: 0.9rem;
  color: #555;
}


/* ======================================================= */
/* === STYL KLASYCZNY (dla CHECKBOXÓW)                 === */
/* ======================================================= */

/* ======================================================= */
/* === STYL KLASYCZNY (dla CHECKBOXÓW) - WERSJA CUSTOM   === */
/* ======================================================= */

/* Każda opcja jest w nowej linii i wyrównana do środka */
.product-configurator .options-wrapper.type-checkbox .option-tile {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  cursor: pointer; /* Ustawiamy kursor na całym elemencie */
}

/* 1. Ukrywamy domyślny, systemowy wygląd checkboxa */
.product-configurator .options-wrapper.type-checkbox .option-tile input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  
  /* 2. Rysujemy własny kwadracik */
  width: 1.25em;
  height: 1.25em;
  border: 2px solid var(--shade, #ccc);
  background-color: #FFF;
  border-radius: 4px;
  margin-right: 8px;
  cursor: pointer;
  
  /* Pozycjonowanie dla "ptaszka" */
  display: grid;
  place-content: center;
  transition: all 0.2s ease-in-out;
}

/* Efekt najechania myszką */
.product-configurator .options-wrapper.type-checkbox .option-tile input[type="checkbox"]:hover {
    border-color: var(--border-y-light, #999);
}

/* 3. Dodajemy "ptaszek" (jako pseudo-element) po zaznaczeniu */
.product-configurator .options-wrapper.type-checkbox .option-tile input[type="checkbox"]::before {
  content: '';
  width: 0.65em;
  height: 0.65em;
  transform: scale(0); /* Domyślnie ukryty */
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em white; /* Kolor ptaszka */
  
  /* Magia tworząca kształt "ptaszka" */
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

/* 4. Styl dla ZAZNACZONEGO checkboxa */
.product-configurator .options-wrapper.type-checkbox .option-tile input[type="checkbox"]:checked {
  background-color: var(--bg-yellow, #ffc107); /* Twój żółty kolor */
  border-color: var(--bg-yellow, #ffc107);
}

/* 5. Pokazujemy "ptaszek" w zaznaczonym checkboxie */
.product-configurator .options-wrapper.type-checkbox .option-tile input[type="checkbox"]:checked::before {
  transform: scale(1); /* Pokaż ptaszek */
}

/* Etykieta obok kwadracika */
.product-configurator .options-wrapper.type-checkbox .option-tile label {
  display: inline;
  vertical-align: middle;
  cursor: pointer;
}

/* Style dla tekstu i ceny pozostają bez zmian */
.product-configurator .options-wrapper.type-checkbox .option-tile label .option-label {
  display: inline;
}
.product-configurator .options-wrapper.type-checkbox .option-tile label .option-price {
  display: inline;
  margin-left: 4px;
}

/*--- SERVINGS ORdER ---*/

#servings-other-wrapper {
	display: flex;
	flex-direction: column;
}

#servings-other-input {
}


.quantity-selector {
  display: flex;
  align-items: center;
  border: 2px solid var(--shade, #ddd);
  border-radius: 16px;
  width: -moz-fit-content;
  width: fit-content;
  background-color: #fff;
}

.quantity-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.75rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-color, #333);
  transition: color 0.2s ease;
}

.quantity-button:hover {
  color: var(--bg-yellow, #ffc107);
}

.quantity-input {
  border: none;
  width: 50px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  -moz-appearance: textfield; /* Ukryj strzałki w Firefox */
  background: none;
  color: var(--text-color, #333);
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none; /* Ukryj strzałki w Chrome, Safari, Edge */
  margin: 0;
}

.quantity-input:focus {
  outline: none;
}