/* ==================================================
   OXYBAG - POKLADNA v7
   Sjednoceny zaklad kosiku + kroku 2.
   Dulezite: stylujeme jak plnou checkout stranku (.ordering-process),
   tak dynamicky otevreny kosik (#cart-widget), ktery nema body tridu
   .ordering-process do doby, nez se stranka nacte naplno.
   Bez zasahu do logiky dopravy, plateb, vydejnich mist a doplnku.
   ================================================== */

/* Puvodni pravidla 08-POKLADNA */
.ordering-process .cart-table .cart-related-button .btn:after{display:none}
.ordering-process .co-box-additional > .form-group{display:none}

.ordering-process,
#cart-widget:not(.oxy-cart-empty) {
  --oxy-checkout-accent: #de337f;
  --oxy-checkout-accent-dark: #c93678;
  --oxy-checkout-accent-soft: #fff6fa;
  --oxy-checkout-text: #171717;
  --oxy-checkout-muted: #777;
  --oxy-checkout-border: #dedede;
  --oxy-checkout-border-soft: #ececec;
  --oxy-checkout-radius: 10px;
}

/* ==================================================
   1) KROKY 1 / 2 / 3
   Zamerne BEZ obdelniku. Jen text + jemna spodni linka.
   ================================================== */
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header {
  display: flex !important;
  align-items: stretch !important;
  border: 0 !important;
  border-bottom: 1px solid var(--oxy-checkout-border-soft) !important;
  background: transparent !important;
  box-shadow: none !important;
}

:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step,
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step > a,
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step > strong,
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step > a > span,
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step > strong > span {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Shoptet umi kreslit taby i pres pseudo-elementy - vsechny puvodni krabicky rusime. */
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step::before,
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step > a::before,
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step > a::after,
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step > strong::before,
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step > strong::after {
  content: none !important;
  display: none !important;
}

:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step {
  position: relative !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step > a,
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step > strong {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 54px !important;
  padding: 8px 12px 13px !important;
  color: var(--oxy-checkout-muted) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: color .18s ease !important;
}

:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: -1px !important;
  width: auto !important;
  height: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 3px 3px 0 0 !important;
  background: transparent !important;
  transform: none !important;
}

:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step.active > a,
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step.active > strong {
  color: var(--oxy-checkout-text) !important;
  font-weight: 600 !important;
}

:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step.active::after {
  background: var(--oxy-checkout-accent) !important;
}

:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step.completed > a {
  color: var(--oxy-checkout-text) !important;
}

@media (hover:hover) {
  :is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step > a:hover {
    color: var(--oxy-checkout-accent) !important;
  }
}

/* ==================================================
   2) KOSIK - produktove radky
   Pouziva stejne selektory i v dynamickem #cart-widget.
   ================================================== */
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-table tr.removeable {
  border-bottom-color: var(--oxy-checkout-border-soft) !important;
}

:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-table tr.removeable .cart-p-image img {
  display: block !important;
  border-radius: var(--oxy-checkout-radius) !important;
}

:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-table tr.removeable .p-name .main-link {
  color: var(--oxy-checkout-text) !important;
  text-decoration: none !important;
  transition: color .18s ease !important;
}

:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-table tr.removeable .p-name .show-related {
  color: var(--oxy-checkout-muted) !important;
  text-decoration: none !important;
  transition: color .18s ease !important;
}

@media (hover:hover) {
  :is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-table tr.removeable .p-name .main-link:hover,
  :is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-table tr.removeable .p-name .show-related:hover {
    color: var(--oxy-checkout-accent) !important;
  }
}

/* ==================================================
   3) MNOZSTVI - jeden kompaktní 10px ovladac
   ================================================== */
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-table .quantity-form .quantity {
  border: 1px solid var(--oxy-checkout-border) !important;
  border-radius: var(--oxy-checkout-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-table .quantity-form .quantity label,
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-table .quantity-form .quantity .amount,
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-table .quantity-form .quantity .increase,
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-table .quantity-form .quantity .decrease {
  border-radius: 0 !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-table .quantity-form .quantity .amount {
  border-top: 0 !important;
  border-bottom: 0 !important;
  text-align: center !important;
  color: var(--oxy-checkout-text) !important;
}

:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-table .quantity-form .quantity .increase,
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-table .quantity-form .quantity .decrease {
  color: var(--oxy-checkout-text) !important;
  transition: background-color .18s ease, color .18s ease !important;
}

:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-table .quantity-form .quantity .increase__sign,
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-table .quantity-form .quantity .decrease__sign {
  color: inherit !important;
}

@media (hover:hover) {
  :is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-table .quantity-form .quantity .increase:hover,
  :is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-table .quantity-form .quantity .decrease:hover {
    background: var(--oxy-checkout-accent-soft) !important;
    color: var(--oxy-checkout-accent) !important;
  }
}

/* ==================================================
   4) DOPRAVA A PLATBA
   Neudelame z kazde dopravy velkou kartu. Default zustava lehky,
   zvyraznena je pouze zvolena varianta.
   ================================================== */
.ordering-process #checkoutContent .co-delivery-method,
.ordering-process #checkoutContent .co-payment-method {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ordering-process #checkoutContent .shipping-billing-table .radio-wrapper {
  margin: 0 0 4px !important;
  border: 1px solid transparent !important;
  border-radius: var(--oxy-checkout-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: border-color .18s ease, background-color .18s ease !important;
}

.ordering-process #checkoutContent .shipping-billing-table .radio-wrapper > label {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ordering-process #checkoutContent .shipping-billing-table .radio-wrapper.active {
  border-color: #f1c8da !important;
  background: var(--oxy-checkout-accent-soft) !important;
}

.ordering-process #checkoutContent .shipping-billing-table .shipping-billing-name,
.ordering-process #checkoutContent .shipping-billing-table .payment-shipping-price {
  color: var(--oxy-checkout-text) !important;
}

.ordering-process #checkoutContent .shipping-billing-table .payment-shipping-price.for-free {
  color: #3c840f !important;
}

.ordering-process #checkoutContent .shipping-billing-table .new-widget-choose a {
  color: var(--oxy-checkout-accent) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

@media (hover:hover) {
  .ordering-process #checkoutContent .shipping-billing-table .radio-wrapper:not(.active):hover {
    background: #fffafd !important;
  }

  .ordering-process #checkoutContent .shipping-billing-table .new-widget-choose a:hover {
    color: var(--oxy-checkout-accent-dark) !important;
    text-decoration: underline !important;
  }
}

/* Rekapitulace muze byt jedna jemna karta. */
.ordering-process #checkoutContent .order-summary.box.co-box {
  border: 1px solid var(--oxy-checkout-border-soft) !important;
  border-radius: var(--oxy-checkout-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
}

.ordering-process #checkoutContent .order-summary-item {
  border-bottom-color: var(--oxy-checkout-border-soft) !important;
}

/* ==================================================
   5) TLACITKA ZPET / POKRACOVAT
   ================================================== */
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .next-step .next-step-back,
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .next-step a.next-step-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 11px 20px !important;
  border: 1px solid var(--oxy-checkout-accent) !important;
  border-radius: var(--oxy-checkout-radius) !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--oxy-checkout-text) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .next-step .btn-conversion,
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .next-step .next-step-forward.btn-conversion {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 11px 22px !important;
  border: 1px solid var(--oxy-checkout-accent) !important;
  border-radius: var(--oxy-checkout-radius) !important;
  background: var(--oxy-checkout-accent) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .next-step .next-step-back *,
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .next-step .btn-conversion * {
  color: inherit !important;
}

@media (hover:hover) {
  :is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .next-step .next-step-back:hover {
    background: var(--oxy-checkout-accent) !important;
    color: #fff !important;
  }

  :is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .next-step .btn-conversion:hover {
    border-color: var(--oxy-checkout-accent-dark) !important;
    background: var(--oxy-checkout-accent-dark) !important;
    color: #fff !important;
  }
}

/* ==================================================
   6) FORMULARE dalsich kroku - jen bezpecny radius/focus
   ================================================== */
.ordering-process #checkoutContent input.form-control,
.ordering-process #checkoutContent select.form-control,
.ordering-process #checkoutContent textarea.form-control {
  border-radius: var(--oxy-checkout-radius) !important;
  box-shadow: none !important;
}

.ordering-process #checkoutContent input.form-control:focus,
.ordering-process #checkoutContent select.form-control:focus,
.ordering-process #checkoutContent textarea.form-control:focus {
  border-color: var(--oxy-checkout-accent) !important;
  box-shadow: 0 0 0 3px rgba(222,51,127,.10) !important;
  outline: none !important;
}

/* ==================================================
   MOBIL
   ================================================== */
@media (max-width: 767px) {
  :is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step > a,
  :is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step > strong {
    min-height: 46px !important;
    padding: 7px 5px 10px !important;
  }

  :is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .cart-header > li.step::after {
    left: 6px !important;
    right: 6px !important;
  }
}

/* ==================================================
   7) ZPET DO OBCHODU - OTEVRENY KOSIK I CELY CHECKOUT
   Stejne chovani jako u prihlaseni:
   default = ruzove < + cerny text, bez vyplne
   hover/focus = svetle ruzove pozadi + ruzovy text
   ================================================== */
#cart-widget:not(.oxy-cart-empty) .toggle-window-arr,
body.ordering-process .toggle-window-arr {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border: 0 !important;
  border-radius: var(--oxy-checkout-radius) !important;
  background: transparent !important;
  background-image: none !important;
  color: #333 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: color .18s ease, background-color .18s ease !important;
}

#cart-widget:not(.oxy-cart-empty) .toggle-window-arr:before,
body.ordering-process .toggle-window-arr:before {
  content: "<" !important;
  display: inline-block !important;
  position: relative !important;
  top: 1px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 300 !important;
  color: var(--oxy-checkout-accent) !important;
  transform: none !important;
}

#cart-widget:not(.oxy-cart-empty) .toggle-window-arr:after,
body.ordering-process .toggle-window-arr:after {
  display: none !important;
  content: none !important;
}

@media (hover:hover) {
  #cart-widget:not(.oxy-cart-empty) .toggle-window-arr:hover,
  body.ordering-process .toggle-window-arr:hover {
    background: #fff3f8 !important;
    color: var(--oxy-checkout-accent) !important;
  }
}

#cart-widget:not(.oxy-cart-empty) .toggle-window-arr:focus-visible,
body.ordering-process .toggle-window-arr:focus-visible {
  background: #fff3f8 !important;
  color: var(--oxy-checkout-accent) !important;
  outline: 2px solid rgba(222,51,127,.24) !important;
  outline-offset: 2px !important;
}


/* ==================================================
   8) TOP BACK LINK - FULL CHECKOUT FALLBACK
   Nektere varianty sablony maji navratovy odkaz mimo #cart-widget,
   ale porad uvnitr ordering-process. Udrzujeme stejny vzhled jako login.
   ================================================== */
body.ordering-process a.toggle-window-arr,
body.ordering-process button.toggle-window-arr {
  display: inline-flex !important;
  align-items: center !important;
}

/* ==================================================
   9) ROZESTUP MEZI ZPET / POKRACOVAT
   Jemny rozestup bez zdvojeneho marginu.
   ================================================== */
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .next-step {
  column-gap: 8px !important;
  row-gap: 8px !important;
}

/* Dulezite: puvodni fallback margin vypneme, jinak se mezera zdvojuje. */
:is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .next-step .next-step-back {
  margin-right: 0 !important;
}

@media (max-width: 767px) {
  :is(.ordering-process, #cart-widget:not(.oxy-cart-empty)) .next-step {
    column-gap: 8px !important;
    row-gap: 8px !important;
  }
}

/* ==================================================
   10) ROZSIRENA OBJEDNAVKA - "PRIDANO DO KOSIKU"
   Obe varianty Shoptetu:
   - kratka varianta bez doporucenych produktu
   - rozsirena varianta "Ostatni zakaznici take nakoupili"
   Scope pouze na Colorbox obsahujici .advanced-order.
   ================================================== */

#colorbox:has(.advanced-order) {
  --oxy-advanced-accent: var(--oxy-checkout-accent, #de337f);
  --oxy-advanced-accent-dark: var(--oxy-checkout-accent-dark, #c93678);
  --oxy-advanced-accent-soft: var(--oxy-checkout-accent-soft, #fff6fa);
  --oxy-advanced-text: var(--oxy-checkout-text, #171717);
  --oxy-advanced-muted: #777;
  --oxy-advanced-border: #dedede;
  --oxy-advanced-border-soft: #ececec;
  --oxy-advanced-radius: 10px;
}

/* Samotne modalni okno - zadne ostre rohy. */
#colorbox:has(.advanced-order) #cboxWrapper,
#colorbox:has(.advanced-order) #cboxContent,
#colorbox:has(.advanced-order) #cboxLoadedContent,
#colorbox:has(.advanced-order) .colorbox-html-content {
  border-radius: var(--oxy-advanced-radius) !important;
}

#colorbox:has(.advanced-order) #cboxContent,
#colorbox:has(.advanced-order) #cboxLoadedContent {
  background: #fff !important;
  box-shadow: none !important;
}

#colorbox:has(.advanced-order) #cboxLoadedContent {
  box-sizing: border-box !important;
}

/* Kratka varianta nema duvod byt stejne siroka jako produktovy grid. */
#colorbox:has(.advanced-order):not(:has(.advanced-order-suggestion)) {
  left: 50% !important;
  width: min(820px, calc(100vw - 32px)) !important;
  transform: translateX(-50%) !important;
}

#colorbox:has(.advanced-order):not(:has(.advanced-order-suggestion)) #cboxWrapper,
#colorbox:has(.advanced-order):not(:has(.advanced-order-suggestion)) #cboxTopCenter,
#colorbox:has(.advanced-order):not(:has(.advanced-order-suggestion)) #cboxContent,
#colorbox:has(.advanced-order):not(:has(.advanced-order-suggestion)) #cboxLoadedContent,
#colorbox:has(.advanced-order):not(:has(.advanced-order-suggestion)) #cboxBottomCenter {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Vnitrni odsazeni a horni cast popupu. */
#colorbox:has(.advanced-order) .advanced-order {
  box-sizing: border-box !important;
  padding: 34px 28px 28px !important;
  color: var(--oxy-advanced-text) !important;
}

#colorbox:has(.advanced-order) .advanced-order > .h1:first-child {
  margin: 0 52px 10px !important;
  color: var(--oxy-advanced-text) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

#colorbox:has(.advanced-order) .advanced-order > .h2[data-testid="textPopupProductName"] {
  margin: 0 auto 22px !important;
  max-width: 820px !important;
  color: var(--oxy-advanced-text) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

#colorbox:has(.advanced-order) .extras-wrap {
  margin: 0 auto 24px !important;
  text-align: center !important;
}

#colorbox:has(.advanced-order) .extras-wrap .extra {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#colorbox:has(.advanced-order) .extras-wrap .extra.delivery > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 34px !important;
  padding: 6px 12px !important;
  border-radius: var(--oxy-advanced-radius) !important;
  background: #fff !important;
  color: var(--oxy-advanced-text) !important;
}

/* Zpet / Nakupni kosik - stejny button system jako checkout. */
#colorbox:has(.advanced-order) .advancedOrder__buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 auto !important;
}

#colorbox:has(.advanced-order) .advancedOrder__buttons .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 11px 20px !important;
  border-radius: var(--oxy-advanced-radius) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}

#colorbox:has(.advanced-order) .advancedOrder__buttons .next-step-back {
  border: 1px solid var(--oxy-advanced-accent) !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--oxy-advanced-text) !important;
}

#colorbox:has(.advanced-order) .advancedOrder__buttons .btn-conversion {
  border: 1px solid var(--oxy-advanced-accent) !important;
  background: var(--oxy-advanced-accent) !important;
  background-image: none !important;
  color: #fff !important;
}

#colorbox:has(.advanced-order) .advancedOrder__buttons .btn-conversion::before,
#colorbox:has(.advanced-order) .advancedOrder__buttons .next-step-back::before {
  background-image: none !important;
}

@media (hover:hover) {
  #colorbox:has(.advanced-order) .advancedOrder__buttons .next-step-back:hover {
    border-color: var(--oxy-advanced-accent) !important;
    background: var(--oxy-advanced-accent) !important;
    color: #fff !important;
  }

  #colorbox:has(.advanced-order) .advancedOrder__buttons .btn-conversion:hover {
    border-color: var(--oxy-advanced-accent-dark) !important;
    background: var(--oxy-advanced-accent-dark) !important;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(222,51,127,.14) !important;
  }
}

/* Zavreni: ciste X + jemny ruzovy hover. */
#colorbox:has(.advanced-order) #cboxClose {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  z-index: 30 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--oxy-advanced-radius) !important;
  background: transparent !important;
  background-image: none !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: background-color .18s ease !important;
}

#colorbox:has(.advanced-order) #cboxClose::before,
#colorbox:has(.advanced-order) #cboxClose::after {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  top: 20px !important;
  width: 22px !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: var(--oxy-advanced-text) !important;
}

#colorbox:has(.advanced-order) #cboxClose::before {
  transform: rotate(45deg) !important;
}

#colorbox:has(.advanced-order) #cboxClose::after {
  transform: rotate(-45deg) !important;
}

@media (hover:hover) {
  #colorbox:has(.advanced-order) #cboxClose:hover {
    background: var(--oxy-advanced-accent-soft) !important;
  }

  #colorbox:has(.advanced-order) #cboxClose:hover::before,
  #colorbox:has(.advanced-order) #cboxClose:hover::after {
    background: var(--oxy-advanced-accent) !important;
  }
}

/* ==================================================
   DOPORUCENE PRODUKTY - rozsirena varianta
   ================================================== */
#colorbox:has(.advanced-order) .advanced-order-suggestion {
  margin: 34px 0 18px !important;
  padding: 30px 0 0 !important;
  border-top: 1px solid var(--oxy-advanced-border-soft) !important;
  color: var(--oxy-advanced-text) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

/* Mezera mezi kartami - stejny princip jako ve vypisu kategorie. */
#colorbox:has(.advanced-order) #products.products-additional > .product {
  box-sizing: border-box !important;
  padding: 6px !important;
  border: 0 !important;
  background: transparent !important;
}

#colorbox:has(.advanced-order) #products.products-additional > .product > .p {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid var(--oxy-advanced-border) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#colorbox:has(.advanced-order) #products.products-additional .p .image,
#colorbox:has(.advanced-order) #products.products-additional .p .image img {
  border-radius: var(--oxy-advanced-radius) !important;
}

#colorbox:has(.advanced-order) #products.products-additional .p .name,
#colorbox:has(.advanced-order) #products.products-additional .p .name span {
  color: var(--oxy-advanced-text) !important;
  text-decoration: none !important;
  transition: color .18s ease !important;
}

#colorbox:has(.advanced-order) #products.products-additional .p-tools .btn,
#colorbox:has(.advanced-order) #products.products-additional .btn-cart {
  border-radius: 11px !important;
}

@media (hover:hover) {
  #colorbox:has(.advanced-order) #products.products-additional .p .name:hover,
  #colorbox:has(.advanced-order) #products.products-additional .p .name:hover span {
    color: var(--oxy-advanced-accent) !important;
  }
}

/* ==================================================
   MOBIL - Colorbox ma inline rozmery, proto ho na telefonu
   explicitne prizpusobime sirce viewportu.
   ================================================== */
@media (max-width: 767px) {
  #colorbox:has(.advanced-order) {
    left: 50% !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    transform: translateX(-50%) !important;
  }

  #colorbox:has(.advanced-order) #cboxWrapper,
  #colorbox:has(.advanced-order) #cboxTopCenter,
  #colorbox:has(.advanced-order) #cboxContent,
  #colorbox:has(.advanced-order) #cboxLoadedContent,
  #colorbox:has(.advanced-order) #cboxBottomCenter {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #colorbox:has(.advanced-order) .advanced-order {
    padding: 28px 14px 20px !important;
  }

  #colorbox:has(.advanced-order) .advanced-order > .h1:first-child {
    margin-left: 40px !important;
    margin-right: 40px !important;
    font-size: 26px !important;
  }

  #colorbox:has(.advanced-order) .advanced-order > .h2[data-testid="textPopupProductName"] {
    margin-bottom: 18px !important;
    font-size: 18px !important;
  }

  #colorbox:has(.advanced-order) .advancedOrder__buttons {
    gap: 8px !important;
  }

  #colorbox:has(.advanced-order) .advancedOrder__buttons .btn {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #colorbox:has(.advanced-order) .advanced-order-suggestion {
    margin-top: 26px !important;
    padding-top: 24px !important;
    font-size: 24px !important;
  }

  #colorbox:has(.advanced-order) #products.products-additional > .product {
    padding: 4px !important;
  }

  #colorbox:has(.advanced-order) #products.products-additional > .product > .p {
    padding: 10px !important;
    border-radius: 10px !important;
  }

  #colorbox:has(.advanced-order) #cboxClose {
    top: 8px !important;
    right: 8px !important;
  }
}

/* ==================================================
   11) FIX v14: Colorbox scrollbar + close button
   Nezasahujeme do Shoptetem vypoctene vysky popupu.
   Scrollovani zustava funkcni, pouze schovame jeho listu.
   ================================================== */

/* Křížek musí být vždy vidět nad obsahem popupu. */
#colorbox:has(.advanced-order) #cboxClose {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 999 !important;
}

/* Zachováme interní scroll, ale vizuálně schováme scrollbar. */
#colorbox:has(.advanced-order) #cboxLoadedContent {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#colorbox:has(.advanced-order) #cboxLoadedContent::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}


/* ==============================================================
   OXYBAG - POKLADNA v19D: finalni doladeni vizualu formulare
   Navazuje na v7 bez zmeny checkout logiky a bez JavaScriptu.
   Plati jen pro .ordering-process, popup po pridani beze zmen.
   ============================================================== */

/* A. Sdilena typografie a povrchy objednavkovych kroku. */
body.ordering-process #checkoutContent {
  --oxy-checkout-border-soft: #efe2e8;
  --oxy-checkout-accent-soft: #fbeef4;
}

body.ordering-process #checkoutContent .co-box {
  border-color: #eee0e7 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 5px 19px rgba(50, 23, 36, .035) !important;
}

body.ordering-process #checkoutContent .co-box > :is(h2, h3, h4, .h2, .h3, .h4),
body.ordering-process #checkoutContent .co-box > .box-heading {
  color: #1b1b1b !important;
  font-weight: 700 !important;
  letter-spacing: -.015em;
}

/* B. Doprava a platba - kazdy sloupec lehka karta, moznosti zustavaji klikatelne. */
body.ordering-process #checkoutContent .co-delivery-method,
body.ordering-process #checkoutContent .co-payment-method {
  box-sizing: border-box !important;
  border: 1px solid #f0dfe8 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 5px 19px rgba(50, 23, 36, .035) !important;
  padding: 19px 18px !important;
}

body.ordering-process #checkoutContent .shipping-billing-table .radio-wrapper {
  /* Stejne rozmery u vsech moznosti - nic pri kliknuti neposkakuje. */
  box-sizing: border-box !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;
  padding: 3px 6px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.ordering-process #checkoutContent .shipping-billing-table .radio-wrapper.active {
  /* Vyber znamena jen jemne ruzove pozadi, BEZ pruhu a ramecku. */
  border-color: transparent !important;
  background: #fbeef4 !important;
  box-shadow: none !important;
}

body.ordering-process #checkoutContent .shipping-billing-table .shipping-billing-name {
  color: #222 !important;
  line-height: 1.45 !important;
}

body.ordering-process #checkoutContent .shipping-billing-table .radio-wrapper:focus-within {
  /* Po kliknuti mysi uz nevznika druhy ramecek kolem vyberu. */
  outline: none !important;
  outline-offset: 0 !important;
}

/* Pri ovladani klavesnici zustava viditelne oznaceni fokusu. */
body.ordering-process #checkoutContent .shipping-billing-table .radio-wrapper:has(input[type="radio"]:focus-visible) {
  outline: 2px solid rgba(222, 51, 127, .55) !important;
  outline-offset: 2px !important;
}

/* C. Osobni / fakturacni udaje: sjednocene okraje, dobre citelna pole. */
body.ordering-process #checkoutContent .co-box .form-group {
  margin-bottom: 15px;
}

body.ordering-process #checkoutContent .co-box .form-group > label,
body.ordering-process #checkoutContent .co-box .control-label {
  color: #292929 !important;
  line-height: 1.5 !important;
}

body.ordering-process #checkoutContent :is(input.form-control, select.form-control, textarea.form-control) {
  box-sizing: border-box !important;
  max-width: 100% !important;
  border: 1px solid #d8d2d6 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #202020 !important;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}

body.ordering-process #checkoutContent :is(input.form-control, select.form-control) {
  min-height: 43px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

body.ordering-process #checkoutContent textarea.form-control {
  min-height: 98px !important;
  padding: 11px 12px !important;
}

body.ordering-process #checkoutContent :is(input.form-control, select.form-control, textarea.form-control):focus {
  border-color: #de337f !important;
  box-shadow: 0 0 0 3px rgba(222, 51, 127, .11) !important;
}

body.ordering-process #checkoutContent :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: #de337f;
}

/* D. Souhrn nakupu, celkova castka a volna rekapitulace. */
body.ordering-process #checkoutContent .order-summary.box.co-box {
  border: 1px solid #f0dbe6 !important;
  border-radius: 14px !important;
  background: #fff9fc !important;
  box-shadow: none !important;
}

body.ordering-process #checkoutContent .order-summary .order-summary-item {
  border-bottom-color: #efe3e9 !important;
}

body.ordering-process #checkoutContent :is(.order-summary, .cart-summary) :is(.total-price, .price-primary, .price-final) {
  color: #1a1a1a !important;
  font-weight: 750 !important;
}

/* E. Darky, slevove kody a doporuceni v kosiku.
   Jen vizualni prvky, bez presouvani nebo skryvani obsahu. */
body.ordering-process :is(.cart-gifts, .cart-gifts-wrapper, .cart-gift-wrapper) {
  border-radius: 12px !important;
}

body.ordering-process :is(.cart-gift, .cart-gift-item, .cart-gift-row) img {
  border-radius: 8px !important;
}

body.ordering-process :is(.cart-gift, .cart-gift-item, .cart-gift-row) :is(.btn, button) {
  border: 1px solid #de337f !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #de337f !important;
  box-shadow: none !important;
}

body.ordering-process :is(.discount-coupon, .cart-coupon, .coupon-form, .discount-coupon-form) {
  /* Zadny prazdny ruzovy obdelnik pred polem pro kupon. */
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.ordering-process :is(.discount-coupon, .cart-coupon, .coupon-form, .discount-coupon-form) :is(input[type="text"], input.form-control) {
  min-height: 44px !important;
  border: 1px solid #e7d2dc !important;
  border-radius: 9px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.ordering-process :is(.discount-coupon, .cart-coupon, .coupon-form, .discount-coupon-form) :is(button, .btn) {
  min-height: 44px !important;
  border: 1px solid #de337f !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #de337f !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

@media (hover: hover) {
  body.ordering-process :is(.discount-coupon, .cart-coupon, .coupon-form, .discount-coupon-form) :is(button, .btn):hover,
  body.ordering-process :is(.cart-gift, .cart-gift-item, .cart-gift-row) :is(button, .btn):hover {
    background: #fbeef4 !important;
  }
}

body.ordering-process :is(.cart-related-products, .cart-related-wrapper, .cart-related-items) .product {
  border-radius: 12px !important;
}

body.ordering-process :is(.cart-related-products, .cart-related-wrapper, .cart-related-items) :is(.p, .product-inner) {
  border-radius: 12px !important;
}

/* F. Mobil: karty a policka bez pretekani. Sablonove rozlozeni nechavame. */
@media (max-width: 767px) {
  body.ordering-process #checkoutContent .co-delivery-method,
  body.ordering-process #checkoutContent .co-payment-method {
    padding: 13px 10px !important;
    border-radius: 12px !important;
  }

  body.ordering-process #checkoutContent .shipping-billing-table .radio-wrapper {
    padding: 4px 2px !important;
  }

  body.ordering-process #checkoutContent .co-box {
    border-radius: 12px !important;
  }

  body.ordering-process #checkoutContent :is(input.form-control, select.form-control, textarea.form-control) {
    max-width: 100% !important;
  }
}


/* ================================================================
   OXYBAG - KROK 19D
   Jen pokladna: vyber dopravy, tlacitka, povinna pole a checkboxy.
   CSS nenastavuje zadne objednavkove stavy a nemeni logiku Shoptetu.
   ================================================================ */

/* Radio: stejne ruzove oznaceni jako ve filtrech kategorii.
   Puvodni kruh i moznost kliknuti zustavaji zachovany. */
body.ordering-process #checkoutContent .shipping-billing-table input[type="radio"] {
  accent-color: #de337f !important;
}
body.ordering-process #checkoutContent .shipping-billing-table .radio-wrapper.active,
body.ordering-process #checkoutContent .shipping-billing-table .radio-wrapper.active > label {
  background-color: #fbeef4 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
body.ordering-process #checkoutContent .shipping-billing-table .radio-wrapper.active::before,
body.ordering-process #checkoutContent .shipping-billing-table .radio-wrapper.active::after {
  box-shadow: none !important;
}

/* Formulare slevoveho kuponu: obal je neviditelny, pole a tlacitko zustavaji. */
body.ordering-process :is(.discount-coupon, .cart-coupon, .coupon-form, .discount-coupon-form):empty {
  display: none !important;
}

/* Tlacitko 'Vybrat jiny darek'. Tridu doplni pouze prezencni skript. */
body.ordering-process #content .oxy-checkout-change-gift,
body.ordering-process .oxy-checkout-change-gift,
#cart-widget .oxy-checkout-change-gift {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  width: auto !important;
  padding: 8px 16px !important;
  border: 1px solid #de337f !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #de337f !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color .15s ease, color .15s ease !important;
}
@media (hover: hover) {
  body.ordering-process #content .oxy-checkout-change-gift:hover,
  body.ordering-process .oxy-checkout-change-gift:hover,
  #cart-widget .oxy-checkout-change-gift:hover {
    background: #fbeef4 !important;
    color: #b82b69 !important;
  }
}
body.ordering-process #content .oxy-checkout-change-gift:focus-visible,
body.ordering-process .oxy-checkout-change-gift:focus-visible,
#cart-widget .oxy-checkout-change-gift:focus-visible {
  outline: 2px solid #de337f !important;
  outline-offset: 3px !important;
}

/* Tlacitko 'Prihlasit se do meho uctu' ve 3. kroku. */
body.ordering-process #checkoutContent .oxy-checkout-login-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-height: 42px !important;
  max-width: 100% !important;
  padding: 10px 17px !important;
  border: 1px solid #de337f !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #de337f !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: normal !important;
  text-align: center !important;
  box-shadow: none !important;
  transition: background-color .15s ease !important;
}
@media (hover: hover) {
  body.ordering-process #checkoutContent .oxy-checkout-login-btn:hover {
    background: #fbeef4 !important;
  }
}
body.ordering-process #checkoutContent .oxy-checkout-login-btn:focus-visible {
  outline: 2px solid #de337f !important;
  outline-offset: 3px !important;
}

/* Presunuty originalni text s vysvetlenim hvezdicky pod 'Osobni udaje'. */
body.ordering-process #checkoutContent .oxy-checkout-required-note {
  display: block !important;
  position: static !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  flex: 0 0 100% !important;
  margin: 1px 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #777 !important;
  text-align: left !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}
body.ordering-process #checkoutContent .oxy-checkout-required-note :is(.required, .mandatory, .required-asterisk),
body.ordering-process #checkoutContent .oxy-checkout-required-note > span:first-child {
  color: #de337f !important;
}

/* Checkboxy pouze na strankach objednavky: kulaty tvar, ruzove zatrzeni.
   Nativni input zustava pouzitelny mysi i klavesnici. */
body.ordering-process #checkoutContent input[type="checkbox"],
body.ordering-process #content input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  position: relative !important;
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
  margin: 0 8px 0 0 !important;
  border: 1.5px solid #c7bdc2 !important;
  border-radius: 50% !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  vertical-align: middle !important;
  accent-color: #de337f !important;
  cursor: pointer !important;
}
body.ordering-process #checkoutContent input[type="checkbox"]:checked,
body.ordering-process #content input[type="checkbox"]:checked {
  border-color: #de337f !important;
  background: #de337f !important;
}
body.ordering-process #checkoutContent input[type="checkbox"]:checked::after,
body.ordering-process #content input[type="checkbox"]:checked::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 5px !important;
  top: 2px !important;
  width: 4px !important;
  height: 8px !important;
  border-right: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  transform: rotate(45deg) !important;
}
body.ordering-process #checkoutContent input[type="checkbox"]:focus-visible,
body.ordering-process #content input[type="checkbox"]:focus-visible {
  outline: 2px solid #de337f !important;
  outline-offset: 3px !important;
}

@media (max-width: 767px) {
  body.ordering-process #checkoutContent .oxy-checkout-login-btn {
    width: auto !important;
    max-width: 100% !important;
  }
  body.ordering-process #checkoutContent .oxy-checkout-required-note {
    margin-bottom: 15px !important;
  }
}
