/* --------------------------------------------------------------------------
   .navKosikObj - krokovy indikator kosiku a objednavky (1-4).
   Kazdy krok ma 3 stavy:
     .navKoObV - dokonceny/navstiveny krok (odkaz <a>, lze se vratit)
     .navKoObA - aktivni krok (odkaz <a>, aktualni stranka)
     .navKoObN - budouci krok (div, bez odkazu)
   Hover: kolecko ani text se nemeni, pod celym navKoObStep se objevi
   kompaktni sede "tlacitko" (pozadi + border), ohranicene jen kolem
   obsahu (ne pres celou sirku bunky). Border je pritomny i v normalnim
   stavu jako transparentni, aby hover nemenil vysku/rozmery kroku.
   -------------------------------------------------------------------------- */
.navKosikObj {
  display: flex;
  margin-bottom: var(--space-xl);
}
.navKoObStep {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  text-decoration: none;
  padding: var(--space-sm) var(--space-xs);
  border: 1px solid transparent;
  border-radius: 8px;
  box-sizing: border-box;
}
.navKoObV:hover,
.navKoObA:hover {
  background-color: var(--color-bg-light);
  border-color: var(--color-border);
}
.navKoObCircle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  font-size: var(--font-size-body);
  box-sizing: border-box;
}
.navKoObCircle img {
  width: 1rem;
  height: 1rem;
}
.navKoObLabel {
  margin-top: var(--space-sm);
  font-size: var(--font-size-small);
  text-align: center;
}
.navKoObLine {
  flex: 1;
  height: 2px;
  margin-top: 1rem;
  margin-left: var(--space-sm);
  margin-right: var(--space-sm);
  background-color: var(--color-border);
}
.navKoObLineV {
  background-color: var(--color-primary);
}
/* Dokonceny krok (V) */
.navKoObV .navKoObCircle {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.navKoObV:link .navKoObLabel,
.navKoObV:visited .navKoObLabel,
.navKoObV:active .navKoObLabel {
  color: var(--color-text-light);
}
/* Aktivni krok (A) */
.navKoObA .navKoObCircle {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 500;
}
.navKoObA:link .navKoObLabel,
.navKoObA:visited .navKoObLabel,
.navKoObA:active .navKoObLabel {
  color: var(--color-primary);
  font-weight: 500;
}
/* Budouci krok (N) - bez odkazu, bez hoveru */
.navKoObN .navKoObCircle {
  background-color: var(--color-bg-light);
  color: var(--color-text-muted);
}
.navKoObN .navKoObLabel {
  color: var(--color-text-muted);
}



/* --------------------------------------------------------------------------
   .kosikButtWrapper - radek s tlacitky Zpet / Pokracovat v kosiku
   a objednavce. Zpet vzdy vlevo, Pokracovat vzdy vpravo.

   Na kosiku (.navKoObStep krok 1) je jen kosikButtGo bez kosikButtBack -
   proto se pozice nedela pres justify-content: space-between (to by pri
   jednom potomkovi zarovnalo doleva), ale kosikButtGo ma margin-left: auto,
   takze se vzdy priblizi k pravemu okraji bez ohledu na to, jestli
   kosikButtBack existuje.

   Sdilene .kosikButt vlastnosti fungujici na <a> i <input type="submit">
   (input potrebuje reset vzhledu a fontu).
   -------------------------------------------------------------------------- */
.kosikButtWrapper {
  display: flex;
  align-items: center;
  margin: var(--space-xl) 0;
}

.kosikButtWrapper .kosikButtGo,
.kosikButtWrapper .kosikButtBack {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 2.375rem;
  padding: 0 var(--space-md);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.kosikButtWrapper .kosikButtGo {
  margin-left: auto;
  background-color: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: var(--color-white);
}

.kosikButtWrapper .kosikButtGo:link,
.kosikButtWrapper .kosikButtGo:visited,
.kosikButtWrapper .kosikButtGo:active {
  color: var(--color-white);
  text-decoration: none;
}

.kosikButtWrapper .kosikButtGo:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-white);
  box-shadow: var(--shadow-hover);
}

.kosikButtWrapper .kosikButtBack {
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
}

.kosikButtWrapper .kosikButtBack:link,
.kosikButtWrapper .kosikButtBack:visited,
.kosikButtWrapper .kosikButtBack:active {
  color: var(--color-text-light);
  text-decoration: none;
}

.kosikButtWrapper .kosikButtBack:hover {
  background-color: var(--color-white);
  border-color: var(--color-text-muted);
  color: var(--color-text);
  box-shadow: var(--shadow-hover);
}