<p>/* PRIORITA PRO VOLBU JAZYKA */
#hlavicka { position: relative; z-index: 1050; }

/* TOPBAR (LI&Aring;&nbsp;TA P&Aring;&#152;ED ROZKLIKNUT&Atilde;&#141;M) */
.mobile-topbar { background:#123698; color:#fff; font-size:17px; font-weight:700; padding:12px 16px; font-family:Arial,sans-serif; display:none; align-items:center; position:relative; z-index: 1001; }
.hamburger { width:22px; display:flex; flex-direction:column; gap:4px; cursor:pointer; }
.hamburger span { height:3px; background:#fff; border-radius:2px; }
.mobile-logo { position:absolute; left:50%; transform:translateX(-50%); text-transform:uppercase; letter-spacing:1px; font-weight:700; font-size: 16px; }

/* SPODN&Atilde;&#141; TABY */
.mobile-tabs { display:none; background:#123698; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.mobile-tab { text-align:center; padding:10px 2px; font-size:10px; color:#cfcfcf; text-decoration:none; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight: 600; flex: 1; }
.mobile-tab.active { color:#fff !important; }
.mobile-tab.active::after { content:''; position:absolute; left:5px; right:5px; bottom:0; height:4px; background:#fff; border-radius:2px 2px 0 0; }
.mobile-tab.tab-more { flex: 0 0 45px; border-left: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.15); cursor: pointer; }
.mobile-tab span { display: block; white-space: normal; max-width: 95%; margin-top: 3px; text-transform: uppercase; line-height: 1.1; }
.mobile-tab i { font-size: 16px; color: #fff; }

/* MODR&Atilde;&#157; PANEL SPORT&Aring;&reg; */
.mobile-sport-switcher { display:none; background:#2d5ed4; border-top:1px solid rgba(255,255,255,.2); }
.mobile-sport-switcher a { display:flex; align-items:center; gap:10px; padding:12px 16px; color:#fff; text-decoration:none; font-size:12px; font-weight:600; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,.1); }

/* --- SIDEBAR MENU --- */
.menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1999; display: none; }
.menu-overlay.open { display: block; }

.mobile-menu { 
    position: fixed; top: 0; left: -85%; width: 85%; height: 100%; 
    background: #fff; z-index: 2000; overflow-y: auto; 
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    display: flex; flex-direction: column; 
    box-shadow: 5px 0 15px rgba(0,0,0,0.3);
}
.mobile-menu.open { left: 0; }

/* Z&Atilde;&#129;HLAV&Atilde;&#141; MENU - DOKONAL&Atilde;&#137; ZAROVN&Atilde;&#129;N&Atilde;&#141; */
.menu-header { 
    background: #123698; 
    padding: 22px 0; /* Padding vlevo/vpravo bude &Aring;&#153;e&Aring;&iexcl;en vnit&Aring;&#153;n&Atilde;&shy;mi prvky */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    color: #fff; 
    flex-shrink: 0;
    border: none !important;
}

/* ODKAZ LOGA V MENU */
.menu-brand {
    display: flex;
    align-items: center;
    padding-left: 20px; /* Zarovn&Atilde;&iexcl;n&Atilde;&shy; na pixel p&Aring;&#153;esn&Auml;&#155; s polo&Aring;&frac34;kami menu */
    gap: 12px;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}
.menu-brand i { 
    font-size: 18px; 
    color: #fff; 
    margin: 0;
    width: 20px; /* Fixn&Atilde;&shy; &Aring;&iexcl;&Atilde;&shy;&Aring;&#153;ka ikony pro p&Aring;&#153;esn&Atilde;&copy; zarovn&Atilde;&iexcl;n&Atilde;&shy; textu */
    text-align: left;
}
.menu-logo-text {
    font-size: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.menu-close { 
    font-size: 24px; 
    cursor: pointer; 
    background: rgba(255,255,255,0.12); 
    margin-right: 20px; /* Zarovn&Atilde;&iexcl;n&Atilde;&shy; k&Aring;&#153;&Atilde;&shy;&Aring;&frac34;ku od okraje */
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
}

/* POLO&Aring;&frac12;KY MENU */
.mobile-menu a, .menu-item { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 16px 20px; /* 20px padding vlevo lad&Atilde;&shy; se z&Atilde;&iexcl;hlav&Atilde;&shy;m */
    color: #123698; font-size: 15px; 
    text-decoration: none; border-bottom: 1px solid #f5f5f5; font-weight: 700;
}
.menu-item .menu-arrow { transition: transform 0.3s; color: #ccc; }
.menu-item.open .menu-arrow { transform: rotate(90deg); }

/* PODMENU LIGY */
.submenu { display: none; background: #fafafa; }
.submenu.open { display: block; }
.submenu-item { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 11px 15px !important; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0.02); gap: 15px; }
.submenu-item img { width: 18px !important; height: 12px !important; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.submenu-text-wrapper { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; text-align: right; flex: 1; color: #555 !important; font-weight: 400 !important; font-size: 12px !important; }
.submenu-title { padding: 10px 15px; font-size: 10px; color: #bbb; text-transform: uppercase; background: #f8f9fa; font-weight: 700; text-align: right; }

/* PATI&Auml;&#140;KA */
.menu-footer { 
    margin-top: auto; 
    padding: 40px 20px 120px 20px; 
    text-align: center; 
    background: #fff; 
    border-top: 1px solid #f0f0f0; 
}
.menu-footer-logo { font-size: 11px; color: #ccc; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }
.menu-copyright { font-size: 9px; color: #ddd; margin-top: 5px; }

@media (max-width:768px){ .mobile-topbar{display:flex;} .mobile-tabs{display:flex;} }</p>