/*
 * Objednávka předplatného a stav objednávky (`/objednavka.php`, 12. 10. 2026).
 *
 * OPSANÉ z rizikabozp.online (`assets/css/objednavka.css`, stav 12. 10. 2026)
 * — zadavatel chtěl objednávku jako u rizik. Načítá se za `k.css`; tokeny
 * rizik (`--tmava`, `--modra` …) jsou tu přeložené na barvy planu.
 * Tlačítko odeslání je zelené s tmavým písmem jako ostatní hlavní tlačítka
 * planu (rizika tam mají modrozelený přechod).
 */

:root {
    --tmava: #0A1A30;
    --telo: #33465F;
    --sedy: #65788F;
    --modra: #1560D8;
    --zelena: #0F9D6E;
    --navy: #0C2141;
    --lem: #E2E9F3;
}
.past { position: absolute; left: -9999px; }
.obj-znacka .znacka-tld { color: #0F9D6E; }
.objednavka-popis a, .objednavka-drobne a { color: var(--modra); text-decoration: underline; text-underline-offset: 2px; }
.objednavka-tlacitka .k-tl { cursor: pointer; font-family: inherit; }
.obj-nadpis + h1 { margin-top: 10px; }

/* ------------------------------------------------------- hlavička nákupu -- */

/*
 * Vlastní hlavička místo té z titulky: značka vlevo, tři kroky vpravo.
 * Uprostřed placení nemá být po ruce rozcestník, který z něj odvede.
 */
.obj-hlava {
    background: #fff;
}

.obj-hlava .obsah {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 34px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--lem);
}

.obj-znacka {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--tmava);
    text-decoration: none;
}

.obj-znacka img { width: 44px; height: 38px; }

.obj-kroky {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sedy);
}

/* Čárka mezi kroky. Je to ozdoba, ne obsah — proto v CSS, ne v seznamu. */
.obj-krok + .obj-krok::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 1px;
    margin-right: 10px;
    vertical-align: middle;
    background: #DDE3EC;
}

.obj-krok--zde { color: var(--modra); }

/* ------------------------------------------------------------- stránka --- */

.objednavka {
    padding: 44px 0 64px;
    background: #FAFBFD;
    min-height: 60vh;
}

/*
 * Formulář má bílé pozadí, stránka se stavem zůstává na šedivé. Souhrn
 * v návrhu je tmavá karta a ta na šedivém podkladu ztrácí kontrast okraje.
 */
.objednavka--formular {
    padding: 0 0 56px;
    background: #fff;
}

.objednavka h1 {
    margin: 8px 0 0;
    font-size: 33px;
    line-height: 40px;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--tmava);
}

.objednavka--formular h1 {
    margin: 0;
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -.03em;
}

.objednavka-popis {
    margin: 14px 0 0;
    max-width: 62ch;
    font-size: 16px;
    line-height: 26px;
    color: var(--telo);
}

.objednavka--formular .objednavka-popis {
    margin: 10px 0 0;
    max-width: 58ch;
    font-size: 16.5px;
    line-height: 27px;
}

.objednavka-drobne {
    margin: 20px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--sedy);
}

.objednavka-tlacitka {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
}

/* Chyba nad formulářem. Červená, ale ne poplašná — bývá to překlep. */
.objednavka-chyba {
    margin: 18px 0 0;
    padding: 12px 14px;
    border: 1px solid #F3C9CB;
    border-left: 3px solid #B4232A;
    border-radius: 8px;
    background: #FDECEC;
    font-size: 14px;
    line-height: 21px;
    color: #8E1B21;
}

/* Se skriptem se souhrn přepočítá sám; schovává se, co má smysl jen bez něj. */
.ma-skript .bez-skriptu { display: none; }

/*
 * Přepínané podle způsobu platby (obnovení, značky bran) — server to
 * vykreslí rovnou, skript to přepíná při přepnutí volby.
 *
 * DVĚ TŘÍDY SCHVÁLNĚ. Skrývané bloky mají vlastní `display: flex`
 * a s jednou třídou by rozhodovalo pořadí pravidel v souboru — první
 * přesunutá deklarace by skrývání tiše vypnula.
 */
.objednavka .obj-skryte { display: none; }

/* ------------------------------------------------------------ rozvržení -- */

/*
 * Dva stejně široké sloupce, jak je v návrhu: formulář vlevo, souhrn
 * vpravo. `auto-fit` je zároveň zlom pro úzká okna — pod zhruba 1090 px
 * se sloupce samy složí pod sebe a nemusí to řešit `@media`.
 *
 * Souhrn se drží u horního okraje (`sticky`): při vyplňování jedenácti
 * polí zmizí z obrazovky, a částka je to jediné, co je potřeba mít celou
 * dobu na očích.
 */
.objednavka-mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
    gap: 52px;
    margin: 34px 0 0;
    align-items: start;
}

/*
 * Skupiny polí jsou `<fieldset>` kvůli přepínačům — ty musí mít společný
 * rámec i pro odečítač. Vlastní rámeček prohlížeče se ruší, nadpis dělá
 * `.obj-nadpis`.
 */
.obj-sekce {
    margin: 36px 0 0;
    padding: 0;
    border: 0;
    /* Bez tohohle se `<fieldset>` v mřížce roztáhne podle nejširšího pole. */
    min-width: 0;
}

/*
 * ODSAZENÍ JE NA `<fieldset>`, NE NA `<legend>`.
 * Legenda se sází zvlášť (kreslí se do „zářezu" v rámečku) a svislé
 * `margin` na ní prohlížeč ignoruje — nadpisy se pak lepí na to, co je
 * nad nimi. Kdo to bude přenastavovat, ať to zkusí v prohlížeči, ne jen
 * v souboru.
 */
.obj-nadpis {
    padding: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--modra);
}

/* ------------------------------------------------------------ pole ------- */

.pole { margin: 14px 0 0; }

.pole label {
    display: block;
    margin: 0 0 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tmava);
}

.pole-nepovinne {
    font-weight: 400;
    color: var(--sedy);
}

.pole input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #DCE2EC;
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 15px;
    color: var(--tmava);
}

.pole input::placeholder { color: #A8B3C4; }

.pole input:focus-visible {
    outline: 2px solid var(--modra);
    outline-offset: 1px;
    border-color: var(--modra);
}

.pole--chyba input { border-color: #D9646A; }

.pole-chyba {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 19px;
    color: #B4232A;
}

.pole-napoveda {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 18px;
    color: var(--sedy);
}

/*
 * Pole vedle sebe. Mřížka se skládá sama podle toho, co se vejde —
 * český popisek bývá delší než anglický a pevný počet sloupců by ho
 * lámal na dva řádky.
 */
.obj-dvojice,
.obj-trojice {
    display: grid;
    gap: 16px;
    margin: 14px 0 0;
}

.obj-dvojice { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.obj-trojice { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* V mřížce si odsazení řídí `gap`, ne pole samo. */
.obj-dvojice .pole,
.obj-trojice .pole,
.obj-ares-pole .pole { margin: 0; }

/* E-mail je jeden a přes celou šířku by se z něj stal pruh na půl stránky. */
.obj-uzke { max-width: 520px; }

/* ------------------------------------------------------------- karty ----- */

.obj-karty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin: 16px 0 0;
}

/*
 * Přepínač jako celá karta: klikací plocha je pak celá karta, ne kolečko
 * o osmi pixelech. Na mobilu je to rozdíl mezi použitelným
 * a nepoužitelným.
 */
.obj-karta {
    position: relative;
    display: block;
    padding: 15px 16px;
    border: 1px solid var(--lem);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

.obj-karta:hover { border-color: #CBD6E6; }

/*
 * Vybraná karta se pozná i bez barvy — má silnější rám. Barva sama by
 * nestačila tomu, kdo ji nerozliší.
 */
.obj-karta:has(input:checked) {
    border-color: var(--modra);
    box-shadow: inset 0 0 0 1px var(--modra);
    background: #F7FAFF;
}

.obj-karta:focus-within {
    outline: 2px solid var(--modra);
    outline-offset: 2px;
}

.obj-karta-hlava {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--tmava);
}

.obj-karta-hlava input { margin: 0; accent-color: var(--modra); }

.obj-karta-nazev { font-size: 15px; font-weight: 700; }

/* „Hned" / „14 dní" — kdy se otevře přístup, ne značka kvality. */
.obj-karta-znak {
    margin-left: auto;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sedy);
}

.obj-karta-castka {
    display: block;
    margin: 9px 0 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--tmava);
}

.obj-karta-popis {
    display: block;
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--telo);
}

/* U způsobu platby začíná popis pod textem, ne pod přepínačem. */
.obj-karta-popis--odsazeny {
    margin-top: 6px;
    padding-left: 26px;
}

/*
 * Praporek s úsporou visí NAD rámečkem karty, tedy mimo její plochu —
 * proto `absolute` se záporným `top` a karta `position: relative`.
 */
.obj-uspora {
    position: absolute;
    top: -10px;
    right: 14px;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--zelena);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}

/*
 * Obnovování je taky karta, ne holé zaškrtávátko na řádku: rozhoduje se
 * v něm o tom, jestli se za rok strhne další platba, a to si zaslouží
 * stejnou váhu jako volba období.
 */
.obj-obnovovat {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 12px 0 0;
    padding: 13px 16px;
    border: 1px solid #E3E9F2;
    border-radius: 12px;
    background: #FBFCFE;
    cursor: pointer;
}

.obj-obnovovat:hover { border-color: #CBD6E6; }

.obj-obnovovat:focus-within {
    outline: 2px solid var(--modra);
    outline-offset: 2px;
}

.obj-obnovovat input {
    margin: 0;
    width: 17px;
    height: 17px;
    flex: none;
    accent-color: var(--modra);
}

/* `min-width: 0`, jinak dlouhý popis mřížku roztáhne místo zalomení. */
.obj-obnovovat-text { flex: 1; min-width: 0; }

.obj-obnovovat-nazev {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--tmava);
}

.obj-obnovovat-popis {
    display: block;
    margin: 1px 0 0;
    font-size: 12.5px;
    line-height: 19px;
    color: var(--sedy);
}

.obj-obnovovat-znak {
    flex: none;
    padding: 3px 9px;
    border-radius: 20px;
    background: #E7F6EC;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #1F7A3C;
}

/* --------------------------------------------------------- fakturace ----- */

.obj-fakturace {
    margin: 14px 0 0;
    border: 1px solid #E3E9F2;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

/*
 * Pruh s IČO je od zbytku odsazený barvou schválně: je to zkratka, která
 * vyplní čtyři pole pod sebou, ne páté políčko v řadě.
 */
.obj-ares {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 20px 22px;
    border-bottom: 1px solid var(--lem);
    background: #FBFCFE;
}

.obj-ares-pole { width: 200px; flex: none; }

.obj-ares-tlacitko {
    flex: none;
    padding: 11px 18px;
    border: 1.5px solid #C9D6E6;
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tmava);
    cursor: pointer;
}

.obj-ares-tlacitko:hover { border-color: var(--modra); color: var(--modra); }
.obj-ares-tlacitko[disabled] { opacity: .55; cursor: default; }

.obj-ares-popis {
    margin: 0 0 11px;
    min-width: 200px;
    flex: 1;
    font-size: 12.5px;
    line-height: 18px;
    color: var(--sedy);
}

/* Výsledek hledání v registru. Nahradí vysvětlivku na tomtéž řádku. */
.obj-ares-popis--ok { color: #1F7A3D; }
.obj-ares-popis--chyba { color: #B4232A; }

.obj-fakturace-telo { padding: 20px 22px 22px; }
.obj-fakturace-telo .obj-dvojice:first-child { margin-top: 0; }

/* --------------------------------------------------------------- souhrn -- */

.objednavka-souhrn {
    position: sticky;
    top: 16px;
    padding: 26px 24px 24px;
    border-radius: 16px;
    background: var(--navy);
    color: #fff;
    box-shadow: 0 18px 40px rgba(9, 41, 83, .18);
}

.souhrn-nadhlavi {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .058em;
    text-transform: uppercase;
    color: #6FC72E;
}

.souhrn-castka {
    margin: 14px 0 0;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
}

.souhrn-podrobne {
    margin: 6px 0 0;
    font-size: 13.5px;
    color: #A9BDD9;
}

.souhrn-radky {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px 12px;
    margin: 0;
    font-size: 14px;
}

.souhrn-radky dt { color: var(--telo); }
.souhrn-radky dd { margin: 0; text-align: right; color: var(--tmava); }

/* V tmavém panelu jsou barvy obrácené. */
.objednavka-souhrn .souhrn-radky {
    margin: 20px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.objednavka-souhrn .souhrn-radky dt { color: #A9BDD9; }
.objednavka-souhrn .souhrn-radky dd { color: #fff; }
.objednavka-souhrn .souhrn-radky dd:first-of-type { font-weight: 700; }

/* Tentýž seznam na stránce se stavem — světlé pozadí, vlastní rámeček. */
.souhrn-radky--siroke {
    max-width: 420px;
    margin: 22px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--lem);
    border-radius: 12px;
    background: #fff;
}

/*
 * „Přepočítat" je záměrně nenápadné. Je to pomůcka pro dobu bez skriptu,
 * ne krok objednávky — kdyby vypadalo jako hlavní tlačítko, půlka lidí by
 * jím objednávku ukončila.
 */
.souhrn-prepocet {
    display: block;
    width: 100%;
    margin: 16px 0 0;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 9px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: #CBDAEC;
    cursor: pointer;
}

.souhrn-prepocet:hover { border-color: rgba(255, 255, 255, .45); color: #fff; }

.souhrn-podminky {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 20px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: #CBDAEC;
    cursor: pointer;
}

.souhrn-podminky input { margin: 3px 0 0; accent-color: #6FC72E; }
.souhrn-podminky a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* Chyba uvnitř tmavého panelu — červená by na modré zmizela. */
.souhrn-chyba {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 19px;
    color: #FFC2C6;
}

.souhrn-odeslat {
    display: block;
    width: 100%;
    margin: 16px 0 0;
    padding: 15px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--k-fill);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--k-fill-ink);
    cursor: pointer;
}

.souhrn-odeslat:hover { filter: brightness(1.06); }

.souhrn-drobne {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 18px;
    color: #8FA6C4;
}

/*
 * Značky bran. Jsou to jen popisky, ne loga — obrázková loga mají vlastní
 * pravidla užití a stahovat je kvůli třem obdélníčkům by znamenalo řešit
 * licenci k něčemu, co nese informaci „platí se kartou".
 */
.souhrn-znacky {
    display: flex;
    gap: 8px;
    margin: 14px 0 0;
    flex-wrap: wrap;
}

.souhrn-znacky span {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .12);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------- na úzkém -- */

@media (max-width: 1090px) {
    /*
     * Souhrn pod formulář a bez `sticky`: na výšku telefonu by zabral
     * půl obrazovky a překrýval pole, která se zrovna vyplňují.
     */
    .objednavka-souhrn { position: static; }
    .objednavka-mrizka { gap: 32px; }
}

@media (max-width: 560px) {
    .objednavka h1 { font-size: 27px; line-height: 34px; }
    .objednavka--formular h1 { font-size: 28px; line-height: 35px; }

    .obj-hlava .obsah { padding-top: 22px; gap: 14px; }
    .obj-kroky { font-size: 11.5px; gap: 7px; }
    .obj-krok + .obj-krok::before { width: 12px; margin-right: 7px; }

    /* Pruh s IČO: tlačítko pod pole, vysvětlivka až za ně. */
    .obj-ares { padding: 16px; }
    .obj-ares-pole { width: 100%; }
    .obj-ares-tlacitko { width: 100%; }
    .obj-ares-popis { margin-bottom: 0; }

    /* Na telefonu pod sebe: „Ulice a číslo popisné" se do třetiny nevejde. */
    .obj-trojice { grid-template-columns: 1fr; }

    .obj-fakturace-telo { padding: 16px 16px 18px; }
    .objednavka-souhrn { padding: 20px 18px 18px; }
    .souhrn-castka { font-size: 34px; }
}

/* Bez pruhu „zkušební režim“ rizik by odsazení mřížky propadlo nad sekci
 * (slévání okrajů) a mezi hlavičkou a formulářem by prosvítalo pozadí. */
.objednavka--formular { padding-top: 34px; }
.objednavka--formular .objednavka-mrizka { margin-top: 0; }