/* Moderni vzhled stranky Jak se zaregistrovat (pages/howtoregister.php): zalozky jako prepinac, kroky jako ocislovane karty, pravy sloupec jako karty.
   Pouze vzhled - obsah zustava v databazi. Nacita se jen na teto strance (func/func_header.php). Barvy a tmavy rezim: --hm-* z home-modern.css.
   Vraceni zpet: odebrat tento soubor a jeho odkaz v func/func_header.php. */
/* samostatny text s nazvem stranky (bez znacky) se skryje - nazev je v aktivni zalozce */
#central { font-size: 0; line-height: 1.65; }
#central > * { font-size: 14px; color: var(--hm-text, #344054); }

/* ---- zalozky jako prepinac (puvodni tabulka) ---- */
#central > table { display: block; width: auto; margin: 4px 0 18px 0; border: 0; background: none; }
#central > table tbody { display: block; }
#central > table tr { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(229, 0, 125, .08); }
#central > table td { display: block; flex: 1 1 0; margin: 0; padding: 0; border: 0; background: none; }
#central > table td a.bookmark, #central > table td h2 {
    display: flex; align-items: center; justify-content: center; min-height: 38px; box-sizing: border-box; width: auto; margin: 0; padding: 8px; border: 0 !important; border-radius: 999px; box-shadow: none !important;
    font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; text-shadow: none;
}
#central > table td a.bookmark { background: none !important; color: var(--hm-pink, #e5007d) !important; transition: background .15s; }
#central > table td a.bookmark:hover { background: rgba(229, 0, 125, .12) !important; }
#central > table td h2 { background: linear-gradient(#f0268f, #e5007d); color: #fff; box-shadow: 0 2px 8px rgba(229, 0, 125, .35) !important; }
html[data-theme="dark"] #central > table tr { background: rgba(229, 0, 125, .18); }

/* ---- text a odkazy ---- */
#central p { margin: 0 0 12px 0; padding: 0; text-align: left; }
#central a { color: var(--hm-pink, #e5007d); text-decoration-thickness: 1px; text-underline-offset: 2px; overflow-wrap: anywhere; }
#central a:hover { text-decoration-thickness: 2px; }
#central > table td a.bookmark, #central > table td h2 { text-decoration: none; }
#central strong { color: var(--hm-head, #17243a); }
#central > p:first-of-type { font-size: 15px; font-weight: 600; color: var(--hm-head, #17243a); }

/* ---- zalozka "Proc se zaregistrovat": odstavce s typem uctu jako karty ---- */
#central > p:has(> strong:first-child) { padding: 14px 16px; border: 1px solid var(--hm-line, #e9d3e0); border-left: 4px solid var(--hm-pink, #e5007d); border-radius: 14px; background: var(--hm-card, #fff); box-shadow: var(--hm-shadow, 0 2px 10px rgba(23, 36, 58, .12)); }
#central > p:has(> strong:first-child) > strong:first-child { display: block; margin: 0 0 4px 0; color: var(--hm-pink, #e5007d); font-size: 16px; }

/* ---- kroky registrace: ocislovane karty ---- */
#central ol { counter-reset: step; margin: 0; padding: 0; list-style: none; }
#central ol > li { position: relative; counter-increment: step; margin: 0 0 12px 0; padding: 14px 16px 14px 58px; border: 1px solid var(--hm-line, #e9d3e0); border-radius: 16px; background: var(--hm-card, #fff); box-shadow: var(--hm-shadow, 0 2px 10px rgba(23, 36, 58, .12)); line-height: 1.6; }
#central ol > li::before { content: counter(step); position: absolute; left: 15px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(#f0268f, #e5007d); box-shadow: 0 2px 6px rgba(229, 0, 125, .35); color: #fff; font-size: 15px; font-weight: 800; line-height: 30px; text-align: center; }
#central ol ul { margin: 10px 0 0 0; padding: 0; list-style: none; }
#central ol ul > li { margin: 0 0 8px 0; padding: 10px 12px; border-left: 4px solid var(--hm-pink, #e5007d); border-radius: 10px; background: rgba(229, 0, 125, .06); line-height: 1.55; }
#central ol ul > li:last-child { margin-bottom: 0; }
html[data-theme="dark"] #central ol ul > li { background: rgba(229, 0, 125, .14); }
#central ol em { color: var(--hm-text, #344054); opacity: .85; }

/* ---- pravy sloupec: bloky jako karty ---- */
#right-sidebar section { margin: 0 0 10px 0; padding: 8px 9px; border: 1px solid var(--hm-line, #e9d3e0); border-radius: 12px; background: var(--hm-card, #fff); box-shadow: var(--hm-shadow, 0 2px 10px rgba(23, 36, 58, .12)); font-size: 12px; line-height: 1.45; }
#right-sidebar h3 { margin: 0 0 6px 0; padding: 0 0 5px 0; border-bottom: 1px solid var(--hm-line, #e9d3e0); color: var(--hm-pink, #e5007d); font-size: 11px; font-weight: 800; letter-spacing: .06em; line-height: 1.25; text-transform: uppercase; }
#right #right-sidebar p { margin: 0 0 6px 0; padding: 0; line-height: 1.5; text-align: left; }
#right #right-sidebar ul li a { display: flex; align-items: center; padding: 4px 3px; border-radius: 8px; color: var(--hm-head, #17243a); text-decoration: none; transition: background .15s, color .15s; }
#right #right-sidebar ul li a:hover { background: rgba(229, 0, 125, .1); color: var(--hm-pink, #e5007d); }
#right #right-sidebar a { color: var(--hm-pink, #e5007d); }
html[data-theme="dark"] #right-sidebar img[alt="Threads"] { filter: invert(1); }

@media (max-width: 560px) {
    #central ol > li { padding: 13px 12px 13px 50px; }
    #central ol > li::before { left: 11px; width: 28px; height: 28px; line-height: 28px; }
}