/* =========================================================
   KOMIKSAN STEP 19 REPLACE v2
   Košík/objednávka: větší bílé popisky kroků + čisté kroužky
   Soubor: komiksan-step19-replace-cart-steps-white-text-v2.css
   FTP: /upload/komiksan-step19-replace-cart-steps-white-text-v2.css
   WEB: /user/documents/upload/komiksan-step19-replace-cart-steps-white-text-v2.css

   Nahrazuje:
   komiksan-step19-replace-cart-steps-white-text.css

   Pozn.:
   - Platí pro desktop i mobil.
   - Řeší pouze horní kroky košíku / objednávky.
   - Neřeší mobilní header, logo ani ořez košíku.
   - Odstraňuje bílé podbarvení za textem kroků.
   - Zvětšuje popisky kroků.
   - Budoucí kroky: bílý kroužek + růžovočervené číslo.
   - Aktivní/hotové kroky: růžový kroužek + bílé číslo.
   ========================================================= */

:root {
  --ks-step19-white: #FFFFFF;
  --ks-step19-pink: #FF00D8;
  --ks-step19-redpink: #FF0048;
}

/* =========================================================
   1) Celý pás kroků průhledný
   ========================================================= */

body.type-cart .cart-header,
body.ordering-process .cart-header,
body.type-cart .cart-steps,
body.ordering-process .cart-steps,
body.type-cart .checkout-steps,
body.ordering-process .checkout-steps,
body.type-cart .steps,
body.ordering-process .steps {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* =========================================================
   2) Odstranit bílé/šedé podbarvení za popisky kroků
   ========================================================= */

body.type-cart .cart-header a,
body.ordering-process .cart-header a,
body.type-cart .cart-header span,
body.ordering-process .cart-header span,
body.type-cart .cart-header strong,
body.ordering-process .cart-header strong,
body.type-cart .cart-header small,
body.ordering-process .cart-header small,
body.type-cart .cart-steps a,
body.ordering-process .cart-steps a,
body.type-cart .cart-steps span,
body.ordering-process .cart-steps span,
body.type-cart .cart-steps strong,
body.ordering-process .cart-steps strong,
body.type-cart .checkout-steps a,
body.ordering-process .checkout-steps a,
body.type-cart .checkout-steps span,
body.ordering-process .checkout-steps span,
body.type-cart .checkout-steps strong,
body.ordering-process .checkout-steps strong,
body.type-cart .steps a,
body.ordering-process .steps a,
body.type-cart .steps span,
body.ordering-process .steps span,
body.type-cart .steps strong,
body.ordering-process .steps strong {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* =========================================================
   3) Popisky kroků: větší, bílé, Komiksan font
   ========================================================= */

body.type-cart .cart-header,
body.ordering-process .cart-header,
body.type-cart .cart-header a,
body.ordering-process .cart-header a,
body.type-cart .cart-header span,
body.ordering-process .cart-header span,
body.type-cart .cart-header strong,
body.ordering-process .cart-header strong,
body.type-cart .cart-header small,
body.ordering-process .cart-header small,
body.type-cart .cart-steps,
body.ordering-process .cart-steps,
body.type-cart .cart-steps a,
body.ordering-process .cart-steps a,
body.type-cart .cart-steps span,
body.ordering-process .cart-steps span,
body.type-cart .cart-steps strong,
body.ordering-process .cart-steps strong,
body.type-cart .checkout-steps,
body.ordering-process .checkout-steps,
body.type-cart .checkout-steps a,
body.ordering-process .checkout-steps a,
body.type-cart .checkout-steps span,
body.ordering-process .checkout-steps span,
body.type-cart .checkout-steps strong,
body.ordering-process .checkout-steps strong,
body.type-cart .steps,
body.ordering-process .steps,
body.type-cart .steps a,
body.ordering-process .steps a,
body.type-cart .steps span,
body.ordering-process .steps span,
body.type-cart .steps strong,
body.ordering-process .steps strong {
  color: var(--ks-step19-white) !important;
  font-family: "KomiksanSliza", Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.18 !important;
  font-weight: 400 !important;
  letter-spacing: 0.35px !important;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.72) !important;
  text-decoration: none !important;
}

/* Časté label/title třídy, pokud je Shoptet používá */
body.type-cart .cart-header [class*="title"],
body.ordering-process .cart-header [class*="title"],
body.type-cart .cart-header [class*="label"],
body.ordering-process .cart-header [class*="label"],
body.type-cart .cart-header [class*="text"],
body.ordering-process .cart-header [class*="text"],
body.type-cart .cart-steps [class*="title"],
body.ordering-process .cart-steps [class*="title"],
body.type-cart .cart-steps [class*="label"],
body.ordering-process .cart-steps [class*="label"],
body.type-cart .cart-steps [class*="text"],
body.ordering-process .cart-steps [class*="text"],
body.type-cart .checkout-steps [class*="title"],
body.ordering-process .checkout-steps [class*="title"],
body.type-cart .checkout-steps [class*="label"],
body.ordering-process .checkout-steps [class*="label"],
body.type-cart .checkout-steps [class*="text"],
body.ordering-process .checkout-steps [class*="text"],
body.type-cart .steps [class*="title"],
body.ordering-process .steps [class*="title"],
body.type-cart .steps [class*="label"],
body.ordering-process .steps [class*="label"],
body.type-cart .steps [class*="text"],
body.ordering-process .steps [class*="text"] {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ks-step19-white) !important;
  font-family: "KomiksanSliza", Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.18 !important;
  font-weight: 400 !important;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.72) !important;
}

/* =========================================================
   4) Kroužky s čísly kroků
   ========================================================= */

/* Budoucí / neaktivní krok: bílý kroužek + růžovočervené číslo */
body.type-cart .cart-header i,
body.ordering-process .cart-header i,
body.type-cart .cart-header em,
body.ordering-process .cart-header em,
body.type-cart .cart-header .step-number,
body.ordering-process .cart-header .step-number,
body.type-cart .cart-header .number,
body.ordering-process .cart-header .number,
body.type-cart .cart-steps li > span:first-child,
body.ordering-process .cart-steps li > span:first-child,
body.type-cart .checkout-steps li > span:first-child,
body.ordering-process .checkout-steps li > span:first-child,
body.type-cart .steps li > span:first-child,
body.ordering-process .steps li > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;

  border-radius: 999px !important;
  border: 0 !important;

  background: var(--ks-step19-white) !important;
  background-color: var(--ks-step19-white) !important;

  color: var(--ks-step19-redpink) !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.26) !important;
}

/* Aktivní / aktuální / hotový krok: růžový kroužek + bílé číslo */
body.type-cart .cart-header .active i,
body.ordering-process .cart-header .active i,
body.type-cart .cart-header .active em,
body.ordering-process .cart-header .active em,
body.type-cart .cart-header .active .step-number,
body.ordering-process .cart-header .active .step-number,
body.type-cart .cart-header .active .number,
body.ordering-process .cart-header .active .number,
body.type-cart .cart-header .finished i,
body.ordering-process .cart-header .finished i,
body.type-cart .cart-header .completed i,
body.ordering-process .cart-header .completed i,
body.type-cart .cart-header .done i,
body.ordering-process .cart-header .done i,
body.type-cart .cart-steps li.active > span:first-child,
body.ordering-process .cart-steps li.active > span:first-child,
body.type-cart .cart-steps li.completed > span:first-child,
body.ordering-process .cart-steps li.completed > span:first-child,
body.type-cart .cart-steps li.finished > span:first-child,
body.ordering-process .cart-steps li.finished > span:first-child,
body.type-cart .cart-steps li.done > span:first-child,
body.ordering-process .cart-steps li.done > span:first-child,
body.type-cart .checkout-steps li.active > span:first-child,
body.ordering-process .checkout-steps li.active > span:first-child,
body.type-cart .checkout-steps li.completed > span:first-child,
body.ordering-process .checkout-steps li.completed > span:first-child,
body.type-cart .checkout-steps li.finished > span:first-child,
body.ordering-process .checkout-steps li.finished > span:first-child,
body.type-cart .checkout-steps li.done > span:first-child,
body.ordering-process .checkout-steps li.done > span:first-child,
body.type-cart .steps li.active > span:first-child,
body.ordering-process .steps li.active > span:first-child,
body.type-cart .steps li.completed > span:first-child,
body.ordering-process .steps li.completed > span:first-child,
body.type-cart .steps li.finished > span:first-child,
body.ordering-process .steps li.finished > span:first-child,
body.type-cart .steps li.done > span:first-child,
body.ordering-process .steps li.done > span:first-child {
  background: var(--ks-step19-pink) !important;
  background-color: var(--ks-step19-pink) !important;
  color: var(--ks-step19-white) !important;
}

/* Linky mezi kroky zjemnit, pokud jsou viditelné */
body.type-cart .cart-header::before,
body.ordering-process .cart-header::before,
body.type-cart .cart-header::after,
body.ordering-process .cart-header::after,
body.type-cart .cart-steps::before,
body.ordering-process .cart-steps::before,
body.type-cart .cart-steps::after,
body.ordering-process .cart-steps::after,
body.type-cart .checkout-steps::before,
body.ordering-process .checkout-steps::before,
body.type-cart .checkout-steps::after,
body.ordering-process .checkout-steps::after,
body.type-cart .steps::before,
body.ordering-process .steps::before,
body.type-cart .steps::after,
body.ordering-process .steps::after {
  background-color: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* =========================================================
   5) Mobil
   ========================================================= */

@media (max-width: 767px) {
  body.type-cart .cart-header,
  body.ordering-process .cart-header,
  body.type-cart .cart-header a,
  body.ordering-process .cart-header a,
  body.type-cart .cart-header span,
  body.ordering-process .cart-header span,
  body.type-cart .cart-header strong,
  body.ordering-process .cart-header strong,
  body.type-cart .cart-header small,
  body.ordering-process .cart-header small,
  body.type-cart .cart-steps,
  body.ordering-process .cart-steps,
  body.type-cart .cart-steps a,
  body.ordering-process .cart-steps a,
  body.type-cart .cart-steps span,
  body.ordering-process .cart-steps span,
  body.type-cart .cart-steps strong,
  body.ordering-process .cart-steps strong,
  body.type-cart .checkout-steps,
  body.ordering-process .checkout-steps,
  body.type-cart .checkout-steps a,
  body.ordering-process .checkout-steps a,
  body.type-cart .checkout-steps span,
  body.ordering-process .checkout-steps span,
  body.type-cart .checkout-steps strong,
  body.ordering-process .checkout-steps strong,
  body.type-cart .steps,
  body.ordering-process .steps,
  body.type-cart .steps a,
  body.ordering-process .steps a,
  body.type-cart .steps span,
  body.ordering-process .steps span,
  body.type-cart .steps strong,
  body.ordering-process .steps strong {
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  body.type-cart .cart-header i,
  body.ordering-process .cart-header i,
  body.type-cart .cart-header em,
  body.ordering-process .cart-header em,
  body.type-cart .cart-header .step-number,
  body.ordering-process .cart-header .step-number,
  body.type-cart .cart-header .number,
  body.ordering-process .cart-header .number,
  body.type-cart .cart-steps li > span:first-child,
  body.ordering-process .cart-steps li > span:first-child,
  body.type-cart .checkout-steps li > span:first-child,
  body.ordering-process .checkout-steps li > span:first-child,
  body.type-cart .steps li > span:first-child,
  body.ordering-process .steps li > span:first-child {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    font-size: 15px !important;
  }
}