/* ═══════════════════════════════════════════════════════════════════════════
   TLAČÍTKA
   ───────────────────────────────────────────────────────────────────────────
   POZOR NA POŘADÍ KASKÁDY: tenhle soubor se v header.php načítá na ř. 213,
   kdežto core/skin.css až na ř. 298 — a skin.css definuje .btn, .btn-primary,
   .btn-secondary, .btn-sm i stav [disabled] znovu. Zdrojem pravdy pro tvar,
   velikost a barvu tlačítka je tedy SKIN, ne tenhle soubor. Co tu zbylo:

   1) Doplňky, které skin.css nemá — posun šipky při najetí a obrysová
      varianta .btn-ghost. Ty se nikde nepřebíjejí, takže platí.
   2) Základ pro případ, že by se skin.css nenačetl. Drží tytéž tokeny, aby
      se ty dvě vrstvy nemohly rozejít.

   Kdyby soubor někdo rušil, začne to tady: většina jeho deklarací je dnes
   jen ozvěna skinu.

   Primární je plná zelená s TMAVÝM textem (--go-ink). Bílá na zelené má
   kontrast 1,6:1 a nepřečte se. Sekundární je obrys — vedle primárního nikdy
   nestojí druhé barevné tlačítko, jen textový odkaz.
   ═══════════════════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: .005em;
    line-height: 1.1;
    border: 1px solid transparent;
    border-radius: var(--r-btn);
    background: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

/* Primární — jediná plná zelená v bloku, text je tmavý, ne bílý. */
.btn-primary {
    background: var(--go);
    border-color: var(--go);
    color: var(--go-ink);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--go-hi);
    border-color: var(--go-hi);
    color: var(--go-ink);
}

/* Sekundární a obrysová — plocha o stupeň výš a silnější linka. */
.btn-secondary,
.btn-outline,
.btn-ghost {
    background: var(--raise);
    border-color: var(--rail-2);
    color: var(--paper);
}
.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-outline:hover,
.btn-outline:focus-visible,
.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: var(--panel-hi);
    border-color: var(--rail-2);
    color: var(--paper);
}

/* Velikost — jen menší varianta, větší se nikde nepoužívá. */
.btn-sm {
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
}

/* Šipka se při najetí posune o 3 px doprava. Je to jediný pohyb, který si
   tlačítko dovolí, a je věcný: ukazuje směr, kam kliknutí vede. Skin.css
   tohle pravidlo nemá, takže tady doopravdy něco dělá. */
.btn svg,
.jl-btn svg { transition: transform var(--t-fast); }
.btn:hover svg,
.jl-btn:hover svg { transform: translateX(3px); }

/* Stojí jen znak, po kterém ještě NĚCO NÁSLEDUJE — tedy ikona vlevo od
   popisku. Poslední znak v tlačítku je šipka a ta se posunout má.

   PROČ NE :first-child, jak tu stálo dřív: strukturální selektory počítají
   výhradně ELEMENTY, textový uzel se nepočítá. V zápisu
   `<a class="btn">Získat bonus <svg/></a>` — což je hlavní CTA webu, .nb-go
   z includes/components/bonus-card.php — je to jediné svg zároveň
   :first-child i :last-child, takže výjimka posun vypnula přesně tam, kde
   měl fungovat: computed transform zůstával v hoveru „none".

   MARKUPOVÁ SMLOUVA: aby ikona vlevo zůstala stát, musí za ní následovat
   ELEMENT, ne holý text — `<svg/><span>Popisek</span>`. Ikonu od šipky
   jinak CSS nerozezná, ten údaj v DOM není. Spinner (.btn-spinner) je
   <span>, ne svg, takže se ho posun netýká a vlastní výjimku nepotřebuje. */
.btn:hover svg:not(:last-child),
.jl-btn:hover svg:not(:last-child) { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .btn svg, .jl-btn svg { transition: none; }
    .btn:hover svg, .jl-btn:hover svg { transform: none; }
}