/* PRQNO – design sjednocení: košík + celý průběh objednávky (doprava
   a platba, kontaktní/doručovací údaje, rekapitulace). Jen CSS navrch
   nativní Shoptet struktury, žádná JS přestavba – checkout je byznys
   kritický, tady se nic riskovat nebude.

   Ověřeno naživo (curl + Playwright): /kosik/ (prázdný stav – celá
   stránka, `body.in-kosik.ordering-process`). Samotné kroky "Doprava
   a platba" a "Rekapitulace" jsem naživo neověřil – při pokusu projít
   objednávkou automatizovaným prohlížečem Shoptet tiše odmítal odeslat
   formulář (nejspíš ochrana proti botům), takže jsem se k nim nedostal.
   Cílí to na `body.ordering-process` (sdílenou třídu, kterou má i
   ověřený /kosik/) a sdílené nativní komponenty (#checkoutContent,
   .co-box, .form-group, .btn-primary, ol.cart-header – ty všechny už
   dřív používaly/zmiňovaly ostatní soubory v tomhle projektu, viz
   Sitewide/remove-elements2.js a Global/custom-style.css). Po nahrání
   se to chce jednou naživo projít a doladit, kdyby něco nesedělo. */

/* ===== CELKOVÝ RÁMEC ===== */
body.ordering-process #content.content{
  padding: 32px 20px 72px !important;
}
body.ordering-process .content-inner{
  max-width: 1200px !important; /* stejná šířka jako obsah jinde na webu (blog/produkt) */
  margin: 0 auto !important;
}

/* ===== ŠÍŘKA SLOUPCŮ "DOPRAVA A PLATBA" / "INFORMACE O VÁS" =====
   Zjištěno na reálném HTML + DevTools (poslal zákazník): na velmi
   širokých monitorech (≥1440px) má Shoptet vlastní nativní pravidlo
   `@media(min-width:1440px) #checkoutContent{margin-left:8%;
   padding-right:80px; width:50%}`, které levý sloupec zúží a posune
   – proto ten velký "margin" v DevTools, nešlo o nic z tohohle
   souboru. Přebito zpátky na rozumné rozvržení + pravý sloupec
   ("Rekapitulace objednávky") o dost širší, jak bylo požadováno.

   Bezpečné oproti minulému pokusu: #checkoutContent/#checkoutSidebar
   jsou `float:left` (starší Bootstrap grid, ne flexbox – ověřeno
   živě), takže obyčejná `width` v procentech je tady SPRÁVNÝ způsob
   (žádné flex vlastnosti potřeba, ty by beztak neměly efekt). */
body.ordering-process #checkoutContent{
  float: left !important;
  width: 60% !important;
  margin-left: 0 !important;
  padding-right: 20px !important;
}
body.ordering-process #checkoutSidebar{
  float: left !important;
  width: 40% !important;
}
@media (max-width: 991px){
  body.ordering-process #checkoutContent,
  body.ordering-process #checkoutSidebar{
    float: none !important;
    width: 100% !important;
  }
}

/* ===== MOBIL: širší sloupce, míň zbytečného odsazení kolem dokola =====
   Nahlášeno živě (DevTools, iPhone 12 Pro / 390px): na mobilu se
   sčítá padding stránky + padding sloupce (nativní Bootstrap gutter
   20px/20px, zbytečný, když sloupce stejně spadnou pod sebe) + padding
   samotné karty (24px) – na 390px širokém displeji to ukrajuje hodně
   z místa, obsah pak vypadá stísněně. Zúženo na mobilu, ať karty
   zabírají většinu šířky displeje. */
@media (max-width: 767px){
  body.ordering-process #content-wrapper.container{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body.ordering-process #content.content{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  body.ordering-process #checkoutContent,
  body.ordering-process #checkoutSidebar{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.ordering-process .cart-content,
  body.ordering-process #checkoutContent .co-box,
  body.ordering-process #checkoutContent fieldset.box,
  body.ordering-process #checkoutSidebar .box,
  body.ordering-process #checkoutSidebar .checkout-box,
  body.ordering-process #checkoutSidebar .order-summary{
    padding: 16px !important;
  }
}

/* ===== KROKOVÁČ "Košík / Doprava a platba / Rekapitulace" =====
   Barvy teček už řešil Global/custom-style.css (ol.cart-header li.active
   a/strong :before) – tady jde jen o celkové rozvržení kolem toho. */
body.ordering-process ol.cart-header{
  display: flex !important;
  justify-content: center !important;
  gap: 32px !important;
  list-style: none !important;
  padding: 0 0 28px !important;
  margin: 0 0 28px !important;
  border-bottom: 1px solid #e8e4dc !important;
}
body.ordering-process ol.cart-header li{
  font-family: Montserrat, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #9a958a !important;
}
body.ordering-process ol.cart-header li a,
body.ordering-process ol.cart-header li strong{
  color: inherit !important;
  text-decoration: none !important;
}
body.ordering-process ol.cart-header li.active,
body.ordering-process ol.cart-header li.active a,
body.ordering-process ol.cart-header li.active strong{
  color: #2c3930 !important;
}
body.ordering-process ol.cart-header li.completed,
body.ordering-process ol.cart-header li.completed a,
body.ordering-process ol.cart-header li.completed strong{
  color: #c1894a !important;
}

/* ===== NADPIS KOŠÍKU ===== */
body.ordering-process .cart-heading,
body.ordering-process #content h1{
  color: #2c3930 !important;
  font-family: Montserrat, Arial, sans-serif !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 28px !important;
}

/* ===== OBSAH KOŠÍKU (položky) ===== */
body.ordering-process .cart-content{
  background: #fff !important;
  border-radius: 16px !important;
  padding: 24px !important;
}
body.ordering-process .cart-row{
  gap: 24px !important;
}

/* Krokovací pole množství – barvy tlačítek už řeší custom-style.css,
   tady jen zaoblení/rámeček ať to nesedí nativně hranaté. */
body.ordering-process .quantity{
  border: 1px solid #DCD7C9 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
body.ordering-process .quantity .increase,
body.ordering-process .quantity .decrease{
  background: #f4f1e8 !important;
  transition: background .18s !important;
}
body.ordering-process .quantity .increase:hover,
body.ordering-process .quantity .decrease:hover{
  background: #2c3930 !important;
}

/* Prázdný košík – odkazy na nabídku/hledání */
body.ordering-process .cart-empty{
  background: #fff !important;
  border-radius: 20px !important;
  padding: 48px 32px !important;
  text-align: center !important;
}
body.ordering-process .empty-cart-boxes h3{
  color: #2c3930 !important;
  font-size: 16px !important;
}
/* Seznam kategorií pod "Podívejte se na naši nabídku" (doplněný o
   podkategorie skriptem Kosik/kosik-prazdny-nabidka.js) – trochu
   vzdušnější rozestup + barvy sladěné se zbytkem webu. */
body.ordering-process .empty-cart-boxes ul{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.ordering-process .empty-cart-boxes li + li{
  margin-top: 8px !important;
}
body.ordering-process .empty-cart-boxes li a{
  color: #2c3930 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: color .18s !important;
}
body.ordering-process .empty-cart-boxes li a:hover{
  color: #c1894a !important;
  text-decoration: underline !important;
}

/* POKUS Z MINULÉHO KOLA ZRUŠEN: nastavení width+flex napevno na
   #checkoutContent/#checkoutSidebar (57 %/41 %) nahlášeno živě jako
   rozbité — sloupce přestaly být vedle sebe a spadly pod sebe.
   Nativní rozvržení (native .row grid/flex, neznámý přesný mechanismus)
   dělá zjevně něco jiného, než jsem předpokládal, a natvrdo nastavená
   šířka to porušila. Vráceno na 100% nativní poměr sloupců – bez
   ověřeného přístupu k reálné HTML struktuře kroku "Doprava a platba"
   se do toho radši nebude sahat znovu naslepo. */

/* ===== BOČNÍ SLOUPEC: souhrn / "Potřebujete pomoc?" ===== */
body.ordering-process #checkoutSidebar .box,
body.ordering-process #checkoutSidebar .checkout-box,
body.ordering-process #checkoutSidebar .order-summary,
body.ordering-process .cart-content .box{
  background: #fff !important;
  border: 1px solid #e8e4dc !important;
  border-radius: 14px !important;
  padding: 22px !important;
  margin-bottom: 18px !important;
}
body.ordering-process .contact-box ul{
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 0 !important;
}
body.ordering-process .contact-box li{
  padding: 4px 0 !important;
  font-size: 14px !important;
  color: #333 !important;
}
body.ordering-process .contact-box a{
  color: #2c3930 !important;
  text-decoration: none !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}
body.ordering-process .contact-box a:hover{
  color: #c1894a !important;
}

/* ===== KROK "DOPRAVA A PLATBA" + KONTAKTNÍ/DORUČOVACÍ ÚDAJE =====
   #checkoutContent je ověřená reálná třída (viz
   Sitewide/remove-elements2.js), samotný obsah uvnitř jsem naživo
   neviděl – cílí na sdílené .co-box/.form-group/.form-control komponenty
   (stejné jako Ucet/ucet.css u registrace/přihlášení). */
body.ordering-process #checkoutContent .co-box,
body.ordering-process #checkoutContent fieldset.box{
  background: #fff !important;
  border: 1px solid #e8e4dc !important;
  border-radius: 14px !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
}
body.ordering-process #checkoutContent h2{
  color: #2c3930 !important;
  font-family: Montserrat, Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  margin: 0 0 16px !important;
}
/* Label má nativně position:absolute (plovoucí popisek) – bez
   explicitního position:static zůstává navrstvený přes vyplněnou
   hodnotu (nahlášeno živě u kroku "Informace o vás" – e-mail/země). */
body.ordering-process #checkoutContent .form-group.smart-label-wrapper label{
  position: static !important;
  display: block !important;
  color: #2c3930 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  transform: none !important;
  transition: none !important;
}
body.ordering-process #checkoutContent .form-control{
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #DCD7C9 !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  font-size: 15px !important;
  color: #2c3930 !important;
  transition: border-color .18s, box-shadow .18s !important;
}
body.ordering-process #checkoutContent .form-control:focus{
  border-color: #c1894a !important;
  box-shadow: 0 0 0 3px rgba(193,137,74,.15) !important;
  outline: none !important;
}
/* Telefon (vlajka + předvolba + číslo) – pojistka proti přetečení
   šířky na mobilu (stejný widget jako v Ucet/ucet.css). */
body.ordering-process #checkoutContent .phone-combined-input{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Pole formuláře ("Informace o vás" – jméno, e-mail, telefon, adresa)
   do 2 sloupců na širší obrazovce, ať karta využívá celou šířku a
   nejsou z toho zbytečně dlouhé úzké řádky. Zaškrtávátko/tlačítko
   pořád přes celou šířku. */
body.ordering-process #checkoutContent fieldset{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 4px 24px !important;
}
body.ordering-process #checkoutContent fieldset > legend,
body.ordering-process #checkoutContent fieldset .submit-wrapper,
body.ordering-process #checkoutContent fieldset > .form-group:has(input[type="checkbox"]){
  grid-column: 1 / -1 !important;
}
@media (max-width: 640px){
  body.ordering-process #checkoutContent fieldset{
    grid-template-columns: 1fr !important;
  }
}

/* Výběr dopravy/platby – ověřeno na reálném HTML (poslal zákazník):
   každá možnost je `.radio-wrapper` (input a label jako sourozenci,
   ne input uvnitř labelu), vybraná možnost má navíc třídu `.active`.
   Předchozí verze cílila na neexistující strukturu (li/label s
   radio uvnitř) – vůbec nic tím nešlo, teď je to na reálné třídě. */
body.ordering-process #checkoutContent input[type="radio"]{
  accent-color: #c1894a !important;
  width: 17px !important;
  height: 17px !important;
}
body.ordering-process #checkoutContent .radio-wrapper{
  border-radius: 10px !important;
  transition: background .18s !important;
}
body.ordering-process #checkoutContent .radio-wrapper.active{
  background: #faf8f3 !important;
}

/* Ikonka nápovědy "?" u některých možností dopravy – sladit s brand
   barvami (byla nativně jen tence orámovaný kroužek). */
body.ordering-process #checkoutContent .question-tooltip{
  background: #DCD7C9 !important;
  border-color: #DCD7C9 !important;
  color: #2c3930 !important;
  border-radius: 50% !important;
}

/* ===== REKAPITULACE / TABULKA POLOŽEK ===== */
body.ordering-process table{
  width: 100% !important;
  border-collapse: collapse !important;
}
body.ordering-process table th{
  text-align: left !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #6b6b63 !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid #e8e4dc !important;
}
body.ordering-process table td{
  padding: 12px !important;
  border-bottom: 1px solid #f0ede5 !important;
  font-size: 14px !important;
}

/* ===== TLAČÍTKA "POKRAČOVAT" / "DOKONČIT OBJEDNÁVKU" =====
   Barvu/hover řeší sitewide .btn-primary a .btn-conversion, tady jen
   velikost pro checkout kontext (výraznější, přes celou šířku sloupce
   na mobilu). */
body.ordering-process .submit-wrapper .btn,
body.ordering-process #checkoutSidebar .btn{
  padding: 13px 20px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
@media (max-width: 767px){
  body.ordering-process .submit-wrapper .btn,
  body.ordering-process #checkoutSidebar .btn{
    width: 100% !important;
  }
  body.ordering-process ol.cart-header{
    gap: 16px !important;
    font-size: 12px !important;
  }
}