/* ============================================================
   PAGE-TIPSPORT.CSS, značkové téma landingu /tipsport.

   Základ nese sdílený .cp-* systém (page-casino-promo.css), tenhle
   soubor přidává JEN barvu a povrch značky:

     • Firemní modrá Tipsportu (#009ee3 → #0071b9) jako akcent.
       Sedí do studené cyan/magenta palety webu, takže nejde
       o převlek stránky, ale o posun akcentu k modré.
     • Oranžová z fajfky v logu (#f5a200) drží PŘÍSNÝ rozpočet:
       spodní hrana CTA, konec gradientu v nadpisu, rozsvícené
       číslo v trust pruhu při hoveru. Nic víc.
     • Nálada: sportovní, rychlá, kurzová. Odtud šikmý světelný
       pruh v hero (jako pohyb) místo klidné radiální louže.

   KRITICKÉ: všechny tokeny sedí na kořenové třídě .cp-tipsport,
   NIKDY na :root. Soubor sdílí kaskádu s /dedek i /chance, takže
   každý selektor MUSÍ obsahovat .cp-tipsport.
   ============================================================ */

.cp-page.cp-tipsport {
    /* ── značka ── */
    --ts-blue:     #009ee3;
    --ts-blue-hi:  #5cd2ff;   /* světlejší varianta pro text na tmavém */
    --ts-blue-lo:  #0071b9;
    --ts-blue-rgb: 0, 158, 227;

    --ts-orange:     #f5a200;
    --ts-orange-hi:  #ffbe45;
    --ts-orange-rgb: 245, 162, 0;

    /* ── základ: chladná tmavá plocha webu, jen o odstín modřejší ── */
    --ts-base:    #080b11;
    --ts-card:    linear-gradient(180deg, #141b25 0%, #0d1119 100%);
    --ts-card-hi: linear-gradient(180deg, #1a2430 0%, #0f141d 100%);
    --ts-line:    rgba(var(--ts-blue-rgb), .30);
    --ts-line-2:  rgba(214, 234, 247, .08);

    /* vyzdvižení: světlá horní hrana + hloubkový stín */
    --ts-lift:
        inset 0 1px 0 rgba(190, 226, 247, .07),
        0 18px 38px -24px rgba(0, 0, 0, .95);
    --ts-lift-lg:
        inset 0 1px 0 rgba(190, 226, 247, .11),
        0 30px 64px -34px rgba(0, 0, 0, 1);

    /* geometrie: jedno rozhodnutí pro celou stránku */
    --ts-r:    var(--radius-card);
    --ts-r-lg: 20px;
    --ts-r-sm: 10px;

    /* Sdílený .cp-* systém jede na těchto proměnných. Akcent je modrá
       značky, sekundární akcent oranžová z fajfky. */
    --cp-accent:     var(--ts-blue);
    --cp-accent-rgb: var(--ts-blue-rgb);
    --cp-accent-2:     var(--ts-orange);
    --cp-accent-2-rgb: var(--ts-orange-rgb);

    /* Text: chladná bílá pro nadpisy, čitelná modrošedá pro tělo. */
    --text-primary:   #eef5fa;
    --text-secondary: #b6c4d1;
    --text-muted:     #8394a3;
}

/* ── Pozadí stránky ────────────────────────────────────────────
   Web má fixní studené vrstvy (body.cyber-body::before/::after,
   .cyber-grid) i WebGL Signal Field. Na /tipsport je ladíme do
   modré značky. Scoupováno přes :has(.cp-page.cp-tipsport). */
body:has(.cp-page.cp-tipsport) {
    background-color: #080b11;
    --sbg-base: #080b11;
    --sbg-c1:   #06263a;
    --sbg-c2:   #04182a;
    --sbg-c3:   #072f45;
    /* dekorativní symboly pod konverzním tlačítkem nemají co dělat */
    --sbg-symbols: 0;
}
/* POZOR na jednotky: tahle vrstva je `position: fixed; inset: 0`, takže
   procenta počítá z VÝŘEZU a velká radiální elipsa by na celostránkovém
   screenshotu zalila půl stránky. Proto jen lineární závoj, který vypadá
   poměrově stejně při každé výšce. */
body.cyber-body:has(.cp-page.cp-tipsport)::before {
    background:
        linear-gradient(180deg, rgba(0, 158, 227, .06) 0%, rgba(0, 132, 195, .028) 44%, rgba(0, 113, 185, .014) 100%),
        linear-gradient(180deg, #0a0e15 0%, #080b11 38%, #05070b 100%);
}
body.cyber-body:has(.cp-page.cp-tipsport)::after { background: none; filter: none; }
body:has(.cp-page.cp-tipsport) .cyber-grid { display: none; }
/* Retro kabinety z vrstvy floating-slots ležely pod textem hero i pod
   ramenem CTA. Na sázkové stránce nemají co dělat vůbec. */
body:has(.cp-tipsport) .floating-slot { display: none; }

/* ── HERO: modrá louže + šikmý světelný pruh (pohyb) ───────────
   Jediné místo stránky, kde smí být modrá takhle silná. Přímo pod
   ní sedí CTA, takže sem míří pohled. */
.cp-tipsport .cp-hero-bg {
    background:
        radial-gradient(84% 92% at 50% -8%, rgba(0, 158, 227, .20), transparent 68%),
        radial-gradient(50% 56% at 82% 22%, rgba(0, 113, 185, .14), transparent 70%),
        linear-gradient(104deg, transparent 38%, rgba(0, 158, 227, .07) 48%, transparent 58%),
        linear-gradient(104deg, transparent 56%, rgba(245, 162, 0, .05) 63%, transparent 70%);
}
/* Šev pod hero: modrá vlasová linka s oranžovým doskokem vpravo. */
.cp-tipsport .cp-hero::after {
    content: ""; position: absolute; z-index: 0;
    left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 158, 227, .40) 22%, rgba(0, 158, 227, .40) 66%, rgba(245, 162, 0, .38) 86%, transparent);
}
.cp-tipsport .cp-hero h1 { color: var(--text-primary); }
/* Akcentní část nadpisu je ČISTĚ MODRÁ.
   POZOR: dřív tu byl přechod modrá → oranžová z fajfky. Jenže mezi #009ee3
   a #f5a200 leží olivová, takže se uprostřed nadpisu objevil špinavý
   žlutozelený pruh (na velkém H1 to bylo přes celé slovo). Oranžová má na
   stránce jiná místa, kde nemusí nic prolínat: spodní hrana CTA, fajfky
   v kupónu, tečka odznaku a rozsvícené číslo v trust pruhu. */
.cp-tipsport .cp-hero h1 .cp-grad,
.cp-tipsport .cp-cta-band h2 .cp-grad {
    background: linear-gradient(100deg, var(--ts-blue-hi) 0%, var(--ts-blue) 55%, #0086cc 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cp-tipsport .cp-hero-sub { font-size: clamp(1rem, 1.45vw, 1.14rem); color: var(--text-secondary); }
.cp-tipsport .cp-hero-act { max-width: 460px; }

/* Odznaky: tiché tmavé štítky, modrý text. */
.cp-tipsport .cp-badge {
    color: #cfe6f4;
    background: rgba(0, 158, 227, .08);
    border-color: rgba(0, 158, 227, .26);
    box-shadow: inset 0 1px 0 rgba(190, 226, 247, .08);
}
.cp-tipsport .cp-badge.cp-badge-live {
    color: #ffd9a0;
    background: rgba(245, 162, 0, .10);
    border-color: rgba(245, 162, 0, .32);
}
.cp-tipsport .cp-badge.cp-badge-live .cp-live-dot { background: var(--ts-orange); }

/* ── Plotny: tmavý povrch ZŘETELNĚ nad pozadím ────────────────── */
.cp-tipsport .cp-feature,
.cp-tipsport .cp-step,
.cp-tipsport .cp-facts,
.cp-tipsport .cp-faq details,
.cp-tipsport .cp-disclaimer {
    border-radius: var(--ts-r);
    background: var(--ts-card);
    border: 1px solid var(--ts-line-2);
    box-shadow: var(--ts-lift);
}

/* ── Vlasový šev mezi sekcemi ──────────────────────────────────
   .cp-rule je prázdný div v .rsp-container, obsah mu dává až tohle
   pravidlo (sdílený soubor ho kreslí jen pro /dedek). */
.cp-tipsport .cp-rule { margin: 0 auto clamp(34px, 4vw, 56px); }
.cp-tipsport .cp-rule::before {
    content: ""; display: block; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(190, 226, 247, .14) 16%, rgba(190, 226, 247, .14) 84%, transparent);
}

/* ── Hero kupón ────────────────────────────────────────────────
   Velká plotna s modrým světlem shora a oranžovou hranou dole,
   ať kupón čte jako fyzický lístek. */
.cp-tipsport .cp-hero-card {
    padding: 34px 30px 30px;
    border-radius: var(--ts-r-lg);
    border: 1px solid rgba(0, 158, 227, .22);
    background:
        radial-gradient(120% 62% at 50% 0%, rgba(0, 158, 227, .16), transparent 64%),
        var(--ts-card-hi);
    box-shadow: var(--ts-lift-lg), 0 0 90px -44px rgba(0, 158, 227, .85);
}
.cp-tipsport .cp-hero-card::after {
    content: ""; position: absolute; z-index: 2;
    left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--ts-blue-lo), var(--ts-blue) 55%, var(--ts-orange));
    opacity: .9;
}
/* Eyebrow kupónu = modrý chip. */
.cp-tipsport .cp-hc-eyebrow {
    display: block; width: fit-content; margin: 0 auto 10px;
    padding: 6px 15px; border-radius: 999px;
    border: 1px solid rgba(0, 158, 227, .40);
    background: rgba(0, 158, 227, .12);
    color: #7fdcff;
    font-size: .74rem; letter-spacing: .12em;
}
.cp-tipsport .cp-hc-amount { color: var(--text-primary); text-shadow: 0 0 40px rgba(0, 158, 227, .30); }
.cp-tipsport .cp-hc-note { font-size: .9rem; color: var(--text-secondary); }
.cp-tipsport .cp-hc-list li { font-size: .95rem; line-height: 1.5; }
/* Odškrtnutí je fajfka ze značky: tichý knoflík, oranžový háček. */
.cp-tipsport .cp-hc-tick {
    background: rgba(245, 162, 0, .12);
    border: 1px solid rgba(245, 162, 0, .28);
    color: var(--ts-orange-hi);
    box-shadow: none;
}

/* ── CTA: nejsvětlejší prvek stránky ───────────────────────────
   Modrá pilulka se spodní oranžovou hranou (fajfka z loga). */
.cp-tipsport .cp-cta {
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(180deg, #2ab8f5 0%, #009ee3 48%, #0071b9 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .38),
        inset 0 -3px 0 rgba(245, 162, 0, .92),
        0 0 0 1px rgba(0, 158, 227, .35),
        0 14px 34px -10px rgba(0, 158, 227, .55);
}
.cp-tipsport .cp-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 -3px 0 rgba(255, 190, 69, 1),
        0 0 0 1px rgba(0, 158, 227, .55),
        0 20px 44px -12px rgba(0, 158, 227, .70);
}
.cp-tipsport .cp-cta:focus-visible { outline: 2px solid var(--ts-blue-hi); outline-offset: 3px; }
.cp-tipsport .cp-cta-reassure { font-size: .82rem; color: var(--text-muted); }

/* Druhé tlačítko v hero je sekundární nabídka (sázky), ne druhé
   hlavní CTA. Obrys místo výplně, ať hierarchie zůstane čitelná. */
.cp-tipsport .cp-hero-act .cp-cta + .cp-cta {
    margin-top: 12px;
    color: var(--ts-blue-hi);
    background: rgba(0, 158, 227, .07);
    box-shadow:
        inset 0 0 0 1px rgba(0, 158, 227, .45),
        inset 0 -2px 0 rgba(245, 162, 0, .45);
}
.cp-tipsport .cp-hero-act .cp-cta + .cp-cta:hover {
    color: #ffffff;
    background: rgba(0, 158, 227, .16);
    box-shadow:
        inset 0 0 0 1px rgba(0, 158, 227, .75),
        inset 0 -2px 0 rgba(255, 190, 69, .8),
        0 14px 30px -14px rgba(0, 158, 227, .6);
}

/* ── Trust pruh ────────────────────────────────────────────────
   Sdílená verze (vlasové lemy + oddělovače) jede na --cp-accent,
   takže je modrá sama od sebe. Doladíme jen ikonu a hover. */
.cp-tipsport .cp-trust-ico {
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(0, 158, 227, .16), rgba(0, 158, 227, .04));
    border: 1px solid rgba(0, 158, 227, .26);
    box-shadow: inset 0 1px 0 rgba(190, 226, 247, .12);
}
/* POZOR: `color` by nestačilo, sdílené `.cp-trust-item span` míří na tentýž
   <span class="cp-trust-ico">, takže currentColor spadne na barvu popisku.
   Nastavujeme rovnou `stroke`. */
.cp-tipsport .cp-trust-ico svg { stroke: var(--ts-blue-hi); }
.cp-tipsport .cp-trust-item strong { color: var(--text-primary); }
.cp-tipsport .cp-trust-body span { font-size: .82rem; color: var(--text-secondary); }
.cp-tipsport .cp-trust-item:hover strong { color: var(--ts-orange-hi); }
.cp-tipsport .cp-trust-item:hover .cp-trust-ico {
    border-color: rgba(0, 158, 227, .5);
    box-shadow: inset 0 1px 0 rgba(190, 226, 247, .18), 0 8px 20px -8px rgba(0, 0, 0, .9);
}

/* ── Záhlaví sekcí ─────────────────────────────────────────────
   Štítek tlumená modrošedá (ne svítivá), nadpis bílý v plné síle. */
.cp-tipsport .cp-section-head .cp-kicker {
    font-size: .78rem; letter-spacing: .18em;
    color: #8fb4c9;
}
.cp-tipsport .cp-section-head h2 { color: var(--text-primary); }
.cp-tipsport .cp-section-head p { font-size: 1.05rem; color: var(--text-secondary); }

/* Feature karty */
.cp-tipsport .cp-feature:hover {
    border-color: var(--ts-line);
    box-shadow:
        inset 0 1px 0 rgba(190, 226, 247, .12),
        0 26px 48px -26px rgba(0, 0, 0, 1),
        0 0 44px -26px rgba(0, 158, 227, .6);
}
.cp-tipsport .cp-feature-ico {
    border-radius: 14px;
    color: var(--ts-blue-hi);
    background: linear-gradient(180deg, rgba(0, 158, 227, .16), rgba(0, 158, 227, .04));
    border: 1px solid rgba(0, 158, 227, .26);
    box-shadow: inset 0 1px 0 rgba(190, 226, 247, .12);
}
.cp-tipsport .cp-feature h3 { font-size: 1.14rem; color: var(--text-primary); }
.cp-tipsport .cp-feature p { font-size: .97rem; line-height: 1.65; color: var(--text-secondary); }

/* Kroky: číslo v tmavé medaili s modrým prstencem, ne modrý knoflík */
.cp-tipsport .cp-step::before {
    border-radius: 12px;
    color: var(--ts-blue-hi);
    background: linear-gradient(180deg, #1d2734, #101720);
    border: 1px solid rgba(0, 158, 227, .36);
    box-shadow:
        0 0 0 5px var(--ts-base),
        inset 0 1px 0 rgba(190, 226, 247, .14);
}
.cp-tipsport .cp-step h4 { font-size: 1.04rem; color: var(--text-primary); }
.cp-tipsport .cp-step p { font-size: .95rem; line-height: 1.6; color: var(--text-secondary); }

/* ── Nabídkové bloky (Vegas / sázky) ──────────────────────────
   Druhé místo, kde se modrá rozlévá naplno. Oranžová jen jako
   spodní hrana, stejný podpis jako na hero kupónu. */
.cp-tipsport .cp-cta-band {
    padding: 52px 32px 44px;
    border-radius: var(--ts-r-lg);
    border: 1px solid rgba(0, 158, 227, .20);
    background:
        radial-gradient(72% 100% at 50% 0%, rgba(0, 158, 227, .18), transparent 62%),
        var(--ts-card-hi);
    box-shadow: var(--ts-lift-lg), 0 0 100px -48px rgba(0, 158, 227, .9);
}
.cp-tipsport .cp-cta-band::after {
    content: ""; position: absolute;
    left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--ts-blue-lo), var(--ts-blue) 55%, var(--ts-orange));
    opacity: .85;
}
.cp-tipsport .cp-cta-band h2 { color: var(--text-primary); }
.cp-tipsport .cp-cta-band p { font-size: 1.05rem; color: var(--text-secondary); }

/* Rychlá fakta */
.cp-tipsport .cp-facts { grid-template-columns: 1fr 1fr; padding: 12px 14px; }
.cp-tipsport .cp-fact {
    border-radius: var(--ts-r-sm);
    border-bottom: 1px solid rgba(190, 226, 247, .06);
    padding: 15px 16px;
}
.cp-tipsport .cp-fact:nth-child(4n+3),
.cp-tipsport .cp-fact:nth-child(4n+4) { background: rgba(190, 226, 247, .028); }
.cp-tipsport .cp-fact:hover { background: rgba(0, 158, 227, .08); }
.cp-tipsport .cp-fact:nth-last-child(-n+2) { border-bottom: none; }
.cp-tipsport .cp-fact .cp-fact-label { font-size: .96rem; color: var(--text-secondary); }
.cp-tipsport .cp-fact .cp-fact-val { font-size: .98rem; color: var(--text-primary); }

/* FAQ */
.cp-tipsport .cp-faq { grid-template-columns: 1fr 1fr; gap: 14px; }
.cp-tipsport .cp-faq details { margin-bottom: 0; }
.cp-tipsport .cp-faq details[open] {
    border-color: rgba(0, 158, 227, .32);
    box-shadow: var(--ts-lift), 0 0 40px -26px rgba(0, 158, 227, .7);
}
.cp-tipsport .cp-faq summary { font-size: 1rem; color: var(--text-primary); padding: 17px 20px; }
.cp-tipsport .cp-faq summary::after {
    border-right-color: rgba(0, 158, 227, .75);
    border-bottom-color: rgba(0, 158, 227, .75);
}
.cp-tipsport .cp-faq details p { font-size: .97rem; line-height: 1.7; color: var(--text-secondary); }

/* Disclaimer */
.cp-tipsport .cp-disclaimer { font-size: .9rem; color: var(--text-secondary); }
.cp-tipsport .cp-disclaimer strong { color: var(--text-primary); }

/* ── Odkaz v běžném textu ──────────────────────────────────────
   Guard :not() je POVINNÝ: bez něj pravidlo přebije .cp-cta a nalije
   podtržený barevný text na modrý gradient (tj. nečitelné CTA). */
.cp-tipsport a:not([class]):not([class*="btn"]):not([class*="cta"]):not([class*="card"]) {
    color: var(--ts-blue-hi);
    text-decoration: underline;
    text-decoration-color: rgba(92, 210, 255, .45);
    text-underline-offset: 3px;
}
.cp-tipsport a:not([class]):not([class*="btn"]):not([class*="cta"]):not([class*="card"]):hover {
    color: var(--text-primary);
}

/* ── Sticky mobilní lišta ──────────────────────────────────────
   POZOR na kolizi: globální Tokyo lišta (.rtb, includes/footer.php →
   components/tokyo-sticky.php) sedí taky na bottom:0 a má z-index 95,
   takže by vlastní lištu partnerské stránky překryla a na /tipsport by
   se místo Tipsportu tlačilo Tokyo. Na téhle stránce má přednost
   partner, jehož je stránka. Stejný princip jako u .floating-slot
   na /dedek: skrýt cizí dekoraci, ne přepisovat cizí soubor. */
body:has(.cp-tipsport) .rtb { display: none; }

.cp-tipsport .cp-sticky {
    z-index: 96;
    background: rgba(8, 11, 17, .94);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(0, 158, 227, .28);
    box-shadow: 0 -14px 30px -18px rgba(0, 0, 0, 1);
}
.cp-tipsport .cp-sticky-info strong { color: var(--text-primary); }
.cp-tipsport .cp-sticky-info span { color: var(--ts-blue-hi); }

/* Výběr textu a focus prstenec (globální :focus-visible jede na azurové
   --color-primary, tady chceme modrou značky). */
.cp-tipsport ::selection { background: rgba(0, 158, 227, .85); color: #04121c; }
.cp-tipsport a:focus-visible,
.cp-tipsport summary:focus-visible,
.cp-tipsport button:focus-visible { outline: 2px solid var(--ts-blue-hi); outline-offset: 3px; }

/* ── Responsive (musí být za základními pravidly téhle stránky) ── */
@media (max-width: 920px) {
    .cp-tipsport .cp-facts,
    .cp-tipsport .cp-faq { grid-template-columns: 1fr; }
    /* jeden sloupec → zebra po řádcích, ne po dvojicích */
    .cp-tipsport .cp-fact:nth-child(4n+3),
    .cp-tipsport .cp-fact:nth-child(4n+4) { background: none; }
    .cp-tipsport .cp-fact:nth-child(even) { background: rgba(190, 226, 247, .028); }
    .cp-tipsport .cp-fact:nth-last-child(-n+2) { border-bottom: 1px solid rgba(190, 226, 247, .06); }
    .cp-tipsport .cp-fact:last-child { border-bottom: none; }
}
@media (max-width: 600px) {
    .cp-tipsport .cp-hero-card { padding: 30px 20px 24px; }
    .cp-tipsport .cp-cta-band { padding: 40px 20px 34px; }
    .cp-tipsport .cp-rule { margin-bottom: 28px; }
}

/* ── Reduced motion / perf ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cp-tipsport .cp-cta,
    .cp-tipsport .cp-feature,
    .cp-tipsport .cp-trust-ico { transition: none; }
    .cp-tipsport .cp-cta:hover,
    .cp-tipsport .cp-feature:hover { transform: none; }
}