/*
  Spojka v mobilu — styly webu (převzato z webu Firmy v mobilu, paleta podle ikony Spojky).
  Barvy a rozměry jsou výhradně v proměnných v :root; tmavý režim (html[data-tema="tmavy"]) je jen přepíše.
  Stránky skládají obsah z tříd tohoto souboru, inline styly se nepoužívají.
*/

/* Písma: vlastní hosting (žádné požadavky na cizí servery). Hanken a Schibsted jsou variabilní. */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/hanken-grotesk-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: 'Hanken Grotesk'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/hanken-grotesk-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: 'Schibsted Grotesk'; font-style: normal; font-weight: 700 800; font-display: swap; src: url('../fonts/schibsted-grotesk-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: 'Schibsted Grotesk'; font-style: normal; font-weight: 700 800; font-display: swap; src: url('../fonts/schibsted-grotesk-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: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-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: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-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; }

:root {
  color-scheme: light;

  --pismo-text: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pismo-nadpis: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pismo-kod: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --barva-pozadi: #F4F7F7;
  --barva-plocha: #FFFFFF;
  --barva-text: #0F2628;
  --barva-text-tlumeny: #3C5558;
  --barva-text-slaby: #4A6366;
  --barva-akcent: #006D77;
  --barva-akcent-hover: #00525A;
  --barva-tonovana: #DCEFF0;
  --barva-okraj: #DCE7E8;
  --barva-okraj-silny: #C3D5D7;
  --barva-tlacitko: #006D77;
  --barva-tlacitko-hover: #005A63;
  --barva-tlacitko-text: #FFFFFF;
  --barva-tlacitko-stin: rgba(0, 109, 119, 0.28);
  --barva-pas: #006D77;
  --barva-pas-text: #FFFFFF;
  --barva-pas-tlumeny: #D2EEF0;
  --barva-paticka: #0F2628;
  --barva-paticka-text: #C3D6D5;
  --barva-paticka-slaby: #9BB3B2;
  --barva-paticka-cara: #24403F;
  --barva-stin: rgba(16, 41, 42, 0.30);
  --barva-stin-slaby: rgba(16, 41, 42, 0.06);
  --barva-ok: #1F7A3A;
  --barva-ok-pozadi: #DCF1E2;
  --barva-chyba: #B42318;
  --barva-chyba-pozadi: #FBE3E0;
  --barva-varovani: #8A5A00;
  --barva-varovani-pozadi: #FCEFD2;

  --sirka-stranka: 1200px;
  --sirka-text: 900px;
  --okraj-stranky: 24px;
  --zaobleni: 16px;
  --zaobleni-velke: 20px;
}

:root[data-tema="tmavy"] {
  color-scheme: dark;

  --barva-pozadi: #0D1A1B;
  --barva-plocha: #132425;
  --barva-text: #E4EFEE;
  --barva-text-tlumeny: #A9BFBE;
  --barva-text-slaby: #93ABAA;
  --barva-akcent: #7FCED6;
  --barva-akcent-hover: #B0E3E8;
  --barva-tonovana: #19363A;
  --barva-okraj: #24393A;
  --barva-okraj-silny: #35514F;
  --barva-tlacitko-stin: rgba(0, 0, 0, 0.35);
  --barva-pas: #0B4A51;
  --barva-pas-tlumeny: #BCE1E5;
  --barva-paticka: #081213;
  --barva-paticka-text: #B7CBCA;
  --barva-paticka-slaby: #8DA5A4;
  --barva-paticka-cara: #1C2F30;
  --barva-stin: rgba(0, 0, 0, 0.55);
  --barva-stin-slaby: rgba(0, 0, 0, 0.30);
  --barva-ok: #7FD69A;
  --barva-ok-pozadi: #173A25;
  --barva-chyba: #F59A90;
  --barva-chyba-pozadi: #3D1C19;
  --barva-varovani: #F2C66B;
  --barva-varovani-pozadi: #3A2D10;
}

/* Základ */

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

html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--barva-pozadi);
  color: var(--barva-text);
  font-family: var(--pismo-text);
  font-size: 17px;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--barva-akcent); text-underline-offset: 3px; }
a:hover { color: var(--barva-akcent-hover); }

:focus-visible { outline: 3px solid var(--barva-akcent); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--pismo-nadpis); margin: 0; }
p { margin: 0; }

h1 { font-weight: 800; font-size: clamp(40px, 5.5vw, 64px); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-weight: 700; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-weight: 700; font-size: 21px; line-height: 1.25; }

.preskocit {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  background: var(--barva-tlacitko); color: var(--barva-tlacitko-text);
  padding: 10px 16px; border-radius: 10px;
}
.preskocit:focus { top: 16px; }

/* Rozvržení */

.obal { max-width: var(--sirka-stranka); margin: 0 auto; padding-inline: var(--okraj-stranky); }
.obal--text { max-width: calc(var(--sirka-text) + 2 * var(--okraj-stranky)); }

.sekce { padding-block: 88px; }
.sekce--plocha { background: var(--barva-plocha); border-block: 1px solid var(--barva-okraj); }
.sekce--uvod { padding-block: 40px 80px; }

.sekce__hlavicka { display: flex; flex-direction: column; gap: 14px; margin-bottom: 44px; }
/* Úvodní text se omezuje jen na široké stránce (1200 px), aby řádky nebyly příliš dlouhé.
   V užším textovém obalu (900 px) se neomezuje a láme se až na kraji. */
.obal:not(.obal--text) > .sekce__hlavicka .perex { max-width: 720px; }

.nadtitulek { font-weight: 600; font-size: 15px; color: var(--barva-akcent); }
.perex { font-size: 20px; color: var(--barva-text-tlumeny); }
.drobne { font-size: 15px; color: var(--barva-text-slaby); }

.mrizka { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.mrizka--uzka { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.mrizka--karty { gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

/* Dvojice text + snímky; varianta --obracene dá snímky doleva. */
.dvojice {
  display: grid; gap: 56px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.dvojice__text { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.dvojice__obrazek { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.dvojice__snimky { display: flex; justify-content: center; gap: 20px; width: 100%; }
.dvojice__snimky .snimek-s-volbou { width: min(260px, 48%); }

/* Snímky okna aplikace pro počítač (Windows, Mac) pod kartami funkce. */
.snimky-pocitace { display: grid; gap: 40px 32px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.snimek-pocitace { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.snimek-pocitace__zvetsit { display: block; max-width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.snimek-pocitace figcaption { font-size: 15px; color: var(--barva-text-slaby); text-align: center; }
/* Vidět je snímek systému návštěvníka (html[data-system] z predvolby.js); volba pod snímkem ji přebije. */
.snimek-pocitace__obrazek { display: none; max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 14px 40px rgba(0, 40, 44, 0.18); }
[data-system="windows"] .snimek-pocitace__obrazek[data-system="windows"],
[data-system="mac"] .snimek-pocitace__obrazek[data-system="mac"] { display: block; }
[data-volba-system] .snimek-pocitace__obrazek[data-system] { display: none; }
[data-volba-system="windows"] .snimek-pocitace__obrazek[data-system="windows"],
[data-volba-system="mac"] .snimek-pocitace__obrazek[data-system="mac"] { display: block; }
@media (min-width: 900px) {
  .dvojice--obracene .dvojice__obrazek { order: -1; }
}

/* Hlavička webu */

.hlavicka { border-bottom: 1px solid var(--barva-okraj); background: var(--barva-pozadi); }
.hlavicka__obal { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-block: 16px; }
.hlavicka__akce { order: 2; display: flex; gap: 8px; }

.znacka {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--pismo-nadpis); font-weight: 700; font-size: 21px;
  color: var(--barva-text); text-decoration: none; white-space: nowrap;
}
.znacka:hover { color: var(--barva-text); }
.znacka img { border-radius: 10px; }

.navigace { order: 1; margin-left: auto; display: flex; align-items: center; gap: 28px; font-weight: 600; font-size: 16px; }
.navigace a:not(.tlacitko) { color: var(--barva-text); text-decoration: none; }
.navigace a:not(.tlacitko):hover, .navigace a[aria-current="page"] { color: var(--barva-akcent); }

.ikonove-tlacitko {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--barva-okraj-silny); border-radius: 12px;
  background: var(--barva-plocha); color: var(--barva-text); cursor: pointer;
}
.ikonove-tlacitko:hover { border-color: var(--barva-akcent); color: var(--barva-akcent); }
.ikonove-tlacitko svg { width: 22px; height: 22px; }

.navigace__menu { display: none; }

/* Přepínač režimu: viditelný jen s JavaScriptem, ikona podle aktuální volby. */
.prepinac-tematu { display: none; }
.js .prepinac-tematu { display: flex; }
.prepinac-tematu__ikona { display: none; }
[data-volba-tematu="system"] .prepinac-tematu__ikona--system,
[data-volba-tematu="svetly"] .prepinac-tematu__ikona--svetly,
[data-volba-tematu="tmavy"] .prepinac-tematu__ikona--tmavy { display: flex; }

/* Menu se sbaluje jen s JavaScriptem; bez něj zůstane navigace rozbalená. */
@media (max-width: 760px) {
  .hlavicka__akce { margin-left: auto; order: 1; }
  .js .navigace__menu { display: flex; }
  .navigace { order: 2; margin-left: 0; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding-bottom: 8px; }
  .js .navigace { display: none; }
  .js .navigace.je-otevrena { display: flex; }
  .navigace a:not(.tlacitko) { padding: 12px 4px; border-top: 1px solid var(--barva-okraj); }
  .navigace .tlacitko { margin-top: 8px; }
}

/* Tlačítka (vzor Pokladna v mobilu): plné pro hlavní akci, obrysové pro ostatní. */

.tlacitko {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: 12px;
  border: 1.5px solid transparent;
  background: var(--barva-tlacitko); color: var(--barva-tlacitko-text);
  box-shadow: 0 6px 18px var(--barva-tlacitko-stin);
  font: 600 16px var(--pismo-text); text-decoration: none; cursor: pointer;
}
.tlacitko:hover { background: var(--barva-tlacitko-hover); color: var(--barva-tlacitko-text); }

.tlacitko--obrys {
  background: var(--barva-plocha); color: var(--barva-text);
  border-color: var(--barva-okraj-silny); box-shadow: none;
}
.tlacitko--obrys:hover { background: var(--barva-plocha); border-color: var(--barva-akcent); color: var(--barva-akcent); }

.tlacitko--na-pasu {
  background: rgba(255, 255, 255, 0.12); color: var(--barva-pas-text);
  border-color: rgba(255, 255, 255, 0.45); box-shadow: none;
}
.tlacitko--na-pasu:hover { background: rgba(255, 255, 255, 0.22); color: var(--barva-pas-text); }

/* Šipka doprava na tlačítkách s textem v obsahu stránek (vzor Pokladna v mobilu); navigace ji nemá. */
main .tlacitko:not(.tlacitko--ikona)::after {
  content: ''; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: url('../images/ikony/ic_web_forward.svg') center / contain no-repeat;
          mask: url('../images/ikony/ic_web_forward.svg') center / contain no-repeat;
  transition: transform .15s ease;
}
main .tlacitko:hover::after, main a.karta:hover .tlacitko::after { transform: translateX(3px); }

.tlacitko--ikona { width: 48px; padding: 0; }
.tlacitko svg { width: 20px; height: 20px; flex: none; }

.tlacitka { display: flex; flex-wrap: wrap; gap: 12px; }

/* Přepínač platformy snímků: viditelný jen s JavaScriptem. */
.prepinac {
  display: none; padding: 4px; gap: 4px; border-radius: 14px;
  background: var(--barva-tonovana);
}
.js .prepinac { display: inline-flex; }
.prepinac__volba {
  min-width: 108px; min-height: 40px; padding: 8px 18px; border: 0; border-radius: 10px;
  background: transparent; color: var(--barva-text); font: 600 15px var(--pismo-text); cursor: pointer;
}
.prepinac__volba[aria-pressed="true"] { background: var(--barva-tlacitko); color: var(--barva-tlacitko-text); }

/* Snímek aplikace — PNG obsahuje rámeček telefonu i stín. Vidět je jen varianta
   odpovídající zvolené platformě a režimu. */
.snimek { margin: 0; width: min(300px, 100%); }
/* Snímek s přepínačem: šířku určuje obal, přepínač přiléhá bez mezery (spodní okraj snímku je průhledný stín). */
.snimek-s-volbou { display: flex; flex-direction: column; align-items: center; width: min(300px, 100%); }
.snimek-s-volbou .snimek { width: 100%; }
.snimek__obrazek { display: none; width: 100%; }
[data-platforma="android"][data-tema="svetly"] .snimek__obrazek[data-platforma="android"][data-tema="svetly"],
[data-platforma="android"][data-tema="tmavy"] .snimek__obrazek[data-platforma="android"][data-tema="tmavy"],
[data-platforma="ios"][data-tema="svetly"] .snimek__obrazek[data-platforma="ios"][data-tema="svetly"],
[data-platforma="ios"][data-tema="tmavy"] .snimek__obrazek[data-platforma="ios"][data-tema="tmavy"] { display: block; }

.snimek__zvetsit { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 24px; }

/* Lightbox (vzor Pokladna v mobilu) */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(18px, 4vw, 48px);
  background: rgba(5, 14, 15, 0.86); backdrop-filter: blur(8px);
}
.lightbox[hidden] { display: none; }
.lightbox__plocha { max-width: min(92vw, 560px); max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lightbox--pocitac .lightbox__plocha { max-width: min(92vw, 1100px); }
.lightbox__obrazek { width: auto; height: auto; max-width: 100%; max-height: calc(92vh - 100px); cursor: zoom-out; }
.lightbox .volba-mini__skupina + .volba-mini__skupina { border-left-color: rgba(255, 255, 255, 0.25); }
.lightbox .volba-mini__volba { color: #A9BFBE; }
.lightbox .volba-mini__volba:hover { color: #FFFFFF; }
.lightbox .volba-mini__volba[aria-pressed="true"] { color: #80D4D2; }
.lightbox__popisek { font-weight: 600; font-size: 15px; color: #DCE9E8; text-align: center; }
.lightbox__zavrit {
  position: fixed; top: 18px; right: 18px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 12px;
  background: rgba(255, 255, 255, 0.12); color: #FFFFFF; cursor: pointer;
}
.lightbox__zavrit:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox__zavrit svg { width: 22px; height: 22px; }

/* Vlastní volba snímků v bloku (galerie, náhled) přebije volbu webu. Blok bez atributů
   (bez JavaScriptu) se řídí volbou webu; pravidlo skrytí má proto podmínku na atribut. */
[data-volba-platforma][data-volba-tema] .snimek .snimek__obrazek[data-platforma][data-tema] { display: none; }
[data-volba-platforma="android"][data-volba-tema="svetly"] .snimek .snimek__obrazek[data-platforma="android"][data-tema="svetly"],
[data-volba-platforma="android"][data-volba-tema="tmavy"] .snimek .snimek__obrazek[data-platforma="android"][data-tema="tmavy"],
[data-volba-platforma="ios"][data-volba-tema="svetly"] .snimek .snimek__obrazek[data-platforma="ios"][data-tema="svetly"],
[data-volba-platforma="ios"][data-volba-tema="tmavy"] .snimek .snimek__obrazek[data-platforma="ios"][data-tema="tmavy"] { display: block; }

/* Nenápadný přepínač pod náhledem: vypadá jako popisek, plocha pro klepnutí je ale dost velká. */
.volba-mini { display: none; align-items: center; justify-content: center; gap: 4px 20px; flex-wrap: wrap; font-size: 13px; }
.js .volba-mini { display: flex; }
.volba-mini__skupina { display: flex; align-items: center; }
.volba-mini__skupina + .volba-mini__skupina { border-left: 1px solid var(--barva-okraj); padding-left: 12px; }
.volba-mini__volba {
  min-width: 36px; min-height: 36px; padding: 4px 8px; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 13px var(--pismo-text); color: var(--barva-text-slaby);
}
.volba-mini__volba svg { width: 16px; height: 16px; }
.volba-mini__volba:hover { color: var(--barva-text); }
.volba-mini__volba[aria-pressed="true"] { color: var(--barva-akcent); font-weight: 700; }
/* Platforma nebo režim, ke kterým zatím nejsou snímky. */
.volba-mini__volba:disabled, .prepinac__volba:disabled { opacity: 0.4; cursor: not-allowed; }
.volba-mini__volba:disabled:hover { color: var(--barva-text-slaby); }
.lightbox .volba-mini__volba:disabled:hover { color: #A9BFBE; }

/* Úvod (hero) */

.uvod { display: grid; gap: 48px; align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); }
.uvod__text { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.uvod__text h1 span { color: var(--barva-akcent); }

.uvod--podstranka h1 { font-size: clamp(36px, 4.4vw, 56px); }

.uvod__obrazky { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.uvod__obrazky .snimek-s-volbou { width: min(290px, 72%); margin-left: 18%; }

/* Kartička „Vloženo do schránky počítače“ v úvodu */
.blok-schranka {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px; border-radius: var(--zaobleni);
  background: var(--barva-plocha); border: 1px solid var(--barva-okraj);
  box-shadow: 0 20px 50px -18px var(--barva-stin);
}
.uvod__obrazky .blok-schranka { position: absolute; left: 0; bottom: 64px; z-index: 2; width: min(290px, 64%); }
.blok-schranka__pocitac { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--barva-text-slaby); }
.blok-schranka__pocitac svg { width: 18px; height: 18px; }
.blok-schranka__stav { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--barva-akcent); }
.blok-schranka__stav svg { width: 18px; height: 18px; }
/* Obsah kódu je hodnota, nedělí se (stejně jako v aplikaci). */
.blok-schranka__text { font-family: var(--pismo-kod); font-size: 14px; line-height: 1.55; margin: 0; overflow-wrap: anywhere; hyphens: none; }

@media (max-width: 600px) {
  .uvod__obrazky .snimek-s-volbou { margin-left: 0; width: min(280px, 82%); }
  .uvod__obrazky .blok-schranka { position: static; width: min(320px, 100%); margin-top: -90px; }
}

/* Ikony a krátké přínosy */

.ikona {
  width: 48px; height: 48px; flex: none; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--barva-tonovana); color: var(--barva-akcent);
}
.ikona svg { width: 24px; height: 24px; }
.ikona--velka { width: 56px; height: 56px; border-radius: 16px; }
.ikona--velka svg { width: 28px; height: 28px; }

.prinos { display: flex; flex-direction: column; gap: 12px; }
.prinos p { color: var(--barva-text-tlumeny); }

/* Seznam s fajfkami */
.seznam-fajfky { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.seznam-fajfky li { position: relative; padding-left: 34px; }
.seznam-fajfky li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 24px; height: 24px;
  background: var(--barva-akcent);
  -webkit-mask: url('../images/ikony/ic_nav_check.svg') center / contain no-repeat;
          mask: url('../images/ikony/ic_nav_check.svg') center / contain no-repeat;
}

/* Stavy doručení položek (jako v žurnálu aplikace) */
.stavy { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.stav {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-radius: 14px; background: var(--barva-pozadi); border: 1px solid var(--barva-okraj);
}
.stav__ikona { flex: none; width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.stav__ikona svg { width: 18px; height: 18px; }
.stav--odeslano .stav__ikona { background: var(--barva-ok-pozadi); color: var(--barva-ok); }
.stav--zobrazeno .stav__ikona { background: var(--barva-tonovana); color: var(--barva-akcent); }
.stav--ceka .stav__ikona { background: var(--barva-varovani-pozadi); color: var(--barva-varovani); }
.stav--chyba .stav__ikona { background: var(--barva-chyba-pozadi); color: var(--barva-chyba); }

/* Číslované kroky */
.kroky { list-style: none; margin: 0; padding: 0; counter-reset: krok; }
.kroky li { counter-increment: krok; display: flex; flex-direction: column; gap: 10px; }
.kroky li::before {
  content: counter(krok);
  width: 40px; height: 40px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--barva-tlacitko); color: var(--barva-tlacitko-text); font-weight: 700;
}
.kroky p { color: var(--barva-text-tlumeny); }

/* Karty */
.karta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px;
  border-radius: var(--zaobleni-velke); background: var(--barva-plocha); border: 1px solid var(--barva-okraj);
}
.karta p { color: var(--barva-text-tlumeny); }
.karta h2 { font-size: 22px; letter-spacing: 0; }
.karta .tlacitko { margin-top: auto; }
.karta--siroka { grid-column: 1 / -1; }
.sekce--plocha .karta { background: var(--barva-pozadi); }

/* Dlaždice jako odkaz: bez podtržení, celá plocha klikací. */
a.karta { color: var(--barva-text); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
a.karta:hover { color: var(--barva-text); border-color: var(--barva-akcent); transform: translateY(-2px); }

/* Tyrkysový pás */
.pas { background: var(--barva-pas); color: var(--barva-pas-text); padding-block: 72px; }
.pas__nadpis { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.pas__polozka { display: flex; flex-direction: column; gap: 8px; }
.pas__polozka strong { font-size: 19px; }
.pas__polozka p { color: var(--barva-pas-tlumeny); }

/* Časté otázky */
.otazky { border-top: 1px solid var(--barva-okraj); }
.otazky details { border-bottom: 1px solid var(--barva-okraj); padding-block: 20px; }
.otazky summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 16px;
  font-weight: 600; font-size: 19px;
}
.otazky summary::-webkit-details-marker { display: none; }
.otazky summary::after { content: '+'; color: var(--barva-akcent); font-size: 24px; line-height: 1; }
.otazky details[open] summary::after { content: '–'; }
.otazky details p { margin-top: 12px; color: var(--barva-text-tlumeny); }

/* Galerie obrazovek */
.galerie__volby { display: flex; flex-wrap: wrap; gap: 12px; }
.prepinac__volba svg { width: 18px; height: 18px; }
.prepinac__volba { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.galerie { position: relative; }
.galerie__hlavicka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 36px; }
.galerie__pas {
  list-style: none; margin: 0; padding: 0 0 16px;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(240px, 62%); gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.galerie__polozka { scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.galerie__polozka .snimek { width: 100%; }
.galerie__popisek { font-weight: 600; font-size: 15px; text-align: center; color: var(--barva-text-tlumeny); }
.galerie__ovladani { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Stažení aplikace a odznaky obchodů */
.stazeni { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.obchody { display: flex; flex-direction: column; gap: 8px; }
.stazeni .obchody { align-items: center; }
.obchody__odznaky { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Oba odznaky jsou bez ochranné zóny, proto stejná výška. */
.obchody__odznak { height: 48px; width: auto; }
.zarizeni { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; font-size: 15px; }
.zarizeni div { display: flex; gap: 6px; }
.zarizeni dt { font-weight: 700; }
.zarizeni dd { margin: 0; color: var(--barva-text-tlumeny); }
.obchody__pripravuji { font-size: 15px; color: var(--barva-text-slaby); }

/* Profil na stránce Kontakt */
.profil { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-bottom: 44px; }
.profil__foto { width: 160px; height: 160px; border-radius: 999px; object-fit: cover; }
.profil__text { display: flex; flex-direction: column; gap: 10px; }

.udaje { margin: 0; display: grid; gap: 12px; }
.udaje div { display: grid; gap: 4px 24px; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); }
.udaje dt { font-weight: 600; }
.udaje dd { margin: 0; color: var(--barva-text-tlumeny); }

.socialni-site { display: flex; flex-wrap: wrap; gap: 8px; }
.socialni-site__odkaz {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; border: 1.5px solid var(--barva-okraj-silny);
  color: var(--barva-text); background: var(--barva-plocha);
}
.socialni-site__odkaz:hover { border-color: var(--barva-akcent); color: var(--barva-akcent); }

/* Formulář dotazu na podporu (převzato z webu Firmy v mobilu, vzor Pokladna v mobilu) */
.formular {
  display: flex; flex-direction: column; padding: 28px; border-radius: var(--zaobleni-velke);
  background: var(--barva-plocha); border: 1px solid var(--barva-okraj); box-shadow: 0 10px 30px var(--barva-stin-slaby);
}
.formular__radky { display: flex; flex-wrap: wrap; gap: 0 14px; }
.formular__pole { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.formular__pole--vysoke { flex-basis: 100%; }
.formular label { font-weight: 600; font-size: 14px; color: var(--barva-text); }
.formular input[type=text], .formular input[type=email], .formular input[type=tel], .formular textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--barva-okraj-silny); border-radius: 10px;
  font: 400 16px var(--pismo-text); color: var(--barva-text); background: var(--barva-plocha);
}
.formular textarea { min-height: 280px; resize: vertical; }
.formular input:focus, .formular textarea:focus { outline: none; border-color: var(--barva-akcent); }
.formular input[aria-invalid=true], .formular textarea[aria-invalid=true] { border-color: var(--barva-chyba); }
.formular__povinne { color: var(--barva-chyba); font-weight: 700; }
.formular__legenda { font-size: 13px; color: var(--barva-text-slaby); margin-bottom: 14px; }
/* Popisek souhlasu je label uvnitř .formular, proto stejná specifičnost jako .formular label. */
.formular .formular__souhlas { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--barva-text-tlumeny); margin: 4px 0 16px; }
.formular__souhlas input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--barva-akcent); }
.formular__souhlas input[aria-invalid=true] { outline: 2px solid var(--barva-chyba); outline-offset: 2px; }
.formular__chyby { background: var(--barva-chyba-pozadi); border: 1px solid var(--barva-chyba); border-radius: 10px; padding: 12px 16px; margin: 0 0 14px; }
.formular__chyby[hidden] { display: none; }
.formular__chyby ul { margin: 0; padding-left: 20px; }
.formular__chyby li, .formular__chyba { color: var(--barva-chyba); font: 500 14px var(--pismo-text); line-height: 1.55; }
.formular__chyba { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; }
.formular__chyby:focus { outline: 2px solid var(--barva-chyba); outline-offset: 3px; }
.formular__odeslat { width: 100%; }
.formular__past { position: absolute; left: -9999px; }
.formular--potvrzeno { align-items: center; text-align: center; padding: 48px 28px; gap: 8px; }
.formular__hotovo {
  width: 58px; height: 58px; margin-bottom: 10px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--barva-ok-pozadi); color: var(--barva-ok);
}
.formular__hotovo svg { width: 30px; height: 30px; }
.formular__potvrzeni-nadpis { font: 700 23px var(--pismo-nadpis); }
.formular__potvrzeni-text { color: var(--barva-text-tlumeny); font-size: 17px; }

/* Textové a právní stránky */
.clanek { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.clanek h1 { font-size: clamp(36px, 5vw, 54px); line-height: 1.06; margin-bottom: 8px; }
.clanek h2 { font-size: 22px; letter-spacing: -0.01em; margin-top: 24px; }
/* Právní dokumenty převzaté z Pokladny v mobilu: hlavička a číslované oddíly. */
.clanek__hlavicka { display: flex; flex-direction: column; gap: 10px; width: 100%; padding-bottom: 28px; border-bottom: 1px solid var(--barva-okraj); }
.clanek__oddil { display: flex; flex-direction: column; gap: 12px; width: 100%; padding-block: 24px; border-bottom: 1px solid var(--barva-okraj); }
.clanek__oddil:last-child { border-bottom: 0; }
.clanek__oddil h2 { margin-top: 0; }
.clanek ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.clanek p, .clanek li { color: var(--barva-text-tlumeny); }
.clanek strong { color: var(--barva-text); }

/* Chybějící snímek (dokud nejsou vygenerované snímky aplikace) */
.snimek__chybi {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 9 / 19; width: 100%;
  border: 1.5px dashed var(--barva-okraj-silny); border-radius: 28px;
  color: var(--barva-text-slaby); font-size: 14px; text-align: center; padding: 16px;
}

/* Stažení pro počítač */
.platformy { display: grid; gap: 20px; width: 100%; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); text-align: left; }

/* Historie verzí */
.verze { display: flex; flex-direction: column; gap: 20px; }
.verze__hlava { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.verze__hlava h2 { font-size: 26px; }
.verze__platforma { font-weight: 600; color: var(--barva-akcent); }
.verze__datum { color: var(--barva-text-slaby); font-size: 15px; }
.verze ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; color: var(--barva-text-tlumeny); }

/* Patička */
.paticka { background: var(--barva-paticka); color: var(--barva-paticka-text); font-size: 15px; }
.paticka a { color: var(--barva-paticka-text); text-decoration: none; }
.paticka a:hover { color: #FFFFFF; text-decoration: underline; }
.paticka__obal { display: flex; flex-direction: column; gap: 40px; padding-block: 56px 28px; }
.paticka__horni { display: flex; flex-wrap: wrap; gap: 40px 56px; }
.paticka__o-aplikaci { flex: 1 1 280px; max-width: 360px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.paticka__o-aplikaci .obchody__odznak { height: 40px; }
.paticka__o-aplikaci .obchody__pripravuji { color: var(--barva-paticka-slaby); }
/* Sloupce se šířkou podle obsahu, aby se položky nelámaly. */
.paticka__sloupce { flex: 999 1 560px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 48px; }
.paticka__nadpis { font-weight: 700; color: #FFFFFF; }
.paticka__sloupec { display: flex; flex-direction: column; gap: 8px; }
.paticka .znacka { color: #FFFFFF; font-size: 19px; margin-bottom: 4px; }
.paticka .socialni-site__odkaz { background: transparent; border-color: var(--barva-paticka-cara); color: var(--barva-paticka-text); }
.paticka .socialni-site__odkaz:hover { border-color: #FFFFFF; color: #FFFFFF; text-decoration: none; }
.paticka__spodek { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; border-top: 1px solid var(--barva-paticka-cara); font-size: 14px; color: var(--barva-paticka-slaby); }

@media (max-width: 600px) {
  .sekce { padding-block: 64px; }
  .perex { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}