/* =====================================================================
   Cleno.cz – moderní levé menu (desktop) + mobilní menu (drawer)
   Barvy navazují na karty kategorií
   ===================================================================== */
:root{
  --clm-blue:#239ceb;
  --clm-blue-d:#0b6fb0;
  --clm-head:#163d5c;
  --clm-text:#4a4f57;
  --clm-soft:#eef6fd;
  --clm-soft2:#f5faff;
  --clm-border:#e0eef9;
}

/* ---------- DESKTOP: levé menu kategorií ---------- */
.sidebar .box-categories{
  background:#fff !important;
  border:1px solid var(--clm-border) !important;
  border-radius:20px !important;
  padding:16px 10px 10px !important;
  overflow:hidden;
}
.sidebar .box-categories .pageElement__heading{
  position:relative;
  margin:0 10px 10px !important;
  padding:0 0 0 14px !important;
  background:none !important;
  border:0 !important;
  color:var(--clm-head) !important;
  font-size:18px !important;
  font-weight:800 !important;
  line-height:24px !important;
}
.sidebar .box-categories .pageElement__heading::before{
  content:"";
  position:absolute;left:0;top:2px;
  width:4px;height:20px;border-radius:4px;
  background:#0090C9;
}
#categories .categories{
  margin:0 0 2px !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
}
#categories .categories .topic{background:none !important;border:0 !important;}
#categories .topic > a{
  position:relative;
  display:flex !important;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:7px 40px 7px 8px !important;
  border-radius:12px;
  background:transparent !important;
  color:var(--clm-head) !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.3 !important;
  text-decoration:none !important;
  transition:background .2s,color .2s;
}
#categories .topic > a:hover{background:var(--clm-soft2) !important;color:var(--clm-blue-d) !important;}
#categories .categories.active > .topic > a{
  background:linear-gradient(135deg,#ebf5fe 0%,#f5faff 100%) !important;
  color:var(--clm-blue-d) !important;
}

/* ikona kategorie (vkládá JS) */
.cl-ico{
  flex:0 0 32px;
  width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;
  background:var(--clm-soft);
  color:var(--clm-blue);
  transition:background .2s,color .2s;
}
.cl-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
/* šablona stylovala všechny span v odkazu – ikonu chráníme */
#categories .topic > a > .cl-ico{
  position:static !important;
  display:inline-flex !important;
  flex:0 0 32px !important;
  width:32px !important;height:32px !important;
  margin:0 !important;padding:0 !important;
  border-radius:10px !important;
  background:var(--clm-soft) !important;
  color:var(--clm-blue) !important;
  transform:none !important;
}
#categories .topic > a > .cl-ico::before,#categories .topic > a > .cl-ico::after{display:none !important;content:none !important;}
#categories .topic > a:hover > .cl-ico{background:#e2f0fc !important;}
#categories .categories.active > .topic > a > .cl-ico{background:var(--clm-blue) !important;color:#fff !important;}

/* šipka rozbalení – vpravo, vlastní chevron */
#categories .cat-trigger{
  position:absolute !important;
  left:auto !important;
  right:8px !important;
  top:50% !important;
  width:26px !important;height:26px !important;
  margin-top:-13px;
  border-radius:50%;
  display:flex !important;align-items:center;justify-content:center;
  font-size:0 !important;
  color:#8fb0c8 !important;
  transition:background .2s,color .2s;
}
#categories .cat-trigger:hover{background:#e2f0fc;color:var(--clm-blue) !important;}
#categories .cat-trigger::before{
  content:"" !important;
  font-family:inherit !important;
  display:block !important;
  width:7px !important;height:7px !important;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg) !important;
  margin-left:-2px;
  transition:transform .2s;
}
#categories .expanded > .topic .cat-trigger::before,
#categories li.expanded > a .cat-trigger::before{transform:rotate(45deg) !important;margin:-3px 0 0 0;}

/* podkategorie */
#categories ul{
  margin:4px 0 8px 24px !important;
  padding:0 0 0 10px !important;
  border-left:2px solid var(--clm-border);
  background:none !important;
  list-style:none;
}
#categories ul li{margin:0 !important;padding:0 !important;border:0 !important;background:none !important;}
#categories ul li::before{display:none !important;}
#categories ul li > a{
  position:relative;
  display:block !important;
  padding:7px 34px 7px 10px !important;
  border-radius:10px;
  color:var(--clm-text) !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  text-decoration:none !important;
  transition:background .2s,color .2s;
}
#categories ul li > a::before{display:none !important;}
#categories ul li > a:hover{background:var(--clm-soft2) !important;color:var(--clm-blue-d) !important;}
#categories ul li.active > a{background:var(--clm-soft) !important;color:var(--clm-blue-d) !important;font-weight:800 !important;}
#categories ul li .cat-trigger{right:4px !important;}
#categories ul ul{margin-left:12px !important;}

/* ---------- MOBIL: drawer ---------- */
.clm-lock,.clm-lock body{overflow:hidden !important;}
.clm{position:fixed;inset:0;z-index:2147483600;pointer-events:none;font-family:"Nunito Sans",sans-serif;}
.clm.is-open{pointer-events:auto;}
.clm-backdrop{
  position:absolute;inset:0;
  background:rgba(14,38,60,.45);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;transition:opacity .3s;
}
.clm.is-open .clm-backdrop{opacity:1;}
.clm-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(90vw,400px);
  display:flex;flex-direction:column;
  background:#fff;
  border-radius:24px 0 0 24px;
  transform:translateX(105%);
  transition:transform .34s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}
.clm.is-open .clm-panel{transform:none;}

.clm-head{
  flex:0 0 auto;
  display:flex;align-items:center;gap:10px;
  padding:16px 16px 12px 20px;
}
.clm-title{flex:1;color:var(--clm-head);font-size:20px;font-weight:800;line-height:1.2;}
.clm-iconbtn{
  flex:0 0 40px;width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;
  background:var(--clm-soft);color:var(--clm-head);
  cursor:pointer;padding:0;
}
.clm-iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.clm-viewport{position:relative;flex:1;overflow:hidden;}
.clm-view{
  position:absolute;inset:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:4px 14px 28px;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .32s;
}
.clm-sub{transform:translateX(100%);opacity:0;}
.clm.is-sub .clm-main{transform:translateX(-30%);opacity:0;pointer-events:none;}
.clm.is-sub .clm-sub{transform:none;opacity:1;}

.clm-label{
  margin:14px 8px 8px;
  color:#8aa3b8;
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.clm-list{list-style:none;margin:0;padding:0;}
.clm-row{
  width:100%;
  display:flex;align-items:center;gap:12px;
  min-height:54px;
  padding:8px 10px;
  border:0;border-radius:14px;
  background:none;
  color:var(--clm-head) !important;
  font:inherit;font-size:15px;font-weight:700;line-height:1.25;text-align:left;
  text-decoration:none !important;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s;
}
.clm-row:active{background:var(--clm-soft);}
.clm-row.is-current{background:linear-gradient(135deg,#ebf5fe 0%,#f5faff 100%);color:var(--clm-blue-d) !important;}
.clm-row .cl-ico{flex-basis:38px;width:38px;height:38px;border-radius:12px;}
.clm-row .cl-ico svg{width:20px;height:20px;}
.clm-row.is-current .cl-ico{background:var(--clm-blue);color:#fff;}
.clm-row-txt{flex:1;}
.clm-chev{
  flex:0 0 auto;width:8px;height:8px;margin-right:6px;
  border-right:2px solid #a9c0d2;border-bottom:2px solid #a9c0d2;
  transform:rotate(-45deg);
}

/* informace – dlaždice */
.clm-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 2px;}
.clm-info a{
  display:flex;align-items:center;gap:9px;
  padding:11px 12px;
  border:1px solid var(--clm-border);border-radius:14px;
  color:var(--clm-head) !important;
  font-size:13.5px;font-weight:700;line-height:1.2;
  text-decoration:none !important;
}
.clm-info a .cl-ico{flex-basis:28px;width:28px;height:28px;border-radius:9px;}
.clm-info a .cl-ico svg{width:16px;height:16px;}

/* kontakt */
.clm-help{
  margin:18px 2px 0;
  padding:16px;
  border:1px solid var(--clm-border);border-radius:20px;
  background:linear-gradient(135deg,#ebf5fe 0%,#f3f9fe 50%,#fafcff 100%);
}
.clm-help-t{color:var(--clm-head);font-size:15px;font-weight:800;margin:0 0 2px;}
.clm-help-s{color:var(--clm-text);font-size:13px;margin:0 0 12px;}
.clm-help-btns{display:flex;gap:8px;}
.clm-help-btns a{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 8px;border-radius:12px;
  font-size:13.5px;font-weight:800;
  text-decoration:none !important;
}
.clm-help-btns a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.clm-btn-p{background:var(--clm-blue);color:#fff !important;}
.clm-btn-s{background:#fff;color:var(--clm-blue-d) !important;border:1px solid var(--clm-border);}

/* podmenu */
.clm-all{
  display:flex;align-items:center;justify-content:space-between;
  margin:4px 2px 14px;
  padding:14px 16px;
  border-radius:16px;
  background:linear-gradient(135deg,#ebf5fe 0%,#f5faff 100%);
  border:1px solid var(--clm-border);
  color:var(--clm-blue-d) !important;
  font-size:14.5px;font-weight:800;
  text-decoration:none !important;
}
.clm-all .clm-chev{border-color:var(--clm-blue);}
.clm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 2px;}
.clm-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:104px;
  padding:12px 8px 10px;
  border:1px solid var(--clm-border);border-radius:16px;
  background:#fff;
  color:var(--clm-head) !important;
  font-size:13px;font-weight:700;line-height:1.25;text-align:center;
  text-decoration:none !important;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .2s,background .2s;
}
.clm-tile:active{background:var(--clm-soft2);border-color:#bcdcf5;}
.clm-tile.is-current{border-color:var(--clm-blue);background:var(--clm-soft2);}
.clm-tile img{width:100%;height:52px;object-fit:contain;}
.clm-tile.no-img{min-height:64px;}

@media (prefers-reduced-motion:reduce){
  .clm-panel,.clm-view,.clm-backdrop{transition:none;}
}