/*
  Terminál do mobilu — styly webu.
  Struktura a třídy podle webu Firmy v mobilu, barvy a písmo podle aplikace (návrh „Noc a tyrkys“).
  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ísmo Manrope jako v aplikaci: vlastní hosting (žádné požadavky na cizí servery), variabilní, licence OFL. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope-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: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --barva-pozadi: #F2F5F8;
  --barva-plocha: #FFFFFF;
  --barva-text: #0C1B2A;
  --barva-text-tlumeny: #3D4C5B;
  --barva-text-slaby: #4A5866;
  /* Text a odkazy o odstín tmavší než tlačítko platby, aby měly kontrast 4,5:1 i na pozadí stránky. */
  --barva-akcent: #0C7393;
  --barva-akcent-hover: #0A5F79;
  --barva-tonovana: #DDEFF5;
  --barva-okraj: #DCE3EA;
  --barva-okraj-silny: #C3CEDA;
  --barva-tlacitko: #0E7C9E;
  --barva-tlacitko-hover: #0B6A87;
  --barva-tlacitko-text: #FFFFFF;
  --barva-tlacitko-stin: rgba(14, 124, 158, 0.28);
  --barva-noc: #133F63;
  --barva-noc-text: #FFFFFF;
  --barva-noc-tlumeny: #B5D0E6;
  --barva-noc-kruh: rgba(255, 255, 255, 0.05);
  --barva-zvyrazneni: #4FD1E8;
  --barva-paticka: #0C1B2A;
  --barva-paticka-text: #C2CFDB;
  --barva-paticka-slaby: #94A6B8;
  --barva-paticka-cara: #1F3142;
  --barva-stin: rgba(12, 27, 42, 0.30);
  --barva-stin-slaby: rgba(12, 27, 42, 0.06);
  --barva-ok: #168348;
  --barva-ok-pozadi: #DCF1E3;
  --barva-chyba: #B3261E;
  --barva-chyba-pozadi: #FBE3E0;
  --barva-varovani: #8A5A00;
  --barva-varovani-pozadi: #FCEFD2;

  /* Kreslená ukázka aplikace: barvy obrazovky ze světlého režimu aplikace. */

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

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

  --barva-pozadi: #0B141C;
  --barva-plocha: #111D28;
  --barva-text: #E6EDF3;
  --barva-text-tlumeny: #AAB9C7;
  --barva-text-slaby: #94A5B5;
  --barva-akcent: #4FD1E8;
  --barva-akcent-hover: #8DE3F2;
  --barva-tonovana: #12303D;
  --barva-okraj: #1F2D3A;
  --barva-okraj-silny: #2E4152;
  --barva-tlacitko: #4FD1E8;
  --barva-tlacitko-hover: #7ADCEE;
  --barva-tlacitko-text: #04262F;
  --barva-tlacitko-stin: rgba(0, 0, 0, 0.35);
  --barva-noc: #0F2233;
  --barva-noc-tlumeny: #A3BED6;
  --barva-noc-kruh: rgba(255, 255, 255, 0.035);
  --barva-paticka: #070E14;
  --barva-paticka-text: #B6C4D1;
  --barva-paticka-slaby: #8A9BAC;
  --barva-paticka-cara: #182633;
  --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);
  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); margin: 0; }
p { margin: 0; }

h1 { font-weight: 800; font-size: clamp(40px, 5.5vw, 64px); line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-weight: 800; font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -0.02em; }
h3 { font-weight: 700; font-size: 20px; line-height: 1.3; }

.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; overflow-x: clip; }

.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é. */
.obal:not(.obal--text) > .sekce__hlavicka .perex { max-width: 720px; }
/* Nadpis na střed nad mřížkou karet přes celou šířku, aby text nekončil v půlce stránky. */
.sekce__hlavicka--stred { align-items: center; text-align: center; }
.sekce__hlavicka--stred .nadtitulek { justify-content: center; }

.nadtitulek { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; 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); }

.stitek {
  display: inline-flex; padding: 2px 10px; border-radius: 999px;
  background: var(--barva-varovani-pozadi); color: var(--barva-varovani);
  font-weight: 700; font-size: 13px;
}

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

/* Dvojice text + obrázek; varianta --obracene dá obrázek 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; }
@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-weight: 800; font-size: 20px; letter-spacing: -0.01em;
  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á i na úzkém displeji. */
@media (max-width: 860px) {
  .hlavicka__akce { margin-left: auto; order: 1; }
  .js .navigace__menu { display: flex; }
  .navigace { order: 2; margin-left: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
  .js .navigace { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding-bottom: 8px; }
  .js .navigace.je-otevrena { display: flex; }
  .js .navigace a:not(.tlacitko) { padding: 12px 4px; border-top: 1px solid var(--barva-okraj); }
  .js .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: 700 16px var(--pismo); 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-noc-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-noc-text); }

/* Šipka doprava na tlačítkách s textem v obsahu stránek (vzor Pokladna v mobilu); navigace ji nemá. */
main .tlacitko::after {
  content: ''; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .15s ease;
}
main .tlacitko:hover::after { transform: translateX(3px); }

.tlacitka { display: flex; flex-wrap: wrap; gap: 12px; }
.tlacitka--odsazena { margin-top: 44px; }

/* Ú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__obrazky { position: relative; display: flex; justify-content: center; padding-block: 12px; }
/* Kruhy bezkontaktní platby za telefonem. */
.uvod__obrazky::before {
  content: ''; position: absolute; z-index: 0; left: 50%; top: 50%;
  width: min(620px, 140%); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-radial-gradient(circle, transparent 0 54px, var(--barva-tonovana) 54px 58px);
  border-radius: 50%; opacity: .9;
  -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%);
          mask: radial-gradient(circle, #000 35%, transparent 70%);
}

/* Snímky aplikace (grafika/obchody/generuj-grafiku-obchodu.py) mají rámeček telefonu, stín dodává CSS. */
.snimek { position: relative; z-index: 1; margin: 0; width: min(280px, 100%); }
.snimek img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 34px var(--barva-stin)); }
.uvod__obrazky .snimek { width: min(270px, 56%); }
.uvod__obrazky .snimek + .snimek { margin-left: -14%; margin-top: 64px; }
.dvojice__snimky { display: flex; justify-content: center; gap: 20px; width: 100%; }
.dvojice__snimky .snimek { width: min(250px, 48%); }

/* 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: 3px; width: 22px; height: 22px;
  background: var(--barva-akcent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Panel vedle textu (stavy platby) */
.panel {
  display: flex; flex-direction: column; gap: 16px; width: min(480px, 100%); padding: 24px;
  border-radius: var(--zaobleni-velke); background: var(--barva-plocha); border: 1px solid var(--barva-okraj);
  box-shadow: 0 20px 50px -24px var(--barva-stin);
}
.panel__nadpis { font-weight: 700; font-size: 15px; color: var(--barva-text-slaby); }

/* Stavy platby, barvy podle aplikace */
.stavy { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.stav {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  border-radius: 14px; background: var(--barva-pozadi); border: 1px solid var(--barva-okraj);
  font-size: 15px; line-height: 1.5; color: var(--barva-text-tlumeny);
}
.stav strong { color: var(--barva-text); font-size: 16px; }
.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--zaplaceno .stav__ikona { background: var(--barva-ok-pozadi); color: var(--barva-ok); }
.stav--nezaplaceno .stav__ikona { background: var(--barva-chyba-pozadi); color: var(--barva-chyba); }
.stav--nejiste .stav__ikona { background: var(--barva-varovani-pozadi); color: var(--barva-varovani); }

/* Tok platby z počítače: kroky pod sebou se spojnicí */
.tok { list-style: none; margin: 0; padding: 0; width: min(440px, 100%); display: flex; flex-direction: column; gap: 28px; }
.tok__krok {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  border-radius: var(--zaobleni); background: var(--barva-plocha); border: 1px solid var(--barva-okraj);
  color: var(--barva-text-tlumeny); line-height: 1.45;
}
.tok__krok strong { color: var(--barva-text); }
.tok__krok + .tok__krok::before {
  content: ''; position: absolute; left: 47px; top: -29px; width: 2px; height: 28px;
  background: repeating-linear-gradient(to bottom, var(--barva-akcent) 0 4px, transparent 4px 8px);
}

/* Čí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: 800;
}
.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; }
.karta h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Karty pod dvojicí textu a obrázku ve stejné sekci. */
.sekce__karty { margin-top: 56px; }
/* Fotka zařízení přes celou šířku karty, poměr stran fotek tiskáren 1200 × 896. */
.karta__foto { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 896; object-fit: cover; border-radius: var(--zaobleni); margin-bottom: 8px; }
.sekce--plocha .karta { background: var(--barva-pozadi); }

/* Tmavomodrý pás */
.pas {
  color: var(--barva-noc-text); padding-block: 72px;
  background-color: var(--barva-noc);
  background-image: repeating-radial-gradient(circle at 96% 10%, transparent 0 60px, var(--barva-noc-kruh) 60px 120px);
}
.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-noc-tlumeny); }
.pas__polozka a { color: var(--barva-noc-text); }
.pas__polozka a:hover { color: var(--barva-zvyrazneni); }

/* Č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: 700; 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); }

/* Stažení aplikace a odznak obchodu */
.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; }
/* Odznak je bez ochranné zóny; volné místo kolem drží okolní mezery. */
.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 (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); 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); 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); }
.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.08; 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); }

/* 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; }
}