/* assets/css/bundle.css — GENEROVANY SOUBOR, needituj.
   Vznika slucovanim assets/css/{variables,core,components} v poradi
   podle includes/asset-bundle.php a prestavi se sam, jakmile je
   nektery zdroj novejsi. Zmeny delej ve zdrojovych souborech. */

/* ---- assets/css/variables.css ---- */
/*
 * variables.css — jediny zdroj barev, mezer, typografie a stinu pro BonusZdarma.
 * Styl je svetly a editorialni (duveryhodny srovnavac), ne tmavy gaming web.
 * Dark mode je definovan dvakrat: pres prefers-color-scheme (systemove nastaveni)
 * a pres [data-theme="dark"] (rucni volba), obe sady prepisu jsou identicke.
 */

:root {
    /* ---------- Plochy a pozadi ---------- */
    --c-bg: #FFFFFF;
    --c-bg-soft: #F5F7FA;
    --c-surface: #FFFFFF;
    --c-surface-2: #F0F3F8;
    --c-border: #E3E8EF;
    --c-border-strong: #C9D2E0;

    /* ---------- Text ---------- */
    --c-text: #0C1424;
    --c-text-soft: #46536B;
    /* Ztlumeny text musi drzet 4.5:1 i na nejtmavsi svetle plose (--c-surface-2). */
    --c-text-mute: #5E6B85;
    --c-heading: #0C1424;

    /* ---------- Primarni navy: odkazy, nadpisove akcenty, outline tlacitka ---------- */
    --c-primary: #1B3A6B;
    --c-primary-hover: #16305A;
    --c-primary-soft: #E8EFFA;
    --c-on-primary: #FFFFFF;

    /* ---------- Akcent zlata: VYHRADNE hvezdicky, badge "Volba redakce", #1 pozice ---------- */
    --c-accent: #E8A317;
    --c-accent-soft: #FDF3DC;
    --c-on-accent: #0C1424;
    /* Zlata jako text na svetlem podkladu nema dost kontrastu, proto tmavy ekvivalent. */
    --c-accent-text: #8A5300;

    /* ---------- Zelena: konverzni CTA ---------- */
    --c-success: #0E9F58;
    --c-success-hover: #0B8A4C;
    --c-success-soft: #E4F6EC;
    /* Vypln CTA je o odstin tmavsi nez --c-success, aby bile tucne pismo drzelo 4.5:1. */
    --c-cta: #0A8449;
    --c-cta-hover: #086F3D;
    --c-on-cta: #FFFFFF;
    /* Zelena jako TEXT na svetlem podkladu nema 4.5:1, proto tmavsi ekvivalent. */
    --c-success-text: #076B3A;

    /* ---------- Stavove barvy ---------- */
    --c-warning: #C77700;
    --c-warning-soft: #FDF1DE;
    --c-warning-text: #8A5300;
    --c-danger: #C62B2B;
    --c-danger-soft: #FBE9E9;
    --c-danger-text: #A61F1F;
    --c-star: #E8A317;

    /* ---------- Skorovaci pruhy (6 kriterii hodnoceni kasina) ---------- */
    --c-score-track: #E9EDF4;
    --c-score-bonus: #2F6FBF;
    --c-score-payout: #0E9F58;
    --c-score-games: #6B5BD2;
    --c-score-support: #0E8C9E;
    --c-score-mobile: #C77700;
    --c-score-trust: #1B3A6B;

    /* ---------- Varianty badge ---------- */
    --c-badge-pick-bg: #FBEBC4;
    --c-badge-pick-bg-2: #F6D98C;
    --c-badge-pick-text: #4A3000;
    --c-badge-pick-border: #E8A317;
    --c-badge-exclusive-bg: #E8EFFA;
    --c-badge-exclusive-text: #16305A;
    --c-badge-exclusive-border: #C3D5F0;
    --c-badge-new-bg: #E4F6EC;
    --c-badge-new-text: #06603A;
    --c-badge-new-border: #B6E4CB;
    --c-badge-code-bg: #F0F3F8;
    --c-badge-code-text: #0C1424;
    --c-badge-code-border: #C9D2E0;

    /* ---------- Jemne gradienty (povolene jen v hero a v badge "Volba redakce") ---------- */
    --grad-hero: linear-gradient(180deg, #F2F6FC 0%, #FFFFFF 100%);
    --grad-pick: linear-gradient(135deg, var(--c-badge-pick-bg) 0%, var(--c-badge-pick-bg-2) 100%);

    /* ---------- Podkres pod prilepenou hlavickou, overlaye, scroll stiny ---------- */
    --c-header-bg: rgba(255, 255, 255, 0.92);
    --c-overlay: rgba(12, 20, 36, 0.55);
    --c-scroll-fade: rgba(255, 255, 255, 0);
    --c-scroll-fade-end: rgba(12, 20, 36, 0.14);

    /* ---------- Radiusy ---------- */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-full: 999px;

    /* ---------- Mezery ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;

    /* ---------- Stiny ---------- */
    --shadow-xs: 0 1px 2px rgba(12, 20, 36, 0.05);
    --shadow-sm: 0 1px 3px rgba(12, 20, 36, 0.07), 0 1px 2px rgba(12, 20, 36, 0.04);
    --shadow-md: 0 4px 12px rgba(12, 20, 36, 0.08), 0 2px 4px rgba(12, 20, 36, 0.04);
    --shadow-lg: 0 12px 32px rgba(12, 20, 36, 0.12), 0 4px 8px rgba(12, 20, 36, 0.05);

    /* ---------- Pisma ---------- */
    --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --font-display: Sora, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
        "Roboto Mono", Menlo, Consolas, monospace;

    /* ---------- Fluidni typograficka skala ---------- */
    --fs-xs: clamp(0.75rem, 0.735rem + 0.08vw, 0.8125rem);
    --fs-sm: clamp(0.875rem, 0.855rem + 0.1vw, 0.9375rem);
    --fs-base: clamp(1rem, 0.985rem + 0.08vw, 1.0625rem);
    --fs-md: clamp(1.0625rem, 1.03rem + 0.16vw, 1.125rem);
    --fs-lg: clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);
    --fs-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --fs-2xl: clamp(1.5rem, 1.34rem + 0.8vw, 1.875rem);
    --fs-3xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);
    --fs-4xl: clamp(2rem, 1.6rem + 2vw, 2.75rem);
    --fs-5xl: clamp(2.25rem, 1.65rem + 3vw, 3.5rem);
    /* H1 ma vlastni krivku podle designoveho zadani. */
    --fs-h1: clamp(2rem, 1.2rem + 3vw, 3.25rem);

    --lh-tight: 1.18;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;
    --tracking-tight: -0.02em;

    /* ---------- Rozvrzeni ---------- */
    --container: 1200px;
    --container-narrow: 760px;
    --measure: 68ch;
    --header-h: 68px;

    /* ---------- Hladiny vrstev (z-index) ----------
       Jediná stupnice pro celý web. Žádná komponenta si z-index nevymýšlí,
       vždy sáhne po některém z těchto tokenů. Vyšší číslo = blíž uživateli.
         --z-base        vrstva dokumentu
         --z-sticky-col  prilepeny prvni sloupec srovnavaci tabulky
         --z-sticky-head prilepena hlavicka srovnavaci tabulky
                         (rohova bunka = calc(var(--z-sticky-head) + 1))
         --z-toc         prilepeny obsah stranky v bocnim sloupci
         --z-dropdown    rozbalovaci panely uvnitr hlavicky (mega menu)
         --z-header      prilepena hlavicka webu
         --z-sticky-cta  mobilni prilepene CTA u paty obrazovky
         --z-cookie      lista souhlasu s cookies
         --z-modal       modalni okna a off-canvas panel navigace
         --z-agegate     brana 18+ — musi prekryt uplne vsechno */
    --z-base: 0;
    --z-sticky-col: 10;
    --z-sticky-head: 20;
    --z-toc: 30;
    --z-dropdown: 40;
    --z-header: 50;
    --z-sticky-cta: 60;
    --z-cookie: 70;
    --z-modal: 80;
    --z-agegate: 90;

    /* ---------- Pohyb ---------- */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: 150ms;
    --dur: 250ms;
    --dur-slow: 400ms;
}

/*
 * Tmavy rezim podle systemu. Neni to inverze svetleho — je to vlastni inkoustova
 * paleta. Guard :not([data-theme="light"]) necha vyhrat rucni volbu "svetly".
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --c-bg: #0C1424;
        --c-bg-soft: #080D18;
        --c-surface: #152136;
        --c-surface-2: #1B2A44;
        --c-border: #24334D;
        --c-border-strong: #33456A;

        --c-text: #E6EAF2;
        --c-text-soft: #A9B5CA;
        --c-text-mute: #8B99B2;
        --c-heading: #F3F6FB;

        --c-primary: #7FA8E8;
        --c-primary-hover: #9CBDF0;
        --c-primary-soft: #1E3358;
        --c-on-primary: #0C1424;

        --c-accent: #F0B93A;
        --c-accent-soft: #3A2E12;
        --c-on-accent: #0C1424;
        --c-accent-text: #F0B93A;

        --c-success: #17B364;
        --c-success-hover: #14A159;
        --c-success-soft: #103A26;
        --c-cta: #17B364;
        --c-cta-hover: #14A159;
        --c-on-cta: #06210F;
        --c-success-text: #4BD68F;

        --c-warning: #E2A33F;
        --c-warning-soft: #3A2A10;
        --c-warning-text: #E2A33F;
        --c-danger: #EE7A7A;
        --c-danger-soft: #3A1D1D;
        --c-danger-text: #F09B9B;
        --c-star: #F0B93A;

        --c-score-track: #22314C;
        --c-score-bonus: #6FA3E8;
        --c-score-payout: #17B364;
        --c-score-games: #9E90ED;
        --c-score-support: #48B7C7;
        --c-score-mobile: #E2A33F;
        --c-score-trust: #7FA8E8;

        --c-badge-pick-bg: #3D3113;
        --c-badge-pick-bg-2: #4E3F17;
        --c-badge-pick-text: #F7DFA4;
        --c-badge-pick-border: #8A6A1C;
        --c-badge-exclusive-bg: #1E3358;
        --c-badge-exclusive-text: #BFD5F5;
        --c-badge-exclusive-border: #2F4C7D;
        --c-badge-new-bg: #103A26;
        --c-badge-new-text: #8FDDB4;
        --c-badge-new-border: #1B5A3B;
        --c-badge-code-bg: #1B2A44;
        --c-badge-code-text: #E6EAF2;
        --c-badge-code-border: #33456A;

        --grad-hero: linear-gradient(180deg, #16233A 0%, #0C1424 100%);
        --grad-pick: linear-gradient(135deg, var(--c-badge-pick-bg) 0%, var(--c-badge-pick-bg-2) 100%);

        --c-header-bg: rgba(12, 20, 36, 0.92);
        --c-overlay: rgba(4, 8, 16, 0.7);
        --c-scroll-fade: rgba(12, 20, 36, 0);
        --c-scroll-fade-end: rgba(0, 0, 0, 0.5);

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35);
    }
}

/* Rucne zvoleny tmavy rezim — stejna sada prepisu, vitezi nad systemovym. */
[data-theme="dark"] {
    --c-bg: #0C1424;
    --c-bg-soft: #080D18;
    --c-surface: #152136;
    --c-surface-2: #1B2A44;
    --c-border: #24334D;
    --c-border-strong: #33456A;

    --c-text: #E6EAF2;
    --c-text-soft: #A9B5CA;
    --c-text-mute: #8B99B2;
    --c-heading: #F3F6FB;

    --c-primary: #7FA8E8;
    --c-primary-hover: #9CBDF0;
    --c-primary-soft: #1E3358;
    --c-on-primary: #0C1424;

    --c-accent: #F0B93A;
    --c-accent-soft: #3A2E12;
    --c-on-accent: #0C1424;
    --c-accent-text: #F0B93A;

    --c-success: #17B364;
    --c-success-hover: #14A159;
    --c-success-soft: #103A26;
    --c-cta: #17B364;
    --c-cta-hover: #14A159;
    --c-on-cta: #06210F;
    --c-success-text: #4BD68F;

    --c-warning: #E2A33F;
    --c-warning-soft: #3A2A10;
    --c-warning-text: #E2A33F;
    --c-danger: #EE7A7A;
    --c-danger-soft: #3A1D1D;
    --c-danger-text: #F09B9B;
    --c-star: #F0B93A;

    --c-score-track: #22314C;
    --c-score-bonus: #6FA3E8;
    --c-score-payout: #17B364;
    --c-score-games: #9E90ED;
    --c-score-support: #48B7C7;
    --c-score-mobile: #E2A33F;
    --c-score-trust: #7FA8E8;

    --c-badge-pick-bg: #3D3113;
    --c-badge-pick-bg-2: #4E3F17;
    --c-badge-pick-text: #F7DFA4;
    --c-badge-pick-border: #8A6A1C;
    --c-badge-exclusive-bg: #1E3358;
    --c-badge-exclusive-text: #BFD5F5;
    --c-badge-exclusive-border: #2F4C7D;
    --c-badge-new-bg: #103A26;
    --c-badge-new-text: #8FDDB4;
    --c-badge-new-border: #1B5A3B;
    --c-badge-code-bg: #1B2A44;
    --c-badge-code-text: #E6EAF2;
    --c-badge-code-border: #33456A;

    --grad-hero: linear-gradient(180deg, #16233A 0%, #0C1424 100%);
    --grad-pick: linear-gradient(135deg, var(--c-badge-pick-bg) 0%, var(--c-badge-pick-bg-2) 100%);

    --c-header-bg: rgba(12, 20, 36, 0.92);
    --c-overlay: rgba(4, 8, 16, 0.7);
    --c-scroll-fade: rgba(12, 20, 36, 0);
    --c-scroll-fade-end: rgba(0, 0, 0, 0.5);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35);
}

/* Barevne schema pro nativni prvky (scrollbary, zaskrtavatka, date pickery). */
:root {
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
    }
}

[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="light"] {
    color-scheme: light;
}

/* ------------------------------------------------------------------ */
/*  Tiskova paleta                                                     */
/* ------------------------------------------------------------------ */
/*
 * Na papire je vzdy cerny inkoust na bilem podklade, at si uzivatel prohlizi
 * web v jakemkoli rezimu. Selektory zamerne pokryvaji i rucni volbu tematu
 * a diky poslednimu poradi v souboru prebiji obe sady prepisu vyse.
 */
@media print {
    :root,
    [data-theme="dark"],
    [data-theme="light"] {
        --c-print-paper: #FFFFFF;
        --c-print-ink: #000000;
        --c-print-soft: #333333;
        --c-print-mute: #555555;
        --c-print-rule: #BBBBBB;
        --c-print-rule-strong: #888888;

        --c-bg: var(--c-print-paper);
        --c-bg-soft: var(--c-print-paper);
        --c-surface: var(--c-print-paper);
        --c-surface-2: var(--c-print-paper);
        --c-text: var(--c-print-ink);
        --c-text-soft: var(--c-print-soft);
        --c-text-mute: var(--c-print-mute);
        --c-heading: var(--c-print-ink);
        --c-border: var(--c-print-rule);
        --c-border-strong: var(--c-print-rule-strong);
        --header-h: 0px;
    }
}

/* ---- assets/css/core/fonts.css ---- */
/* BonusZdarma — vlastni hosting pisma.

   PROC NE Google Fonts: mereni na mobilu (4G, CPU 4x pomalejsi) ukazalo, ze
   VESKERY posun layoutu na webu zpusobovalo dotazeni pisma z cizi domeny.
   Na /bonus-bez-vkladu vychazelo CLS 0,191 — Google chce pod 0,1. Se
   zablokovanymi fonty klesl posun na nulu na vsech merenych strankach a LCP
   se zlepsilo o 150-300 ms, protoze odpadla dve ciza spojeni
   (fonts.googleapis.com pro CSS, fonts.gstatic.com pro soubory).

   Soubory jsou VARIABILNI rezy: jeden na rodinu a podmnozinu znaku pokryje
   cely rozsah vah. Staticke rezy by znamenaly 14 souboru misto ctyr.

   Podmnoziny jsou jen latin a latin-ext. Cestina je potrebuje obe — a, e, i
   maji carku uz v latin, ale c, e s hackem, r, s, t, u, z leze az v latin-ext.
   Cyrilice, rectina a vietnamstina by pridaly soubory, ktere nikdo nenacte;
   diky unicode-range si je prohlizec stejne nestahne. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('../fonts/sora-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('../fonts/sora-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- assets/css/core/base.css ---- */
/*
 * base.css — reset, zakladni prvky dokumentu a sdilene atomy rozhrani.
 * Vsechny barvy a mezery ctou tokeny z variables.css, zadny hardcoded hex.
 * Tlacitka, badge a chipy jsou tady, protoze je pouziva temer kazda komponenta.
 */

/* ------------------------------------------------------------------ */
/*  Reset                                                              */
/* ------------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Kotvy nesmi skoncit pod prilepenou hlavickou. */
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
    margin: 0;
}

ul[class],
ol[class] {
    padding: 0;
    list-style: none;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
}

img,
picture,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

svg {
    fill: currentColor;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

a {
    color: var(--c-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--dur-fast) var(--ease);
}

a:hover {
    color: var(--c-primary-hover);
}

/* Plynuly scroll jen tam, kde ho uzivatel nezakazal. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Uzivatel s vypnutymi animacemi nesmi videt zadny pohyb. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------------ */
/*  Fokus, vyber textu, kotvy                                          */
/* ------------------------------------------------------------------ */

:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Mys nesmi kreslit outline, klavesnice ano — proto jen :focus-visible. */
:focus:not(:focus-visible) {
    outline: none;
}

::selection {
    background: var(--c-primary-soft);
    color: var(--c-text);
}

[id] {
    scroll-margin-top: calc(var(--header-h) + 16px);
}

/* ------------------------------------------------------------------ */
/*  Pristupnost                                                        */
/* ------------------------------------------------------------------ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Viditelne jen pri fokusu klavesnici (napr. "Preskocit na obsah"). */
.sr-only-focusable:not(:focus):not(:focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bz-skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    /* Nad vsim vcetne brany 18+ — bez nej se web neda ovladat z klavesnice. */
    z-index: calc(var(--z-agegate) + 10);
    padding: var(--space-3) var(--space-5);
    background: var(--c-surface);
    color: var(--c-primary);
    border: 2px solid var(--c-primary);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(calc(-100% - var(--space-4)));
    transition: transform var(--dur-fast) var(--ease);
}

.bz-skip-link:focus {
    transform: translateY(0);
}

/* ------------------------------------------------------------------ */
/*  Kontejnery                                                         */
/* ------------------------------------------------------------------ */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-5);
}

.container--narrow {
    max-width: var(--container-narrow);
}

@media (min-width: 768px) {
    .container {
        padding-inline: var(--space-7);
    }
}

/* ------------------------------------------------------------------ */
/*  Zakladni prvky obsahu                                              */
/* ------------------------------------------------------------------ */

hr {
    height: 1px;
    margin: var(--space-8) 0;
    border: 0;
    background: var(--c-border);
}

small {
    font-size: var(--fs-sm);
}

abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

code,
kbd,
samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* Tabulky: zebra pruhy, prilepena hlavicka, na mobilu horizontalni scroll. */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

th,
td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--c-border);
}

th {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--c-heading);
    white-space: nowrap;
}

tbody tr:nth-child(even) {
    background: var(--c-surface-2);
}

/* Obalka tabulky se stinovym indikatorem, ze je kam scrollovat. */
.bz-table-wrap {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
}

.bz-table-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, var(--c-scroll-fade), var(--c-scroll-fade-end));
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
}

.bz-table-wrap.is-scrollable::after {
    opacity: 1;
}

.bz-table-wrap.is-scroll-end::after {
    opacity: 0;
}

.bz-table--sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--c-surface-2);
    box-shadow: inset 0 -1px 0 var(--c-border-strong);
}

/* Rozbalovaci bloky (FAQ, doplnujici vysvetlivky). */
details {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    overflow: hidden;
}

details + details {
    margin-top: var(--space-3);
}

summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 44px;
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--c-heading);
    list-style: none;
    transition: background var(--dur-fast) var(--ease);
}

summary::-webkit-details-marker {
    display: none;
}

summary:hover {
    background: var(--c-surface-2);
}

/* Sipka se otoci pri rozbaleni — cistym CSS, bez ikonoveho fontu. */
summary::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--c-text-mute);
    border-bottom: 2px solid var(--c-text-mute);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--dur) var(--ease);
}

details[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

details > *:not(summary) {
    padding: 0 var(--space-5) var(--space-5);
}

/* ------------------------------------------------------------------ */
/*  Tlacitka                                                           */
/* ------------------------------------------------------------------ */

.bz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: 0 var(--space-6);
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease),
        box-shadow var(--dur-fast) var(--ease),
        transform var(--dur-fast) var(--ease);
}

@media (max-width: 767px) {
    .bz-btn {
        min-height: 52px;
    }
}

.bz-btn:disabled,
.bz-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Hlavni konverzni tlacitko — syta zelena, oddelena od navigace. */
.bz-btn--primary {
    background: var(--c-cta);
    color: var(--c-on-cta);
    border-color: var(--c-cta);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.bz-btn--primary:hover,
.bz-btn--primary:focus-visible {
    background: var(--c-cta-hover);
    border-color: var(--c-cta-hover);
    color: var(--c-on-cta);
    box-shadow: var(--shadow-md);
}

.bz-btn--primary:active {
    transform: translateY(1px);
    box-shadow: var(--shadow-xs);
}

/* Tlacitko uvnitr .bz-alert nebo .bz-prose: tamni pravidla pro odkazy
   (`.bz-alert a`, `.bz-prose a`, oboji 0-1-1) prebijela barvu tlacitka
   z `.bz-btn--primary` (0-1-0) — CTA tak melo modrou barvu odkazu na zelenem
   pozadi (kontrast 2,37:1 v light, 1,13:1 v dark) a jeste podtrzeni.
   Typovy selektor `a` navic zvedne specificitu na 0-2-1, takze rozhoduje
   tohle pravidlo bez ohledu na poradi souboru. Zadny !important netreba. */
.bz-alert a.bz-btn,
.bz-prose a.bz-btn {
    text-decoration: none;
}

.bz-alert a.bz-btn--primary,
.bz-prose a.bz-btn--primary {
    color: var(--c-on-cta);
}

.bz-alert a.bz-btn--primary:hover,
.bz-alert a.bz-btn--primary:focus-visible,
.bz-prose a.bz-btn--primary:hover,
.bz-prose a.bz-btn--primary:focus-visible {
    color: var(--c-on-cta);
}

.bz-alert a.bz-btn--secondary,
.bz-prose a.bz-btn--secondary {
    color: var(--c-primary);
}

.bz-alert a.bz-btn--secondary:hover,
.bz-alert a.bz-btn--secondary:focus-visible,
.bz-prose a.bz-btn--secondary:hover,
.bz-prose a.bz-btn--secondary:focus-visible {
    color: var(--c-primary-hover);
}

.bz-alert a.bz-btn--ghost,
.bz-prose a.bz-btn--ghost {
    color: var(--c-text-soft);
}

.bz-alert a.bz-btn--ghost:hover,
.bz-alert a.bz-btn--ghost:focus-visible,
.bz-prose a.bz-btn--ghost:hover,
.bz-prose a.bz-btn--ghost:focus-visible {
    color: var(--c-text);
}

/* Sekundarni: obrysove navy, pro "Cist recenzi" a podobne kroky. */
.bz-btn--secondary {
    background: var(--c-surface);
    color: var(--c-primary);
    border-color: var(--c-border-strong);
}

.bz-btn--secondary:hover,
.bz-btn--secondary:focus-visible {
    background: var(--c-primary-soft);
    border-color: var(--c-primary);
    color: var(--c-primary-hover);
}

.bz-btn--ghost {
    background: transparent;
    color: var(--c-text-soft);
    border-color: transparent;
}

.bz-btn--ghost:hover,
.bz-btn--ghost:focus-visible {
    background: var(--c-surface-2);
    color: var(--c-text);
}

.bz-btn--sm {
    min-height: 40px;
    padding: 0 var(--space-4);
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
}

@media (max-width: 767px) {
    /* Ani mala tlacitka nesmi klesnout pod 44px dotykovy cil. */
    .bz-btn--sm {
        min-height: 44px;
    }
}

.bz-btn--lg {
    min-height: 56px;
    padding: 0 var(--space-8);
    font-size: var(--fs-md);
}

.bz-btn--block {
    display: flex;
    width: 100%;
}

/* ------------------------------------------------------------------ */
/*  Chipy, badge, pilulky                                              */
/* ------------------------------------------------------------------ */

/* Chip = interaktivni filtr. Musi mit dotykovy cil 44 px. */
.bz-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-full);
    background: var(--c-surface);
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease);
}

.bz-chip:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.bz-chip[aria-pressed="true"],
.bz-chip.is-active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-on-primary);
}

/* Badge = neinteraktivni stitek u nabidky. */
.bz-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    background: var(--c-surface-2);
    color: var(--c-text-soft);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Jediny povoleny gradient mimo hero — badge "Volba redakce". */
.bz-badge--pick {
    background: var(--grad-pick);
    border-color: var(--c-badge-pick-border);
    color: var(--c-badge-pick-text);
}

.bz-badge--exclusive {
    background: var(--c-badge-exclusive-bg);
    border-color: var(--c-badge-exclusive-border);
    color: var(--c-badge-exclusive-text);
}

.bz-badge--new {
    background: var(--c-badge-new-bg);
    border-color: var(--c-badge-new-border);
    color: var(--c-badge-new-text);
}

.bz-badge--code {
    background: var(--c-badge-code-bg);
    border: 1px dashed var(--c-badge-code-border);
    border-radius: var(--radius-xs);
    color: var(--c-badge-code-text);
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Pilulka = kratky faktovy udaj v karte (napr. "Vyplata do 24 h"). */
.bz-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-xs);
    background: var(--c-surface-2);
    color: var(--c-text-soft);
    font-size: var(--fs-xs);
    line-height: 1.5;
}

.bz-pill--ok {
    background: var(--c-success-soft);
    color: var(--c-badge-new-text);
}

.bz-pill--warn {
    background: var(--c-warning-soft);
    color: var(--c-warning-text);
}

/* ------------------------------------------------------------------ */
/*  Karty                                                              */
/* ------------------------------------------------------------------ */

.bz-card {
    padding: var(--space-6);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.bz-card:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--shadow-md);
}

/* Zvyraznena #1 pozice — jediny prvek zebricku se zlatym ramem. */
.bz-card--first {
    border-color: var(--c-accent);
    box-shadow: var(--shadow-md);
}

/* ------------------------------------------------------------------ */
/*  Sekce                                                              */
/* ------------------------------------------------------------------ */

.bz-section {
    padding-block: var(--space-10);
}

@media (min-width: 900px) {
    .bz-section {
        padding-block: var(--space-12);
    }
}

.bz-section--soft {
    background: var(--c-bg-soft);
}

/* ------------------------------------------------------------------ */
/*  Prvky ovladane skriptem (app.js)                                   */
/* ------------------------------------------------------------------ */

/* Nektere prvky skryva JS pres atribut hidden — reset ho nesmi prebit. */
[hidden] {
    display: none !important;
}

/* Vychozi stin prilepene hlavicky pri odscrollovani; komponenta ho smi prepsat. */
.bz-header.is-stuck {
    box-shadow: var(--shadow-sm);
    border-bottom-color: var(--c-border-strong);
}

/* Zamek scrollu pod otevrenym mobilnim menu. */
.is-menu-open,
.is-menu-open body {
    overflow: hidden;
}

/* Tlacitko zpet nahoru — vytvari ho app.js, kdyz ho sablona nedoda. */
.bz-to-top {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    /* Musi byt nad mobilnim prilepenym CTA, jinak ho CTA prekryje. */
    z-index: calc(var(--z-sticky-cta) + 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-full);
    background: var(--c-surface);
    color: var(--c-primary);
    box-shadow: var(--shadow-md);
    transition: background var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease);
}

.bz-to-top:hover {
    background: var(--c-primary-soft);
    border-color: var(--c-primary);
}

/* Na mobilu a tabletu by tlacitko prekrylo sticky CTA, proto se posune vys.
   Prah musi odpovidat bodu, kde .bz-sticky-cta mizi — components/sticky-cta.css
   ji skryva az od 1024 px, drive tu byla hranice 767 px a v pasmu 768-1023 px
   sedelo kolecko sipky primo na konverznim tlacitku. */
@media (max-width: 1023px) {
    .bz-to-top {
        /* 69 px lista + 22 px presah jejiho zaviraciho kolecka + rezerva */
        bottom: calc(var(--space-5) + 80px);
    }
}

/* Polozka vyrazena filtrem — trida doplnuje atribut hidden kvuli animacim. */
.is-filtered-out {
    display: none !important;
}

/* ---- assets/css/core/typography.css ---- */
/*
 * typography.css — nadpisova skala a blok .bz-prose.
 * .bz-prose je klicovy: recenze, clanky a slovnikova hesla prichazeji jako
 * hotove HTML z databaze, takze musi vypadat dobre bez jedine pridane tridy.
 */

/* ------------------------------------------------------------------ */
/*  Nadpisova skala                                                    */
/* ------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--c-heading);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
}

h1 {
    font-size: var(--fs-h1);
    font-weight: 800;
}

h2 {
    font-size: var(--fs-3xl);
    font-weight: 700;
}

h3 {
    font-size: var(--fs-xl);
    font-weight: 700;
}

h4 {
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: var(--lh-normal);
}

h5 {
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: var(--lh-normal);
}

h6 {
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: var(--lh-normal);
    letter-spacing: 0;
}

/* Nadpisove pomocne tridy pro pripady, kdy uroven v DOM neodpovida velikosti. */
.bz-h1 { font-size: var(--fs-h1); font-weight: 800; }
.bz-h2 { font-size: var(--fs-3xl); font-weight: 700; }
.bz-h3 { font-size: var(--fs-xl); font-weight: 700; }
.bz-h4 { font-size: var(--fs-lg); font-weight: 600; }

.bz-h1, .bz-h2, .bz-h3, .bz-h4 {
    font-family: var(--font-display);
    color: var(--c-heading);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
}

/* Nadnadpis nad H1 / H2 — mala kapitalka v navy. */
.bz-eyebrow {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-primary);
}

/* Perex pod H1. */
.bz-lead {
    max-width: var(--measure);
    font-size: var(--fs-lg);
    line-height: var(--lh-relaxed);
    color: var(--c-text-soft);
}

.bz-meta {
    font-size: var(--fs-sm);
    color: var(--c-text-mute);
}

.bz-note {
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--c-text-mute);
}

/* ------------------------------------------------------------------ */
/*  .bz-prose — redakcni text z databaze                               */
/* ------------------------------------------------------------------ */

.bz-prose {
    max-width: var(--measure);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    color: var(--c-text);
}

.bz-prose--wide {
    max-width: none;
}

.bz-prose > *:first-child {
    margin-top: 0;
}

.bz-prose > *:last-child {
    margin-bottom: 0;
}

.bz-prose p {
    margin-block: 0 var(--space-5);
}

/* H2 v textu dostane tenkou linku nad sebou — deli obsah bez tezkych ram. */
.bz-prose h2 {
    margin-block: var(--space-9) var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--c-border);
    font-size: var(--fs-2xl);
    font-weight: 700;
}

.bz-prose h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.bz-prose h3 {
    margin-block: var(--space-7) var(--space-3);
    font-size: var(--fs-lg);
    font-weight: 700;
}

.bz-prose h4 {
    margin-block: var(--space-6) var(--space-3);
    font-size: var(--fs-md);
    font-weight: 600;
}

.bz-prose a {
    color: var(--c-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--c-border-strong);
    transition: text-decoration-color var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease);
}

.bz-prose a:hover {
    color: var(--c-primary-hover);
    text-decoration-color: var(--c-primary);
}

.bz-prose strong,
.bz-prose b {
    font-weight: 700;
    color: var(--c-heading);
}

.bz-prose em {
    font-style: italic;
}

/* Vlastni odrazky: navy ctverecek u UL, cislo v navy u OL. */
.bz-prose ul,
.bz-prose ol {
    margin-block: 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.bz-prose li {
    position: relative;
    margin-bottom: var(--space-3);
    padding-left: var(--space-6);
}

.bz-prose li:last-child {
    margin-bottom: 0;
}

.bz-prose ul > li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 2px;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--c-primary);
}

.bz-prose ol {
    counter-reset: bz-ol;
}

.bz-prose ol > li {
    counter-increment: bz-ol;
}

.bz-prose ol > li::before {
    content: counter(bz-ol) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95em;
    color: var(--c-primary);
}

.bz-prose li > ul,
.bz-prose li > ol {
    margin-top: var(--space-3);
    margin-bottom: 0;
}

/* Tabulka uvnitr textu: plne ostylovana, se scrollem na uzkych displejich. */
.bz-prose table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-block: 0 var(--space-6);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--c-surface);
    font-size: var(--fs-sm);
    white-space: normal;
}

.bz-prose thead th {
    background: var(--c-surface-2);
    color: var(--c-heading);
    font-family: var(--font-display);
    font-weight: 600;
    text-align: left;
}

.bz-prose th,
.bz-prose td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-border);
}

.bz-prose tbody tr:nth-child(even) td {
    background: var(--c-surface-2);
}

.bz-prose tbody tr:last-child td {
    border-bottom: 0;
}

/* Citace / zvyrazneni redakce — levy pruh v akcentni barve. */
.bz-prose blockquote {
    margin-block: 0 var(--space-6);
    padding: var(--space-4) var(--space-5);
    border-left: 4px solid var(--c-accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--c-bg-soft);
    color: var(--c-text-soft);
    font-size: var(--fs-md);
}

.bz-prose blockquote p:last-child {
    margin-bottom: 0;
}

.bz-prose blockquote cite {
    display: block;
    margin-top: var(--space-3);
    font-size: var(--fs-sm);
    font-style: normal;
    color: var(--c-text-mute);
}

.bz-prose code {
    padding: 2px 6px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xs);
    background: var(--c-surface-2);
    font-family: var(--font-mono);
    font-size: 0.875em;
    color: var(--c-text);
    word-break: break-word;
}

.bz-prose pre {
    margin-block: 0 var(--space-6);
    padding: var(--space-4);
    overflow-x: auto;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.bz-prose pre code {
    padding: 0;
    border: 0;
    background: none;
}

.bz-prose img {
    margin-block: var(--space-5);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
}

.bz-prose figure {
    margin-block: 0 var(--space-6);
}

.bz-prose figcaption {
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--c-text-mute);
}

.bz-prose hr {
    margin-block: var(--space-8);
}

.bz-prose dl {
    margin-block: 0 var(--space-5);
}

.bz-prose dt {
    font-weight: 700;
    color: var(--c-heading);
}

.bz-prose dd {
    margin: 0 0 var(--space-3) 0;
    color: var(--c-text-soft);
}

/* Automaticky prolinkovane heslo slovniku — decentni tecikovane podtrzeni. */
.bz-prose a.bz-term {
    text-decoration-style: dotted;
    text-decoration-color: var(--c-primary);
}

/* ---- assets/css/core/utilities.css ---- */
/*
 * utilities.css — zamerne minimalni sada pomocnych trid.
 * Duvod pro strohost: rozvrzeni patri komponentam, utility jen resi vyjimky.
 * Zadny generovany bloat ve stylu atomickych frameworku.
 */

/* Rozvrzeni */
.u-stack > * + * { margin-top: var(--space-4); }
.u-stack-lg > * + * { margin-top: var(--space-6); }
.u-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.u-row--between { justify-content: space-between; }
.u-row--end { justify-content: flex-end; }
.u-row--center { justify-content: center; }
.u-row--top { align-items: flex-start; }
.u-grid {
    display: grid;
    gap: var(--space-5);
}
.u-grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.u-grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.u-grid--4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.u-grow { flex: 1 1 auto; min-width: 0; }

/* Mezery — jen ty, ktere se opravdu opakuji */
.u-mt-0 { margin-top: 0; }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-7 { margin-top: var(--space-7); }
.u-mt-9 { margin-top: var(--space-9); }
.u-mb-0 { margin-bottom: 0; }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-mb-7 { margin-bottom: var(--space-7); }

/* Text */
.u-center { text-align: center; }
.u-right { text-align: right; }
.u-nowrap { white-space: nowrap; }
.u-balance { text-wrap: balance; }
.u-measure { max-width: var(--measure); }
.u-sm { font-size: var(--fs-sm); }
.u-xs { font-size: var(--fs-xs); }
.u-bold { font-weight: 700; }
.u-soft { color: var(--c-text-soft); }
.u-mute { color: var(--c-text-mute); }
.u-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
/* Oriznuti na dva radky u perexu v kartach */
.u-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Plochy */
.u-surface {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}
.u-soft-bg { background: var(--c-bg-soft); }
.u-pad { padding: var(--space-6); }
.u-pad-sm { padding: var(--space-4); }
.u-divider {
    height: 1px;
    background: var(--c-border);
    border: 0;
}

/* Viditelnost */
.u-hidden { display: none !important; }
@media (max-width: 767px) {
    .u-desktop-only { display: none !important; }
}
@media (min-width: 768px) {
    .u-mobile-only { display: none !important; }
}

/* Odkaz pres celou kartu bez vnorovani <a> do <a> */
.u-cover-link::after {
    content: "";
    position: absolute;
    inset: 0;
}
.u-relative { position: relative; }

/* ---- assets/css/components/age-gate.css ---- */
/* BonusZdarma — overeni veku 18+ (.bz-agegate)
   Modalni vrstva pres celou obrazovku, otevira se pouze pokud navstevnik jeste
   neodpovedel. Zamyka scroll stranky a nabizi odchod na Narodni linku pri odpovedi ne. */

.bz-agegate {
    position: fixed;
    inset: 0;
    z-index: var(--z-agegate);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.bz-agegate.is-open {
    display: flex;
}

.bz-agegate__scrim {
    position: absolute;
    inset: 0;
    background: var(--c-text);
    opacity: 0.7;
}

.bz-agegate__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - var(--space-8));
    overflow-y: auto;
    padding: var(--space-6) var(--space-5);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.bz-agegate__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-4);
    border: 2px solid var(--c-danger);
    border-radius: var(--radius-full);
    color: var(--c-danger);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1;
}

.bz-agegate__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-heading);
}

.bz-agegate__text {
    margin: 0 0 var(--space-5);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--c-text-soft);
}

.bz-agegate__actions {
    display: grid;
    gap: var(--space-3);
}

.bz-agegate__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.bz-agegate__btn--yes {
    background: var(--c-cta);
    color: var(--c-on-cta);
}

.bz-agegate__btn--yes:hover {
    background: var(--c-cta-hover);
}

.bz-agegate__btn--no {
    background: var(--c-surface-2);
    border-color: var(--c-border-strong);
    color: var(--c-text);
    font-weight: 600;
}

.bz-agegate__btn--no:hover {
    background: var(--c-bg-soft);
}

.bz-agegate__foot {
    margin: var(--space-5) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--c-border);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--c-text-mute);
}

.bz-agegate__foot a {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-agegate__foot strong {
    color: var(--c-text);
}

@media (min-width: 480px) {
    .bz-agegate__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .bz-agegate__btn {
        transition: none;
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-agegate__btn:focus-visible,
.bz-agegate__foot a:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/alert.css ---- */
/* BonusZdarma — informacni hlaseni (.bz-alert)
   Ctyri tony: info, uspech, varovani, chyba. Kazdy ma vlastni ikonu a titulek,
   takze vyznam nezavisi jen na barve. Pouziva se i pro upozorneni na 18+ a dane.

   KORENOVA CHYBA, ktera se tu opravovala:
   Mrizka ma sloupce 22px minmax(0,1fr) a spolehala na automaticke umistovani.
   Nektera mista v sablonach ale vkladaji <p class="bz-alert__title"> primo do
   .bz-alert (bez obalu .bz-alert__body) — prvni takovy odstavec spadl do 22px
   sloupce a lamal se po jednom slove. A <p class="bz-alert bz-alert--danger">
   je odstavec s michanym inline obsahem, ze ktereho grid udelal jednu polozku
   v 22px sloupci.
   Reseni podle pravidla 1 a 4: vse krome ikony a zaviraciho tlacitka ma natvrdo
   grid-column: 2 a min-width: 0, a hlaseni vykreslene jako <p> je obycejny blok. */

.bz-alert {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
    margin: var(--space-5) 0;
    padding: var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-bg-soft);
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}

.bz-alert__icon {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    color: var(--c-text-mute);
}

.bz-alert__icon svg {
    width: 18px;
    height: 18px;
}

/* Vse, co neni ikona ani zaviraci tlacitko, patri do textoveho sloupce —
   i kdyz to sablona vlozi primo do .bz-alert bez obalu .bz-alert__body. */
.bz-alert > *:not(.bz-alert__icon):not(.bz-alert__close) {
    grid-column: 2;
    min-width: 0;
}

.bz-alert__body {
    min-width: 0;
}

/* Hlaseni vykreslene jako jediny odstavec s michanym inline obsahem
   nesmi byt mrizka (pravidlo 1). */
p.bz-alert {
    display: block;
    padding: var(--space-3) var(--space-4);
}

.bz-alert__title {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-heading);
}

.bz-alert p {
    margin: 0 0 var(--space-2);
}

.bz-alert p:last-child {
    margin-bottom: 0;
}

.bz-alert ul {
    margin: 0 0 var(--space-2);
    padding-left: var(--space-5);
}

.bz-alert a {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-alert strong {
    color: var(--c-text);
    font-weight: 600;
}

/* Podbarveny alert je tmavsi nez stranka — --c-text-mute na nem v dark rezimu
   dava jen 4,37:1 pri 12,9 px. Uvnitr alertu proto o stupen kontrastnejsi ton. */
.bz-alert .u-mute {
    color: var(--c-text-soft);
}

/* --- tony --- */
.bz-alert--info {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
}

.bz-alert--info .bz-alert__icon {
    color: var(--c-primary);
}

.bz-alert--success {
    border-color: var(--c-success);
    background: var(--c-success-soft);
}

.bz-alert--success .bz-alert__icon {
    color: var(--c-success-text);
}

.bz-alert--warning {
    border-color: var(--c-warning);
    background: var(--c-warning-soft);
}

.bz-alert--warning .bz-alert__icon {
    color: var(--c-warning-text);
}

.bz-alert--danger {
    border-color: var(--c-danger);
    background: var(--c-danger-soft);
}

.bz-alert--danger .bz-alert__icon {
    color: var(--c-danger-text);
}

/* upozorneni na zodpovedne hrani — vzdy nejsilnejsi kontrast */
.bz-alert--responsible {
    border-color: var(--c-danger);
    border-left-width: 3px;
    background: var(--c-surface);
}

.bz-alert--responsible .bz-alert__icon {
    color: var(--c-danger-text);
}

.bz-alert--responsible .bz-alert__phone {
    display: inline-block;
    margin-top: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 800;
    color: var(--c-heading);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.bz-alert--responsible .bz-alert__phone:hover {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- kompaktni radek --- */
.bz-alert--sm {
    padding: var(--space-3);
    font-size: var(--fs-xs);
}

.bz-alert--sm .bz-alert__title {
    font-size: var(--fs-sm);
}

/* --- zaviratelne hlaseni --- */
.bz-alert__close {
    grid-column: 3;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: -4px -4px 0 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--c-text-mute);
    cursor: pointer;
}

.bz-alert__close:hover {
    background: var(--c-surface-2);
    color: var(--c-text);
}

.bz-alert:has(.bz-alert__close) {
    grid-template-columns: 22px minmax(0, 1fr) 32px;
}

/* viditelny focus pro ovladani klavesnici */
.bz-alert a:focus-visible,
.bz-alert__close:focus-visible,
.bz-alert__phone:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/author-box.css ---- */
/* BonusZdarma — box autora (.bz-author)
   Podpira duveryhodnost: avatar, jmeno, role, kratky zivotopis, oblasti odbornosti
   a datum posledni revize. Varianta --inline slouzi jako radek pod nadpisem clanku.

   KORENOVE CHYBY, ktere se tu opravovaly:
   1) Sablona vypisuje poradi __head, __avatar, __body. Mrizka mela sloupce
      64px minmax(0,1fr) a avatar mel jen grid-row: span 2 bez sloupce, takze
      automaticke umistovani hodilo __head do 64px sloupce a avatar doprava.
      Popisek "Profil: Petra Hajkova" se pak lamal po jednom slove (merene
      w=64 px, 4 radky, 5 znaku na radek). Ted ma kazda bunka EXPLICITNI
      grid-column i grid-row, takze na poradi v DOM uz nezalezi.
   2) .bz-author__meta melo display: flex, ale odstavec obsahuje michany inline
      obsah (volny text + <time> + <a>). Kazdy textovy usek se stal samostatnou
      flex polozkou a veta se roztrhala na kusy oddelene mezerami.
      Podle pravidla 1 je z toho zpatky obycejny blokovy odstavec.
   3) Varianta --inline skryvala cely __body, jenze jmeno, role i bio jsou prave
      v nem — v postrannim panelu clanku tak zbyl jen avatar. Ted se skryva
      jen to, co do radkove varianty nepatri (bio v plne delce, stitky, patka). */

.bz-author {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--space-3) var(--space-4);
    margin: var(--space-8) 0;
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-bg-soft);
}

/* Explicitni umisteni — poradi v sablone je __head, __avatar, __body. */
.bz-author__avatar {
    grid-column: 1;
    grid-row: 1;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    border: 2px solid var(--c-surface);
    background: var(--c-surface-2);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.bz-author__avatar img,
.bz-author__avatar svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bz-author__head {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    align-self: center;
}

.bz-author__label {
    display: block;
    margin: 0;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-text-mute);
}

.bz-author__body {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
}

/* Kdyz sablona avatar nevykresli (kasino bez portretu), nesmi zbyt prazdny
   64px sloupec — hlavicka i telo se pak roztahnou pres celou sirku. */
.bz-author:not(:has(.bz-author__avatar)) {
    grid-template-columns: minmax(0, 1fr);
}

.bz-author:not(:has(.bz-author__avatar)) .bz-author__head,
.bz-author:not(:has(.bz-author__avatar)) .bz-author__body {
    grid-column: 1;
}

.bz-author__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-heading);
}

.bz-author__name a {
    color: inherit;
    text-decoration: none;
}

.bz-author__name a:hover {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-author__role {
    margin: 2px 0 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--c-text-soft);
}

/* Oddelovac mezi roli a rokem — pusobi ve vsech variantach, ne jen v radkove.
   Bez nej se obe casti slily do jedne vety. */
.bz-author__sep::before {
    content: "\2022";
    margin: 0 var(--space-2);
    color: var(--c-border-strong);
}

.bz-author__bio {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--c-text-soft);
    max-width: 72ch;
}

.bz-author__tags {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bz-author__tag {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    padding: 3px var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    background: var(--c-surface);
    color: var(--c-text-soft);
    font-size: var(--fs-xs);
    font-weight: 500;
}

/* Blokovy odstavec — obsahuje michany inline obsah (text + <time> + <a>),
   takze tu nesmi byt flex ani grid (pravidlo 1). */
.bz-author__meta {
    display: block;
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px dashed var(--c-border);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--c-text-mute);
    max-width: 72ch;
}

.bz-author__meta a {
    color: var(--c-primary);
    text-decoration: none;
}

.bz-author__meta a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- radkova varianta pod nadpisem / do postranniho panelu --- */
.bz-author--inline {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-4) 0 var(--space-6);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: var(--fs-sm);
    color: var(--c-text-mute);
}

.bz-author--inline .bz-author__avatar {
    grid-row: 1;
    width: 36px;
    height: 36px;
    border-width: 1px;
    box-shadow: none;
}

.bz-author--inline .bz-author__head {
    display: none;
}

/* Jmeno a role jsou uvnitr __body, proto se telo v radkove variante
   NESMI skryvat — jen se posadi vedle avataru. */
.bz-author--inline .bz-author__body {
    grid-column: 2;
    grid-row: 1;
}

.bz-author--inline .bz-author__name {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: var(--c-text);
}

.bz-author--inline .bz-author__role {
    font-size: var(--fs-xs);
}

.bz-author--inline .bz-author__bio,
.bz-author--inline .bz-author__tags {
    display: none;
}

.bz-author--inline .bz-author__meta {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
}

.bz-author--inline .bz-author__sep::before {
    content: "\2022";
    margin: 0 var(--space-1);
    color: var(--c-border-strong);
}

/* Kdyz radkova varianta nema avatar, telo obsadi cely radek. */
.bz-author--inline:not(:has(.bz-author__avatar)) {
    grid-template-columns: minmax(0, 1fr);
}

.bz-author--inline:not(:has(.bz-author__avatar)) .bz-author__body {
    grid-column: 1;
}

@media (min-width: 768px) {
    .bz-author {
        grid-template-columns: 80px minmax(0, 1fr);
        padding: var(--space-5);
    }

    .bz-author__avatar {
        grid-row: 1 / span 2;
        width: 80px;
        height: 80px;
    }

    /* Od tabletu uz se telo vejde vedle avataru do druheho sloupce. */
    .bz-author__body {
        grid-column: 2;
        grid-row: 2;
    }

    .bz-author:not(:has(.bz-author__avatar)) .bz-author__body {
        grid-column: 1;
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-author a:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/badges.css ---- */
/* BonusZdarma — stitky, znacky a promo kod (.bz-badge, .bz-promo)
   Zlata je vyhrazena pro Volbu redakce a prvni misto, zelena pro potvrzeni,
   ostatni stitky jsou neutralni. Kazdy stitek nese text, nikdy jen barvu.

   Co se tu opravovalo:
   1) .bz-badge je inline-flex s ikonou a volnym textem. Volny text je anonymni
      flex polozka, ktere nejde nastavit min-width: 0 — pri white-space: nowrap
      proto stitek pretekal uzky rodicovsky sloupec. Ted ma stitek max-width: 100 %
      a smi se zalomit.
   2) Kontrast: --c-success na --c-success-soft dava ve svetlem rezimu 3.05:1
      a --c-warning na --c-warning-soft 3.10:1 — obojí pod 4.5:1. Prepnuto na
      --c-success-text (5.89:1 svetly / 6.84:1 tmavy) a --c-warning-text
      (5.67:1 / 6.29:1). --c-danger-soft dostal --c-danger-text (6.32 / 7.18). */

.bz-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px var(--space-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    background: var(--c-surface-2);
    color: var(--c-text-soft);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: left;
}

.bz-badge svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

.bz-badge--pick {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: var(--c-on-accent);
}

.bz-badge--exclusive {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
    color: var(--c-primary);
    white-space: nowrap;
}

.bz-badge--success {
    border-color: var(--c-success);
    background: var(--c-success-soft);
    color: var(--c-success-text);
}

.bz-badge--warning {
    border-color: var(--c-warning);
    background: var(--c-warning-soft);
    color: var(--c-warning-text);
}

.bz-badge--danger {
    border-color: var(--c-danger);
    background: var(--c-danger-soft);
    color: var(--c-danger-text);
}

.bz-badge--soft {
    border-color: var(--c-border);
    background: var(--c-bg-soft);
    color: var(--c-text-mute);
}

.bz-badge--outline {
    background: transparent;
    border-color: var(--c-border-strong);
    color: var(--c-text-soft);
}

.bz-badge--nopartner {
    border-style: dashed;
    background: transparent;
    color: var(--c-text-mute);
}

.bz-badge--lg {
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-sm);
}

/* skupina stitku */
.bz-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- stitek typu bonusu --- */
.bz-tag {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xs);
    background: var(--c-surface);
    color: var(--c-text-soft);
    font-size: var(--fs-xs);
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

a.bz-tag:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

/* --- promo kod s tlacitkem kopirovat --- */
.bz-promo {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    overflow: hidden;
}

.bz-promo__label {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-2) 0 var(--space-3);
    color: var(--c-text-mute);
    font-size: var(--fs-xs);
    white-space: nowrap;
}

.bz-promo__code {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--c-heading);
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bz-promo__copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 0;
    border-left: 1px dashed var(--c-border-strong);
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.bz-promo__copy:hover {
    background: var(--c-primary);
    color: var(--c-on-primary);
}

.bz-promo__copy svg {
    width: 14px;
    height: 14px;
}

.bz-promo__copy.is-copied {
    background: var(--c-success-soft);
    color: var(--c-success-text);
}

/* potvrzeni pro odecitace obrazovky i pro oko */
.bz-promo__status {
    display: block;
    margin-top: 4px;
    min-height: 1em;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-success-text);
}

.bz-promo--block {
    display: flex;
    width: 100%;
}

.bz-promo--block .bz-promo__code {
    flex: 1 1 auto;
}

/* kasino bez promo kodu */
.bz-promo--none {
    border-style: solid;
    border-color: var(--c-border);
    color: var(--c-text-mute);
}

.bz-promo--none .bz-promo__code {
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-text-mute);
}

@media (prefers-reduced-motion: reduce) {
    .bz-promo__copy,
    .bz-tag {
        transition: none;
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-promo__copy:focus-visible,
a.bz-tag:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/breadcrumbs.css ---- */
/* BonusZdarma — drobeckova navigace (.bz-bc)
   Viditelna na vsech strankach mimo homepage, na uzkych displejich se vodorovne roluje,
   aby nezalamovala layout. Oddelovac je dekorativni (aria-hidden v sablone).

   Flex je tu v poradku: <li> ma vzdy jen jeden elementovy potomek (<a> nebo
   <span>), zadny volny textovy uzel. Sipka mezi polozkami je ::before, ne text.
   Odkaz dostal min-height 44 px kvuli velikosti dotykoveho cile. */

.bz-bc {
    padding: var(--space-3) 0;
    font-size: var(--fs-xs);
    color: var(--c-text-mute);
}

.bz-bc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.bz-bc__list::-webkit-scrollbar {
    display: none;
}

.bz-bc__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

.bz-bc__item + .bz-bc__item::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-right: 1.5px solid var(--c-border-strong);
    border-top: 1.5px solid var(--c-border-strong);
    transform: rotate(45deg);
}

.bz-bc__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
    color: var(--c-text-soft);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}

.bz-bc__link:hover {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-bc__current {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 28ch;
    color: var(--c-text-mute);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Domecek nese jen ikonu, sam o sobe by mel jen 34 px na sirku — dotykovy
   cil ale musi byt 44x44 px (WCAG 2.5.8). */
.bz-bc__home {
    min-width: 44px;
    justify-content: center;
}

.bz-bc__home svg {
    width: 14px;
    height: 14px;
    display: block;
}

@media (min-width: 768px) {
    .bz-bc {
        font-size: var(--fs-sm);
    }

    .bz-bc__list {
        flex-wrap: wrap;
    }

    .bz-bc__current {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bz-bc__link {
        transition: none;
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-bc__link:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/casino-card.css ---- */
/* BonusZdarma — karta kasina (.bz-card)
   Tri varianty: row (siroky radek v prehledech), grid (dlazdice do mrizky),
   mini (uzky vypis do postranniho panelu nebo do souvisejicich odkazu).
   Karta bez partnerstvi nesmi vypadat rozbite — misto CTA nese neutralni odkaz na recenzi. */

.bz-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.bz-card:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--shadow-sm);
}

/* --- hlavicka karty --- */
.bz-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.bz-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 64px;
    height: 56px;
    padding: var(--space-1);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-bg);
    overflow: hidden;
}

.bz-card__logo img,
.bz-card__logo svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.bz-card__ident {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bz-card__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-heading);
    overflow-wrap: anywhere;
}

.bz-card__name a {
    color: inherit;
    text-decoration: none;
}

.bz-card__name a:hover {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-card__license {
    font-size: var(--fs-xs);
    color: var(--c-text-mute);
}

.bz-card__rank {
    position: absolute;
    top: -10px;
    left: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    background: var(--c-surface-2);
    color: var(--c-heading);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 800;
}

/* --- telo karty --- */
.bz-card__offer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--c-bg-soft);
}

.bz-card__bonus {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 800;
    line-height: var(--lh-tight);
    color: var(--c-heading);
}

.bz-card__bonus-sub {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
}

.bz-card__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
}

.bz-card__facts li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px dashed var(--c-border);
}

.bz-card__facts li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/* Popisek s ikonou je vlastni obal — volny text primo ve flexu by se lamal
   po jednom slove na radek. */
.bz-card__fact-k {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.bz-card__fact-k svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--c-text-mute);
}

.bz-card__facts strong {
    flex: 0 0 auto;
    color: var(--c-text);
    font-weight: 600;
    text-align: right;
}

.bz-card__excerpt {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--c-text-soft);
}

/* --- akce --- */
.bz-card__actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bz-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-3) var(--space-5);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--c-cta);
    color: var(--c-on-cta);
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}

.bz-card__cta:hover {
    background: var(--c-cta-hover);
}

/* Druhotna akce vedle zelene konverzni. Musi mit stejnou vysku i tvar, aby
   tlacitka srovnala hrany, ale nesmi soutezit o pozornost — proto obrys
   misto vyplne. Pouziva se tam, kde vedle registrace stoji jeste odkaz do
   recenze (slovenska vetev). */
.bz-card__cta--ghost {
    background: transparent;
    color: var(--c-primary);
    box-shadow: inset 0 0 0 1px var(--c-border);
    font-weight: 600;
}

.bz-card__cta--ghost:hover {
    background: var(--c-surface-2);
    box-shadow: inset 0 0 0 1px var(--c-primary);
}

/* Samostatny ovladaci prvek — dotykovy cil musi mit 44 px (WCAG 2.5.8). */
.bz-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    color: var(--c-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
}

.bz-card__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-card__terms {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-text-mute);
    line-height: var(--lh-normal);
}

/* --- kasino bez partnerstvi --- */
.bz-card.is-nopartner .bz-card__cta {
    background: var(--c-surface-2);
    color: var(--c-text);
    border: 1px solid var(--c-border-strong);
    font-weight: 600;
}

.bz-card.is-nopartner .bz-card__cta:hover {
    background: var(--c-bg-soft);
}

.bz-card__nopartner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 3px var(--space-2);
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--radius-full);
    color: var(--c-text-mute);
    font-size: var(--fs-xs);
    font-weight: 600;
}

/* --- zvyraznena karta: patri Volbe redakce, ne automaticky prvnimu poradi --- */
.bz-card.is-featured {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    background: color-mix(in srgb, var(--c-accent-soft) 60%, var(--c-surface));
    box-shadow: inset 0 0 0 1px var(--c-accent), var(--shadow-sm);
}

.bz-card.is-featured:hover {
    border-color: var(--c-accent);
    box-shadow: inset 0 0 0 1px var(--c-accent), var(--shadow-md);
}

.bz-card.is-featured .bz-card__offer {
    background: var(--c-surface);
}

/* V tmavem rezimu by plna sytost zlate delala blativou hnedou plochu. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bz-card.is-featured {
        background: var(--c-surface);
        background: color-mix(in srgb, var(--c-accent-soft) 26%, var(--c-surface));
    }
}

[data-theme="dark"] .bz-card.is-featured {
    background: var(--c-surface);
    background: color-mix(in srgb, var(--c-accent-soft) 26%, var(--c-surface));
}

/* --- prvni misto: jen vyraznejsi poradove cislo --- */
.bz-card--first .bz-card__rank {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: var(--c-on-accent);
}

/* --- varianta row --- */
.bz-card--row {
    flex-direction: column;
}

@media (min-width: 768px) {
    .bz-card--row {
        display: grid;
        grid-template-columns: 88px minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(180px, 220px);
        align-items: center;
        gap: var(--space-5);
        padding: var(--space-5);
    }

    .bz-card--row .bz-card__head {
        display: contents;
    }

    .bz-card--row .bz-card__logo {
        width: 88px;
        height: 64px;
    }

    .bz-card--row .bz-card__actions {
        margin-top: 0;
    }

    .bz-card--row .bz-card__facts {
        display: none;
    }
}

/* --- varianta grid --- */
.bz-card--grid {
    height: 100%;
}

.bz-card--grid .bz-card__logo {
    width: 72px;
    height: 60px;
}

/* Mrizka karet — pocet sloupcu urcuje sirka OBALU, ne okna. Mrizka stoji i
   uvnitr dvousloupcovych layoutu (/vyrobce/*, /automat/* maji vedle sebe bocni
   panel 320 px), kde pri okne 1024 px zbyva jen 616 px. Podle @media (min-width:
   1024px) tam nabihaly tri sloupce po 192 px a karta se rozpadla — pocet
   hodnoceni se lamal na svisly pruh siroky 2 px. auto-fit + minmax drzi kartu
   nad jeji minimalni pouzitelnou sirkou v libovolne sirokem obalu.
   min(280px, 100%) navic brani preteceni v obalu uzsim nez 280 px. */
.bz-card-grid {
    list-style: none;
    margin: var(--space-6) 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-4);
}

@media (min-width: 1024px) {
    .bz-card-grid {
        gap: var(--space-5);
    }
}

/* --- varianta mini --- */
.bz-card--mini {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    box-shadow: none;
}

.bz-card--mini .bz-card__logo {
    width: 44px;
    height: 44px;
}

.bz-card--mini .bz-card__offer,
.bz-card--mini .bz-card__facts,
.bz-card--mini .bz-card__excerpt,
.bz-card--mini .bz-card__terms {
    display: none;
}

.bz-card--mini .bz-card__name {
    font-size: var(--fs-base);
}

.bz-card--mini .bz-card__ident {
    flex: 1 1 auto;
}

.bz-card--mini .bz-card__actions {
    margin: 0;
    flex: 0 0 auto;
}

.bz-card--mini .bz-card__cta {
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
}

@media (prefers-reduced-motion: reduce) {
    .bz-card,
    .bz-card__cta {
        transition: none;
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-card__cta:focus-visible,
.bz-card__link:focus-visible,
.bz-card__name a:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/comparison-table.css ---- */
/* BonusZdarma — srovnavaci tabulka (.bz-compare)
   Obal .bz-compare-wrap drzi ramecek a stinovy indikator, .bz-compare-scroll resi
   vodorovny scroll (ma tabindex, takze jde posouvat i klavesnici).

   POZOR na dva rezimy, mezi kterymi se prepina:
   1) SCROLL rezim (vychozi, uzka okna a siroke tabulky) — .bz-compare-scroll je
      scroll kontejner. Protoze overflow-x:auto vynuti i overflow-y:auto, je tenhle
      obal zaroven scrollportem pro position:sticky. Hlavicka tabulky proto MUSI mit
      top: 0 — s top: var(--header-h) by se posunula o 68 px dolu PRES prvni radek
      (presne ta chyba, kvuli ktere Tipsport mizel pod hlavickou). Misto prilepene
      hlavicky drzi orientaci prilepeny prvni sloupec.
   2) FIT rezim (.bz-compare-wrap--fit) — tabulka se do obalu vejde cela, scroll
      kontejner se vypina (overflow: visible), takze scrollportem je viewport
      a hlavicka se prilepi pod hlavicku webu na top: var(--header-h).
      Rozhoduje @container, NE @media: nektere stranky (recenze) maji tabulku
      v uzkem sloupci 772 px i na sirokem monitoru — s media query by se sloupce
      orizly a nebylo by je cim posunout. Tridu --fit dava PHP tabulkam do
      8 sloupcu, prah 1144 px je maximalni obsahova sirka webu minus ramecky.

   Stavove bunky nesou vzdy i ikonu a text, nikdy nesdeluji informaci jen barvou. */

.bz-compare-wrap {
    /* minimalni sirka jednoho sloupce ve scroll rezimu; 8 x 143 px = 1144 px,
       coz je obsahova sirka kontejneru (1152) minus 1px ramecky obalu, jeste
       s malou rezervou. Stejne cislo je prahem container query nize. */
    --bz-compare-colw: 143px;

    position: relative;
    isolation: isolate;
    container-type: inline-size; /* FIT rezim se rozhoduje podle sirky obalu */
    margin: var(--space-6) 0;
    max-width: 100%;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    /* overflow: clip neni scroll kontejner, takze nerozbije sticky vuci viewportu;
       hidden je jen fallback pro stare prohlizece */
    overflow: hidden;
    overflow: clip;
    /* casova osa scrollu z .bz-compare-scroll zpristupnena i pseudoprvkum obalu */
    timeline-scope: --bz-compare-x;
}

.bz-compare-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-timeline-name: --bz-compare-x;
    scroll-timeline-axis: inline;
}

/* obal je fokusovatelny (tabindex="0"), musi mit viditelny focus */
.bz-compare-scroll:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: -2px;
}

/* --- indikator, ze je kam scrollovat ---
   Vychozi stav (bez scroll-driven animaci) ukazuje pravy stin natvrdo — ve scroll
   rezimu je tabulka sirsi nez obal vzdy. Prohlizece se scroll timeline ho presne
   rozsviti a zhasne podle pozice scrollu. */
.bz-compare-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(to left, var(--c-scroll-fade-end), var(--c-scroll-fade));
}

@supports (animation-timeline: scroll()) {
    .bz-compare-wrap::after {
        opacity: 0;
        animation-name: bz-compare-edge;
        animation-timeline: --bz-compare-x;
        animation-duration: 1ms; /* pri scroll timeline se ignoruje, jen kvuli syntaxi */
        animation-timing-function: linear;
        animation-fill-mode: both;
    }

    /* stin prilepeneho sloupce naskoci, jakmile uzivatel odscrolluje od kraje */
    .bz-compare th.bz-compare__name {
        animation-name: bz-compare-col;
        animation-timeline: --bz-compare-x;
        animation-duration: 1ms;
        animation-timing-function: linear;
        animation-fill-mode: both;
    }
}

/* je-li obsah presne u praveho konce, stin zhasne */
@keyframes bz-compare-edge {
    from {
        opacity: 1;
    }
    92% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes bz-compare-col {
    from {
        box-shadow: 0 0 0 0 var(--c-scroll-fade);
    }
    8%,
    to {
        box-shadow: 8px 0 12px -8px var(--c-scroll-fade-end);
    }
}

/* --- tabulka --- */
.bz-compare {
    width: 100%;
    /* pocet sloupcu posila PHP jako --bz-compare-cols na obalu */
    min-width: calc(var(--bz-compare-cols, 7) * var(--bz-compare-colw));
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
    color: var(--c-text);
}

.bz-compare caption {
    caption-side: top;
    padding: var(--space-4) var(--space-4) var(--space-2);
    text-align: left;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--c-heading);
}

.bz-compare th,
.bz-compare td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--c-border);
}

.bz-compare thead th {
    z-index: 3;
    background: var(--c-surface-2); /* neprusvitne, jinak pod hlavickou prosvita obsah */
    color: var(--c-heading);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    /* zadny nowrap: "Hodnota bonusu" na jednom radku delal 176 px siroky sloupec
       a cela tabulka pak prerostla obal */
    text-wrap: balance;
    border-bottom: 1px solid var(--c-border-strong);
}

/* prilepena hlavicka; ve scroll rezimu je scrollportem .bz-compare-scroll,
   proto top: 0 (viz komentar nahore) */
.bz-compare.bz-table--sticky thead th {
    position: sticky;
    top: 0;
}

.bz-compare tbody tr:nth-child(even) td,
.bz-compare tbody tr:nth-child(even) th {
    background: var(--c-bg-soft);
}

.bz-compare tbody tr:nth-child(odd) td,
.bz-compare tbody tr:nth-child(odd) th {
    background: var(--c-surface);
}

.bz-compare tbody tr:hover td,
.bz-compare tbody tr:hover th {
    background: var(--c-primary-soft);
}

.bz-compare tbody tr:last-child td,
.bz-compare tbody tr:last-child th {
    border-bottom: 0;
}

/* prilepeny prvni sloupec s nazvem kasina — pozadi je vzdy neprusvitne
   (vsechny --c-*-soft tokeny jsou plne hex barvy, nic pod nimi neprosvita) */
.bz-compare__name {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 200px;
    border-right: 1px solid var(--c-border);
    font-weight: 600;
}

/* roh prilepene hlavicky a prilepeneho sloupce — nejvys ze vsech bunek */
.bz-compare thead .bz-compare__name {
    z-index: 4;
}

/* obsah bunky s kasinem: poradi, logo a nazev na jednom radku.
   Flex je az na vnitrnim obalu, aby <th> zustal bunkou tabulky. */
.bz-compare__cell {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.bz-compare__logo {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xs);
    background: var(--c-bg);
    overflow: hidden;
}

.bz-compare__logo img,
.bz-compare__logo svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.bz-compare__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

/* stitek se nesmi lamat na dva radky, jinak zbytecne roste vyska radku */
.bz-compare__brand .bz-badge {
    max-width: 100%;
    white-space: nowrap;
}

.bz-compare__brand a {
    color: var(--c-heading);
    text-decoration: none;
    font-weight: 700;
}

.bz-compare__brand a:hover {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-compare__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--c-text-soft);
}

/* --- obsah bunek --- */
.bz-compare__bonus {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c-heading);
    /* zadny nowrap — nabidka je nejdelsi text v tabulce a nowrap ji roztahl
       na 461 px, coz posunulo posledni sloupce mimo obal */
}

.bz-compare__sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* pojistka, text uz krati truncate_words v PHP */
    overflow: hidden;
    margin-top: 2px;
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--c-text-mute);
    white-space: normal;
}

.bz-compare__num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}

/* rychlost vyplaty je zkracena uz v PHP ("do 24 h"), tady jen hlida jeden radek */
/* Zmereno 15. 9. 2026 (Chrome, 1440 px): s nowrap si tenhle sloupec bral 375 px,
   cela tabulka mela 1217 px do obalu sirokeho 1150 a v rezimu --fit (scroll
   vypnuty, obal ma overflow: clip) se posledni sloupec Odkaz s CTA oriznul a
   neslo k nemu doscrollovat. Se zalomenim ma tabulka presne 1150 px a sloupce
   Bonusova nabidka i Odkaz jeste ziskaly misto. Kratke retezce jako "do 24 h"
   se stejne nelamou, na to staci nowrap na jednotlivych hodnotach, ne na sloupci. */
.bz-compare__payout {
    white-space: normal;
    text-wrap: pretty;
}

/* stav ano/ne — ikona plus text, ne pouze barva */
.bz-compare__state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

.bz-compare__state::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    font-size: 11px;
    line-height: 1;
}

.bz-compare__state.is-yes {
    /* --c-success drzi na zlatem radku jen 3,1:1, --c-success-text je textova varianta */
    color: var(--c-success-text);
}

.bz-compare__state.is-yes::before {
    content: "\2713";
    background: var(--c-success-soft);
    color: var(--c-success-text);
}

.bz-compare__state.is-no {
    color: var(--c-text-mute);
}

.bz-compare__state.is-no::before {
    content: "\2715";
    background: var(--c-surface-2);
    color: var(--c-text-mute);
}

/* --- sloupec s CTA --- */
.bz-compare__action {
    width: 150px;
}

.bz-compare__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--c-cta);
    color: var(--c-on-cta);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease);
}

.bz-compare__cta:hover {
    background: var(--c-cta-hover);
}

/* kasino bez partnerstvi — jen odkaz na recenzi, zadne CTA a zadny go_url */
.bz-compare__cta.is-nopartner {
    background: var(--c-surface-2);
    color: var(--c-text);
    border: 1px solid var(--c-border-strong);
    font-weight: 600;
}

.bz-compare__cta.is-nopartner:hover {
    background: var(--c-bg-soft);
}

.bz-compare__nopartner {
    display: block;
    margin-top: var(--space-2);
}

/* zvyrazneny radek prvniho mista — zlata linka je na pozadi, ne v box-shadow,
   aby box-shadow zustal volny pro stin prilepeneho sloupce */
.bz-compare tbody tr.is-first td,
.bz-compare tbody tr.is-first th {
    background: var(--c-accent-soft);
}

.bz-compare tbody tr.is-first .bz-compare__name {
    background-image: linear-gradient(to right, var(--c-accent) 0 3px, transparent 3px);
}

/* --- napoveda uvnitr obalu, aby ji slo skryt container query --- */
.bz-compare__hint {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px dashed var(--c-border);
    font-size: var(--fs-xs);
    color: var(--c-text-mute);
}

.bz-compare__hint svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

@media (min-width: 768px) {
    .bz-compare {
        font-size: var(--fs-base);
    }

    .bz-compare__name {
        min-width: 220px;
    }
}

/* FIT rezim: obal je dost siroky, aby se tabulka do 8 sloupcu vesla cela.
   Vypneme scroll kontejner — scrollportem se stane viewport a hlavicka tabulky
   se prilepi pod hlavicku webu. */
@container (min-width: 1144px) {
    .bz-compare-wrap--fit .bz-compare-scroll {
        overflow: visible;
        scroll-timeline-name: none;
    }

    .bz-compare-wrap--fit .bz-compare {
        min-width: 0;
    }

    .bz-compare-wrap--fit .bz-compare.bz-table--sticky thead th {
        top: var(--header-h);
    }

    .bz-compare-wrap--fit .bz-compare__name {
        position: static;
        border-right: 0;
    }

    .bz-compare-wrap--fit .bz-compare th.bz-compare__name {
        animation-name: none;
        box-shadow: none;
    }

    .bz-compare-wrap--fit .bz-compare__hint {
        display: none;
    }

    .bz-compare-wrap--fit::after {
        content: none;
    }
}

/* bez podpory overflow: clip by obal zustal scroll kontejnerem a top: var(--header-h)
   by hlavicku opet posunul pres prvni radek — tam radeji zadne prilepeni */
@supports not (overflow: clip) {
    @container (min-width: 1144px) {
        .bz-compare-wrap--fit .bz-compare.bz-table--sticky thead th {
            top: 0;
        }
    }
}

/* Scroll-driven indikatory zustavaji (jsou vazane na pozici, ne na cas a nesou
   informaci), casove prechody se vypinaji. */
@media (prefers-reduced-motion: reduce) {
    .bz-compare__cta {
        transition: none;
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-compare__cta:focus-visible,
.bz-compare__brand a:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/cookie-consent.css ---- */
/* BonusZdarma — lista souhlasu s cookies (.bz-cookie)
   Prilepena dole, na desktopu uzsi karta v rohu. Tlacitka maji stejnou vahu
   (prijmout vs. odmitnout), aby souhlas byl skutecne svobodny. */

.bz-cookie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Hladina ze stupnice ve variables.css. Drive tu byla natvrdo 90, tedy
       uroven brany 18+ — lista se tim dostala nad off-canvas navigaci
       (--z-modal 80) i nad branu samotnou. */
    z-index: var(--z-cookie);
    display: none;
    padding: var(--space-4);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
    box-shadow: var(--shadow-lg);
}

.bz-cookie.is-open {
    display: block;
}

.bz-cookie__inner {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    gap: var(--space-4);
}

.bz-cookie__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--c-heading);
}

.bz-cookie__text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--c-text-soft);
    max-width: 76ch;
}

.bz-cookie__text a {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-cookie__actions {
    display: grid;
    gap: var(--space-2);
}

.bz-cookie__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.bz-cookie__btn--accept {
    background: var(--c-primary);
    color: var(--c-on-primary);
}

.bz-cookie__btn--accept:hover {
    background: var(--c-primary-hover);
}

.bz-cookie__btn--reject {
    background: var(--c-surface-2);
    border-color: var(--c-border-strong);
    color: var(--c-text);
}

.bz-cookie__btn--reject:hover {
    background: var(--c-bg-soft);
}

.bz-cookie__btn--settings {
    background: transparent;
    color: var(--c-text-soft);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-cookie__btn--settings:hover {
    color: var(--c-primary);
}

/* --- rozsirene nastaveni kategorii --- */
.bz-cookie__panel {
    display: none;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--c-border);
}

.bz-cookie__panel.is-open {
    display: grid;
}

/* Volba kategorie: zadny grid — zaskrtavatko byva zabalene v <label> spolu
   s textem, takze by cely popis spadl do 22px sloupce a lamal se po slovech
   (stejna korenova chyba jako u newsletteru). Misto vlevo rezervuje odsazeni,
   vstup lezi absolutne. */
.bz-cookie__opt {
    position: relative;
    display: block;
    padding: var(--space-3);
    padding-left: calc(var(--space-3) + 20px + var(--space-3));
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-bg-soft);
}

.bz-cookie__opt input[type="checkbox"] {
    position: absolute;
    left: var(--space-3);
    top: calc(var(--space-3) + 2px);
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--c-primary);
}

.bz-cookie__opt-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-heading);
}

.bz-cookie__opt-desc {
    grid-column: 2;
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--c-text-mute);
}

@media (min-width: 768px) {
    .bz-cookie__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-6);
    }

    .bz-cookie__actions {
        grid-auto-flow: column;
        align-items: center;
    }

    .bz-cookie__panel {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .bz-cookie {
        left: auto;
        right: var(--space-5);
        bottom: var(--space-5);
        max-width: 560px;
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
    }

    .bz-cookie__inner {
        grid-template-columns: 1fr;
    }

    .bz-cookie__actions {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bz-cookie__btn--settings {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bz-cookie__btn {
        transition: none;
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-cookie__btn:focus-visible,
.bz-cookie__opt input[type="checkbox"]:focus-visible,
.bz-cookie__text a:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/disclosure.css ---- */
/* BonusZdarma — affiliate disclosure (.bz-disclosure)
   Musi byt viditelne u kazdeho zebricku i tabulky. Tri varianty: inline (jeden radek),
   box (ramecek nad zebrickem) a footer (drobne pismo v pate stranky).

   KORENOVA CHYBA, ktera se tu opravovala:
   .bz-disclosure melo display: flex. Varianta --box ma ale DVA odstavce, takze
   z nich flex udelal DVA SLOUPCE vedle sebe (merene 190 px a 124 px, ruzne vysoke
   — presne to "rozhozene" ze zadani). Navic base.css nastavuje svg { display: block },
   takze ikona uvnitr odstavce shodila text na dalsi radek.
   Reseni podle pravidla 1: kontejner je blok, ikona je inline-block ve svem
   odstavci a odstavce jdou pod sebou ve stejne sirce. */

.bz-disclosure {
    display: block;
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--c-text-mute);
}

/* Ikona chodi z bz_icon() primo do odstavce. base.css jí dava display: block,
   proto ji tu vracime do radku textu. */
.bz-disclosure svg {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: var(--space-2);
    vertical-align: -0.18em;
    color: var(--c-text-mute);
}

.bz-disclosure p {
    margin: 0 0 var(--space-2);
}

.bz-disclosure p:last-child {
    margin-bottom: 0;
}

.bz-disclosure a {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- inline --- */
.bz-disclosure--inline {
    margin: var(--space-2) 0 var(--space-4);
}

/* --- box nad zebrickem --- */
.bz-disclosure--box {
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-primary);
    border-radius: var(--radius-sm);
    background: var(--c-bg-soft);
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}

/* Oba odstavce boxu maji stejnou sirku i stejny rytmus — sjednocena vyska
   podle zadani. Merena sirka radku drzi text citelny i na sirokem displeji. */
.bz-disclosure--box p {
    max-width: 78ch;
    margin-bottom: var(--space-3);
}

.bz-disclosure--box p:last-child {
    margin-bottom: 0;
}

.bz-disclosure--box svg {
    width: 18px;
    height: 18px;
    vertical-align: -0.2em;
    color: var(--c-primary);
}

.bz-disclosure--box strong {
    color: var(--c-heading);
    font-weight: 600;
}

/* --- pruh v pate sekce --- */
.bz-disclosure--footer {
    margin: var(--space-5) 0 0;
    padding-top: var(--space-4);
    border-top: 1px dashed var(--c-border);
    text-align: center;
}

.bz-disclosure--footer p {
    max-width: 78ch;
    margin-left: auto;
    margin-right: auto;
}

/* poznamka o podminkach u kazde castky bonusu */
.bz-terms-note {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--c-text-mute);
}

.bz-terms-note a {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* povinne oznaceni 18+ */
.bz-age-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid var(--c-danger);
    border-radius: var(--radius-xs);
    color: var(--c-danger-text);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1;
}

/* viditelny focus pro ovladani klavesnici */
.bz-disclosure a:focus-visible,
.bz-terms-note a:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/facet-bar.css ---- */
/* BonusZdarma — crawlovatelna filtracni lista (.bz-facetbar)
   Vypada jako prepinace v .bz-filters, ale kazda polozka je odkaz na
   samostatnou stranku. Proto tu nejsou stavy aria-pressed, ale is-active
   plus aria-current="page" na aktualnim facetu.
   Soubor je mezi komponentami zamerne: lista se vykresluje i na /automaty
   a /nejlepsi-online-casino, ktere maji jine stránkové CSS. */

.bz-facetbar {
    margin: var(--space-5) 0 var(--space-6);
    padding: var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    /* lista je cilem kotvy z obsahu stranky — prilepena hlavicka ji nesmi prekryt */
    scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

.bz-facetbar__head {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px dashed var(--c-border);
}

.bz-facetbar__title {
    margin: 0 0 var(--space-1);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-heading);
}

.bz-facetbar__lead {
    margin: 0;
    max-width: 68ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--c-text-soft);
}

/* Skupiny pod sebou na mobilu, ve dvou az trech sloupcich na sirsim okne. */
.bz-facetbar__groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.bz-facetbar__group {
    min-width: 0;
}

.bz-facetbar__label {
    margin: 0 0 var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-mute);
}

/* Pilulky se zalamuji do dalsiho radku — na uzkem displeji nikdy
   nepretecou z ramu listy ven. */
.bz-facetbar__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bz-facetbar__item {
    min-width: 0;
    max-width: 100%;
}

/* Pilulka je samostatny ovladaci prvek — 44 px dotykovy cil (WCAG 2.5.8). */
.bz-facetbar__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 44px;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-full);
    background: var(--c-surface);
    color: var(--c-text-soft);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease);
}

a.bz-facetbar__link:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: var(--c-primary-soft);
}

/* Nazev se na uzkem displeji zalomi misto toho, aby pilulku roztahl. */
.bz-facetbar__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.bz-facetbar__count {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    background: var(--c-surface-2);
    color: var(--c-text-mute);
    font-size: var(--fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Aktivni facet neni odkaz. Krome barvy ho odlisuje i zaskrtnuti,
   aby stav nesel jen z rozliseni barev. */
.bz-facetbar__link.is-active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-on-primary);
    cursor: default;
}

.bz-facetbar__link.is-active::before {
    content: "\2713";
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1;
}

.bz-facetbar__link.is-active .bz-facetbar__count {
    background: var(--c-primary-hover);
    color: var(--c-on-primary);
}

.bz-facetbar__foot {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px dashed var(--c-border);
}

.bz-facetbar__all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: var(--c-primary);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-facetbar__all:hover {
    color: var(--c-primary-hover);
}

.bz-facetbar__all svg {
    flex: 0 0 auto;
}

/* --- kompaktni vypis facetu na detailu (.bz-facetlinks) --- */

.bz-facetlinks {
    margin: var(--space-6) 0;
    padding: var(--space-4);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-primary);
    border-radius: var(--radius);
    background: var(--c-bg-soft);
    scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

.bz-facetlinks__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-heading);
}

.bz-facetlinks__lead {
    margin: 0 0 var(--space-3);
    max-width: 68ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--c-text-soft);
}

.bz-facetlinks__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Pilulka je samostatny ovladaci prvek — 44 px dotykovy cil (WCAG 2.5.8). */
.bz-facetlinks__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 44px;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-full);
    background: var(--c-surface);
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease);
}

.bz-facetlinks__link:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: var(--c-primary-soft);
}

.bz-facetlinks__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.bz-facetlinks__count {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    background: var(--c-surface-2);
    color: var(--c-text-mute);
    font-size: var(--fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
    .bz-facetbar__groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-5);
    }
}

@media (min-width: 1024px) {
    .bz-facetbar {
        padding: var(--space-5);
    }

    .bz-facetbar__groups {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .bz-facetbar__link,
    .bz-facetlinks__link {
        transition: none;
    }
}

.bz-facetbar__link:focus-visible,
.bz-facetbar__all:focus-visible,
.bz-facetlinks__link:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/faq.css ---- */
/* BonusZdarma — casté dotazy (.bz-faq)
   Postaveno na <details>/<summary>, takze funguje i bez JavaScriptu.
   Vlastni sipka misto systemoveho markeru, otevrena polozka ma jemne pozadi.

   KORENOVA CHYBA, ktera se tu opravovala:
   .bz-faq__q (summary) melo display: flex a uvnitr je VOLNY TEXT otazky plus
   ::after se sipkou. Text byl anonymni flex polozka, ktere nejde predepsat
   min-width: 0, takze dlouha otazka nemela jak se zmensit pod min-content.
   Podle pravidla 1 je summary blok s rezervovanym mistem vpravo a sipka je
   absolutne umistene ::after. */

.bz-faq {
    margin: var(--space-8) 0;
}

.bz-faq__title {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-heading);
}

.bz-faq__list {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    overflow: hidden;
}

.bz-faq__item {
    border-bottom: 1px solid var(--c-border);
}

.bz-faq__item:last-child {
    border-bottom: 0;
}

.bz-faq__q {
    position: relative;
    display: block;
    min-height: 56px;
    padding: var(--space-4);
    padding-right: calc(var(--space-4) + 26px);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: var(--lh-normal);
    color: var(--c-heading);
    overflow-wrap: break-word;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.bz-faq__q::-webkit-details-marker {
    display: none;
}

.bz-faq__q::marker {
    content: "";
}

.bz-faq__q:hover {
    background: var(--c-bg-soft);
    color: var(--c-primary);
}

/* vlastni sipka */
.bz-faq__q::after {
    content: "";
    position: absolute;
    right: var(--space-4);
    top: calc(var(--space-4) + 6px);
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--c-text-mute);
    border-bottom: 2px solid var(--c-text-mute);
    transform: rotate(45deg);
    transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.bz-faq__item[open] > .bz-faq__q {
    background: var(--c-bg-soft);
    color: var(--c-primary);
}

.bz-faq__item[open] > .bz-faq__q::after {
    transform: rotate(-135deg) translate(-3px, -3px);
    border-color: var(--c-primary);
}

.bz-faq__a {
    padding: 0 var(--space-4) var(--space-5);
    background: var(--c-bg-soft);
    color: var(--c-text-soft);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
}

.bz-faq__a > *:first-child {
    margin-top: 0;
}

.bz-faq__a > *:last-child {
    margin-bottom: 0;
}

.bz-faq__a p {
    margin: 0 0 var(--space-3);
}

.bz-faq__a ul,
.bz-faq__a ol {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-5);
}

.bz-faq__a li {
    margin-bottom: var(--space-1);
}

.bz-faq__a a {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-faq__a strong {
    color: var(--c-text);
}

.bz-faq__q:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: -2px;
}

/* varianta bez ramecku pro vlozeni do delsiho textu */
.bz-faq--plain .bz-faq__list {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.bz-faq--plain .bz-faq__item {
    border-bottom: 1px solid var(--c-border);
}

.bz-faq--plain .bz-faq__q,
.bz-faq--plain .bz-faq__item[open] > .bz-faq__q,
.bz-faq--plain .bz-faq__a {
    background: transparent;
    padding-left: 0;
}

.bz-faq--plain .bz-faq__q {
    padding-right: 26px;
}

.bz-faq--plain .bz-faq__a {
    padding-right: 0;
}

.bz-faq--plain .bz-faq__q::after {
    right: 0;
}

@media (min-width: 768px) {
    .bz-faq__q {
        padding: var(--space-4) var(--space-5);
        padding-right: calc(var(--space-5) + 26px);
        font-size: var(--fs-lg);
    }

    .bz-faq__q::after {
        right: var(--space-5);
        top: calc(var(--space-4) + 8px);
    }

    .bz-faq__a {
        padding: 0 var(--space-5) var(--space-5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bz-faq__q,
    .bz-faq__q::after {
        transition: none;
    }
}

/* ---- assets/css/components/filters.css ---- */
/* BonusZdarma — filtrovaci lista (.bz-filters)
   Filtruje se pres data-atributy bez zmeny URL, aby nevznikal duplicitni obsah.
   Aktivni stav nese barvu i vypln a znak, takze je poznat i bez rozliseni barev. */

.bz-filters {
    margin: var(--space-5) 0;
    padding: var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
}

.bz-filters__row {
    position: relative; /* kotva pro indikator posuvnych chipsu */
    timeline-scope: --bz-chips-x;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.bz-filters__row + .bz-filters__row {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--c-border);
}

.bz-filters__label {
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-mute);
}

/* --- prepinace (chips) ---
   Na uzkych oknech se chipsy neposkladaji pod sebe, ale posouvaji do strany.
   Scrollbar je skryty, misto nej je vpravo jemny prechod — a ten se podle
   pozice scrollu rozsviti a zhasne (scroll-driven animace). */
.bz-filters__group {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2);
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    scroll-timeline-name: --bz-chips-x;
    scroll-timeline-axis: inline;
}

.bz-filters__group::-webkit-scrollbar {
    display: none;
}

.bz-filters__row::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to left, var(--c-scroll-fade-end), var(--c-scroll-fade));
}

@supports (animation-timeline: scroll()) {
    .bz-filters__row::after {
        animation-name: bz-chips-edge;
        animation-timeline: --bz-chips-x;
        animation-duration: 1ms; /* pri scroll timeline se ignoruje */
        animation-timing-function: linear;
        animation-fill-mode: both;
    }
}

@keyframes bz-chips-edge {
    from {
        opacity: 1;
    }
    92% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.bz-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 44px; /* dotykovy cil */
    padding: 0 var(--space-3);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-full);
    background: var(--c-surface);
    color: var(--c-text-soft);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.bz-chip:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: var(--c-primary-soft);
}

.bz-chip[aria-pressed="true"],
.bz-chip.is-active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-on-primary);
}

/* aktivni chip ma navic zaskrtnuti, aby stav nebyl jen barevny */
.bz-chip[aria-pressed="true"]::before,
.bz-chip.is-active::before {
    content: "\2713";
    font-size: 11px;
    line-height: 1;
}

.bz-chip__count {
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--c-surface-2);
    color: var(--c-text-mute);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.bz-chip[aria-pressed="true"] .bz-chip__count,
.bz-chip.is-active .bz-chip__count {
    background: var(--c-primary-hover);
    color: var(--c-on-primary);
}

/* --- razeni (select) --- */
.bz-filters__select {
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    cursor: pointer;
}

.bz-filters__select:hover {
    border-color: var(--c-primary);
}

/* --- vyhledavaci pole v seznamu (slovnik, automaty) --- */
.bz-filters__search {
    flex: 1 1 220px;
    min-width: 0;
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
}

.bz-filters__search::placeholder {
    color: var(--c-text-mute);
}

.bz-filters__search:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-soft);
}

/* --- vysledky a reset --- */
.bz-filters__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--c-border);
    font-size: var(--fs-xs);
    color: var(--c-text-mute);
}

.bz-filters__count strong {
    color: var(--c-heading);
    font-weight: 700;
}

.bz-filters__reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px; /* dotykovy cil */
    padding: 0 var(--space-2);
    border: 0;
    background: transparent;
    color: var(--c-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-filters__reset:hover {
    color: var(--c-primary-hover);
}

/* --- prazdny vysledek --- */
.bz-filters__empty {
    display: none;
    margin: var(--space-5) 0;
    padding: var(--space-6) var(--space-4);
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--radius);
    background: var(--c-bg-soft);
    text-align: center;
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
}

.bz-filters__empty.is-visible {
    display: block;
}

/* polozka skryta filtrem */
[data-filter-hidden="1"] {
    display: none !important;
}

/* --- abecedni prepinac pro slovnik --- */
.bz-alpha {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: var(--space-5) 0;
    padding: 0;
    list-style: none;
}

.bz-alpha__item a,
.bz-alpha__item button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text-soft);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.bz-alpha__item a:hover,
.bz-alpha__item button:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: var(--c-primary-soft);
}

.bz-alpha__item.is-active a,
.bz-alpha__item.is-active button {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-on-primary);
}

.bz-alpha__item.is-empty a,
.bz-alpha__item.is-empty button {
    color: var(--c-text-mute);
    background: var(--c-bg-soft);
    pointer-events: none;
    opacity: 0.6;
}

@media (min-width: 768px) {
    .bz-filters__group {
        flex-wrap: wrap;
        overflow: visible;
    }
}

/* Indikator posuvu je vazany na pozici scrollu, ne na cas — zustava.
   Casove prechody se vypinaji. */
@media (prefers-reduced-motion: reduce) {
    .bz-chip {
        transition: none;
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-chip:focus-visible,
.bz-filters__select:focus-visible,
.bz-filters__search:focus-visible,
.bz-filters__reset:focus-visible,
.bz-alpha__item a:focus-visible,
.bz-alpha__item button:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/footer.css ---- */
/* BonusZdarma — paticka (.bz-footer)
   Sloupce odkazu + pravni pruh s 18+, licenci MF CR, Narodni linkou a copyrightem.
   Podklad je tmave inkoustovy i ve svetlem rezimu — proto lokalni tokeny --footer-*,
   ktere se v tmavem rezimu prepnou na standardni barvy povrchu.

   POZOR na korenovou chybu layoutu: zadny kontejner s michanym inline obsahem
   (volny text + <strong>/<a>/<svg>) tady nesmi mit display:grid ani display:flex
   a zadny textovy track nesmi byt "auto" — auto = min-content = jedno slovo na radek.
   Textove sloupce jsou proto vzdy minmax(0, 1fr) a odstavce jsou zabalene
   do vlastniho <div>, aby v gridu byly polozkou ony, ne holy text. */

.bz-footer {
    --footer-bg: var(--c-heading);
    --footer-fg: var(--c-on-primary);
    --footer-fg-soft: color-mix(in srgb, var(--c-on-primary) 82%, transparent);
    --footer-border: color-mix(in srgb, var(--c-on-primary) 16%, transparent);
    --footer-surface: color-mix(in srgb, var(--c-on-primary) 8%, transparent);

    margin-top: var(--space-10);
    background: var(--footer-bg);
    color: var(--footer-fg-soft);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bz-footer {
        --footer-bg: var(--c-bg-soft);
        --footer-fg: var(--c-text);
        --footer-fg-soft: var(--c-text-soft);
        --footer-border: var(--c-border);
        --footer-surface: var(--c-surface);
    }
}

[data-theme="dark"] .bz-footer {
    --footer-bg: var(--c-bg-soft);
    --footer-fg: var(--c-text);
    --footer-fg-soft: var(--c-text-soft);
    --footer-border: var(--c-border);
    --footer-surface: var(--c-surface);
}

.bz-footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-9) var(--space-4) var(--space-7);
}

/* --- horni cast: claim + sloupce odkazu --- */
.bz-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding-bottom: var(--space-7);
    border-bottom: 1px solid var(--footer-border);
}

/* Obal claimu a stitku. Je to blok s odstavci, ne radkove logo — proto
   display:block. Driv tady bylo inline-flex a claim se srazil pod min-content. */
.bz-footer__brand {
    display: block;
    min-width: 0;
    color: var(--footer-fg);
}

.bz-footer__claim {
    margin: 0 0 var(--space-4);
    max-width: 46ch;
    color: var(--footer-fg-soft);
}

.bz-footer__claim strong {
    color: var(--footer-fg);
    font-family: var(--font-display);
    font-weight: 800;
}

/* --- sloupce odkazu ---
   Sloupcu je osm (staticke sekce, facety, bonusy a "kde hrat" podle kasina),
   proto pevny pocet sloupcu na breakpoint misto auto-fit: 8 se tak deli na
   2x4 nebo 4x2 a nikdy nevznikne osamely sloupec v poslednim radku.
   Textove tracky jsou minmax(0, 1fr), nikdy auto. */
.bz-footer__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6) var(--space-5);
    min-width: 0;
    align-content: start;
}

.bz-footer__col {
    min-width: 0;
    /* delsi sloupec nesmi rozhodit zarovnani nadpisu vedlejsich sloupcu */
    align-self: start;
}

.bz-footer__col-title {
    margin: 0 0 var(--space-3);
    color: var(--footer-fg);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.bz-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

/* Sloupec ma az deset odkazu. Na mysi staci 36 px, na dotyku zustava 44 px —
   bez toho by paticka narostla o stovky pixelu na kazdem mobilu. */
.bz-footer__list a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: var(--space-1) 0;
    color: var(--footer-fg-soft);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}

@media (pointer: coarse) {
    .bz-footer__list a {
        min-height: 44px;
    }
}

.bz-footer__list a:hover {
    color: var(--footer-fg);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- stitky 18+ / licence / kontakt --- */
.bz-footer__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
}

.bz-footer__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--footer-border);
    border-radius: var(--radius-sm);
    background: var(--footer-surface);
    color: var(--footer-fg);
    font-size: var(--fs-xs);
    font-weight: 600;
}

/* popisek je vlastni <span>, aby ve flexu nevznikl anonymni textovy uzel */
.bz-footer__badge-text {
    min-width: 0;
    white-space: nowrap;
}

.bz-footer__badge-text a {
    color: inherit;
    text-decoration: none;
}

.bz-footer__badge-text a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-footer__badge--age {
    border-color: var(--c-danger);
    color: var(--footer-fg);
}

.bz-footer__badge svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* --- pravni pruh ---
   .bz-footer__legal je do 1024px obycejny blok. Od 1024px je to grid o DVOU
   polozkach: nadpis a obal odstavcu. Textovy sloupec ma minmax(0, 1fr),
   takze uz se nemuze smrsknout na sirku nejdelsiho slova. */
.bz-footer__legal {
    display: block;
    padding: var(--space-6) 0;
    border-top: 1px solid var(--footer-border);
    border-bottom: 1px solid var(--footer-border);
}

.bz-footer__legal-title {
    margin: 0 0 var(--space-3);
}

.bz-footer__legal-text {
    min-width: 0;
}

.bz-footer__legal-text > p {
    margin: 0 0 var(--space-4);
    max-width: 84ch;
    color: var(--footer-fg-soft);
}

.bz-footer__legal-text > p:last-child {
    margin-bottom: 0;
}

.bz-footer__legal-text a {
    color: var(--footer-fg);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Radek s Narodni linkou: blokovy odstavec s michanym inline obsahem, tedy
   zadny flex. Telefonni ikona visi vlevo pres ::before / absolutni pozici. */
.bz-footer__help {
    position: relative;
    padding-left: var(--space-7);
    font-size: var(--fs-xs);
}

.bz-footer__help svg {
    position: absolute;
    left: 0;
    top: 0.15em;
    display: block;
    width: 18px;
    height: 18px;
}

.bz-footer__help strong {
    color: var(--footer-fg);
    white-space: nowrap;
}

/* --- copyright --- */
.bz-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    padding-top: var(--space-5);
    color: var(--footer-fg-soft);
    font-size: var(--fs-xs);
}

.bz-footer__bottom > p {
    margin: 0;
    flex: 1 1 34ch;
    min-width: 0;
    max-width: 78ch;
}

.bz-footer__bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    flex: 0 1 auto;
}

.bz-footer__bottom-links a {
    color: var(--footer-fg-soft);
    text-decoration: none;
    white-space: nowrap;
}

.bz-footer__bottom-links a:hover {
    color: var(--footer-fg);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/*
 * Kredit studia stojí na vlastním řádku pod copyrightem, ne jako třetí
 * sloupec vedle něj: v řádku by se s odkazy pral o místo a na užším okně
 * by se zalomil doprostřed věty. Proto `flex-basis: 100 %`.
 *
 * Vlásečnice nad ním ho odděluje od právního drobnopisu — je to podpis,
 * ne další podmínka. Selektor musí být stejně silný jako
 * `.bz-footer__bottom > p` výš, jinak by ho přebila jeho šířka 34ch.
 */
.bz-footer__bottom > p.bz-footer__credit {
    flex: 1 0 100%;
    max-width: none;
    margin: 0;
    padding-top: var(--space-4);
    margin-top: var(--space-2);
    border-top: 1px solid color-mix(in srgb, var(--footer-fg) 12%, transparent);
    font-size: var(--fs-sm);
    color: var(--footer-fg-soft);
}

/*
 * Doména nese celý význam řádku, tak ať je vidět: jasnější než okolí,
 * polotučně a s podtržením v akcentu. Podtržení je `border-bottom`, ne
 * `text-decoration` — jen tak se dá ztlumit barva písma a zároveň
 * nechat linku plnou.
 */
.bz-footer__credit a {
    color: var(--footer-fg);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid color-mix(in srgb, var(--c-accent) 55%, transparent);
    padding-bottom: 1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.bz-footer__credit a:hover,
.bz-footer__credit a:focus-visible {
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
}

.bz-footer a:focus-visible,
.bz-footer button:focus-visible {
    outline: 2px solid var(--footer-fg);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

@media (min-width: 560px) {
    .bz-footer__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .bz-footer__inner {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }

    .bz-footer__cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bz-footer__legal {
        padding: var(--space-7) 0;
    }
}

@media (min-width: 1024px) {
    /* Znacka uz nestoji vedle odkazu, ale nad nimi: osm sloupcu potrebuje
       celou sirku kontejneru, jinak by se link mesh smrskl na uzky pruh. */
    .bz-footer__top {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-7);
        align-items: start;
    }

    .bz-footer__cols {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-6);
    }

    .bz-footer__legal {
        display: grid;
        grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
        column-gap: var(--space-8);
        align-items: start;
    }

    .bz-footer__legal-title {
        margin-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bz-footer__list a {
        transition: none;
    }
}

/* Jazykova poznamka u odkazu na cizojazycny web. Mala, ale citelna: ma
   cloveka upozornit driv, nez proklikne, ne se schovat. */
.bz-footer__list .bz-footer__lang {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .65;
    vertical-align: middle;
}

/* ---- assets/css/components/header.css ---- */
/* BonusZdarma — hlavicka webu (.bz-header)
   Prilepena lista vysky --header-h: logo, hlavni navigace, mega menu, prepinac tematu.
   Na mobilu hamburger + off-canvas panel zprava; vse ovladatelne klavesnici.
   Barvy vyhradne z tokenu ve variables.css. */

.bz-header {
    position: sticky;
    top: 0;
    /* hladina z jednotne stupnice ve variables.css */
    z-index: var(--z-header);
    height: var(--header-h);
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    /* jemny stin az po odscrollovani (tridu prida header.js) */
    transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* JS nastavuje .is-stuck; .is-scrolled je historicky nazev, ktery uz nikdo
   nenastavuje — necháváme ho kvuli zpetne kompatibilite sablon. */
.bz-header.is-stuck,
.bz-header.is-scrolled {
    box-shadow: var(--shadow-sm);
}

.bz-header__inner {
    /* kotvici blok pro mega menu v nav.css — panel se tak nikdy nedostane
       za pravy okraj okna. Overflow musi zustat viditelny: siroky panel
       s facety a s bonusy podle kasina je vyssi nez sama hlavicka. */
    position: relative;
    overflow: visible;
    max-width: var(--container);
    height: var(--header-h);
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* --- logo --- */
.bz-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    text-decoration: none;
    color: var(--c-heading);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-lg);
    letter-spacing: -0.01em;
    flex: 0 0 auto;
}

.bz-header__brand img,
.bz-header__brand svg {
    display: block;
    width: auto;
    height: 30px;
}

.bz-header__brand-mark {
    color: var(--c-primary);
}

/* --- hlavni navigace (desktop) --- */
.bz-header__nav {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
}

.bz-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}

/* --- prepinac tematu --- */
.bz-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    background: var(--c-surface);
    color: var(--c-text-soft);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.bz-theme-toggle:hover {
    color: var(--c-primary);
    border-color: var(--c-border-strong);
    background: var(--c-surface-2);
}

.bz-theme-toggle svg {
    width: 20px;
    height: 20px;
}

/* ikony se prepinaji podle aktivniho rezimu — bez JS trik pres data-theme */
.bz-theme-toggle .bz-icon-moon { display: none; }
[data-theme="dark"] .bz-theme-toggle .bz-icon-moon { display: block; }
[data-theme="dark"] .bz-theme-toggle .bz-icon-sun { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bz-theme-toggle .bz-icon-moon { display: block; }
    :root:not([data-theme="light"]) .bz-theme-toggle .bz-icon-sun { display: none; }
}

/* --- hamburger --- */
.bz-header__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-heading);
    cursor: pointer;
}

.bz-header__burger:hover {
    background: var(--c-surface-2);
}

.bz-header__burger-bars,
.bz-header__burger-bars::before,
.bz-header__burger-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: var(--radius-full);
    background: currentColor;
    transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.bz-header__burger-bars {
    position: relative;
}

.bz-header__burger-bars::before,
.bz-header__burger-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.bz-header__burger-bars::before { top: -6px; }
.bz-header__burger-bars::after { top: 6px; }

.bz-header__burger[aria-expanded="true"] .bz-header__burger-bars { background: transparent; }
.bz-header__burger[aria-expanded="true"] .bz-header__burger-bars::before { transform: translateY(6px) rotate(45deg); }
.bz-header__burger[aria-expanded="true"] .bz-header__burger-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* --- rychly odkaz v hlavicce (napr. TOP bonusy) --- */
.bz-header__cta {
    display: none;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--c-cta);
    color: var(--c-on-cta);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease);
}

.bz-header__cta:hover {
    background: var(--c-cta-hover);
}

/* --- off-canvas panel (mobil) ---
   Stin i zasuvka jsou v nav.php sourozenci <header>, NE jeho potomci.
   .bz-header je position: sticky se z-indexem --z-header, takze zaklada
   stackovaci kontext; cokoliv uvnitr se v nem zaradi bez ohledu na vlastni
   z-index a lista souhlasu ani prilepene CTA by pres zasuvku slo prekreslit.
   Jako sourozenci hlavicky uz obe vrstvy plati stupnici z variables.css. */
.bz-header__scrim {
    position: fixed;
    inset: 0;
    /* stin pod off-canvas panelem — o stupinek niz nez samotny panel */
    z-index: calc(var(--z-modal) - 1);
    background: var(--c-text);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

/* Stav drzi app.js na koreni dokumentu (trida is-menu-open); samotnemu
   stinu zadnou tridu nedava, proto se ridi odtud. Selektor s .is-open
   zustava pro pripad, ze by ho nekdo prepinal primo. */
.is-menu-open .bz-header__scrim,
.bz-header__scrim.is-open {
    opacity: 0.55;
    visibility: visible;
}

.bz-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* off-canvas navigace se chova jako modal */
    z-index: var(--z-modal);
    width: min(88vw, 340px);
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
    border-left: 1px solid var(--c-border);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
    transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

.bz-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

/* Zasuvka je scroll kontejner (rozbalene skupiny maji pres 3000 px). Hlavicka
   se zaviracim tlacitkem proto musi zustat prilepena — jinak odscrolluje pryc
   a na dotykovem zarizeni nezbyde zadny zpusob, jak menu zavrit. Pozadi musi
   byt neprusvitne, aby pod nim odkazy neprosvitaly. */
.bz-drawer__head {
    position: sticky;
    top: 0;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: var(--header-h);
    padding: 0 var(--space-4);
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
}

.bz-drawer__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--c-heading);
}

.bz-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    cursor: pointer;
}

.bz-drawer__close:hover {
    background: var(--c-surface-2);
}

.bz-drawer__body {
    padding: var(--space-4);
}

.bz-drawer__foot {
    margin-top: auto;
    padding: var(--space-4);
    border-top: 1px solid var(--c-border);
}

/* pri otevrenem panelu zamykame scroll stranky (tridu prida JS na <html>) */
/* JS zamyka scroll tridou .is-menu-open na <html>; .bz-no-scroll byl
   puvodni nazev a sam o sobe se nikde nenastavuje. */
html.is-menu-open,
.bz-no-scroll {
    overflow: hidden;
}

/* --- desktop --- */
@media (min-width: 1024px) {
    .bz-header__inner {
        gap: var(--space-6);
        padding: 0 var(--space-6);
    }

    .bz-header__nav {
        display: block;
    }

    .bz-header__burger {
        display: none;
    }

    .bz-header__cta {
        display: inline-flex;
    }

    .bz-header__brand img,
    .bz-header__brand svg {
        height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bz-header,
    .bz-header__scrim,
    .bz-drawer,
    .bz-header__burger-bars,
    .bz-header__burger-bars::before,
    .bz-header__burger-bars::after {
        transition: none;
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-header__brand:focus-visible,
.bz-theme-toggle:focus-visible,
.bz-header__burger:focus-visible,
.bz-header__cta:focus-visible,
.bz-drawer__close:focus-visible,
.bz-drawer a:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* --- znacka v hlavicce (brand set) ---
   Kresba darku je rastr, wordmark SVG. Wordmark dedi barvu textu pres currentColor,
   takze v tmavem rezimu zesvetla; znackova zelena ve slove "zdarma" zustava pevna. */
.bz-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--c-heading);
    min-width: 0;
}

.bz-header__brand-img {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    object-fit: contain;
}

.bz-header__brand svg {
    display: block;
    height: 34px;
    width: auto;
    max-width: 190px;
    flex: 0 1 auto;
}

@media (max-width: 560px) {
    /* Na uzkem displeji ma prednost znacka; tagline pod wordmarkem se stejne
       nezobrazi citelne, tak necham jen kresbu a nazev zkratim sirkou. */
    .bz-header__brand svg { max-width: 140px; }
    .bz-header__brand-img { width: 30px; height: 30px; }
}

/* Zmereno 15. 9. 2026: na 360 px mela stranka body.scrollWidth 384 px, tedy
   vodorovne rolovala cela. Znacka (178 px) plus akce (prepinac jazyka, tema,
   burger = 174 px) se do 360 px nevesly. Zmensena je znacka, NE tlacitka:
   prepinac CZ/SK je jedina cesta na slovenskou verzi a dotykove cile uz jsou
   na hrane. Po zmene je body.scrollWidth roven sirce okna. */
@media (max-width: 26rem) {
    .bz-header__brand svg { max-width: 104px; }
    .bz-header__brand-img { width: 26px; height: 26px; }
}

/* --------------------------------------------------------------------------
   Prepinac jazykove verze (CZ / SK)
   --------------------------------------------------------------------------
   Slovenska vetev neni prekladem ceske: ma vlastni kasina i licence, takze
   odkaz vede na rozcestnik /sk, ne na protejsek konkretni stranky. Vzhledem
   se drzi prepinace tematu vedle nej, jen je sirsi kvuli dvema polozkam.
   -------------------------------------------------------------------------- */
.bz-lang {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 2px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    background: var(--c-surface);
}

.bz-lang__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: var(--radius-full);
    color: var(--c-text-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.bz-lang__item:hover {
    color: var(--c-primary);
    background: var(--c-surface-2);
}

/* Aktivni jazyk musi byt poznat i bez barvy — proto tucnejsi pismo a plocha,
   ne jen jiny odstin. */
.bz-lang__item.is-active {
    color: var(--c-text);
    background: var(--c-surface-2);
    font-weight: 700;
}

@media (max-width: 30rem) {
    .bz-lang__item { min-width: 30px; height: 30px; padding: 0 6px; }
}

/* ---- assets/css/components/nav.css ---- */
/* BonusZdarma — navigace (.bz-nav)
   Vodorovna hlavni navigace na desktopu s dvousloupcovym mega menu pro Bonusy a Kasina.
   Panel se otevira na hover i na focus-within, aby sel ovladat klavesnici.
   Na mobilu se stejne polozky zobrazi jako rozbalovaci seznam v off-canvas panelu. */

.bz-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Polozka NENI position:relative zamerne — mega panel se pak kotvi az
   k .bz-header__inner a nemuze pretect za pravy okraj okna. Podtrzeni
   aktivni polozky se kotvi primo k odkazu (viz .bz-nav__link nize). */
.bz-nav__item {
    position: static;
}

.bz-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.bz-nav__link:hover {
    color: var(--c-primary);
    background: var(--c-surface-2);
}

.bz-nav__link[aria-current="page"],
.bz-nav__link.is-active {
    color: var(--c-primary);
    font-weight: 600;
}

/* aktivni polozka ma i podtrzeni — informace nesmi byt jen barvou */
.bz-nav__link[aria-current="page"]::after,
.bz-nav__link.is-active::after {
    content: "";
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: 6px;
    height: 2px;
    border-radius: var(--radius-full);
    background: var(--c-primary);
}

.bz-nav__caret {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    transition: transform var(--dur-fast) var(--ease);
}

.bz-nav__item:hover > .bz-nav__link .bz-nav__caret,
.bz-nav__item:focus-within > .bz-nav__link .bz-nav__caret {
    transform: rotate(180deg);
}

/* --- mega menu --- */
/* --- mega menu ---
   Kotvici blok je .bz-header__inner (max-width: var(--container), centrovany),
   NE jednotliva polozka. Panel se proto vzdy vejde do okna — driv byl kotveny
   k polozce, takze u poslednich polozek pretekal doprava a cela stranka
   dostala vodorovny scroll (merene na 1024 a 1280 px). */
.bz-mega {
    position: absolute;
    top: calc(100% + 6px);
    left: var(--space-6);
    right: auto;
    /* panel zije uvnitr stackovaciho kontextu .bz-header (--z-header),
       tenhle stupen ho radi nad ostatni polozky navigace */
    z-index: var(--z-dropdown);
    width: min(760px, calc(100% - 2 * var(--space-6)));
    padding: var(--space-5);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast) var(--ease);
}

/* Sloupec s facety a s bonusy podle kasina panel roztahne. Sirka je porad
   omezena kotvicim blokem, takze ani siroky panel nepretece z okna.
   Vysku omezuje max-height + scroll — nejdelsi panel (Hry) ma pres dvacet
   odkazu a bez toho by na nizkem okne pretekl pod ohyb. */
.bz-mega--wide {
    width: min(1040px, calc(100% - 2 * var(--space-6)));
    max-height: min(76vh, 640px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Neviditelny most, aby kurzor nepropadl mezi odkazem a panelem.
   Sedi na SPOUSTECI, ne uvnitr .bz-mega: siroky panel je scroll kontejner
   (max-height + overflow-y: auto) a podle specifikace se mu i overflow-x
   prepne na auto, takze most nad hornim okrajem panelu oriznul. Prave proto
   sly Bonusy, Kasina a Hry otevrit jen klavesnici — mysi panel zmizel driv,
   nez na nej kurzor dojel.
   Vyska mostu = presne mezera pod odkazem: hlavicka je --header-h vysoka,
   odkaz ma 44 px a je svisle na stred, panel je jeste o 6 px niz. */
.bz-nav__item:hover > .bz-nav__link[aria-controls]::before,
.bz-nav__item:focus-within > .bz-nav__link[aria-controls]::before {
    content: "";
    position: absolute;
    top: 100%;
    /* par pixelu do stran navic, aby most snesl i sikmou drahu kurzoru */
    left: calc(-1 * var(--space-2));
    right: calc(-1 * var(--space-2));
    height: calc((var(--header-h) - 44px) / 2 + 6px);
}

.bz-nav__item:hover > .bz-mega,
.bz-nav__item:focus-within > .bz-mega,
.bz-mega.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Escape a klik mimo panel zaviraji i ve chvili, kdy nad polozkou porad
   stoji kurzor — tridu prida skript v nav.php. Specificita je stejna jako
   u pravidla s :hover vyse a pravidlo stoji za nim, takze vyhrava poradim,
   ne pretezovanim (zadne !important). */
.bz-nav__item.is-closed > .bz-mega {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
}

.bz-nav__item.is-closed > .bz-nav__link[aria-controls]::before {
    content: none;
}

/* Grid ma presne dve polozky: popisek skupiny a seznam odkazu.
   Driv tu bylo 1fr 1fr, takze kratky popisek zabral pulku panelu.
   Textove tracky jsou minmax(0, 1fr), nikdy holé 1fr ani auto. */
.bz-mega__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.bz-mega__col-title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-text-mute);
}

.bz-mega__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 2px var(--space-4);
}

.bz-mega__link {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: var(--lh-normal);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.bz-mega__link:hover {
    background: var(--c-primary-soft);
    color: var(--c-primary);
}

.bz-mega__desc {
    display: block;
    margin-top: 2px;
    color: var(--c-text-mute);
    font-size: var(--fs-xs);
    font-weight: 400;
}

/* --- podsekce mega menu (facety, bonusy podle kasina) ---
   Dalsi sloupce panelu. auto-fit + minmax je nutny: pocet sekci se lisi
   sloupec od sloupce (Hry ma ctyri, Kasina jednu) a pevna mrizka by u jedne
   sekce nechala tri prazdna mista. Textovy track je minmax(0, 1fr). */
.bz-mega__sections {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--c-border);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: var(--space-4) var(--space-5);
    align-items: start;
}

/* Panel bez hlavniho seznamu (jen sekce) nema nad cim delat oddelovac. */
.bz-mega__grid + .bz-mega__sections {
    border-top: 1px solid var(--c-border);
}

.bz-mega__section {
    min-width: 0;
}

.bz-mega__sec-title {
    margin: 0 0 var(--space-2);
    padding: 0 var(--space-3);
    color: var(--c-text-mute);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bz-mega__sec-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
}

.bz-mega__sec-link {
    display: block;
    padding: 6px var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.bz-mega__sec-link:hover {
    background: var(--c-primary-soft);
    color: var(--c-primary);
}

.bz-mega__sec-link[aria-current="page"] {
    color: var(--c-primary);
    font-weight: 600;
}

.bz-mega__foot {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--fs-xs);
    color: var(--c-text-mute);
}

.bz-mega__foot a {
    color: var(--c-primary);
    font-weight: 600;
    text-decoration: none;
}

.bz-mega__foot a:hover {
    text-decoration: underline;
}

/* --- navigace v off-canvas panelu (mobil) --- */
.bz-nav--drawer .bz-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}

.bz-nav--drawer .bz-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-3);
    font-size: var(--fs-base);
    border-radius: var(--radius-sm);
}

.bz-nav--drawer .bz-nav__link[aria-current="page"]::after,
.bz-nav--drawer .bz-nav__link.is-active::after {
    display: none;
}

.bz-nav--drawer .bz-nav__link[aria-current="page"],
.bz-nav--drawer .bz-nav__link.is-active {
    background: var(--c-primary-soft);
}

/* rozbalovaci podskupina v panelu — funguje i bez JS pres <details> */
.bz-nav--drawer .bz-nav__group {
    border-bottom: 1px solid var(--c-border);
}

.bz-nav--drawer .bz-nav__group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-3);
    cursor: pointer;
    list-style: none;
    color: var(--c-text);
    font-size: var(--fs-base);
    font-weight: 600;
}

.bz-nav--drawer .bz-nav__group > summary::-webkit-details-marker {
    display: none;
}

.bz-nav--drawer .bz-nav__group > summary::after {
    content: "";
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-right: 2px solid var(--c-text-mute);
    border-bottom: 2px solid var(--c-text-mute);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--dur-fast) var(--ease);
}

.bz-nav--drawer .bz-nav__group[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.bz-nav--drawer .bz-nav__sublist {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--space-3) var(--space-3);
    display: grid;
    gap: 2px;
}

.bz-nav--drawer .bz-nav__sublist a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid var(--c-border);
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    text-decoration: none;
}

.bz-nav--drawer .bz-nav__sublist a:hover {
    border-left-color: var(--c-primary);
    color: var(--c-primary);
}

/* nazev podsekce v zasuvce (Bonusy podle kasina, Podle funkce, ...) */
.bz-nav--drawer .bz-nav__sec-title {
    margin: var(--space-3) 0 var(--space-1);
    padding-left: var(--space-3);
    color: var(--c-text-mute);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Odkazy v podsekci jsou hustsi nez hlavni uroven — je jich rada za sebou
   a v zasuvce se scrolluje. Vyska 40 px porad splnuje minimalni cil dotyku. */
.bz-nav--drawer .bz-nav__sublist--section {
    padding-bottom: var(--space-2);
}

.bz-nav--drawer .bz-nav__sublist--section a {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}

@media (min-width: 1024px) {
    .bz-mega__grid {
        grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
        column-gap: var(--space-6);
        align-items: start;
    }
}

@media (min-width: 1280px) {
    .bz-nav__link {
        font-size: var(--fs-base);
        padding: 0 var(--space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bz-mega,
    .bz-mega__sec-link,
    .bz-nav__caret,
    .bz-nav--drawer .bz-nav__group > summary::after {
        transition: none;
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-nav__link:focus-visible,
.bz-mega__link:focus-visible,
.bz-mega__sec-link:focus-visible,
.bz-nav--drawer .bz-nav__group > summary:focus-visible,
.bz-nav--drawer .bz-nav__sublist a:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/newsletter.css ---- */
/* BonusZdarma — prihlaseni k odberu novinek (.bz-newsletter)
   Jednoduchy formular s jednim polem, souhlasem a poznamkou 18+.
   Chybove i uspesne hlaseni ma vzdy ikonu a text, nespoleha na barvu.

   KORENOVA CHYBA, ktera se tu opravovala:
   .bz-newsletter__consent melo display: grid se sloupci 20px minmax(0,1fr), jenze
   v sablone je uvnitr JEDINY potomek — <label>, ktery ma zaskrtavatko i cely text
   v sobe. Ten jediny potomek spadl do 20px sloupce a veta o souhlasu se lamala po
   jednom slove. Podle pravidla 1 je z toho blok: label je position: relative
   s padding-left a zaskrtavatko sedi absolutne vlevo.
   .bz-newsletter__head je flex, ale ma jen elementove potomky (ikona + text). */

.bz-newsletter {
    margin: var(--space-8) 0;
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-bg-soft);
}

.bz-newsletter__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* Textovy sloupec hlavicky — obal, ktery drzi nadpis a lead pohromade a smi se
   zmensit pod min-content (pravidlo 3). */
.bz-newsletter__title,
.bz-newsletter__lead {
    min-width: 0;
}

.bz-newsletter__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--c-primary-soft);
    color: var(--c-primary);
}

.bz-newsletter__icon svg {
    width: 20px;
    height: 20px;
}

.bz-newsletter__title {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-heading);
}

.bz-newsletter__lead {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--c-text-soft);
    max-width: 62ch;
}

.bz-newsletter__form {
    display: grid;
    gap: var(--space-3);
}

.bz-newsletter__row {
    display: grid;
    gap: var(--space-2);
}

.bz-newsletter__label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text-soft);
}

.bz-newsletter__input {
    width: 100%;
    min-height: 48px;
    padding: var(--space-3);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.bz-newsletter__input::placeholder {
    color: var(--c-text-mute);
}

.bz-newsletter__input:hover {
    border-color: var(--c-text-mute);
}

.bz-newsletter__input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-soft);
}

.bz-newsletter__input[aria-invalid="true"] {
    border-color: var(--c-danger);
}

.bz-newsletter__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-3) var(--space-5);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--c-primary);
    color: var(--c-on-primary);
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}

.bz-newsletter__btn:hover {
    background: var(--c-primary-hover);
}

.bz-newsletter__btn[disabled] {
    background: var(--c-surface-2);
    color: var(--c-text-mute);
    cursor: not-allowed;
}

.bz-newsletter__consent {
    display: block;
    margin: 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--c-text-mute);
}

/* Zaskrtavatko je uvnitr <label>, proto se misto na nej rezervuje odsazenim
   a samotny vstup se pokladá absolutne — zadny grid, zadny flex. */
.bz-newsletter__consent label {
    position: relative;
    display: block;
    min-height: 24px;
    padding-left: calc(20px + var(--space-2));
    cursor: pointer;
    overflow-wrap: break-word;
}

.bz-newsletter__consent input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--c-primary);
}

.bz-newsletter__consent a {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-newsletter__msg {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.bz-newsletter__msg svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.bz-newsletter__msg.is-ok {
    display: flex;
    background: var(--c-success-soft);
    color: var(--c-success);
}

.bz-newsletter__msg.is-error {
    display: flex;
    background: var(--c-danger-soft);
    color: var(--c-danger);
}

.bz-newsletter__foot {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-xs);
    color: var(--c-text-mute);
}

@media (min-width: 768px) {
    .bz-newsletter {
        padding: var(--space-6);
    }

    .bz-newsletter__form {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: var(--space-3);
    }

    .bz-newsletter__consent,
    .bz-newsletter__msg {
        grid-column: 1 / -1;
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-newsletter__input:focus-visible,
.bz-newsletter__btn:focus-visible,
.bz-newsletter__consent input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/pagination.css ---- */
/* BonusZdarma — strankovani (.bz-pager)
   Cile maji minimalne 44 px, aktualni strana je oznacena barvou i aria-current
   a tucnym pismem. Na mobilu se zobrazi jen sousedni cisla, zbytek nahradi vypustka. */

.bz-pager {
    margin: var(--space-8) 0;
}

.bz-pager__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.bz-pager__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.bz-pager__link:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: var(--c-primary-soft);
}

.bz-pager__link[aria-current="page"] {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-on-primary);
    font-weight: 700;
}

.bz-pager__link.is-disabled {
    color: var(--c-text-mute);
    background: var(--c-bg-soft);
    pointer-events: none;
}

.bz-pager__link svg {
    width: 14px;
    height: 14px;
}

.bz-pager__prev,
.bz-pager__next {
    gap: var(--space-2);
    font-weight: 700;
}

.bz-pager__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 44px;
    color: var(--c-text-mute);
}

.bz-pager__info {
    margin: var(--space-3) 0 0;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--c-text-mute);
}

/* na mobilu skryjeme vzdalena cisla, zustane prev/next a okoli aktualni strany */
.bz-pager__num.is-far {
    display: none;
}

/* --- tlacitko nacist dalsi --- */
.bz-pager__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 48px;
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-primary);
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 700;
    cursor: pointer;
}

.bz-pager__more:hover {
    background: var(--c-primary-soft);
    border-color: var(--c-primary);
}

@media (min-width: 768px) {
    .bz-pager__num.is-far {
        display: inline-flex;
    }

    .bz-pager__more {
        width: auto;
        min-width: 260px;
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bz-pager__link {
        transition: none;
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-pager__link:focus-visible,
.bz-pager__more:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/pros-cons.css ---- */
/* BonusZdarma — klady a zapory (.bz-proscons)
   Dva sloupce se stejnou vyskou, kazda polozka ma ikonu i barvu, aby byla informace
   citelna i pri poruse barvocitu. Na mobilu jdou bloky pod sebe.

   KORENOVA CHYBA, ktera se tu opravovala:
   1) .bz-proscons__list li melo display: grid se sloupci 20px minmax(0,1fr) a odrazku
      resilo ::before jako prvni polozku mrizky. Staci ale jeden <strong> nebo <a>
      uvnitr polozky a volny text kolem nej se stane DALSI polozkou mrizky — spadne
      do 20px sloupce a lame se po jednom slove. Podle pravidla 1 je ted polozka
      obycejny blok: position: relative + padding-left, odrazka pres ::before
      absolutne. Text uz zadnou mrizku neprochazi.
   2) .bz-proscons__title melo display: flex a v sablone je v nem svg + VOLNY TEXT
      nadpisu. Text byl anonymni flex polozka, ktere nejde nastavit min-width: 0,
      takze dlouhy nadpis nemel jak se zmensit. Ted je nadpis blok a ikona sedi
      absolutne vlevo.
   3) Barva textu na jemnem podkladu: --c-success na --c-success-soft dava ve svetlem
      rezimu jen 3.05:1. Prepnuto na --c-success-text (5.89:1) a --c-danger-text
      (6.32:1); v tmavem rezimu 6.84:1 a 7.18:1. */

.bz-proscons {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-4);
    margin: var(--space-7) 0;
}

.bz-proscons__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    overflow: hidden;
}

/* Nadpis: blok s misto na ikonu vlevo (pravidlo 1 — michany inline obsah). */
.bz-proscons__title {
    position: relative;
    display: block;
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 26px);
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: var(--lh-normal);
    color: var(--c-heading);
    border-bottom: 1px solid var(--c-border);
}

.bz-proscons__title svg {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
}

.bz-proscons__col--pros .bz-proscons__title {
    background: var(--c-success-soft);
    color: var(--c-success-text);
}

.bz-proscons__col--cons .bz-proscons__title {
    background: var(--c-danger-soft);
    color: var(--c-danger-text);
}

.bz-proscons__list {
    list-style: none;
    margin: 0;
    padding: var(--space-4);
    display: block;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--c-text-soft);
}

/* Polozka: zadny grid ani flex — odrazka je absolutne umistene ::before. */
.bz-proscons__list li {
    position: relative;
    display: block;
    min-width: 0;
    margin: 0 0 var(--space-3);
    padding-left: calc(20px + var(--space-2));
    overflow-wrap: break-word;
}

.bz-proscons__list li:last-child {
    margin-bottom: 0;
}

.bz-proscons__list li::before {
    position: absolute;
    left: 0;
    top: 0.15em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.bz-proscons__col--pros .bz-proscons__list li::before {
    content: "\2713";
    background: var(--c-success-soft);
    color: var(--c-success-text);
}

.bz-proscons__col--cons .bz-proscons__list li::before {
    content: "\2212";
    background: var(--c-danger-soft);
    color: var(--c-danger-text);
}

.bz-proscons__list strong {
    color: var(--c-text);
    font-weight: 600;
}

.bz-proscons__list a {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* kompaktni varianta do postranniho panelu */
.bz-proscons--compact .bz-proscons__list {
    padding: var(--space-3);
    font-size: var(--fs-xs);
}

.bz-proscons--compact .bz-proscons__list li {
    margin-bottom: var(--space-2);
}

.bz-proscons--compact .bz-proscons__title {
    padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 24px);
    font-size: var(--fs-sm);
}

.bz-proscons--compact .bz-proscons__title svg {
    left: var(--space-3);
    width: 16px;
    height: 16px;
    margin-top: -8px;
}

@media (min-width: 768px) {
    .bz-proscons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-5);
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-proscons__list a:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/quick-answer.css ---- */
/* ---------------------------------------------------------------------------
 * components/quick-answer.css — blok "Rychla odpoved" pod H1.
 *
 * Shrnuti hlavni otazky stranky v peti bodech hned pod nadpisem. Krome
 * ctenare ho vyuzivaji i odpovedove enginy (ChatGPT, Perplexity, AI Overviews),
 * ktere cituji kratke a jednoznacne pasaze u zacatku dokumentu.
 *
 * Historie: pravidla byla puvodne v pages/money.css a fungovala jen na
 * strankach s layoutem money. Rozcestniky recenze/automaty/vyrobci/slovnik
 * a homepage maji vlastni page CSS, takze blok potreboval komponentu, ktera
 * se nacita vsude. Tridy zustaly bz-money__* zamerne — prejmenovani by
 * znamenalo sahnout do vsech existujicich sablon bez uzitku pro ctenare.
 * ------------------------------------------------------------------------- */

.bz-money__summary {
    margin: var(--space-5) 0;
    padding: var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
}

.bz-money__summary-title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--c-heading);
}

.bz-money__summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--c-text-soft);
}

.bz-money__summary-list li {
    /* Grid tu byl chyba: volny text za <strong> se stal samostatnou grid polozkou
       a spadl do 18px sloupce, takze se text lamal po jednom slove na radek.
       Odrazka je proto absolutne pozicovana a text zustava v beznem inline toku. */
    position: relative;
    padding-left: calc(18px + var(--space-2));
}

.bz-money__summary-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background: var(--c-success-soft);
    color: var(--c-success);
    font-size: 11px;
    font-weight: 700;
}

.bz-money__summary-list strong {
    color: var(--c-text);
    font-weight: 600;
}


/* viditelny focus pro ovladani klavesnici */
.bz-money__summary-list a:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/quick-facts.css ---- */
/* BonusZdarma — rychla fakta (.bz-facts)
   Definicni seznam klic/hodnota do prilepeneho panelu recenze i do stranky slotu.
   Cisla jsou v tabulkovych cislicich, aby se hodnoty daly porovnavat pohledem.

   KORENOVA CHYBA, ktera se tu opravovala:
   1) <dt class="bz-facts__key"> obsahuje volitelnou ikonu a za ni VOLNY TEXT
      popisku. base.css nastavuje svg { display: block }, takze ikona shodila
      popisek na dalsi radek ("Licence" merilo 2 radky a 37 px vysky misto 21 px).
      Reseni podle pravidla 1: zadny flex, ikona je inline-block v radku textu.
   2) Radek mel sloupce minmax(0,1fr) minmax(0,1fr), takze kratky popisek ("Licence")
      zabiral stejnych 156 px jako hodnota a cislo povoleni "MF-00000/2017/34 (OVERIT)"
      se lamalo na dva radky. Popisek ma ted maximalne 38 % sirky, hodnota zbytek —
      oba sloupce zustavaji minmax(0, …), takze se smi zmensit (pravidlo 2). */

.bz-facts {
    margin: var(--space-5) 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    overflow: hidden;
}

.bz-facts__title {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-bg-soft);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-text-mute);
}

.bz-facts__list {
    margin: 0;
    padding: 0;
}

.bz-facts__row {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-sm);
}

.bz-facts__row:last-child {
    border-bottom: 0;
}

.bz-facts__row:nth-child(even) {
    background: var(--c-bg-soft);
}

/* Popisek nese michany inline obsah (ikona + text), proto zustava blokem. */
.bz-facts__key {
    display: block;
    margin: 0;
    min-width: 0;
    color: var(--c-text-mute);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    overflow-wrap: break-word;
}

.bz-facts__key svg {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: var(--space-2);
    vertical-align: -0.16em;
    color: var(--c-text-mute);
}

.bz-facts__val {
    display: block;
    margin: 0;
    min-width: 0;
    text-align: right;
    font-weight: 600;
    line-height: var(--lh-normal);
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.bz-facts__val a {
    color: var(--c-primary);
    text-decoration: none;
}

.bz-facts__val a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-facts__val .bz-badge {
    vertical-align: middle;
}

/* Dlazdicova varianta.

   KORENOVA CHYBA, ktera se tu opravovala (3):
   display:grid sedel na <section>, jenze jejimi PRIMYMI potomky jsou jen nadpis
   a <dl> — dlazdice (.bz-facts__row) jsou az uvnitr toho <dl>. Mrizka proto
   nikdy nedlazdila: do prvniho tracku spadl nadpis, do druheho cely seznam pod
   sebe a zbyle tracky zustaly prazdne. Nadpis se navic lamal uprostred slova
   ("HERNI NABIDK / A V CISLECH") a v bocnim panelu recenze (340 px) mel track
   76 px, takze i hodnoty se lamaly po pismenech ("licen / ce", "1 40 / 0").

   KORENOVA CHYBA (4): pocet sloupcu urcoval @media podle sirky OKNA, ale blok
   stoji i v 340px bocnim panelu recenze. Ridi ho proto auto-fit + minmax. */
.bz-facts--tiles {
    display: block;
    border: 0;
    background: transparent;
    overflow: visible;
}

.bz-facts--tiles .bz-facts__title {
    padding: 0 0 var(--space-3);
    border-bottom: 0;
    background: transparent;
}

/* Mrizku nese az seznam — jeho potomky JSOU jednotlive dlazdice. */
.bz-facts--tiles .bz-facts__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    align-items: stretch;
    gap: var(--space-3);
}

.bz-facts--tiles .bz-facts__row {
    display: block;
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
}

.bz-facts--tiles .bz-facts__row:nth-child(even) {
    background: var(--c-surface);
}

.bz-facts--tiles .bz-facts__val {
    margin-top: 4px;
    text-align: left;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-heading);
}

/* viditelny focus pro ovladani klavesnici */
.bz-facts__val a:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/rating.css ---- */
/* BonusZdarma — hodnoceni hvezdickami (.bz-rating)
   Hvezdicky jsou dekorativni, presnou hodnotu vzdy nese i cislo (X,X / 5),
   takze informace nikdy nezavisi jen na barve. Zlata je vyhrazena prave sem.

   KORENOVA CHYBA, ktera se tu opravovala:
   .bz-rating bylo inline-flex bez flex-wrap a bez max-width, a .bz-rating__count
   ma white-space: nowrap. Ve variante --lg v hlavicce recenze pretekl radek
   (merene: prava hrana 401 px pri viewportu 390 px) a cela stranka dostala
   vodorovny scroll. Ted se skupina smi zalomit a nikdy nepresahne rodice. */

.bz-rating {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    max-width: 100%;
    line-height: 1;
}

.bz-rating__stars {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    color: var(--c-border-strong);
    font-size: var(--fs-base);
    letter-spacing: 1px;
    white-space: nowrap;
}

/* prekryv s vyplnenymi hvezdickami, sirka se nastavuje inline stylem v procentech */
.bz-rating__fill {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--c-star);
}

.bz-rating__stars svg {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

.bz-rating__value {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c-heading);
    font-variant-numeric: tabular-nums;
}

.bz-rating__max {
    color: var(--c-text-mute);
    font-weight: 500;
}

.bz-rating__count {
    min-width: 0;
    font-size: var(--fs-xs);
    color: var(--c-text-mute);
    overflow-wrap: break-word;
}

/* Redakcni stitek "nase hodnoceni" — zalomi se na vlastni radek pod hvezdicky,
   aby bylo jasne, ze skore je nase, ne prumer uzivatelskych hodnoceni. */
.bz-rating__label {
    flex-basis: 100%;
    font-size: var(--fs-xs);
    color: var(--c-text-mute);
    line-height: 1.2;
}

/* --- velikosti --- */
.bz-rating--sm .bz-rating__stars {
    font-size: var(--fs-sm);
}

.bz-rating--sm .bz-rating__value {
    font-size: var(--fs-xs);
}

.bz-rating--lg {
    gap: var(--space-1) var(--space-3);
}

.bz-rating--lg .bz-rating__stars {
    font-size: var(--fs-xl);
}

.bz-rating--lg .bz-rating__value {
    font-size: var(--fs-2xl);
    line-height: 1;
}

/* --- velky ukazatel skore (recenze, karta kasina) --- */
.bz-score {
    display: inline-flex;
    flex-direction: column;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 68px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-bg-soft);
    text-align: center;
}

.bz-score__num {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 800;
    line-height: 1;
    color: var(--c-heading);
    font-variant-numeric: tabular-nums;
}

.bz-score__label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-mute);
}

.bz-score.is-top {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
}

/* --- hvezdicky z helperu stars() ---
   base.css nastavuje svg { display:block }, takze bez tehle pravidel se peti
   hvezdickam poskladaji pod sebe. Trida .bz-stars chodi z api/helpers.php. */
.bz-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
}

.bz-stars__i {
    display: block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.bz-rating--sm .bz-stars__i,
.bz-stars--sm .bz-stars__i {
    width: 15px;
    height: 15px;
}

.bz-rating--lg .bz-stars__i,
.bz-stars--lg .bz-stars__i {
    width: 22px;
    height: 22px;
}

/* ---- assets/css/components/related-links.css ---- */
/* BonusZdarma — souvisejici odkazy (.bz-related)
   Blok prolinkovani, ktery brani vzniku stranek bez odkazu. Pet az osm cilu
   v mrizce, kazdy s kratkym popiskem. Varianta --inline slouzi do textu clanku.

   Vzorec "ikona + nazev + popis" je presne ten, ktery se jinde rozbil, proto tu
   plati pravidla 1-4 dusledne:
   - .bz-related__link je flex, ale VSICHNI jeho potomci jsou elementy (ikona,
     textovy blok, sipka) — zadny volny textovy uzel.
   - .bz-related__text ma min-width: 0 (pravidlo 3), jinak by se nazev nesmel
     zmensit pod min-content a sipka by vytlacila text z karty.
   - Nazev i popis jsou samostatne bloky uvnitr .bz-related__text (pravidlo 4).
   - Karta ma height: 100 % a kontejner align-items: stretch, takze vsechny karty
     v radku maji stejnou vysku. */

.bz-related {
    margin: var(--space-8) 0;
}

.bz-related__title {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-heading);
}

.bz-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* auto-fit + minmax resi to, co media dotaz neumi: pocet sloupcu se ridi
       SIRKOU KONTEJNERU, ne sirkou okna. V bocnim panelu (280 px) vyjde jeden
       sloupec, v hlavnim sloupci ctyri — bez jedineho breakpointu. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: stretch;
    gap: var(--space-3);
}

.bz-related__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 100%;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.bz-related__link:hover {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
}

.bz-related__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: var(--c-bg-soft);
    color: var(--c-primary);
}

.bz-related__icon svg {
    width: 16px;
    height: 16px;
}

/* Textovy sloupec — blok, aby nazev a popis nebyly polozkami flexu. */
.bz-related__text {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.bz-related__label {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-heading);
    overflow-wrap: break-word;
}

.bz-related__desc {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--c-text-mute);
    overflow-wrap: break-word;
}

.bz-related__arrow {
    flex: 0 0 auto;
    align-self: center;
    width: 1em;
    color: var(--c-text-mute);
    font-size: var(--fs-sm);
    line-height: 1;
    transition: transform var(--dur-fast) var(--ease);
}

.bz-related__link:hover .bz-related__arrow {
    transform: translateX(3px);
    color: var(--c-primary);
}

/* --- radkova varianta pro vlozeni do textu --- */
.bz-related--inline {
    margin: var(--space-5) 0;
    padding: var(--space-4);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--c-bg-soft);
}

.bz-related--inline .bz-related__title {
    margin-bottom: var(--space-2);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-mute);
}

.bz-related--inline .bz-related__list {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-1);
}

.bz-related--inline .bz-related__link {
    min-height: 44px;
    padding: var(--space-2) 0;
    border: 0;
    background: transparent;
    color: var(--c-primary);
    font-weight: 600;
}

.bz-related--inline .bz-related__link:hover {
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-related--inline .bz-related__label {
    color: var(--c-primary);
}

.bz-related--inline .bz-related__icon {
    display: none;
}

/* Vetsi mezera, jakmile je na ni misto. Pocet sloupcu resi auto-fit vyse. */
@media (min-width: 1024px) {
    .bz-related__list {
        gap: var(--space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bz-related__link,
    .bz-related__arrow {
        transition: none;
    }

    .bz-related__link:hover .bz-related__arrow {
        transform: none;
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-related__link:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/score-bars.css ---- */
/* BonusZdarma — dilci hodnoceni (.bz-score-bars)
   Sest vodorovnych pruhu: bonus, vyplaty, hry, podpora, mobil, duvera.
   Sirku pruhu nastavuje sablona pres --bz-score-w, barvu urcuje trida podle pasma.
   Hodnota je vzdy i cislem X/5, takze barva neni jedinym nositelem informace.

   KORENOVA CHYBA, ktera se tu opravovala:
   Radek ma CTYRI potomky (popisek, pruh, cislo, slovni pasmo), ale mrizka mela
   od 768 px jen TRI sloupce (160px 1fr 68px) a zadny z potomku nemel explicitni
   umisteni. Automaticke umistovani proto hodilo slovni pasmo na DRUHY RADEK do
   prvniho sloupce — merene x=165, y=2517, sirka 160 px, radek vysoky 63 px misto
   26 px. Ted ma kazdy potomek explicitni grid-column i grid-row, takze pocet
   sloupcu a poradi v DOM uz nemuze rozhodit rozlozeni.
   Textovy sloupec je vsude minmax(0, 1fr), nikdy holé auto (pravidlo 2). */

.bz-score-bars {
    margin: var(--space-6) 0;
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
}

.bz-score-bars__title {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-heading);
}

.bz-score-bars__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
}

/* Mobil: popisek + slovni pasmo + cislo na prvnim radku, pruh pres celou sirku. */
.bz-score-bars__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
}

.bz-score-bars__label {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: var(--lh-normal);
    color: var(--c-text);
    overflow-wrap: break-word;
}

/* slovni popis pasma vedle cisla — informace i bez barvy */
.bz-score-bars__word {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text-mute);
    white-space: nowrap;
}

.bz-score-bars__value {
    grid-column: 3;
    grid-row: 1;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 800;
    color: var(--c-heading);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bz-score-bars__max {
    color: var(--c-text-mute);
    font-weight: 500;
}

.bz-score-bars__track {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--c-surface-2);
    overflow: hidden;
}

.bz-score-bars__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: var(--radius-full);
    background: var(--c-text-mute);
    transition: width var(--dur-slow) var(--ease);
}

/* animace se spusti, az blok vstoupi do viewportu (tridu prida IntersectionObserver) */
.bz-score-bars.is-visible .bz-score-bars__fill {
    width: var(--bz-score-w, 0%);
}

/* pasma hodnoceni */
.bz-score-bars__fill.is-low {
    background: var(--c-danger);
}

.bz-score-bars__fill.is-mid {
    background: var(--c-warning);
}

.bz-score-bars__fill.is-high {
    background: var(--c-success);
}

/* Souhrnne skore — v sablone stoji AZ ZA seznamem pruhu, proto ho oddeluje
   linka nahore, ne dole (drive tu byla border-bottom, ktera spolu s carou nad
   poznamkou delala dve linky pod sebou).
   Vsichni tri potomci jsou elementy, zadny volny text — flex je tu v poradku. */
.bz-score-bars__total {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--c-border);
}

.bz-score-bars__total-label {
    min-width: 0;
    margin-right: auto;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-text-mute);
}

.bz-score-bars__total-num {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: 800;
    line-height: 1;
    color: var(--c-heading);
    font-variant-numeric: tabular-nums;
}

.bz-score-bars__note {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px dashed var(--c-border);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--c-text-mute);
    max-width: 78ch;
}

.bz-score-bars__note a {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Od tabletu: popisek | pruh | slovni pasmo | cislo, vse na jednom radku. */
@media (min-width: 768px) {
    .bz-score-bars {
        padding: var(--space-5);
    }

    .bz-score-bars__row {
        grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) auto 62px;
        align-items: center;
        gap: var(--space-3) var(--space-4);
    }

    .bz-score-bars__label {
        grid-column: 1;
        grid-row: 1;
    }

    .bz-score-bars__track {
        grid-column: 2;
        grid-row: 1;
    }

    .bz-score-bars__word {
        grid-column: 3;
        grid-row: 1;
    }

    .bz-score-bars__value {
        grid-column: 4;
        grid-row: 1;
        text-align: right;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bz-score-bars__fill {
        transition: none;
        width: var(--bz-score-w, 0%);
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-score-bars__note a:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/seo-block.css ---- */
/* BonusZdarma — blok dlouheho redakcniho textu (.bz-seo)
   Typografie pro obsah generovany z HTML (nadpisy, odstavce, seznamy, tabulky, citace).
   Merena sirka radku kvuli citelnosti; nadpisy maji odsazeni pro kotvy z obsahu. */

.bz-seo {
    margin: var(--space-8) 0;
    color: var(--c-text-soft);
    overflow-wrap: break-word;
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
}

.bz-seo > *:first-child {
    margin-top: 0;
}

.bz-seo > *:last-child {
    margin-bottom: 0;
}

.bz-seo h2,
.bz-seo h3,
.bz-seo h4 {
    margin: var(--space-7) 0 var(--space-3);
    font-family: var(--font-display);
    line-height: var(--lh-tight);
    color: var(--c-heading);
    scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

.bz-seo h2 {
    font-size: var(--fs-2xl);
    font-weight: 700;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--c-border);
}

.bz-seo h3 {
    font-size: var(--fs-xl);
    font-weight: 700;
}

.bz-seo h4 {
    font-size: var(--fs-lg);
    font-weight: 600;
}

.bz-seo p {
    margin: 0 0 var(--space-4);
    max-width: 72ch;
}

.bz-seo a {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.bz-seo a:hover {
    color: var(--c-primary-hover);
    text-decoration-thickness: 2px;
}

.bz-seo strong {
    color: var(--c-text);
    font-weight: 600;
}

.bz-seo ul,
.bz-seo ol {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-5);
    max-width: 72ch;
}

.bz-seo li {
    margin-bottom: var(--space-2);
}

.bz-seo li::marker {
    color: var(--c-text-mute);
}

.bz-seo blockquote {
    margin: var(--space-5) 0;
    padding: var(--space-4) var(--space-5);
    border-left: 3px solid var(--c-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--c-bg-soft);
    color: var(--c-text);
    font-size: var(--fs-lg);
    line-height: var(--lh-normal);
}

.bz-seo blockquote p:last-child {
    margin-bottom: 0;
}

.bz-seo code {
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    background: var(--c-surface-2);
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--c-text);
}

/* Tabulka v redakcnim textu se roluje sama v sobe, aby na uzkem displeji
   nikdy nezpusobila vodorovny scroll cele stranky. */
.bz-seo table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 var(--space-5);
    overflow-x: auto;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    -webkit-overflow-scrolling: touch;
}

.bz-seo table > tbody,
.bz-seo table > thead {
    display: table;
    width: 100%;
    table-layout: auto;
}

.bz-seo th,
.bz-seo td {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--c-border);
    text-align: left;
    overflow-wrap: break-word;
}

.bz-seo th {
    background: var(--c-bg-soft);
    color: var(--c-heading);
    font-weight: 600;
}

.bz-seo figure {
    margin: var(--space-5) 0;
}

.bz-seo img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.bz-seo figcaption {
    margin-top: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--c-text-mute);
}

.bz-seo hr {
    margin: var(--space-7) 0;
    border: 0;
    border-top: 1px solid var(--c-border);
}

/* --- zvyraznena podoba (uzavreny blok s podkladem) --- */
.bz-seo--boxed {
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
}

.bz-seo--boxed h2:first-child {
    margin-top: 0;
}

/* --- uzka varianta pro staticke stranky --- */
.bz-seo--narrow {
    max-width: var(--container-narrow);
    margin-left: auto;
    margin-right: auto;
}

/* --- zvyraznena poznamka uvnitr textu --- */
.bz-seo__note {
    margin: var(--space-5) 0;
    padding: var(--space-4);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--c-bg-soft);
    font-size: var(--fs-sm);
}

.bz-seo__note p:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .bz-seo--boxed {
        padding: var(--space-6);
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-seo a:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/sticky-cta.css ---- */
/* BonusZdarma — prilepene CTA na mobilu (.bz-sticky-cta)
   Objevi se po 30 % scrollu, respektuje safe-area a jde zavrit (stav v sessionStorage).
   Na desktopu se nezobrazuje vubec, aby nekonkurovalo prilepenemu panelu recenze. */

.bz-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Hladina ze stupnice ve variables.css misto natvrdo psane 55.
       Porad plati --z-sticky-cta < --z-cookie < --z-modal, takze lista
       souhlasu i otevrena zasuvka navigace zustavaji nad CTA. */
    z-index: var(--z-sticky-cta);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
    box-shadow: var(--shadow-lg);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

.bz-sticky-cta.is-visible {
    transform: translateY(0);
    visibility: visible;
}

.bz-sticky-cta.is-dismissed {
    display: none;
}

.bz-sticky-cta__logo {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xs);
    background: var(--c-bg);
    overflow: hidden;
}

.bz-sticky-cta__logo img,
.bz-sticky-cta__logo svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.bz-sticky-cta__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bz-sticky-cta__name {
    font-size: var(--fs-xs);
    color: var(--c-text-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bz-sticky-cta__bonus {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bz-sticky-cta__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--c-cta);
    color: var(--c-on-cta);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease);
}

.bz-sticky-cta__btn:hover {
    background: var(--c-cta-hover);
}

.bz-sticky-cta__btn.is-nopartner {
    background: var(--c-surface-2);
    color: var(--c-text);
    border: 1px solid var(--c-border-strong);
    font-weight: 600;
}

/* Jediny zpusob, jak listu zavrit prstem — proto plnych 44x44 px (WCAG 2.5.8).
   Posun nahoru je vzdy polovina vysky, aby kolecko sedelo na hrane listy. */
.bz-sticky-cta__close {
    position: absolute;
    top: -22px;
    right: var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    background: var(--c-surface);
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
}

.bz-sticky-cta__close:hover {
    color: var(--c-text);
    background: var(--c-surface-2);
}

.bz-sticky-cta__close svg {
    width: 14px;
    height: 14px;
}

/* aby prilepene CTA neprekrylo konec stranky — sama lista uz safe-area
   zapocitava (viz padding-bottom vyse), rezerva ji proto musi pripocist take */
body.has-sticky-cta {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

@media (min-width: 1024px) {
    .bz-sticky-cta {
        display: none;
    }

    body.has-sticky-cta {
        padding-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bz-sticky-cta {
        transition: none;
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-sticky-cta__btn:focus-visible,
.bz-sticky-cta__close:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/toc.css ---- */
/* BonusZdarma — obsah stranky (.bz-toc)
   Mobil i tablet: rozbalovaci <details> blok NAD obsahem, ktery nic neprekryva.
   Desktop: uzky bocni sloupec (ne pres celou sirku obsahu) s neprusvitnym pozadim.

   Proc neni .bz-toc prilepena, kdyz stoji primo v textovem sloupci:
   position:sticky nechava prvek v toku, ale pri scrollu ho posouva dolu pres
   nasledujici obsah — presne to byla hlasena chyba "zebricek prosvita skrz TOC".
   Prilepeni se proto zapina jen tam, kde ma TOC vlastni bocni sloupec
   (.bz-money__side, .bz-review__side, [data-toc-column]) nebo kdyz si sablona
   vyslovne rekne o .bz-toc--sticky. Tam sticky nic neprekryva, protoze vedle
   nej tece jiny grid track. */

.bz-toc {
    margin: var(--space-6) 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    /* neprusvitne pozadi — pod TOC nesmi nikdy prosvitat obsah */
    background-color: var(--c-surface);
    box-shadow: var(--shadow-xs);
}

/* mobil: rozbalovaci blok pres <details> */
.bz-toc__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 52px;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-heading);
    border-radius: var(--radius);
}

.bz-toc[open] .bz-toc__summary {
    border-radius: var(--radius) var(--radius) 0 0;
}

.bz-toc__summary::-webkit-details-marker {
    display: none;
}

.bz-toc__summary::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--c-text-mute);
    border-bottom: 2px solid var(--c-text-mute);
    transform: rotate(45deg);
    transition: transform var(--dur-fast) var(--ease);
}

.bz-toc[open] .bz-toc__summary::after {
    transform: rotate(-135deg) translate(-3px, -3px);
}

.bz-toc__nav {
    padding: 0 var(--space-3) var(--space-4);
}

.bz-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: bz-toc;
    display: grid;
    gap: 2px;
}

/* Odkaz nese michany obsah (poradove cislo + text), takze zadny flex ani grid.
   Cislo visi vlevo pres ::before v absolutni pozici, text ma jen odsazeni. */
.bz-toc__link {
    position: relative;
    display: block;
    /* dotykovy cil min. 44 px */
    min-height: 44px;
    padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 24px);
    border-left: 2px solid var(--c-border);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.bz-toc__link::before {
    counter-increment: bz-toc;
    content: counter(bz-toc) ".";
    position: absolute;
    left: var(--space-3);
    top: var(--space-3);
    width: 20px;
    color: var(--c-text-mute);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    font-variant-numeric: tabular-nums;
}

.bz-toc__link:hover {
    color: var(--c-primary);
    border-left-color: var(--c-primary);
    background: var(--c-bg-soft);
}

.bz-toc__link.is-active {
    color: var(--c-primary);
    font-weight: 600;
    border-left-color: var(--c-primary);
    background: var(--c-primary-soft);
}

.bz-toc__link.is-active::before {
    color: var(--c-primary);
}

/* vnorena uroven */
.bz-toc__list .bz-toc__list {
    margin-left: var(--space-4);
}

/* --- desktop: uzky bocni sloupec --- */
@media (min-width: 1024px) {
    .bz-toc {
        /* uz ne pres celou sirku obsahu */
        width: 100%;
        max-width: 320px;
        margin: var(--space-6) 0;
    }

    /* Rozbaleni na desktopu resi sablona/JS. Summary tu ale musi zustat
       ovladatelne — pri vypnutem JS by jinak nesel obsah vubec otevrit. */
    .bz-toc__summary {
        border-bottom: 1px solid var(--c-border);
    }

    .bz-toc__summary::after {
        display: none;
    }

    /* na desktopu sablona renderuje <details open>, seznam je tedy stale videt */
    .bz-toc__nav {
        padding-top: var(--space-3);
    }

    /* Prilepeni jen v opravdovem bocnim sloupci. Tam nema co prekryt —
       hlavni obsah tece ve vedlejsim gridovem tracku. */
    .bz-money__side > .bz-toc,
    .bz-review__side > .bz-toc,
    .bz-article__side > .bz-toc,
    [data-toc-column] > .bz-toc,
    .bz-toc--sticky {
        position: sticky;
        top: calc(var(--header-h) + var(--space-4));
        z-index: var(--z-toc);
        max-width: none;
        max-height: calc(100vh - var(--header-h) - var(--space-8));
        margin: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: var(--c-surface);
        box-shadow: var(--shadow-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bz-toc__link,
    .bz-toc__summary::after {
        transition: none;
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-toc__link:focus-visible,
.bz-toc__summary:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* --- Obsah stranky jako prilepeny levy sloupec (jednotne na celem webu) ---
   Cast stranek vklada toc_render() primo do hlavniho toku, jine ho maji
   v <aside>. Aby to vypadalo vsude stejne, udelame z obalu dvousloupcovou
   mrizku: obsah jde doprava, TOC doleva a drzi se pri scrollu.

   grid-column: 2 na VSECH primych detech je zamerne — bez toho by kazdy
   volny textovy uzel spadl do uzkeho leveho sloupce a lamal se po slovech
   (stejna past, jako uz nekolikrat na tomhle webu).
   Pod 1200 px zustava puvodni chovani: rozbalovaci blok nad obsahem. */
@media (min-width: 1200px) {
    /* Jen jednosloupcove stranky. Recenze a staticke stranky uz maji vlastni
       pravy panel — levy rail by z toho udelal tri sloupce a text by spadl
       pod ~480 px, coz je pod hranici pohodlneho cteni. */
    .bz-money__inner:has(> .bz-toc),
    .bz-slots__inner:has(> .bz-toc) {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        column-gap: var(--space-7);
        align-items: start;
    }

    .bz-money__inner:has(> .bz-toc) > *,
    .bz-slots__inner:has(> .bz-toc) > * {
        grid-column: 2;
        min-width: 0;
    }

    .bz-money__inner > .bz-toc,
    .bz-slots__inner > .bz-toc {
        grid-column: 1;
        /* NE "1 / -1": -1 miri na posledni EXPLICITNI caru mrizky, a ta tu zadna
           neni (vsechny radky jsou implicitni). Prohlizec z toho udela jeden
           obri radek a v pravem sloupci vzniknou stovky pixelu prazdna.
           "span 9999" projde vsemi implicitnimi radky spravne. */
        grid-row: 1 / span 9999;
        position: sticky;
        top: calc(var(--header-h) + var(--space-4));
        width: auto;
        max-height: calc(100vh - var(--header-h) - var(--space-8));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* ---- assets/css/components/toplist.css ---- */
/* BonusZdarma — sestupny zebricek kasin (.bz-toplist)
   Nejdulezitejsi konverzni prvek na webu, proto musi byt hutny a skenovatelny:
   oko jde poradi -> logo -> nazev a hodnoceni -> bonus -> zelene CTA.
   Mobil = logo s nazvem, pod nim nabidka, fakta a CTA na celou sirku.
   Tablet a desktop = jeden nizky radek, fakta v jednom inline pruhu.
   Zlate zvyrazneni patri Volbe redakce (.is-editors), prvni misto (.is-first)
   ma jen vyraznejsi poradove cislo. Pravni disclaimer je jednou pod seznamem. */

.bz-toplist {
    margin: var(--space-7) 0;
}

.bz-toplist__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.bz-toplist__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-heading);
}

.bz-toplist__note {
    margin: 0;
    color: var(--c-text-mute);
    font-size: var(--fs-xs);
}

/* O poctu sloupcu radku rozhoduje @container, NE @media: zebricek stoji i
   uvnitr uzkeho dvousloupcoveho layoutu (/nejlepsi-online-casino ma vedle sebe
   bocni panel), kde je seznam pri okne 1024 px siroky jen 676 px. Podle sirky
   okna by tam nabehl petisloupcovy desktop rozvrh a nazev kasina by dostal
   85 px. Stejny vzorec pouziva components/comparison-table.css. */
.bz-toplist__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
    container-type: inline-size;
    container-name: bztoplist;
}

/* --- jeden radek zebricku (mobil) --- */
.bz-toplist__item {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
        "logo main"
        "offer offer"
        "facts facts"
        "actions actions";
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-3);
    padding: var(--space-5) var(--space-4) var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.bz-toplist__item:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--shadow-md);
}

/* --- poradi --- */
.bz-toplist__rank {
    grid-area: rank;
    position: absolute;
    top: -10px;
    left: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    color: var(--c-heading);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 800;
    line-height: 1;
}

/* --- logo --- */
.bz-toplist__logo {
    grid-area: logo;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 48px;
    padding: var(--space-1);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-bg);
    overflow: hidden;
}

.bz-toplist__logo img,
.bz-toplist__logo svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

/* --- nazev, hodnoceni a stitky --- */
.bz-toplist__main {
    grid-area: main;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.bz-toplist__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-heading);
    overflow-wrap: anywhere;
}

.bz-toplist__name a {
    color: inherit;
    text-decoration: none;
}

.bz-toplist__name a:hover {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-toplist__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    font-size: var(--fs-xs);
    color: var(--c-text-mute);
}

/* Pocet hodnoceni je az druhotny udaj — na uzkem displeji jen zvysuje radek. */
.bz-toplist__meta .bz-rating__count {
    display: none;
}

/* --- stitek Volba redakce: patri DOVNITR karty, ne na jeji hranu --- */
.bz-toplist__pick {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px var(--space-2);
    border: 1px solid var(--c-badge-pick-border);
    border-radius: var(--radius-full);
    background: var(--grad-pick);
    color: var(--c-badge-pick-text);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.bz-toplist__pick svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

/* --- stitek kasina bez partnerstvi --- */
.bz-toplist__nopartner {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--radius-full);
    color: var(--c-text-mute);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* --- nabidka: hlavni sdeleni radku --- */
.bz-toplist__offer {
    grid-area: offer;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--c-bg-soft);
}

.bz-toplist__bonus {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
    color: var(--c-heading);
}

.bz-toplist__bonus-sub {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 3px 0 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--c-text-soft);
}

/* --- fakta v jednom inline pruhu + promo kod --- */
.bz-toplist__facts {
    grid-area: facts;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
}

.bz-toplist__fact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-4);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--c-text-soft);
}

.bz-toplist__fact {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    white-space: nowrap;
}

.bz-toplist__fact svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--c-text-mute);
}

.bz-toplist__fact strong {
    color: var(--c-text);
    font-weight: 700;
}

/* Promo kod jede v pruhu faktu, proto musi byt uzky. Popisek "Promo kód" nesou
   uz sama data (kod je mono a verzalkami), pro odecitace obrazovky ho ale
   necháváme dostupny — jen ho vizualne schovame. */
.bz-toplist__promo {
    /* Kod se nesmi smrsknout a orizout — misto nej se zuzi seznam faktu. */
    flex: 0 0 auto;
    max-width: 100%;
}

.bz-toplist__promo .bz-promo__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.bz-toplist__promo .bz-promo__code {
    padding-left: var(--space-3);
}

.bz-toplist__promo .bz-promo__copy {
    padding: 0 var(--space-2);
}

/* --- akce --- */
.bz-toplist__actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.bz-toplist__cta {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--c-cta);
    color: var(--c-on-cta);
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.bz-toplist__cta:hover {
    background: var(--c-cta-hover);
}

.bz-toplist__cta:active {
    transform: translateY(1px);
}

.bz-toplist__review {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--space-2);
    color: var(--c-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.bz-toplist__review:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bz-toplist__note-mini {
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    color: var(--c-text-mute);
}

/* --- prvni misto: jen vyraznejsi poradove cislo --- */
.bz-toplist__item.is-first .bz-toplist__rank {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: var(--c-on-accent);
    box-shadow: var(--shadow-sm);
}

/* --- Volba redakce: zlaty ramecek a jemny zlaty nadech --- */
.bz-toplist__item.is-editors {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    background: color-mix(in srgb, var(--c-accent-soft) 60%, var(--c-surface));
    box-shadow: inset 0 0 0 1px var(--c-accent), var(--shadow-sm);
}

.bz-toplist__item.is-editors:hover {
    border-color: var(--c-accent);
    box-shadow: inset 0 0 0 1px var(--c-accent), var(--shadow-md);
}

.bz-toplist__item.is-editors .bz-toplist__offer {
    background: var(--c-surface);
}

/* V tmavem rezimu by plna sytost zlate delala blativou hnedou plochu —
   staci nadech, ramecek zustava zlaty. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bz-toplist__item.is-editors {
        background: var(--c-surface);
        background: color-mix(in srgb, var(--c-accent-soft) 26%, var(--c-surface));
    }
}

[data-theme="dark"] .bz-toplist__item.is-editors {
    background: var(--c-surface);
    background: color-mix(in srgb, var(--c-accent-soft) 26%, var(--c-surface));
}

/* --- kasino bez partnerstvi: misto CTA neutralni odkaz na recenzi --- */
.bz-toplist__item.is-nopartner .bz-toplist__cta {
    background: var(--c-surface-2);
    color: var(--c-text);
    border: 1px solid var(--c-border-strong);
    font-weight: 600;
}

.bz-toplist__item.is-nopartner .bz-toplist__cta:hover {
    background: var(--c-bg-soft);
    border-color: var(--c-text-mute);
}

/* --- pravni doveta: JEDNOU pod celym zebrickem --- */
.bz-toplist__terms {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--c-text-mute);
}

/* --- kompaktni varianta pro postranni panely --- */
.bz-toplist--compact .bz-toplist__item {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas:
        "logo main"
        "offer offer"
        "actions actions";
    padding: var(--space-4) var(--space-3);
    row-gap: var(--space-2);
}

.bz-toplist--compact .bz-toplist__logo {
    width: 44px;
    height: 44px;
}

.bz-toplist--compact .bz-toplist__facts {
    display: none;
}

.bz-toplist--compact .bz-toplist__bonus {
    font-size: var(--fs-base);
}

.bz-toplist--compact .bz-toplist__cta {
    min-height: 44px;
    font-size: var(--fs-sm);
}

/* --- patka sekce s opakovanym CTA --- */
.bz-toplist__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-bg-soft);
}

.bz-toplist__foot p {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
}

/* --- tablet: poradi a logo do sloupce vlevo, obsah do tri radku --- */
@container bztoplist (min-width: 640px) {
    .bz-toplist__item {
        grid-template-columns: 36px 80px minmax(0, 1fr) minmax(160px, 190px);
        grid-template-areas:
            "rank logo main   actions"
            "rank logo offer  actions"
            "rank logo facts  facts";
        column-gap: var(--space-4);
        row-gap: var(--space-2);
        padding: var(--space-4);
    }

    .bz-toplist--norank .bz-toplist__item {
        grid-template-columns: 80px minmax(0, 1fr) minmax(160px, 190px);
        grid-template-areas:
            "logo main   actions"
            "logo offer  actions"
            "logo facts  facts";
    }

    .bz-toplist__rank {
        position: static;
        width: 36px;
        height: 36px;
        font-size: var(--fs-base);
    }

    .bz-toplist__logo {
        width: 80px;
        height: 60px;
    }

    .bz-toplist__meta .bz-rating__count {
        display: inline;
    }

    /* Pruh faktu jde pres celou sirku pod nabidkou i akcemi. Zalamovani
       zustava povolene — pri uzkem obalu by nowrap protlacil seznam faktu pod
       promo kod a oba by se prekryly. */
    .bz-toplist__facts {
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-3);
    }

    .bz-toplist__fact-list {
        flex: 0 1 auto;
        gap: var(--space-1) var(--space-3);
    }

    .bz-toplist__actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-1);
    }

    .bz-toplist__cta {
        flex: 0 0 auto;
        width: 100%;
    }

    /* I na tabletu se odkaz mackaji prstem — cil zustava 44 px. */
    .bz-toplist__review {
        min-height: 44px;
    }

    .bz-toplist__note-mini {
        text-align: center;
    }

    /* Kompaktni varianta zustava jednosloupcova i na sirokem displeji. */
    .bz-toplist--compact .bz-toplist__item {
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-areas:
            "logo main"
            "offer offer"
            "actions actions";
        column-gap: var(--space-3);
        padding: var(--space-4) var(--space-3);
    }

    .bz-toplist--compact .bz-toplist__rank {
        position: absolute;
        width: 28px;
        height: 28px;
        font-size: var(--fs-sm);
    }

    .bz-toplist--compact .bz-toplist__logo {
        width: 44px;
        height: 44px;
    }

    .bz-toplist--compact .bz-toplist__actions {
        flex-direction: row;
    }

    .bz-toplist--compact .bz-toplist__cta {
        flex: 1 1 auto;
        width: auto;
    }

    .bz-toplist--compact .bz-toplist__review {
        min-height: 44px;
    }
}

/* --- desktop: nazev a nabidka vedle sebe, fakta v jednom pruhu pod nimi --- */
@container bztoplist (min-width: 820px) {
    .bz-toplist__item {
        grid-template-columns:
            40px 96px minmax(0, 0.85fr) minmax(0, 1.5fr) minmax(176px, 200px);
        grid-template-areas:
            "rank logo main  offer actions"
            "rank logo facts facts actions";
        column-gap: var(--space-4);
        row-gap: var(--space-3);
        /* Radky drzi jednotnou vysku, at je zebricek klidny a snadno se skenuje. */
        min-height: 150px;
        padding: var(--space-4) var(--space-5);
    }

    .bz-toplist--norank .bz-toplist__item {
        grid-template-columns:
            96px minmax(0, 0.85fr) minmax(0, 1.5fr) minmax(176px, 200px);
        grid-template-areas:
            "logo main  offer actions"
            "logo facts facts actions";
    }

    .bz-toplist__rank {
        width: 40px;
        height: 40px;
    }

    .bz-toplist__logo {
        width: 96px;
        height: 68px;
    }

    .bz-toplist__bonus {
        font-size: var(--fs-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bz-toplist__item,
    .bz-toplist__cta {
        transition: none;
    }

    .bz-toplist__cta:active {
        transform: none;
    }
}

/* viditelny focus pro ovladani klavesnici */
.bz-toplist__cta:focus-visible,
.bz-toplist__review:focus-visible,
.bz-toplist__logo:focus-visible,
.bz-toplist__name a:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- assets/css/components/trust-bar.css ---- */
/* BonusZdarma — pruh duvery pod hero (.bz-trust)
   Ctyri kratke signaly (licence MF CR, nezavislost, metodika, aktualizace).

   KORENOVA CHYBA, ktera se tu opravovala:
   1) Puvodne se seznam na mobilu roloval vodorovne (overflow-x: auto) a hodnota
      i popisek mely white-space: nowrap. Popisky jsou ale cele vety, takze karta
      narostla na 520-560 px a ctyri karty daly 2 200 px skryteho obsahu vpravo.
      Ted je z toho mrizka, ktera se zalamuje, a zadny vodorovny scroll nevznika.
   2) Karta je flex kontejner, takze v ni nesmi byt volny textovy uzel — ikona
      i text jsou vlastni elementy. Textovy blok ma min-width: 0 (pravidlo 3),
      aby se dlouha veta smela zalomit misto pretekani.
   3) Kontejner ma align-items: stretch a karta height: 100 %, takze vsechny
      karty v radku maji stejnou vysku bez ohledu na delku popisku. */

.bz-trust {
    margin: var(--space-5) 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    box-shadow: var(--shadow-xs);
}

.bz-trust__list {
    list-style: none;
    margin: 0;
    padding: var(--space-3);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-3);
}

.bz-trust__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
    height: 100%;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--c-bg-soft);
}

.bz-trust__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--c-primary-soft);
    color: var(--c-primary);
}

.bz-trust__icon svg {
    width: 17px;
    height: 17px;
}

/* Blok textu — zadny flex ani grid, jen dva blokove elementy pod sebou. */
.bz-trust__text {
    display: block;
    min-width: 0;
    width: 100%;
}

.bz-trust__value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-heading);
    white-space: normal;
    overflow-wrap: break-word;
}

.bz-trust__label {
    display: block;
    margin-top: 3px;
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--c-text-mute);
    white-space: normal;
    overflow-wrap: break-word;
}

/* varianta na tmavem hero pozadi */
.bz-trust--flat {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.bz-trust--flat .bz-trust__item {
    background: transparent;
    padding-left: 0;
}

/* Od 480 px se vejdou dve karty vedle sebe. */
@media (min-width: 480px) {
    .bz-trust__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Od 768 px uz je dost mista na ikonu vedle textu. */
@media (min-width: 768px) {
    .bz-trust__list {
        padding: var(--space-4);
    }

    .bz-trust__item {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-3);
    }
}

@media (min-width: 1024px) {
    .bz-trust__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}