/* ──────────────────────────────────────────────────────────────────────────
   Hlášky veřejných formulářů — chyby u polí, souhrn u tlačítka, výsledek
   odeslání a upozornění na nenastavenou ochranu proti robotům.

   🔴 PROČ VLASTNÍ SOUBOR V JÁDŘE. `formular.js` vypisuje `.form-messages`
      a `.form-field-error` od 9. 10. 2026, ale pravidlo pro ně neexistovalo
      v žádném stylopisu — hláška se tedy vykreslila jako holý text bez
      odsazení a chyba u pole nebyla červená. Stylopisy webů (`jta.css`,
      `site.css`) jsou kód NA MÍRU, takže do nich to patřit nemůže: ostatní
      weby na téhle bázi by zůstaly bez stylu. Je to stejná past jako
      u sekce Video a u galerie — komponenta, kterou renderer vypisuje,
      ale CSS pro ni v téhle větvi nikdy nevzniklo.

   Soubor si přibalí `Captcha::stylopisHtml()` tam, kde se vykresluje
   formulář. Barvy jdou přes tokeny webu s náhradní hodnotou, aby to
   vypadalo k světu i na webu, který ty tokeny nemá.
   ────────────────────────────────────────────────────────────────────────── */

:root {
    --form-barva-chyba: #b3261e;
    --form-barva-chyba-plocha: #fdecea;
    --form-barva-chyba-linka: #f0b4ae;
    --form-barva-ok: #1b5e20;
    --form-barva-ok-plocha: #e8f5e9;
    --form-barva-pozor-plocha: #fff8e1;
    --form-barva-pozor-linka: #e6a700;
}

/* ── 🔴 Specificita: hlášky přežijí i v patičce ────────────────────────────

   Formulář odběru bývá v TMAVÉ patičce a ta si barví text natvrdo:
   `.site-footer p, .site-footer a, .site-footer li { color: rgba(255,255,255,.78) }`
   má specificitu (0,1,1) a přebila by `.form-captcha-vypnuto` (0,1,0).
   Výsledek byl bílý text na krémovém podkladu, kontrast 1,2 : 1 — hláška
   byla fyzicky ve stránce, a přitom nečitelná. Chytil to až snímek, ne
   pohled do CSS.

   Zdvojení třídy zvedne specificitu na (0,2,0) bez `!important` a bez vazby
   na konkrétní web (jádro nesmí vědět, jak se jmenuje patička toho kterého
   webu). Platí pro všechny hlášky — každá může skončit na tmavé ploše.
   ────────────────────────────────────────────────────────────────────────── */

/* ⚠️ Zdvojuje se MODIFIKÁTOR, ne základní třída. Kdyby barvu nesl základ
      `.form-messages`, přebil by i `--ok` variantu (stejná specificita, ale
      základ se v souboru píše dřív) a poděkování po odeslání by zčervenalo. */
.form-messages--chyba.form-messages--chyba,
.form-field-error.form-field-error {
    color: var(--form-barva-chyba);
}

.form-messages--ok.form-messages--ok {
    color: var(--form-barva-ok);
}

.form-captcha-vypnuto.form-captcha-vypnuto {
    color: #4a3b00;
}

/* Odkaz do Nastavení v řádku pro správce — `.site-footer a` je taky (0,1,1). */
.form-captcha-vypnuto--admin.form-captcha-vypnuto--admin a {
    color: inherit;
}

/* ── Hláška nad poli ───────────────────────────────────────────────────── */

/* Schránka se vyrábí dopředu a plní se až při odeslání. Prázdná nesmí
   dělat mezeru, jinak by formulář po načtení „poskočil". */
.form-messages:empty {
    display: none;
}

.form-messages {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 13px 16px;
    border-left: 3px solid currentColor;
    font-size: 0.95rem;
    line-height: 1.5;
}

.form-messages--chyba {
    color: var(--form-barva-chyba);
    background: var(--form-barva-chyba-plocha);
}

.form-messages--ok {
    color: var(--form-barva-ok);
    background: var(--form-barva-ok-plocha);
}

/* Po úspěšném odeslání nahrazuje celý formulář, takže si zaslouží víc místa. */
.form-messages--hotovo {
    margin: 0;
    padding: 24px;
    font-size: 1.05rem;
}

/* Ikona drží velikost v em, aby rostla s písmem hlášky. `0.1em` ji posadí
   opticky na účaří prvního řádku — svislé vystředění by u dvouřádkové
   hlášky skončilo v mezeře mezi řádky (past už chycená u `.jta-contact__radek`). */
.form-messages__ikona,
.form-field-error__ikona,
.form-souhrn__ikona {
    flex: 0 0 auto;
    display: block;
    margin-top: 0.1em;
    color: currentColor;
}

.form-messages__ikona svg,
.form-field-error__ikona svg,
.form-souhrn__ikona svg {
    display: block;
    width: 1.15em;
    height: 1.15em;
}

.form-messages--hotovo .form-messages__ikona svg {
    width: 1.4em;
    height: 1.4em;
}

/* ── Chyba u konkrétního pole ──────────────────────────────────────────── */

.form-field-error {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 7px 0 0;
    color: var(--form-barva-chyba);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;

    /* Chyba musí skončit POD polem, ne vedle něj.

       Řádek se souhlasem GDPR bývá přímou položkou mřížky formuláře
       (`.jta-contact__consent { grid-column: 1 / -1 }`), takže hláška
       vložená za něj spadne do VEDLEJŠÍHO sloupce a vypadá jako text
       patřící k jinému poli. Chyceno snímkem produkce 10. 10. 2026.

       Obě vlastnosti se mimo mřížku a flex tiše ignorují, takže u polí
       zabalených v `<p>` (jméno, e-mail, zpráva) nic nemění. */
    grid-column: 1 / -1;
    flex-basis: 100%;

    animation: form-chyba-prichod 0.22s ease-out;
}

@keyframes form-chyba-prichod {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* ── Pole, které je potřeba opravit ────────────────────────────────────── */

/* 🔴 Rámeček sám nestačí. Na formuláři s deseti poli je rozdíl mezi šedou
      a červenou linkou o síle 1 px přehlédnutelný — zvlášť na mobilu
      a pro lidi s poruchou barvocitu. Proto k barvě přibývá i vnější
      obrys (`box-shadow`), který je vidět jako jemná záře kolem pole. */
.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: var(--form-barva-chyba);
    box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.13);
}

.is-invalid:focus,
input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
    border-color: var(--form-barva-chyba);
    outline-color: var(--form-barva-chyba);
    box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.22);
}

/* Zaškrtávátko kreslí rámeček prohlížeč sám, takže na něj `border-color`
   nesedne — `accent-color` obarví i zaškrtnuté políčko. */
input[type="checkbox"].is-invalid,
input[type="radio"].is-invalid {
    accent-color: var(--form-barva-chyba);
    outline: 2px solid var(--form-barva-chyba);
    outline-offset: 2px;
    box-shadow: none;
}

/* Popisek chybného pole zčervená taky — oko hledá nejdřív text, ne rámeček.

   ⚠️ TŘÍDA SE ZDVOJUJE. `.ma-chybu > label` má specificitu (0,1,1), přesně
      jako `.form-group label` ve stylopisu webu — a při shodě vyhrává ten,
      kdo se načte později, tedy stylopis webu. Změřeno: popisek zůstal
      šedý `rgb(75,80,88)` místo červené. Zdvojení dává (0,2,1) a pořadí
      souborů už nerozhoduje. */
.ma-chybu.ma-chybu > label,
.ma-chybu.ma-chybu > .form-label,
.ma-chybu.ma-chybu > .jta-contact__label {
    color: var(--form-barva-chyba);
}

/* Krátké zacukání při doskoku na pole. Je to JEDINÁ animace, která hýbe
   prvkem — proto ji `prefers-reduced-motion` níž vypíná úplně. */
.is-tresk {
    animation: form-tresk 0.34s ease;
}

@keyframes form-tresk {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-5px); }
    45%      { transform: translateX(4px); }
    70%      { transform: translateX(-2px); }
}

/* ── Souhrn u odesílacího tlačítka ─────────────────────────────────────── */

/* 🔴 PROČ DRUHÉ MÍSTO PRO TUTÉŽ INFORMACI. Kdo mačká „Odeslat", dívá se na
      tlačítko — ne na pole o dvě obrazovky výš. Bez tohohle panelu se po
      kliknutí navenek nestalo nic a vypadalo to jako nefunkční tlačítko.

   🔴 Panel má VLASTNÍ plochu i barvu písma, ne `inherit`. Formulář odběru
      stojí v tmavé patičce, kontaktní formulář na světlé kartě — bez pevných
      hodnot by byl na jednom z nich nečitelný. */
.form-souhrn.form-souhrn {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 18px;

    /* ⚠️ Formulář bývá dvousloupcová mřížka a panel je její přímou
          položkou — bez tohohle spadne do levého sloupce a je o polovinu
          užší než formulář, takže se seznam píše přes čtyři řádky.
          Mimo mřížku se obojí tiše ignoruje. */
    grid-column: 1 / -1;
    flex-basis: 100%;
    padding: 14px 18px;
    border: 1px solid var(--form-barva-chyba-linka);
    border-left: 3px solid var(--form-barva-chyba);
    background: var(--form-barva-chyba-plocha);
    color: var(--form-barva-chyba);
    font-size: 0.94rem;
    line-height: 1.5;
    text-align: left;
    animation: form-chyba-prichod 0.22s ease-out;
}

.form-souhrn__telo {
    min-width: 0;          /* bez toho dlouhý popisek roztáhne panel z karty */
}

.form-souhrn__nadpis.form-souhrn__nadpis {
    margin: 0;
    color: var(--form-barva-chyba);
    font-weight: 600;
}

.form-souhrn__seznam.form-souhrn__seznam {
    margin: 7px 0 0;
    padding: 0;
    list-style: none;
}

.form-souhrn__seznam li {
    margin: 3px 0 0;
    color: var(--form-barva-chyba);
    font-size: 0.9rem;
}

/* Odkaz na pole je `<button type="button">` (uvnitř formuláře nesmí být nic,
   co by ho odeslalo), ale chová se a vypadá jako odkaz. */
.form-souhrn__odkaz.form-souhrn__odkaz {
    padding: 0;
    border: 0;
    background: none;
    color: var(--form-barva-chyba);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.form-souhrn__odkaz.form-souhrn__odkaz:hover,
.form-souhrn__odkaz.form-souhrn__odkaz:focus-visible {
    text-decoration-thickness: 2px;
}

.form-souhrn__duvod::before {
    content: " — ";
}

.form-souhrn__veta.form-souhrn__veta {
    margin: 7px 0 0;
    color: var(--form-barva-chyba);
}

/* ── Ochrana proti robotům není nastavená ──────────────────────────────── */

/* Formulář v tom stavu zprávy NEPŘIJME (`Captcha::branka()`), takže
   upozornění musí být vidět na první pohled — ne drobný text pod polem. */
.form-captcha-vypnuto {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-left: 3px solid var(--form-barva-pozor-linka);
    background: var(--form-barva-pozor-plocha);
    color: #4a3b00;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Řádek pro správce webu navazuje na ten předchozí, proto bez horní mezery. */
.form-captcha-vypnuto--admin {
    margin-top: -8px;
    font-size: 0.875rem;
}

.form-captcha-vypnuto--admin a {
    color: inherit;
    text-decoration: underline;
}

/* ── Kdo si vypnul animace, nemá je dostat ─────────────────────────────── */

/* ⚠️ Netlumí se jen rychlost, animace se VYPÍNAJÍ. Zacukání pole je přesně
      ten pohyb, který u vestibulární poruchy dělá potíže — a informaci nese
      barva, ikona i text, takže se bez něj nic neztratí. */
@media (prefers-reduced-motion: reduce) {
    .form-field-error,
    .form-souhrn.form-souhrn,
    .is-tresk {
        animation: none;
    }
}

/* ── Pokladna ────────────────────────────────────────────────────────────
   🔴 Cena se nesmí zalomit ani slepit s názvem; platí pro každý vzhled webu.
      Hlášeno 30. 10. 2026 (aaalko.cz): „1 420 Kč" na dvou řádcích těsně u textu. */
.ec-summary__row, .ec-summary__total { display: flex; justify-content: space-between; gap: 24px; }
.ec-summary__row > :first-child { min-width: 0; }
.ec-summary__row > .ec-num, .ec-summary__total > .ec-num { flex: none; white-space: nowrap; text-align: right; }

.ec-sbaleni { margin-top: 16px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 8px; }
.ec-sbaleni__nadpis { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 16px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; }
.ec-sbaleni__nadpis::-webkit-details-marker { display: none; }
.ec-sbaleni__nadpis svg { display: block; flex: none; transition: transform 200ms; }
.ec-sbaleni[open] .ec-sbaleni__nadpis svg { transform: rotate(180deg); }
.ec-sbaleni > :not(summary) { margin-left: 16px; margin-right: 16px; }
.ec-sbaleni > :last-child:not(summary) { margin-bottom: 16px; }
.ec-sbaleni + .ec-field { margin-top: 16px; }

/* Množství v košíku: `is-auto` schová Přepočítat jen tam, kde běží skript. */
.ec-qty.is-auto .ec-qty__btn { display: none; }
.ec-stepper button:disabled { opacity: .4; cursor: default; }