/* PRQNO – design sjednocení: přihlášení, registrace, zapomenuté heslo
   a celá klientská sekce (/klient/...). Jen CSS navrch nativní Shoptet
   struktury (žádná JS přestavba jako u Zakázkové výroby/Pro firmy) –
   jde o funkční/přihlašovací stránky, tak radši žádné riziko.

   Ověřeno naživo (curl + Playwright) na skutečné běžící verzi webu:
   /login/, /registrace/, /klient/zapomenute-heslo/ – všechny tři
   sdílí stejnou nativní šablonu (#content.content.wide > .content-inner
   > h1 + form, uvnitř .form-group.smart-label-wrapper / .form-control
   / .btn-primary).

   Zbytek klientské sekce (/klient/ dashboard, osobní údaje, adresy,
   objednávky, změna hesla) vyžaduje přihlášení – nemám jak si tam
   naživo odzkoušet vzhled. Cílí to na `body.customer-page` (ověřená
   sdílená třída, kterou používá i /klient/zapomenute-heslo/) a na
   stejné sdílené nativní komponenty (.form-group/.co-box/.btn-primary/
   tabulky), takže by to mělo padnout i tam – ale po nahrání se to
   chce jednou naživo přihlášením zkontrolovat, jestli všude sedí.

   Popup přihlášení v hlavičce (#login.user-action-login) záměrně
   NEŘEŠÍME – leží uvnitř .user-action, které je v
   Sitewide/drobne-upravy.css natvrdo schované (viz komentář tam), a
   tlačítko, co by ho otevíralo, je schované taky. Reálně dostupný a
   používaný je jen tenhle standalone /login/. */

/* ===== SPOLEČNÝ RÁMEC: přihlášení / registrace / zapomenuté heslo =====
   Stejná struktura na všech třech: #content.content.wide > .content-inner
   > h1 + form. Kartu děláme přímo z .content-inner (žádný nový obal). */
body.in-login #content.content.wide,
body.in-registrace #content.content.wide,
body.in-zapomenute-heslo #content.content.wide{
  padding: 56px 20px 72px !important;
}
body.in-login .content-inner,
body.in-registrace .content-inner,
body.in-zapomenute-heslo .content-inner{
  max-width: 480px !important;
  margin: 0 auto !important;
  background: #fff !important;
  border-radius: 20px !important;
  padding: 40px 36px !important;
  box-shadow: 0 10px 32px rgba(44,57,48,.10) !important;
}
body.in-registrace .content-inner{
  max-width: 560px !important; /* registrace má víc polí, o něco širší karta */
}

/* Registrace jako jediná má navíc vlastní vnitřní "box" (.co-box >
   fieldset.box.box-bg-default) – aby nevznikla karta v kartě, vnitřní
   box vizuálně splyne s tou vnější (bez vlastního pozadí/rámečku). */
body.in-registrace .co-box.co-registration fieldset.box{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

body.in-login .content-inner h1,
body.in-registrace .content-inner h1,
body.in-zapomenute-heslo .content-inner h1{
  color: #2c3930 !important;
  font-family: Montserrat, Arial, sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  margin: 0 0 24px !important;
  text-align: center !important;
}
body.in-login .content-inner p,
body.in-registrace .content-inner > p,
body.in-zapomenute-heslo .content-inner p{
  color: #6b6b63 !important;
  font-size: 14px !important;
  text-align: center !important;
  margin: -12px 0 24px !important;
}

/* Podnadpisy uvnitř registrace ("Osobní údaje", "Odebírat newsletter",
   "Potvrzení") – oddělit jemnou linkou nad sekcí místo prázdna. */
body.in-registrace .content-inner h2{
  color: #2c3930 !important;
  font-family: Montserrat, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 28px 0 14px !important;
  padding-top: 20px !important;
  border-top: 1px solid #e8e4dc !important;
}
body.in-registrace .content-inner h2:first-of-type{
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* ===== FORMULÁŘOVÁ POLE (login/registrace/zapomenuté heslo) =====
   VŠECHNO scoped na .content-inner (ne jen na body.in-*) – nativní
   .form-control má i vyhledávací pole v hlavičce (stejná třída!), bez
   .content-inner scope by se přebarvilo i ono (chyba nahlášená živě:
   vyhledávání v hlavičce vypadalo na těchhle stránkách rozbité).

   Popisek (label) má nativně position:absolute (plovoucí popisek nad
   polem, viz .smart-label-wrapper) – proto explicitní position:static,
   jinak zůstává navrstvený přes vyplněnou hodnotu (nahlášeno živě).
   Nativně má i transform/transition (animovaný "sjezd" popisku k
   okraji pole při kliknutí/focusu) – vypnuto, popisek teď stojí
   napevno nahoře a nikam se nehýbe. */
body.in-login .content-inner .form-group.smart-label-wrapper label,
body.in-registrace .content-inner .form-group.smart-label-wrapper label,
body.in-zapomenute-heslo .content-inner .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.in-login .content-inner .form-group .required-asterisk,
body.in-registrace .content-inner .form-group .required-asterisk,
body.in-zapomenute-heslo .content-inner .form-group .required-asterisk{
  color: #2c3930 !important;
}
body.in-registrace .form-legend{
  color: #9a958a !important;
  font-size: 12px !important;
  margin-bottom: 16px !important;
}

body.in-login .content-inner .form-control,
body.in-registrace .content-inner .form-control,
body.in-zapomenute-heslo .content-inner .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.in-login .content-inner .form-control:focus,
body.in-registrace .content-inner .form-control:focus,
body.in-zapomenute-heslo .content-inner .form-control:focus{
  border-color: #c1894a !important;
  box-shadow: 0 0 0 3px rgba(193,137,74,.15) !important;
  outline: none !important;
}
body.in-login .content-inner .form-group,
body.in-registrace .content-inner .form-group,
body.in-zapomenute-heslo .content-inner .form-group{
  margin-bottom: 18px !important;
}

/* Newsletter checkbox – zarovnat s textem, ne nabité na sebe */
body.in-registrace .stay-in-touch .form-group{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
body.in-registrace .stay-in-touch input[type="checkbox"]{
  margin-top: 3px !important;
  accent-color: #c1894a !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}
body.in-registrace .stay-in-touch label{
  font-size: 14px !important;
  color: #333 !important;
}

/* Souhlas s podmínkami – menší, tlumený text, odkazy v oak barvě */
body.in-registrace .consents .label{
  font-size: 12.5px !important;
  color: #6b6b63 !important;
  line-height: 1.5 !important;
}
body.in-registrace .consents .label a{
  color: #c1894a !important;
  text-decoration: underline !important;
}

/* Odesílací tlačítko – přes celou šířku karty, výraznější padding
   (barvy/hover už řeší sitewide .btn-primary v drobne-upravy.css) */
body.in-login .submit-wrapper .btn-primary,
body.in-registrace .submit-wrapper .btn-primary,
body.in-zapomenute-heslo .submit-wrapper .btn-primary{
  width: 100% !important;
  padding: 13px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
}

/* Odkazy "Nová registrace" / "Zapomenuté heslo" pod formulářem */
body.in-login .alternative-links{
  display: flex !important;
  justify-content: center !important;
  gap: 20px !important;
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid #e8e4dc !important;
}
body.in-login .alternative-links a{
  color: #6b6b63 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: color .18s !important;
}
body.in-login .alternative-links a:hover{
  color: #c1894a !important;
  text-decoration: underline !important;
}

/* ===== KLIENTSKÁ SEKCE (/klient/...) – dashboard, osobní údaje,
   adresy, objednávky, změna hesla.

   OPRAVA (nahlášeno živě): stránka byla přes celou šířku obrazovky,
   ne "v krabici" jako Zakázková výroba/Pro firmy. Příčina: běžné
   stránky mají nativně `#content-wrapper class="container
   container-narrow content-wrapper"` (Shoptet, container-narrow =
   1178px), ale klientská sekce tu třídu nemá (stejná situace, jakou
   řešil Kategorie/kategorie.css u kategorií/vyhledávání) – proto byla
   přes celou šířku. Stejný trik i tady: dopočítat container-narrow
   šířku ručně, i bez té třídy. */
body.customer-page #content-wrapper.container{
  max-width: 1178px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.customer-page #content.content{
  padding: 40px 20px 72px !important;
}
/* OPRAVA (nahlášeno živě, skutečné HTML z /klient/nastaveni/): stránka
   "Nastavení mého účtu" sdílí stejný obal .content-inner i stejné
   id formuláře "register-form" jako /registrace/ (Shoptet interně
   používá společnou šablonu). Na /registrace/ má .content-inner být
   úzké (viz pravidla u body.in-registrace výš), ale tady v
   dvousloupcém layoutu klientské sekce má naopak vyplnit celou
   dostupnou šířku vedle bočního menu – proto samostatné pravidlo jen
   pro customer-page, které to přebije. Bez něj zůstávala karta
   "Osobní údaje" úzká uprostřed zbytečně širokého prázdna. */
body.customer-page main#content .content-inner{
  max-width: none !important;
  width: 100% !important;
}
/* SKUTEČNÝ VINÍK úzkého sloupce (nalezeno naživo přes vlastní přihlášení
   a stažení nativního main-13.less.css): formulář má i třídu
   ".registration-form" – Shoptetův nativní "forms redesign" na ni (a na
   login-form/contact-form/atd.) dává pevné `width:var(--form-fields-width-lg)`
   = 440px, přes :where() selektor (schválně nulová specificita, aby šlo
   snadno přebít). Na /registrace/ chceme těch 440px (úzká karta), ale
   tady v dvousloupcém layoutu klientské sekce ne – proto zvlášť pro
   customer-page. */
body.customer-page main#content .registration-form{
  width: 100% !important;
  max-width: none !important;
}
body.customer-page main#content h1{
  color: #2c3930 !important;
  font-family: Montserrat, Arial, sans-serif !important;
  font-weight: 700 !important;
  margin-bottom: 24px !important;
}
body.customer-page main#content h2{
  color: #2c3930 !important;
  font-family: Montserrat, Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
}

/* Obecné "krabice" s obsahem (osobní údaje, adresa, souhrn objednávky...) */
body.customer-page main#content .box,
body.customer-page main#content .co-box,
body.customer-page main#content fieldset.box{
  background: #fff !important;
  border: 1px solid #e8e4dc !important;
  border-radius: 14px !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
}

/* Formulářová pole – stejné jako login/registrace výš, scoped na
   main#content (ne celý body), ze stejného důvodu jako výš – ať se
   nepřebarví vyhledávací pole v hlavičce. Label má zase explicitní
   position:static, viz vysvětlení u login/registrace výš. */
body.customer-page main#content .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.customer-page main#content .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.customer-page main#content .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) – další možný zdroj přetečení
   šířky na mobilu, pojistka navíc. */
body.customer-page main#content .phone-combined-input{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
body.customer-page main#content .form-group{
  margin-bottom: 18px !important;
}

/* Formulářová karta (osobní údaje, adresa...) byla úzká uprostřed
   zbytečně širokého prázdna – karta teď vyplňuje celou dostupnou
   šířku vedle bočního menu a pole se skládají do 2 sloupců (na širší
   obrazovce), ať se ta šířka reálně využije a nevznikaly propastně
   dlouhé/prázdné řádky. Prvky, co mají logicky zabrat celý řádek
   (zaškrtávátko, tlačítko, samostatná pole), se roztáhnou přes oba
   sloupce – auto-fit se sám postará, i kdyby polí bylo víc/míň. */
body.customer-page main#content .box,
body.customer-page main#content .co-box,
body.customer-page main#content fieldset.box{
  width: 100% !important;
  max-width: none !important;
}
body.customer-page main#content fieldset{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 4px 24px !important;
}
body.customer-page main#content fieldset > legend,
body.customer-page main#content fieldset .form-legend,
body.customer-page main#content fieldset .submit-wrapper,
body.customer-page main#content fieldset > .form-group:has(input[type="checkbox"]){
  grid-column: 1 / -1 !important;
}
@media (max-width: 640px){
  body.customer-page main#content fieldset{
    grid-template-columns: 1fr !important;
  }
}

/* Boční nabídka klientské sekce (Zákaznické centrum / po přihlášení i
   Osobní údaje, Adresy, Objednávky, Změna hesla apod.) – ověřeno naživo
   na /klient/zapomenute-heslo/: <aside class="sidebar sidebar-left">
   > .box.client-center-box > ul > li > a. */
body.customer-page aside.sidebar-left{
  width: 260px !important;
  flex-shrink: 0 !important;
}
body.customer-page aside.sidebar-left .box{
  background: #fff !important;
  border: 1px solid #e8e4dc !important;
  border-radius: 14px !important;
  padding: 10px !important;
}
body.customer-page aside.sidebar-left ul{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.customer-page aside.sidebar-left li{
  list-style: none !important; /* native CMS li má vlastní !important odrážku, nestačí jen na ul */
}
body.customer-page aside.sidebar-left li + li{
  margin-top: 2px !important;
}
body.customer-page aside.sidebar-left a{
  display: block !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  color: #2c3930 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background .18s, color .18s !important;
}
body.customer-page aside.sidebar-left a:hover{
  background: #f4f1e8 !important;
  color: #c1894a !important;
}
/* Malé nadpisy skupin, co do seznamu vkládá Ucet/klient-menu-skupiny.js
   ("Doklady a platby", "Moje aktivita") – rozděluje dlouhý plochý
   seznam na přehlednější celky. */
body.customer-page aside.sidebar-left li.prq-sidebar-group-label{
  padding: 16px 14px 6px !important;
  margin-top: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: #9a958a !important;
  border-top: 1px solid #e8e4dc !important;
}
body.customer-page aside.sidebar-left li.prq-sidebar-group-label:first-child{
  margin-top: 0 !important;
  border-top: none !important;
}
body.customer-page aside.sidebar-left li.active > a,
body.customer-page aside.sidebar-left a.active,
body.customer-page aside.sidebar-left a.current{
  background: #2c3930 !important;
  color: #fff !important;
}
/* Hlavní obsah vedle bočního menu – dvousloupcé rozvržení */
body.customer-page .content-wrapper-in{
  display: flex !important;
  gap: 28px !important;
  align-items: flex-start !important;
}
body.customer-page main#content{
  flex: 1 !important;
  min-width: 0 !important;
}
@media (max-width: 767px){
  /* OPRAVA (nahlášeno živě): karta "Osobní údaje" i boční menu byly
     na mobilu širší než displej (obsah šel dočíst jen vodorovným
     scrollem). Příčina: main#content mělo jen flex:1 – to funguje
     jen když .content-wrapper-in je řádek (desktop); ve sloupci
     (mobil) flex:1 šířku vůbec neřídí, takže main#content neměl nic,
     co by ho drželo v šířce displeje. Teď má na mobilu i.sidebar-left
     explicitní width:100% + box-sizing, ať se nic nemůže roztáhnout
     přes okraj. */
  body.customer-page .content-wrapper-in{
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.customer-page aside.sidebar-left,
  body.customer-page main#content{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.customer-page #content-wrapper.container{
    overflow-x: hidden !important;
  }
}

/* Tabulky (historie objednávek apod.) */
body.customer-page main#content table{
  width: 100% !important;
  border-collapse: collapse !important;
}
body.customer-page main#content 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.customer-page main#content table td{
  padding: 12px !important;
  border-bottom: 1px solid #f0ede5 !important;
  font-size: 14px !important;
}

/* ===== PRÁZDNÝ STAV KLIENTSKÉ SEKCE – nabídka kategorií =====
   Vkládá Ucet/klient-prazdny-stav.js za větu typu "Ještě jste žádnou
   objednávku nevytvořil..." (nebo obdobnou u plateb/dokladů/slev) –
   ať prázdný účet láká k nákupu místo aby byl slepá ulička. Mřížka
   kategorií na mobilu záměrně 2 sloupce (širší karty, ne úzký
   jednosloupcový seznam – nahlášeno živě). */
body.customer-page .prq-klient-promo{
  background: #fff !important;
  border: 1px solid #e8e4dc !important;
  border-radius: 20px !important;
  padding: 32px !important;
  margin-top: 24px !important;
}
body.customer-page .prq-klient-promo h3{
  color: #2c3930 !important;
  font-family: Montserrat, Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 0 8px !important;
}
body.customer-page .prq-klient-promo > p{
  color: #6b6b63 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin: 0 0 24px !important;
  max-width: 60ch !important;
}
body.customer-page .prq-klient-promo-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
}
/* Stejný vzhled jako "Nejprodávanější kategorie" na landing page
   (.prq-cat v Homepage/landing.js) – tučný bílý text se stínem přímo
   na fotce, žádný gradientový pruh, ať to působí jednotně s hlavní
   stránkou. */
body.customer-page .prq-klient-promo-item{
  display: block !important;
  text-decoration: none !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  background: #ddd !important;
}
body.customer-page .prq-klient-promo-item img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .45s ease !important;
}
body.customer-page .prq-klient-promo-item:hover img{
  transform: scale(1.05) !important;
}
body.customer-page .prq-klient-promo-item span{
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.6) !important;
}
body.customer-page .prq-klient-promo-cta{
  display: inline-block !important;
  padding: 13px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
@media (max-width: 640px){
  body.customer-page .prq-klient-promo{
    padding: 20px !important;
  }
  body.customer-page .prq-klient-promo-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  body.customer-page .prq-klient-promo-cta{
    display: block !important;
    text-align: center !important;
  }
}

/* ===== ZRUŠENÍ ÚČTU (jen "Nastavení mého účtu", viz Ucet/zruseni-uctu.js)
   Shoptet nemá nativní samoobslužné smazání účtu, tohle jen pošle
   žádost e-mailem – majitel ji pak vyřídí ručně v administraci.
   Záměrně nenápadné (malý šedý text dole pod formulářem), ať
   nepůsobí jako hlavní akce na stránce. */
body.customer-page main#content .prq-delete-account{
  margin-top: 32px !important;
  padding-top: 20px !important;
  border-top: 1px solid #e8e4dc !important;
  text-align: center !important;
}
body.customer-page main#content .prq-delete-account a{
  color: #9a958a !important;
  font-size: 13px !important;
  text-decoration: underline !important;
}
body.customer-page main#content .prq-delete-account a:hover{
  color: #a2001d !important;
}