/*jazykovy WPML selector v hornom menu*/
/* Kontajner – nastav si šírku podľa seba */
.cl-switcher{position:relative;display:inline-block;width:110px;font-size:16px;line-height:1;box-sizing:border-box}

/* Horný riadok (vlajka | kód | šípka) */
.cl-toggle{
  display:flex !important; align-items:center !important; gap:8px !important;
  padding:6px 10px !important; border:1px solid #ddd; border-radius:8px; background:#fff;
  white-space:nowrap; width:100%; box-sizing:border-box; color:#222;
}

/* Kód jazyka MUSÍ zostať v tom istom riadku */
.cl-code{display:inline !important; flex:0 0 auto !important; min-width:0 !important; line-height:1}

/* Malá šípka vpravo */
.cl-caret{width:8px;height:8px;margin-left:auto;opacity:.45;display:block;fill:currentColor}

/* Vlajky – fixné rozmery */
.cl-toggle img,.cl-menu img{width:20px;height:14px;display:block;object-fit:cover;flex:0 0 20px}

/* Rozbalené menu – rovnaká šírka, gutter vpravo */
.cl-menu{
  position:absolute;top:100%;left:0;display:none;margin-top:4px;
  width:100%;min-width:100%;box-sizing:border-box;background:#fff;border:1px solid #ddd;border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);padding:4px 8px 4px 0 !important;list-style:none;
}
.cl-switcher:hover .cl-menu,.cl-switcher:focus-within .cl-menu{display:block}

/* Zruš bodky/odsadenia a pseudo-elementy Divi (tie robia „odskočenie“) */
.cl-menu,.cl-menu li{margin:0 !important;padding:0 !important;list-style:none !important}
.cl-menu a:before,.cl-menu a:after,.cl-menu li:before,.cl-menu li:after,.cl-toggle:before,.cl-toggle:after{content:none !important;display:none !important}

/* Položky – rovnaké odsadenia ako hore -> lícovanie; žiadne animované posuny */
.cl-menu a{
  display:flex !important; align-items:center !important; gap:8px !important;
  padding:6px 10px !important; margin:0 !important; text-indent:0 !important; border:0 !important;
  width:100% !important; box-sizing:border-box !important; color:#222; text-decoration:none; white-space:nowrap; border-radius:6px;
  transition:none !important;
}
.cl-menu a *{transition:none !important}

/* Hover len pozadie – rozmery sa nemenia; gutter drží padding-right na .cl-menu */
.cl-menu a:hover,.cl-switcher:hover .cl-toggle{background:#f5f5f7 !important}

/* 1) Vzduch okolo celého prepínača v hlavičke */
.cl-switcher{ margin: 0 8px !important; }

/* 2) Horný box – viac miesta zhora/dola aj z bokov + väčšia medzera medzi vlajkou a kódom */
.cl-toggle{ padding: 8px 14px !important; gap: 10px !important; }

/* 3) Dropdown – viac vnútorného priestoru, ale zachová sa pravý gutter */
.cl-menu{ padding: 8px 12px 8px 0 !important; }  /* pravý gutter = 12px */

/* 4) Položky v menu – väčší vertikálny padding + väčší rozostup medzi vlajkou a kódom */
.cl-menu a{ padding: 8px 14px !important; gap: 10px !important; }

/* 5) Jemný rozostup medzi riadkami (voliteľné – môžeš dať 0–4px) */
.cl-menu li + li{ margin-top: 2px; }

/* Hover pozadie s ľavým odsadením (gutter) */
.cl-menu a{ position: relative; }
.cl-menu a:hover{ background: transparent !important; }  /* vypneme pôvodné pozadie */
.cl-menu a::before{
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 6px;  /* ← ľavý gutter 6 px (uprav podľa chuti) */
  border-radius: 6px;
  background: #f5f5f7;
  opacity: 0;
  transition: opacity .1s linear;
  z-index: 0;
}
.cl-menu a:hover::before{ opacity: 1; }

/* nech je text/ikony nad pseudo-pozadím */
.cl-menu a > *{ position: relative; z-index: 1; }

/* ĽAVÝ GUTTER LEN PRE HOVER POZADIE – bez zásahu do rozloženia */
.cl-menu a:hover{
  background: none !important;
  background-image: linear-gradient(#f5f5f7, #f5f5f7) !important;
  background-repeat: no-repeat !important;
  background-position: 10px 0 !important;          /* ← ľavé odsadenie hoveru */
  background-size: calc(100% - 10px) 100% !important; /* vyplní šírku okrem 10px zľava */
}

/* Posun obsahu (vlajka + kód) doprava o 4 px – hover pozadie ostáva, kde je */
.cl-toggle .cl-flag,
.cl-menu a .cl-flag{
  margin-left: 6px;
}

/* 1) Vyššie riadky + viac miesta medzi vlajkou a kódom aj po bokoch */
.cl-toggle,
.cl-menu a{
  padding: 10px 16px !important;  /* ↑ zvisle aj vodorovne trošku viac */
  gap: 12px !important;            /* väčší rozostup vlajka ↔ kód */
}

/* 2) Bez zaoblenia a bez borderov (horný box, dropdown aj položky) */
.cl-toggle,
.cl-menu,
.cl-menu a{
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 3) Dropdown nech plynule nadväzuje (žiadna medzera pod horným boxom) */
.cl-menu{
  margin-top: 0 !important;
  /* pravý gutter nechaj – ak ho chceš 12 px: */
  padding-right: 12px !important;
}

/* 4) Posun obsahu (vlajka + kód) jemne doprava, hover pozadie zostáva */
.cl-toggle .cl-flag,
.cl-menu a .cl-flag{
  margin-left: 4px !important;
}

/* horný box neztmavne pri hoveri/otvorení */
.cl-switcher:hover .cl-toggle,
.cl-switcher:focus-within .cl-toggle {
  background: #fff !important;
}

/* ostré rohy, žiadne radiusy */
.cl-toggle,
.cl-menu {
  border-radius: 0 !important;
}

/* horný box: border zo všetkých strán (keď je zatvorený) */
.cl-toggle {
  border: 1px solid #ddd !important;
}

/* po otvorení: skry dolný border horného boxu, aby nadväzoval */
.cl-switcher:hover .cl-toggle,
.cl-switcher:focus-within .cl-toggle {
  border-bottom-color: transparent !important;
}

/* rozbalené menu: border len vľavo/vpravo/dole, hore žiadny; bez tieňa; bez medzery */
.cl-menu {
  margin-top: 0 !important;
  box-shadow: none !important;
  border-top: 0 !important;
  border-right: 1px solid #ddd !important;
  border-bottom: 1px solid #ddd !important;
  border-left: 1px solid #ddd !important;
}

/* 1) Rozbalené menu vytiahni o chlp vyššie k vrchnej vlajke */
.cl-menu{ padding-top: 1px !important; }  /* skús 0–3 px podľa oka */

/* 2) Posuň dvojicu vlajka+kód doprava o 4 px aj hore (aby to lícovalo) */
.cl-menu a .cl-flag,
.cl-toggle .cl-flag{ margin-left: 4px !important; }

/* Jemné otvorenie: fade + 4px slide */
/* UPRAVA: bez animácií – okamžité zobrazenie, žiadne transform/transition */
.cl-menu{
  /* nech je stále v dokumente, “schováme” ho len vizuálne */
  display: block !important;
  opacity: 0;
  transform: none;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
.cl-switcher:hover .cl-menu,
.cl-switcher:focus-within .cl-menu{
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}

/* Jemná animácia šípky (ak ju máš) */
/* UPRAVA: žiadna animácia, žiadna rotácia; caret v strede a na hover zmizne */
.cl-caret{
  transition: none;
  transform: translateY(-50%);
}
.cl-switcher:hover .cl-caret,
.cl-switcher:focus-within .cl-caret{
  display: none;
}

/* Rešpektuj prefer-reduced-motion (voliteľné, ale fajn) */
@media (prefers-reduced-motion: reduce){
  .cl-menu, .cl-caret{ transition: none; }
}

/* Väčšia šípka – absolútne vpravo, neovplyvní layout */
.cl-caret{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; opacity:.45; fill:currentColor; pointer-events:none;
}

/* Rezervuj miesto pre šípku v pravom okraji horného boxu (8 + 24 + 6 = 38) */
.cl-toggle{ padding-right:38px !important; }

/* Vlajka sa NESMIE stláčať – fixná veľkosť a bez shrinku */
.cl-toggle .cl-flag, .cl-toggle .cl-flag img,
.cl-menu a .cl-flag, .cl-menu a .cl-flag img{
  width:20px; height:14px; display:block; object-fit:cover;
  flex:0 0 auto;             /* zabráni zmenšeniu v úzkom priestore */
}

/* Pre istotu – obsah hore je riadok, kód sa nedelí pod vlajku */
.cl-toggle{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; }
.cl-code{ display:inline-block !important; flex:0 0 auto !important; white-space:nowrap !important; }
/* === DOPLNOK pre mobilný switcher (vložiť na ÚPLNÝ KONIEC) === */

/* caret stabilne a vycentrovane – desktop aj mobil */
.cl-toggle{ position: relative !important; }

.cl-caret{
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  opacity: .45;
  fill: currentColor;
  pointer-events: none;
  transition: none !important;
}

/* rotácia pri otvorení (funguje aj na mobile cez :focus-within) */
/* UPRAVA: na mobile tiež žiadna rotácia; caret na hover zmizne */
.cl-switcher:hover .cl-caret,
.cl-switcher:focus-within .cl-caret{
  display: none !important;
}

/* mobil: šípku o chlp menšiu a zarovnanú vpravo */
@media (max-width: 980px){
   .cl-caret{
	width: 20px !important;
	height: 20px !important;
	right: 10px !important;
	top: calc(50% - 10px) !important; 
 }


  /* skry defaultnú Divi šípku LEN na jazykovej položke, aby ikony v menu ostali */
  .et_mobile_menu li.led2-language > a:not(.mobile-toggle):after,
  .et_mobile_menu li.led2-language > .mobile_menu_bar_toggle{
    display: none !important;
  }
}