/* =========================================================
   KOMIKSAN STEP 18
   Košík a objednávka: modrý Komiksan pattern jako pozadí,
   ale formuláře/tabulky/rekapitulace zůstávají na bílém podkladu.
   Soubor: komiksan-step18-cart-checkout-pattern-background.css
   FTP: /upload/komiksan-step18-cart-checkout-pattern-background.css
   WEB: /user/documents/upload/komiksan-step18-cart-checkout-pattern-background.css

   Pozn.:
   - Platí pro košík a objednávkový proces.
   - Nesahá na homepage, kategorie, detail produktu, header ani footer.
   - Pokud bude pattern moc výrazný, dá se v dalším kroku jen zmenšit/zjemnit.
   ========================================================= */

:root {
  --ks-step18-pattern: url("/user/documents/upload/shutterstock_2611552939%20colour.jpg");
  --ks-step18-white: #FFFFFF;
  --ks-step18-blue: #1806FD;
  --ks-step18-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
  --ks-step18-radius: 0px;
}

/* =========================================================
   1) Pozadí košíku / objednávky
   ========================================================= */

body.ordering-process,
body.type-cart,
body[class*="cart"],
body[class*="checkout"] {
  background-image: var(--ks-step18-pattern) !important;
  background-repeat: repeat !important;
  background-position: center top !important;
  background-size: 420px auto !important;
  background-attachment: fixed !important;
  background-color: #050033 !important;
}

/* Hlavní wrappery zprůhlednit, aby pattern byl za obsahem vidět */
body.ordering-process #content,
body.ordering-process .content-wrapper,
body.ordering-process .content,
body.ordering-process .overall-wrapper,
body.ordering-process .content-inner,
body.type-cart #content,
body.type-cart .content-wrapper,
body.type-cart .content,
body.type-cart .overall-wrapper,
body.type-cart .content-inner {
  background: transparent !important;
  background-color: transparent !important;
}

/* Trochu prostoru kolem obsahu, aby bylo pozadí opravdu vidět */
body.ordering-process .content-wrapper,
body.type-cart .content-wrapper {
  padding-top: 34px !important;
  padding-bottom: 44px !important;
}

/* =========================================================
   2) Bílé čitelné plochy pro košík, formuláře, dopravy, platby
   ========================================================= */

body.ordering-process .cart-inner,
body.ordering-process .cart-content,
body.ordering-process .checkout-box,
body.ordering-process .co-box,
body.ordering-process .co-box-additional,
body.ordering-process .co-contact-information,
body.ordering-process .co-billing-address,
body.ordering-process .co-shipping-address,
body.ordering-process .co-delivery,
body.ordering-process .co-payment,
body.ordering-process .co-order,
body.ordering-process .order-summary,
body.ordering-process .cart-summary,
body.ordering-process .recapitulation,
body.ordering-process .summary,
body.ordering-process .box,
body.ordering-process .box-bg-variant,
body.ordering-process .form-group,
body.ordering-process .form-group-wrapper,
body.ordering-process .shipping-billing-table,
body.ordering-process .cart-table,
body.ordering-process table.cart-table,
body.ordering-process .cart-table tr,
body.ordering-process .cart-table td,
body.ordering-process .cart-table th,
body.type-cart .cart-inner,
body.type-cart .cart-content,
body.type-cart .cart-summary,
body.type-cart .cart-table,
body.type-cart table.cart-table,
body.type-cart .cart-table tr,
body.type-cart .cart-table td,
body.type-cart .cart-table th,
body.type-cart .summary,
body.type-cart .box,
body.type-cart .box-bg-variant {
  background: var(--ks-step18-white) !important;
  background-color: var(--ks-step18-white) !important;
}

/* Větší bílé karty / bloky */
body.ordering-process .cart-inner,
body.ordering-process .checkout-box,
body.ordering-process .co-box,
body.ordering-process .order-summary,
body.ordering-process .cart-summary,
body.ordering-process .recapitulation,
body.ordering-process .summary,
body.type-cart .cart-inner,
body.type-cart .cart-summary,
body.type-cart .summary {
  box-shadow: var(--ks-step18-shadow) !important;
  border-radius: var(--ks-step18-radius) !important;
}

/* Aby bílé tabulky/panely nepůsobily nalepeně */
body.ordering-process .cart-inner,
body.type-cart .cart-inner {
  padding: 28px !important;
}

body.ordering-process .checkout-box,
body.ordering-process .co-box,
body.ordering-process .order-summary,
body.ordering-process .cart-summary,
body.ordering-process .recapitulation,
body.ordering-process .summary {
  padding: 24px !important;
}

/* =========================================================
   3) Inputy/selecty/textarea zůstanou čisté a čitelné
   ========================================================= */

body.ordering-process input,
body.ordering-process select,
body.ordering-process textarea,
body.type-cart input,
body.type-cart select,
body.type-cart textarea {
  background: var(--ks-step18-white) !important;
  background-color: var(--ks-step18-white) !important;
}

/* =========================================================
   4) Kroky objednávky na čistém bílém pásu
   ========================================================= */

body.ordering-process .cart-steps,
body.ordering-process .checkout-steps,
body.ordering-process .steps,
body.type-cart .cart-steps,
body.type-cart .checkout-steps,
body.type-cart .steps {
  background: var(--ks-step18-white) !important;
  background-color: var(--ks-step18-white) !important;
  padding: 22px 24px !important;
  margin-bottom: 28px !important;
  box-shadow: var(--ks-step18-shadow) !important;
}

/* =========================================================
   5) Mobil - menší pattern a menší paddingy
   ========================================================= */

@media (max-width: 767px) {
  body.ordering-process,
  body.type-cart,
  body[class*="cart"],
  body[class*="checkout"] {
    background-size: 280px auto !important;
    background-attachment: scroll !important;
  }

  body.ordering-process .content-wrapper,
  body.type-cart .content-wrapper {
    padding-top: 20px !important;
    padding-bottom: 28px !important;
  }

  body.ordering-process .cart-inner,
  body.type-cart .cart-inner {
    padding: 18px !important;
  }

  body.ordering-process .checkout-box,
  body.ordering-process .co-box,
  body.ordering-process .order-summary,
  body.ordering-process .cart-summary,
  body.ordering-process .recapitulation,
  body.ordering-process .summary {
    padding: 18px !important;
  }

  body.ordering-process .cart-steps,
  body.ordering-process .checkout-steps,
  body.ordering-process .steps,
  body.type-cart .cart-steps,
  body.type-cart .checkout-steps,
  body.type-cart .steps {
    padding: 18px 14px !important;
    margin-bottom: 20px !important;
  }
}