/* Konfigurátor torty. Stavia na .pole, .tlacidlo a .formular__* z prvky.css —
   tu je len to, čo inde na webe nie je. */

.konfig {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* 🔴 Vlastné `display` prebije `[hidden]` z prehliadača. Bez tohto pravidla ostali
   viditeľné aj skryté kroky (.krok má display: grid) aj tlačidlo Ďalej v poslednom
   kroku (.tlacidlo má display: inline-flex) — konfigurátor pritom v DOM-e vyzeral
   správne, chybu bolo vidieť len naživo. Celý konfigurátor riadi zobrazenie cez
   `hidden`, tak to platí plošne, nech to nemusím doháňať pri každom novom prvku. */
.konfig[hidden],
.konfig__hotovo[hidden],
.konfig [hidden] {
  display: none !important;
}

/* Na mobile patrí zhrnutie POD formulár — inak musí zákazník preskrolovať ešte
   prázdny súhrn, než sa vôbec dostane k prvej otázke. Cenu pritom nestratí,
   je pri každej dlaždici veľkosti. Na širokom okne je vedľa, ako v predlohe. */
.suhrn {
  order: 2;
}

@media (min-width: 62rem) {
  .konfig {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  }

  .suhrn {
    order: 0;
  }
}

/* ---------- zhrnutie ---------- */

.suhrn {
  background: var(--krem-svetly);
  border: 1px solid var(--linka);
  border-radius: var(--r);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: var(--tien-jemny);
}

@media (min-width: 62rem) {
  .suhrn {
    position: sticky;
    top: calc(var(--hlavicka) + 1rem);
  }
}

.suhrn__nadpis {
  font-family: var(--pismo-display);
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0;
  text-align: center;
}

.suhrn__ikona {
  display: flex;
  justify-content: center;
  margin: 0.75rem 0 1rem;
  color: var(--ruzova-syta);
}

.suhrn__ikona svg {
  width: 3.5rem;
  height: 3.5rem;
}

.suhrn__zoznam {
  margin: 0;
  border-top: 1px solid var(--linka);
}

.suhrn__riadok {
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linka);
}

.suhrn__riadok dt {
  color: var(--ink-mekky);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.suhrn__riadok dd {
  margin: 0;
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.suhrn__cenaPopis {
  margin: 1rem 0 0;
  color: var(--ink-mekky);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.suhrn__cena {
  margin: 0.15rem 0 0;
  font-family: var(--pismo-display);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  line-height: 1.1;
  color: var(--bobula);
}

.suhrn__rozpis {
  margin: 0.4rem 0 0;
  color: var(--ink-mekky);
  font-size: 0.84rem;
  line-height: 1.5;
}

.suhrn__hviezdicka {
  margin: 0.5rem 0 0;
  color: var(--ink-mekky);
  font-size: 0.84rem;
}

.suhrn__vysvetlenie {
  margin: 0.6rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--linka);
  color: var(--ink-mekky);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* ---------- ukazovateľ krokov ---------- */

.kroky {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.kroky__krok {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  cursor: pointer;
  color: var(--ink-mekky);
  font-size: 0.85rem;
  text-align: center;
}

/* Spojnica medzi krokmi. Vedie spod čísla doľava k predchádzajúcemu kroku. */
.kroky__krok + .kroky__krok::before {
  content: '';
  position: absolute;
  top: 1rem;
  right: 50%;
  left: -50%;
  height: 1px;
  margin-right: 1.35rem;
  margin-left: 1.35rem;
  background: var(--linka);
}

.kroky__krok.je-hotovy + .kroky__krok::before,
.kroky__krok.je-aktivny + .kroky__krok::before {
  background: var(--ruzova-syta);
}

.kroky__cislo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--linka);
  border-radius: 50%;
  background: var(--krem-svetly);
  font-variant-numeric: tabular-nums;
}

.kroky__krok.je-aktivny .kroky__cislo,
.kroky__krok.je-hotovy .kroky__cislo {
  border-color: var(--bobula);
  background: var(--bobula);
  color: var(--biela);
}

.kroky__krok.je-aktivny {
  color: var(--ink);
}

/* ---------- kroky ---------- */

.konfig__formular {
  background: var(--krem-svetly);
  border: 1px solid var(--linka);
  border-radius: var(--r);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.krok {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.krok__legenda {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
}

.krok__nadpis {
  display: block;
  font-family: var(--pismo-display);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}

.krok__podtext {
  display: block;
  margin-top: 0.25rem;
  color: var(--ink-mekky);
  font-size: 0.92rem;
  line-height: 1.6;
}

.pole__popis {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--ink-mekky);
  font-size: 0.88rem;
  letter-spacing: 0.03em;
}

.pole__pozn--blok {
  display: block;
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* ---------- druh objednávky ---------- */

.druhy {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.druhy .druh {
  display: block;
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}

.druhy .druh__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.druh__telo {
  display: grid;
  gap: 0.2rem;
  height: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--linka);
  border-radius: var(--r);
  background: var(--biela);
  transition: border-color 0.2s var(--von), background 0.2s var(--von);
}

.druh:hover .druh__telo {
  border-color: var(--ruzova-syta);
}

.druh__radio:checked + .druh__telo {
  border-color: var(--bobula);
  background: var(--ruzova-svetla);
  box-shadow: inset 0 0 0 1px var(--bobula);
}

.druh__radio:focus-visible + .druh__telo {
  outline: 2px solid var(--bobula);
  outline-offset: 2px;
}

.druh__nazov {
  font-size: 1.05rem;
}

.druh__popis {
  color: var(--ink-mekky);
  font-size: 0.85rem;
  line-height: 1.45;
}

.druh__cena {
  color: var(--bobula);
  font-size: 0.85rem;
}

.len-torta {
  display: grid;
  gap: 1.25rem;
}

/* ---------- storno ---------- */

.konfig__storno {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink);
}

.konfig__storno a {
  white-space: nowrap;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---------- najobľúbenejšie kombinácie ---------- */

.kombinacie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.kombinacia {
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--linka);
  border-radius: 999px;
  background: transparent;
  color: var(--kakao);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--von), background 0.2s var(--von);
}

.kombinacia:hover {
  border-color: var(--ruzova-syta);
}

.kombinacia.je-aktivna {
  background: var(--ruzova-svetla);
  border-color: var(--ruzova-syta);
}

/* ---------- svadobná torta po poschodiach ---------- */

.svadobna,
.poschodia {
  display: grid;
  gap: 1rem;
}

.svadobna__pocet {
  max-width: 12rem;
}

.poschodie {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--linka);
  border-radius: 12px;
  min-width: 0;
}

.poschodie__nadpis {
  padding: 0 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kakao);
}

/* ---------- výber zákuskov (druh · príchuť · počet · ×) ---------- */

.zakusky__riadky {
  display: grid;
  gap: 1rem;
}

.zakusok {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.5fr) minmax(5.5rem, 0.7fr) auto;
  gap: 0.6rem;
  align-items: end;
}

.zakusok__pole {
  display: grid;
  gap: 0.35rem;
}

/* Stĺpce sú pevné: keď druh nemá príchuť, jej pole zmizne, ale počet ostane pod počtom
   v riadku nad ním. Bez toho skákal do stĺpca príchute a riadky neboli zarovnané. */
.zakusok > .zakusok__pole--druh {
  grid-column: 1;
}

.zakusok > .zakusok__pole:not(.zakusok__pole--druh):not(.zakusok__pole--pocet) {
  grid-column: 2;
}

.zakusok > .zakusok__pole--pocet {
  grid-column: 3;
}

/* Select a číselné pole mali rôznu výšku (49 vs 52 px) a tlačidlo × 44 px — v riadku
   vedľa seba to vyzeralo rozhádzane. Jedna výška pre všetky tri. */
.zakusok select,
.zakusok input,
.zakusok__odobrat {
  height: 3.1rem;
}

.zakusok__odobrat {
  grid-column: 4;
  width: 3.1rem;
  border: 1px solid var(--linka);
  border-radius: 10px;
  background: transparent;
  color: var(--kakao);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.zakusok__odobrat:hover {
  border-color: var(--kakao);
}

.zakusok__min {
  grid-column: 1 / -1;
  margin-top: -0.35rem;
}

.zakusky__pridat {
  justify-self: start;
}

@media (max-width: 620px) {
  .zakusok {
    grid-template-columns: minmax(0, 1fr) minmax(5rem, 0.6fr) auto;
  }

  .zakusok > .zakusok__pole--druh {
    grid-column: 1 / -1;
  }

  .zakusok > .zakusok__pole:not(.zakusok__pole--druh):not(.zakusok__pole--pocet) {
    grid-column: 1;
  }

  .zakusok > .zakusok__pole--pocet {
    grid-column: 2;
  }

  .zakusok__odobrat {
    grid-column: 3;
  }
}

/* ---------- veľkosti ---------- */

.velkosti {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}

/* .velkost a .cip sú <label> vnútri .pole, takže by inak zdedili uppercase
   a preloženie písmen z popiskov polí. Tu sú to dlaždice, nie popisky. */
.velkosti .velkost {
  display: block;
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}

/* Radio ostáva dostupné pre klávesnicu a čítačky — len ho nevidno.
   Špecificita musí prebiť `.pole input { width: 100% }` z prvky.css, inak
   je neviditeľné radio široké ako celý formulár a rozbije stránku. */
.velkosti .velkost__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.velkost__telo {
  display: grid;
  gap: 0.15rem;
  height: 100%;
  padding: 0.85rem 0.5rem;
  border: 1px solid var(--linka);
  border-radius: var(--r);
  background: var(--biela);
  text-align: center;
  transition: border-color 0.2s var(--von), background 0.2s var(--von);
}

.velkost:hover .velkost__telo {
  border-color: var(--ruzova-syta);
}

.velkost__radio:checked + .velkost__telo {
  border-color: var(--bobula);
  background: var(--ruzova-svetla);
  box-shadow: inset 0 0 0 1px var(--bobula);
}

.velkost__radio:focus-visible + .velkost__telo {
  outline: 2px solid var(--bobula);
  outline-offset: 2px;
}

.velkost__priemer {
  font-size: 1.05rem;
  font-weight: 400;
}

.velkost__porcie {
  color: var(--ink-mekky);
  font-size: 0.8rem;
}

.velkost__cena {
  color: var(--bobula);
  font-size: 0.92rem;
}

/* ---------- čipy (ovocie) ---------- */

.cipy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cipy .cip,
.prepinac .cip {
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}

.cipy .cip__vstup,
.prepinac .cip__vstup {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cip__text {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--linka);
  border-radius: 2rem;
  background: var(--biela);
  font-size: 0.9rem;
  transition: border-color 0.2s var(--von), background 0.2s var(--von);
}

.cip:hover .cip__text {
  border-color: var(--ruzova-syta);
}

.cip__vstup:checked + .cip__text {
  border-color: var(--bobula);
  background: var(--bobula);
  color: var(--biela);
}

.cip__vstup:focus-visible + .cip__text {
  outline: 2px solid var(--bobula);
  outline-offset: 2px;
}

.cip.je-vypnuty {
  cursor: not-allowed;
}

.cip.je-vypnuty .cip__text {
  opacity: 0.4;
}

/* ---------- voľby s príplatkom ---------- */

.volby {
  display: grid;
  gap: 0.5rem;
}

.volby .volba {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--linka);
  border-radius: var(--r);
  background: var(--biela);
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}

.volby .volba:hover {
  border-color: var(--ruzova-syta);
}

.volby .volba input {
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  margin-top: 0.2rem;
  accent-color: var(--bobula);
  flex-shrink: 0;
}

.volba__nazov {
  display: block;
  font-size: 0.95rem;
}

.volba__cena {
  display: block;
  color: var(--ink-mekky);
  font-size: 0.85rem;
}

/* ---------- čo je v cene ---------- */

.vcene {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r);
  background: var(--ruzova-svetla);
}

.vcene__nadpis {
  margin: 0 0 0.4rem;
  color: var(--ink-mekky);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vcene__zoznam {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.65;
}

/* ---------- navigácia ---------- */

.konfig__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linka);
}

.konfig__nav .tlacidlo {
  flex: 1;
  min-width: 9rem;
  justify-content: center;
}

.tlacidlo--tiche {
  border: 1px solid var(--linka);
  background: transparent;
  color: var(--ink-mekky);
}

.tlacidlo--tiche:hover {
  border-color: var(--ruzova-syta);
  color: var(--ink);
}

.konfig__nav .tlacidlo[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* ---------- hotovo ---------- */

.konfig__hotovo {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--linka);
  border-radius: var(--r);
  background: var(--ruzova-svetla);
  text-align: center;
}

.konfig__hotovo h2 {
  font-family: var(--pismo-display);
  font-weight: 400;
  margin: 0 0 0.5rem;
}

.konfig__hotovo p {
  margin: 0;
  color: var(--ink-mekky);
}

.prepinac {
  display: flex;
  gap: 0.4rem;
}

/* ---------- kalendárik dostupnosti ---------- */

.kal {
  margin-top: 0.5rem;
}

.kal__hlava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-family: var(--pismo-display);
  text-transform: capitalize;
}

.kal__sip {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--linka);
  border-radius: var(--r);
  background: var(--biela);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s var(--von), background 0.2s var(--von);
}

.kal__sip:hover {
  border-color: var(--ruzova-syta);
  background: var(--ruzova-svetla);
}

.kal__mriezka {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
}

.kal__den {
  padding: 0.2rem 0;
  color: var(--ink-mekky);
  font-size: 0.78rem;
  text-align: center;
}

.kal__d {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 0;
  border: 1px solid var(--linka);
  border-radius: var(--r);
  background: var(--biela);
  color: var(--ink);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s var(--von), background 0.2s var(--von);
}

.kal__d:hover:not(:disabled) {
  border-color: var(--ruzova-syta);
}

/* Plný aj zatvorený deň vyzerajú rovnako — zákazníčka nemá z čoho odčítať,
   koľko roboty má cukrárka ešte voľné. */
.kal__d:disabled,
.kal__d--nedostupny {
  opacity: 0.4;
  cursor: not-allowed;
}

.kal__d--vybraty {
  border-color: var(--bobula);
  background: var(--ruzova-svetla);
  box-shadow: inset 0 0 0 1px var(--bobula);
}