/* ═══════════════════════════════════════════════════════════════════
   trikito-klient-3.css — SVĚTLO reskin klientského centra (/klient/*)
   Vzor: ss-account-17 (Skinspecialist) — přenesené lekce:
   • VŠE scopovat pod `body.customer-page #content-wrapper` — samotná
     body třída bleeduje do headeru/footeru (ss-account v5+v16).
   • selecty potřebují min-height, jinak Bootstrap ořízne text (v14).
   • Bootstrap .row::before/::after clearfix = fantom v gridu (v9).
   v2: plátno #FCF8F7 (jako header, EFE9DE bylo tmavší než zbytek webu);
       „Odhlásit se" (btn-xs btn-primary) vyjmout z pravidel primárních
       tlačítek — jejich :hover mu barvil písmo na bílo.
   v3: • trikito-homepage-1.css má GLOBÁLNÍ `.btn.btn-primary` s
         #111/#FFD21E!important (klid/hover) a radius 16!important —
         všechno na tlačítkách tady musí mít !important, jinak žlutý
         border na hover „Odhlásit se" a 16px radius na „Uložit".
       • aktivní položka menu: obecný hover odkazů měl vyšší specificitu
         než li.active>a → na hover světlý band pod bílým písmem.
         Aktivní stav přibít vč. :hover/:focus.
   Čisté CSS, žádný JS. Nativní DOM zůstává.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. plátno + layout ── */
body.customer-page .breadcrumbs-wrapper{display:none}
body.customer-page #content-wrapper{
  position:relative;padding-top:clamp(30px,4vw,56px);padding-bottom:clamp(44px,6vw,88px);
  background:#FCF8F7!important;box-shadow:0 0 0 100vmax #FCF8F7;clip-path:inset(0 -100vmax)}
body.customer-page #content-wrapper .content-wrapper-in{
  display:grid;grid-template-columns:280px minmax(0,1fr);gap:26px;align-items:start;
  background:transparent!important}
body.customer-page #content-wrapper main#content{width:100%!important;float:none;
  background:transparent!important;padding:0}
body.customer-page #content-wrapper .content-inner{max-width:none;background:transparent!important}

/* ── 2. levé menu ── */
body.customer-page #content-wrapper aside.sidebar{
  width:auto!important;float:none;padding:0;position:sticky;top:130px;
  background:transparent!important}
body.customer-page #content-wrapper .sidebar-inner{background:transparent!important;padding:0}
body.customer-page #content-wrapper .client-center-box{
  background:#fff;border-radius:16px;padding:14px;
  box-shadow:0 0 0 1px rgba(27,21,19,.10),0 18px 48px rgba(27,21,19,.07)}
body.customer-page #content-wrapper .client-center-box ul{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
body.customer-page #content-wrapper .client-center-box li{padding:0!important;margin:0}
body.customer-page #content-wrapper .client-center-box li::before{content:none!important}
body.customer-page #content-wrapper .client-center-box li>a:not(.btn){
  display:block;padding:9px 13px;border-radius:8px;
  font-size:14.5px;font-weight:600;color:#1B1513;text-decoration:none;
  transition:background .16s}
body.customer-page #content-wrapper .client-center-box li>a:not(.btn):hover{
  background:rgba(27,21,19,.05)}
/* aktivní položka: přibitá i na :hover/:focus — obecný hover výš má
   vyšší specificitu a jinak přebarví band na světlý pod bílým písmem */
body.customer-page #content-wrapper .client-center-box li.active>a:not(.btn),
body.customer-page #content-wrapper .client-center-box li.active>a:not(.btn):hover,
body.customer-page #content-wrapper .client-center-box li.active>a:not(.btn):focus{
  background:#1B1513!important;color:#fff!important}
/* první odkaz = „Zákaznické centrum" jako titulek karty */
body.customer-page #content-wrapper .client-center-box li:first-child>a{
  font-family:'Grift',-apple-system,system-ui,sans-serif!important;
  font-size:17px;font-weight:800;letter-spacing:-.01em;padding-bottom:4px}
body.customer-page #content-wrapper .client-center-box li.logout{
  margin:2px 0 10px;padding:0 13px 12px!important;
  border-bottom:1px solid rgba(27,21,19,.10)}
/* má i .btn-primary → homepage-1 globál (#111/#FFD21E!important) přebíjet
   VŠUDE !important, jinak žlutý border na hover a 16px radius */
body.customer-page #content-wrapper .client-center-box .btn.btn-xs{
  display:inline-block;background:transparent!important;color:#1B1513!important;
  border:1.5px solid rgba(27,21,19,.35)!important;border-radius:8px!important;
  padding:6px 14px;font-size:12.5px;font-weight:700;text-transform:none;
  transition:border-color .16s,background .16s}
body.customer-page #content-wrapper .client-center-box .btn.btn-xs:hover,
body.customer-page #content-wrapper .client-center-box .btn.btn-xs:focus,
body.customer-page #content-wrapper .client-center-box .btn.btn-xs:active{
  color:#1B1513!important;border-color:#1B1513!important;
  background:rgba(27,21,19,.05)!important;
  transform:none!important;box-shadow:none!important;text-shadow:none!important}

/* ── 3. obsah v kartě ── */
body.customer-page #content-wrapper .content-inner{
  background:#fff!important;border-radius:16px;
  box-shadow:0 0 0 1px rgba(27,21,19,.10),0 18px 48px rgba(27,21,19,.07);
  padding:clamp(22px,3.5vw,44px)}
body.customer-page #content-wrapper h1{
  font-family:'Grift',-apple-system,system-ui,sans-serif!important;font-weight:800;
  font-size:clamp(26px,3vw,34px);line-height:1.1;letter-spacing:-.02em;
  color:#1B1513;margin:0 0 clamp(18px,2.5vw,28px);text-align:left}
body.customer-page #content-wrapper h1::after{
  content:"";display:block;width:48px;height:5px;border-radius:3px;
  background:#C51A11;margin-top:10px}
body.customer-page #content-wrapper h2{
  font-family:'Grift',-apple-system,system-ui,sans-serif!important;font-weight:700;
  font-size:clamp(19px,2vw,23px);letter-spacing:-.01em;color:#1B1513;
  margin:26px 0 14px;text-align:left}
body.customer-page #content-wrapper fieldset.box{
  background:transparent!important;border:0;padding:0;margin:0 0 8px}
body.customer-page #content-wrapper .co-box{margin:0}
body.customer-page #content-wrapper .form-legend{
  font-size:12.5px;color:rgba(27,21,19,.62);margin:0 0 12px}
body.customer-page #content-wrapper .required-asterisk::after{color:#C51A11}

/* ── 4. formuláře ── */
body.customer-page #content-wrapper .form-group{margin:0 0 15px}
body.customer-page #content-wrapper .form-group>label{
  display:block;font-size:13px;font-weight:700;color:#1B1513;margin:0 0 6px}
body.customer-page #content-wrapper .form-control,
body.customer-page #content-wrapper select.form-control{
  width:100%;height:auto!important;min-height:48px!important;
  background:#fff;border:1.5px solid rgba(27,21,19,.18)!important;
  border-radius:8px!important;padding:11px 14px!important;
  font-size:15px;color:#1B1513;box-shadow:none!important;outline:none;
  transition:border-color .16s}
body.customer-page #content-wrapper .form-control:focus{
  border-color:#1B1513!important}
body.customer-page #content-wrapper .form-control.short{max-width:180px}
/* telefon: vlajka + pole vedle sebe */
body.customer-page #content-wrapper .phone-combined-input{
  display:flex;gap:8px;align-items:stretch}
body.customer-page #content-wrapper .country-flags{
  flex:none;display:flex;align-items:center;
  background:#fff;border:1.5px solid rgba(27,21,19,.18);border-radius:8px;
  padding:0 12px;cursor:pointer;min-height:48px}
body.customer-page #content-wrapper .country-flags:hover{border-color:#1B1513}
body.customer-page #content-wrapper .shp-flag{width:22px;height:22px}
body.customer-page #content-wrapper .country-flag.selected .shp-flag-label{
  font-size:14px;font-weight:600;color:#1B1513}
body.customer-page #content-wrapper .country-flag.selected .shp-flag-name{display:none}
body.customer-page #content-wrapper .country-flag.selected{
  display:flex;align-items:center;gap:8px}
body.customer-page #content-wrapper .phone-combined-input input[type=tel]{flex:1}
/* zaškrtávátka: nativní ums pseudo, jen barvy a kurzor */
body.customer-page #content-wrapper input[type=checkbox]{accent-color:#1B1513}
body.customer-page #content-wrapper .form-group>label.whole-width{
  display:inline-block;margin:0;cursor:pointer;font-size:14.5px;font-weight:500}
/* Bootstrap clearfix fantom v gridech (ss-account v9) */
body.customer-page #content-wrapper .row::before,
body.customer-page #content-wrapper .row::after{content:none!important}

/* ── 5. tlačítka (mimo sidebar „Odhlásit se" = .btn-xs) ── */
body.customer-page #content-wrapper .btn.btn-primary:not(.btn-xs){
  background:#1B1513!important;color:#fff!important;border:0!important;
  border-radius:8px!important;padding:13px 28px;font-size:15px;font-weight:700;
  text-transform:none;transition:transform .2s,box-shadow .2s}
body.customer-page #content-wrapper .btn.btn-primary:not(.btn-xs):hover{
  background:#1B1513!important;color:#fff!important;border-color:#1B1513!important;
  transform:translateY(-1px);box-shadow:0 6px 16px rgba(27,21,19,.22)}
body.customer-page #content-wrapper .btn.btn-secondary{
  background:transparent!important;color:#1B1513!important;
  border:1.5px solid rgba(27,21,19,.35)!important;border-radius:8px!important;
  padding:11px 22px;font-size:14px;font-weight:700;text-transform:none;
  transition:border-color .16s,background .16s}
body.customer-page #content-wrapper .btn.btn-secondary:hover{
  border-color:#1B1513!important;background:rgba(27,21,19,.05)!important}
body.customer-page #content-wrapper .submit-wrapper{margin:22px 0 0}

/* ── 6. tabulky (objednávky, platby, doklady…) ── */
body.customer-page #content-wrapper table{
  width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid rgba(27,21,19,.10);border-radius:12px;overflow:hidden;
  font-size:14.5px;margin:0 0 16px}
body.customer-page #content-wrapper table th{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(27,21,19,.62);background:#F4F1EA;padding:11px 14px;text-align:left;
  border:0}
body.customer-page #content-wrapper table td{
  padding:12px 14px;border:0;border-top:1px solid rgba(27,21,19,.08);
  vertical-align:middle}
body.customer-page #content-wrapper table tr:hover td{background:rgba(27,21,19,.02)}

/* ── 7. doručovací adresy ── */
body.customer-page #content-wrapper .shipping-addresses{
  margin-top:30px;padding-top:22px;border-top:1px solid rgba(27,21,19,.10)}

/* ── 8. mobil ── */
@media (max-width:900px){
  body.customer-page #content-wrapper .content-wrapper-in{grid-template-columns:1fr;gap:18px}
  body.customer-page #content-wrapper aside.sidebar{position:static}
}