/* Wspolny pasek nawigacji (sx-topbar) dla stron statycznych.
   Generowany z functions/shared/topbar.js - nie edytuj tego pliku recznie.
   Po zmianie: node .scripts/topbar/apply-topbar.js --write
   Wersja: 202608233300 */
.sx-topbar{position:sticky;top:0;z-index:1000;display:flex;align-items:center;background:#fff;border-bottom:1px solid #eef0f5;box-shadow:0 1px 10px rgba(15,23,42,0.05);padding:0 7%;height:70px;}
.sx-topbar__logo{display:flex;align-items:center;flex-shrink:0;}
.sx-topbar__logo img{height:48px;width:auto;display:block;}
.sx-topbar__nav{margin-left:auto;display:flex;align-items:center;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
.sx-topbar__nav::-webkit-scrollbar{display:none;}
.sx-topbar__link,.sx-topbar__adv{flex-shrink:0;white-space:nowrap;color:#3a3e48;font-family:'Inter',"Segoe UI",system-ui,sans-serif;font-size:13.6px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;text-decoration:none;padding:0 14px;transition:color .3s;}
.sx-topbar__link:hover{color:#5525FF;}
.sx-topbar__link.icd11-link{color:#7C44FD;}
.sx-topbar__link.icd11-link:hover{color:#5525FF;}
.sx-topbar__link.icd10-link{color:#2563eb;}
.sx-topbar__link.icd10-link:hover{color:#1d4ed8;}
.sx-topbar .icd11-link{padding-right:0;}
.sx-topbar .icd10-link{padding-left:0;}
.sx-topbar__icd-slash{flex-shrink:0;color:#c3c8d4;font-size:13.6px;padding:0 5px;user-select:none;}
.sx-topbar__adv{flex-shrink:0;white-space:nowrap;color:#5525FF;font-family:'Inter',"Segoe UI",system-ui,sans-serif;font-size:13.6px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;text-decoration:none;padding:0 14px;transition:color .3s;}
.sx-topbar__adv:hover{color:#7C44FD;}
.sx-topbar__sep{flex-shrink:0;width:1px;height:22px;background:#d9dce3;margin:0 10px;}
.sx-topbar__login{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:32px;padding:0 22px;margin-left:25px;border-radius:23px;background:#fff;color:#5525FF;font-family:'Inter',"Segoe UI",system-ui,sans-serif;font-size:12.75px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;text-decoration:none;box-shadow:0 0 30px -12px #5525FF;transition:all .3s;white-space:nowrap;}
.sx-topbar__login:hover{background:#5525FF;color:#fff;}

/* Menu konta - pigulka logowania i ten blok nigdy nie stoja obok siebie:
   topbar-account.js pokazuje jedno i chowa drugie. */
.sx-topbar__me{position:relative;flex-shrink:0;margin-left:25px;}
.sx-topbar__me[hidden]{display:none;}
.sx-topbar__me-btn{display:flex;align-items:center;gap:6px;height:38px;padding:0 6px 0 0;border:0;background:none;cursor:pointer;color:#0f172a;}
.sx-topbar__me-av{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;overflow:hidden;background:#7C44FD;color:#fff;font-family:'Inter',"Segoe UI",system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em;box-shadow:0 0 0 2px #fff,0 0 0 3px #e7defd;}
.sx-topbar__me-av img{width:100%;height:100%;object-fit:cover;display:block;}
.sx-topbar__me-drop{position:absolute;top:calc(100% + 8px);right:0;width:268px;padding:6px 0;background:#fff;border:1px solid #e7defd;border-radius:14px;box-shadow:0 18px 42px -18px rgba(15,23,42,0.35);font-family:'Inter',"Segoe UI",system-ui,sans-serif;z-index:1001;}
.sx-topbar__me-drop[hidden]{display:none;}
.sx-topbar__me-head{display:block;padding:12px 16px 10px;text-decoration:none;}
.sx-topbar__me-name{display:block;font-size:14px;font-weight:700;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sx-topbar__me-mail{display:block;margin-top:2px;font-size:12.5px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sx-topbar__me-sep{height:1px;margin:6px 12px;background:#f1f0f8;}
.sx-topbar__me-item{box-sizing:border-box;display:flex;align-items:center;gap:13px;width:100%;padding:10px 16px;border:0;background:none;font:500 13.5px 'Inter',"Segoe UI",system-ui,sans-serif;color:#334155;text-align:left;text-decoration:none;cursor:pointer;}
a.sx-topbar__me-item:hover,.sx-topbar__me-item:hover{background:#f7f5ff;color:#0f172a;}
.sx-topbar__me-ico{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;border-radius:9px;background:none;color:#0f172a;}
.sx-topbar__me-icd{display:flex;align-items:center;gap:5px;font-weight:500;color:#0f172a;}
.sx-topbar__me-slash{color:#cbd5e1;}
.sx-topbar__me-icd10{color:#0f172a;}
.sx-topbar__me-icd10:hover{text-decoration:underline;}
/* Pozycja prowadzaca do otwartej strony gasnie i przestaje byc klikalna,
   tak samo jak w dropdownie paska aplikacji. */
.sx-topbar__me-item.is-current{color:#94a3b8;pointer-events:none;}
.sx-topbar__me-item.is-current .sx-topbar__me-ico{background:none;color:#94a3b8;}
.sx-topbar__me-langrow{cursor:default;}
.sx-topbar__me-langrow:hover{background:none;}
.header__account .sx-topbar__me-langrow:hover{background:none !important;}
.sx-topbar__me-lang{cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.sx-topbar__me-lang:hover{background:#f4f1ff;border-color:#475569;color:#0f172a;}
.sx-topbar__me-lang.is-active:hover{background:#fff;border-color:#0f172a;color:#0f172a;}
.header__account .sx-topbar__me-lang:hover{background:#f4f1ff !important;border-color:#475569 !important;color:#0f172a !important;}
.header__account .sx-topbar__me-lang.is-active:hover{background:#fff !important;border-color:#0f172a !important;color:#0f172a !important;}
.sx-topbar__me-langs{display:flex;gap:6px;}
.sx-topbar__me-lang{padding:4px 14px;border:1px solid transparent;border-radius:8px;font-size:12.5px;font-weight:600;color:#94a3b8;text-decoration:none;}
.sx-topbar__me-lang.is-active{background:#fff;border-color:#0f172a;color:#0f172a;}
.sx-topbar__me-out{color:#e11d48;}
.sx-topbar__me-out .sx-topbar__me-ico{background:none;color:#e11d48;}
.sx-topbar__me-out:hover{background:#fef2f4;color:#be123c;}

/* Landing stoi na motywie medikit, ktory rozdaje wlasne display/float/width
   kazdemu <a> i <li> w naglowku - bez !important menu rozpadalo sie na ikony
   nad tekstem. To samo obejscie nosi tam przelacznik jezyka (#lang-drop). */
/* Lista naglowka landingu nie jest flexem - medikit trzyma pozycje jako
   inline-block z float:left, wiec o pionie decyduje vertical-align, a nie
   align-items/align-self. vertical-align:top sadza pudelko na gorze linii,
   a wlasne 70px wysokosci (tyle co pasek) centruje awatar dokladnie tam,
   gdzie stoi tekst nawigacji i flaga. */
.header__account{display:inline-flex !important;align-items:center !important;vertical-align:top !important;height:70px !important;margin:0 !important;padding:0 !important;float:none !important;list-style:none !important;}
.header__account .sx-topbar__me{margin-left:18px !important;}
/* Flaga niesie 25px marginesu przewidziane na sasiedztwo pigulki logowania.
   Przy awatarze te 25px dokladaja sie do jego wlasnego odstepu i miedzy
   chevronem a flaga robi sie dziura, wiec dla zalogowanego odstep maleje.
   Przegladarka bez :has zostaje przy 25px - to poprzedni, znosny wyglad. */
.header__account:has(.sx-topbar__me:not([hidden])) + .lang-switcher-item{margin-left:12px !important;}
.header__account .sx-topbar__me-btn{display:flex !important;width:auto !important;height:38px !important;padding:0 6px 0 0 !important;float:none !important;}
.header__account .sx-topbar__me-drop{display:block !important;width:268px !important;padding:6px 0 !important;text-align:left !important;}
.header__account .sx-topbar__me-drop[hidden]{display:none !important;}
.header__account .sx-topbar__me-head{display:block !important;width:auto !important;height:auto !important;padding:12px 16px 10px !important;float:none !important;line-height:1.3 !important;}
.header__account .sx-topbar__me-name{display:block !important;font-size:14px !important;line-height:1.3 !important;color:#0f172a !important;}
.header__account .sx-topbar__me-mail{display:block !important;font-size:12.5px !important;line-height:1.3 !important;color:#64748b !important;text-transform:none !important;}
.header__account .sx-topbar__me-item{box-sizing:border-box !important;display:flex !important;align-items:center !important;gap:13px !important;width:100% !important;height:auto !important;padding:10px 16px !important;float:none !important;font-size:13.5px !important;font-weight:500 !important;line-height:1.3 !important;letter-spacing:0 !important;text-transform:none !important;color:#334155 !important;}
.header__account .sx-topbar__me-item:hover{background:#f7f5ff !important;color:#0f172a !important;}
.header__account .sx-topbar__me-ico{display:flex !important;width:30px !important;height:30px !important;padding:0 !important;flex-shrink:0 !important;background:none !important;color:#0f172a !important;}
.header__account .sx-topbar__me-icd{display:flex !important;width:auto !important;height:auto !important;padding:0 !important;color:#0f172a !important;}
.header__account .sx-topbar__me-icd10{color:#0f172a !important;}
.header__account .sx-topbar__me-langrow{cursor:default !important;}
.header__account .sx-topbar__me-langs{display:flex !important;gap:6px !important;}
.header__account .sx-topbar__me-lang{display:inline-flex !important;align-items:center !important;width:auto !important;height:auto !important;padding:4px 14px !important;float:none !important;font-size:12.5px !important;line-height:1.2 !important;border-color:transparent !important;color:#94a3b8 !important;}
.header__account .sx-topbar__me-lang.is-active{background:#fff !important;border-color:#0f172a !important;color:#0f172a !important;}
.header__account .sx-topbar__me-out{color:#e11d48 !important;}
.header__account .sx-topbar__me-out .sx-topbar__me-ico{color:#e11d48 !important;}
.header__account .sx-topbar__me-out:hover{background:#fef2f4 !important;color:#be123c !important;}
.header__account .sx-topbar__me-sep{display:block !important;height:1px !important;margin:6px 12px !important;padding:0 !important;}
.sx-topbar__lang{position:relative;display:flex;align-items:center;flex-shrink:0;margin-left:25px;}
.sx-topbar__flag{display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;font-size:28px;line-height:1;padding:0;color:rgba(58,62,72,0.85);font-family:inherit;transition:color .15s;}
.sx-topbar__flag:hover{color:#3a3e48;}
.sx-topbar__chev{font-size:14px;opacity:0.7;}
.sx-topbar__drop{display:none;position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:2px solid #a78bfa;border-radius:10px;box-shadow:0 8px 24px rgba(124,68,253,0.15);min-width:170px;overflow:hidden;}
.sx-topbar__drop.sx-open{display:block;}
.sx-topbar__drop a{display:flex;align-items:center;gap:8px;padding:11px 14px;font-family:'Inter',"Segoe UI",system-ui,sans-serif;font-size:13px;font-weight:600;color:#374151;text-decoration:none;white-space:nowrap;}
.sx-topbar__drop a:hover{background:#f5f0ff;color:#5525FF;}

@media(max-width:600px){
  .sx-topbar{height:60px;padding:0 10px;}
  .sx-topbar__logo img{height:32px;}
  .sx-topbar__link,.sx-topbar__adv{padding:0 9px;font-size:12px;}
  .sx-topbar__sep{flex-shrink:0;width:1px;height:22px;background:#d9dce3;margin:0 10px;}
  .sx-topbar__login{margin-left:14px;padding:0 16px;}
  .sx-topbar__me{margin-left:14px;}
  .sx-topbar__lang{margin-left:12px;}
  .sx-topbar__flag{font-size:23px;}
}

/* Without this the 7% padding, the 48px logo, the nav links, the login pill
   and the flag push the header past a 360px viewport and the whole document
   scrolls sideways. */
@media(max-width:760px){
  .sx-topbar{padding:0 14px;height:60px;gap:8px;}
  .sx-topbar__logo img{height:34px;}
  .sx-topbar__nav{margin-left:auto;gap:0;}
  .sx-topbar__link,.sx-topbar__sep{display:none;}
  .sx-topbar__login{margin-left:0;height:30px;padding:0 14px;font-size:11.5px;}
  .sx-topbar__me{margin-left:0;}
  .sx-topbar__me-av{width:30px;height:30px;font-size:12px;}
  .sx-topbar__me-drop{width:min(268px,calc(100vw - 28px));}
  .sx-topbar__lang{margin-left:10px;}
  .sx-topbar__flag{font-size:21px;}
}

/* The inline nav sits between the logo, the login pill and the flag, and
   below ~760px it gets squeezed to zero width - links stay in the DOM but
   are unreachable, and the flag chevron is pushed past the viewport edge.
   The nav therefore moves to its own scrollable row. */
@media(max-width:1366px){
  .sx-topbar{flex-wrap:wrap;height:auto;padding:6px 12px;}
  .sx-topbar__logo{order:1;}
  .sx-topbar__logo img{height:32px;}
  .sx-topbar__login{order:2;margin-left:auto;height:30px;padding:0 14px;font-size:11.5px;}
  .sx-topbar__me{order:2;margin-left:auto;}
  .sx-topbar__me-btn{height:34px;}
  .sx-topbar__me-av{width:30px;height:30px;font-size:12px;}
  .sx-topbar__lang{order:3;margin-left:10px;}
  .sx-topbar__flag{font-size:21px;}
  .sx-topbar__nav{order:4;width:100%;margin:0;padding:2px 0 6px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .sx-topbar__link,.sx-topbar__adv{display:inline-flex;align-items:center;flex-shrink:0;padding:0 10px;font-size:12px;}
  .sx-topbar__link:first-child,.sx-topbar__adv:first-child{padding-left:0;}
  .sx-topbar__sep{display:block;flex-shrink:0;margin:0 6px;height:16px;}
}

/* The bar has 0 7% padding, 200px on a 1440 viewport - together with the logo,
   the login pill and the flag that left 725px for a nav needing 998px, so the
   last items fell off the edge. Below 1600px the spacing goes down. */
@media(min-width:1367px) and (max-width:1600px){
  .sx-topbar{padding:0 24px;}
  .sx-topbar__link,.sx-topbar__adv{padding:0 10px;font-size:12.6px;}
  .sx-topbar__sep{margin:0 6px;}
  .sx-topbar__login{margin-left:14px;padding:0 16px;}
  .sx-topbar__me{margin-left:14px;}
  .sx-topbar__lang{margin-left:14px;}
}

/* Below 1440 the logo shrinks and the links tighten as well - otherwise the
   last items still fell off the edge at 1366 and 1280. */
@media(min-width:1367px) and (max-width:1440px){
  .sx-topbar__logo img{height:40px;}
  .sx-topbar__link,.sx-topbar__adv{padding:0 8px;font-size:12px;}
  .sx-topbar__sep{margin:0 4px;}
}