/**
 * checkout-layout.css — vlastník: NÁKUP. Doplnok k checkout.css.
 *
 * Opravy rozloženia po audite dizajnu a skeptikovi (20. 10. 2026). Samostatný
 * súbor, lebo checkout.css je pri hranici 44 KB (CLAUDE.md: malé súbory).
 * Načítava sa za checkout.css (pokladňa, ďakovná stránka, sledovanie).
 */

/* ------------------------------------------------------------------ *
 * R1 Ukazovateľ krokov: Astra `.entry-content ol` pridáva 20 px vľavo
 * ------------------------------------------------------------------ */
.tk-co .tk-co-steps { padding: 0; }

/* Pri 360 px sa „Doprava a platba" (~170 px) nezmestila vedľa prvej pilulky. */
@media (max-width: 379px) {
    .tk-co .tk-co-steps { gap: 8px; }
    .tk-co .tk-co-steps__item { padding: 6px 12px 6px 6px; gap: 6px; font-size: 13.5px; }
    .tk-co .tk-co-steps__item:not(:first-child) { margin-left: 16px; }
    .tk-co .tk-co-steps__item:not(:first-child)::after { left: -14px; width: 10px; }
}

/* R2 Posun na začiatok kroku nesmie skončiť pod lepiacou hlavičkou. */
.tk-co__head { scroll-margin-top: calc(var(--tk-header-h, 64px) + 16px); }

/* D2 Prázdny obal hlásení WooCommerce robil v stĺpci `.tk-co` medzeru navyše. */
.tk-co .woocommerce-notices-wrapper:empty { display: none; }

/* ------------------------------------------------------------------ *
 * D3 Karta Účet: rovnaký odstup nad a pod „alebo"
 * Len v pokladni — prihlásenie a registrácia majú vlastné rozloženie.
 * ------------------------------------------------------------------ */
.tk-co-account .tk-auth__alebo { margin: 0; }
.tk-co-account__pane > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * V5 Veta o Stripe len pri platbe kartou
 * Keď je vybraná iná platba, veta pod tlačidlom mätie. :has() rozhodne
 * hneď pri vykreslení; nakup.js to isté nastaví atribútom `hidden` pre
 * prehliadače bez :has() (a po prekreslení fragmentu AJAXom).
 * ------------------------------------------------------------------ */
.tk-place-order__secure[hidden] { display: none; }
form.checkout:has(input[name="payment_method"]:checked):not(:has(input[name="payment_method"][value*="stripe"]:checked)) .tk-place-order__secure {
    display: none;
}

/* ------------------------------------------------------------------ *
 * V4 Ďakovná stránka: ľavý stĺpec lepí, stredný desktop užší pravý
 * ------------------------------------------------------------------ */
/* QR sa v riadku zmršťoval (183 px namiesto 200) a visel v strede výšky
   zoznamu údajov. Plná veľkosť a zarovnanie hore s prvým riadkom (IBAN). */
@media (min-width: 640px) {
    .tk-ty-pay__qr { flex-shrink: 0; align-self: flex-start; }
}

/* 1024–1279: pri 560 px vpravo ostávalo nadpisu 328 px (štyri riadky).
   Pravý stĺpec 440 px, QR nad údajmi, aby sa IBAN zmestil. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .tk-ty__grid { grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; }
    .tk-ty-pay__body { flex-direction: column; gap: 18px; }
}

/* Ľavý stĺpec (stav, ďalšie kroky, portál) ostáva na očiach pri dlhom pravom.
   Len na dosť vysokom okne, inak by lepiaci stĺpec schoval odkaz pod okraj. */
@media (min-width: 1024px) and (min-height: 860px) {
    .tk-ty__main { position: sticky; top: calc(var(--tk-header-h, 80px) + 24px); }
}

/* ------------------------------------------------------------------ *
 * Záloha za :has() (checkout.css .tk-choice:has(...)): triedu .is-selected
 * prepína nakup.js. Hodnoty sú tie isté ako v checkout.css.
 * ------------------------------------------------------------------ */
.tk-choice.is-selected {
    border: 2.5px solid var(--tk-navy);
    box-shadow: var(--tk-sticker-shadow-sm);
    padding: 15px;
}
.tk-choice-js .tk-choice:not(.is-selected) .tk-ship-rule { display: none; }

/* ------------------------------------------------------------------ *
 * Text chyby pod poľom (QA4 20. 10. 2026): náš z nakup.js aj inline chyba
 * WooCommerce po odoslaní. Rovnaký vzhľad ako .tk-field-error v base.css.
 * ------------------------------------------------------------------ */
.tk-co .checkout-inline-error-message {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.45;
    font-weight: var(--tk-fw-semi);
    color: var(--tk-danger);
}

/* ================================================================== *
 * Pokladňa ako súčasť webu (Samo 20. 10. 2026)
 *
 * Hlavička a pätička sú tie isté ako na webe (header.php, footer.php).
 * Obsah má preto rovnakú šírku a okraj ako košík (cart.css .tk-cart__cols),
 * aby ľavý okraj nadpisu sedel s logom. Astra obalu `.woocommerce`
 * v pokladni dáva 1200 px — pokladňa tak bola užšia a posunutá dnu.
 * ================================================================== */
body.woocommerce-checkout .entry-content > .woocommerce { max-width: none; }

/* Astra `#primary` dáva 60 px nad aj pod obsah — pod súhrnom a nad pätičkou
   vznikala prázdna plocha. Ako v košíku (cart.css): rozostupy drží `.tk-co`. */
body.woocommerce-checkout .ast-plain-container.ast-no-sidebar #primary,
body.woocommerce-checkout.ast-no-sidebar #primary { margin-top: 0; margin-bottom: 0; }

/* Nadpis a „Zabezpečená pokladňa" v jednom riadku, na úzkom pod sebou. */
.tk-co__titlerow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
}
.tk-co__secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: var(--tk-fw-semi);
    color: var(--tk-text-muted);
}
.tk-co__secure .tk-icon { flex-shrink: 0; color: var(--tk-success); }

/* ------------------------------------------------------------------ *
 * Rýchla platba (Stripe Link / Apple Pay / Google Pay)
 *
 * Karta okolo kontajnera pluginu (inc/nakup-pokladna.php). Je viditeľná
 * hneď: Stripe v kontajneri zloženom na nulu tlačidlo nevykreslí (ostrá
 * pokladňa 20. 10. 2026: iframe 8 px, po odkrytí 56 px). Skryje sa až keď
 * ostrovček nastaví `data-tk-ece="off"` – tlačidlo neprišlo do 8 s.
 * ------------------------------------------------------------------ */
.tk-co-pane { position: relative; }
.tk-co-express { display: flex; flex-direction: column; gap: 16px; }
.tk-co[data-tk-ece="off"] .tk-co-express { display: none; }
.tk-co-express__head { display: flex; flex-direction: column; gap: 4px; }
.tk-co .tk-co-express__sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tk-text-muted); }
.tk-co-express__slot { min-width: 0; }

/* Inline okraje pluginu (1em nad tlačidlom) rozbíjali rytmus karty. */
.tk-co-express #wc-stripe-express-checkout-element { margin: 0 !important; clear: none !important; }
.tk-co-express #wc-stripe-express-checkout-element iframe { border-radius: 14px; }
/* „— ALEBO —" pluginu nahrádza náš oddeľovač pod kartou (tvar ako v karte Účet). */
.tk-co-express #wc-stripe-express-checkout-button-separator { display: none !important; }
.tk-co .tk-co-express__alebo { margin: 0; }

/* ------------------------------------------------------------------ *
 * Rytmus a stĺpce
 * ------------------------------------------------------------------ */
.tk-co-card .tk-step--plain { font-size: 21px; }
.tk-co .tk-co-account__hint { margin: 0; }

/* Tablet: jeden stĺpec, ale nie roztiahnutý na 700+ px. */
@media (min-width: 640px) and (max-width: 1023px) {
    .tk-co__form { max-width: 720px; width: 100%; margin-inline: auto; }
    .tk-co__head,
    .tk-co > .woocommerce-notices-wrapper,
    .tk-co > .woocommerce-NoticeGroup { max-width: 720px; width: 100%; margin-inline: auto; }
}

@media (min-width: 640px) {
    .tk-co-card .tk-step--plain { font-size: 24px; }
}

@media (min-width: 1024px) {
    .tk-co { gap: 24px; padding-block: 40px 72px; }
    /* Rovnaký pomer ako košík: formulár dostane miesto, súhrn 420 px. */
    .tk-co__form { grid-template-columns: minmax(0, 1fr) 420px; gap: 44px; }
    .tk-co__titlerow { justify-content: flex-start; gap: 6px 20px; }
}

/* ------------------------------------------------------------------ *
 * Úzky mobil (kontrola Codex 20. 10. 2026)
 * ------------------------------------------------------------------ */
@media (max-width: 639px) {
    /*
     * Voľby dopravy a platby: cena v riadku s názvom, popis pod nimi cez
     * celú šírku (aj pod cenou). Predtým bol popis zovretý medzi rádiom
     * a cenou a pri 390 px mal ~170 px — päť riadkov na dve vety.
     * `display: contents` z obsahu urobí bunky mriežky; `order` z checkout.css
     * (názov 1, odznak 2, popis 3, pravidlo 4) platí ďalej.
     */
    .tk-co .tk-choice {
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 4px;
        align-items: start;
    }
    .tk-co .tk-choice__radio { grid-column: 1; grid-row: 1; }
    .tk-co .tk-choice__body { display: contents; }
    .tk-co .tk-choice__body > * { grid-column: 2 / 4; }
    .tk-co .tk-choice__body > .tk-choice__name { grid-column: 2; grid-row: 1; }
    .tk-co .tk-choice__price,
    .tk-co .tk-choice__icon { grid-column: 3; grid-row: 1; }
    .tk-co .tk-ship-badge { justify-self: start; }

    /* Súhrn: názov tabuľky cez celú šírku vedľa obrázka, cena pod ním vpravo. */
    .tk-co-sum__item {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 2px;
        align-items: center;
    }
    .tk-co-sum__thumb { grid-column: 1; grid-row: 1 / span 3; width: 56px; height: 56px; border-radius: 14px; align-self: start; }
    .tk-co-sum__thumb img { width: 52px; height: 52px; }
    .tk-co-sum__info { display: contents; }
    .tk-co-sum__info > * { grid-column: 2 / 4; }
    .tk-co-sum__name { grid-row: 1; }
    .tk-co-sum__info > .tk-co-sum__qty { grid-column: 2; grid-row: 2; }
    .tk-co-sum__price { grid-column: 3; grid-row: 2; }
}

/* 320–379 px: o 4 px menšie vnútorné okraje kariet a volieb — pri 320 px
   mal názov dopravy len ~100 px a lámal sa po slovách. */
@media (max-width: 379px) {
    .tk-co-card { padding: 16px; }
    .tk-co .tk-choice { padding: 12px; column-gap: 10px; }
    .tk-co .tk-choice:has(.tk-choice__radio:checked),
    .tk-co .tk-choice:has(input[type="hidden"]),
    .tk-co .tk-choice.is-selected { padding: 11px; }
}

/* 320–359 px: oba kroky v jednom riadku (predtým druhý spadol pod prvý
   aj so spojovníkom). Spojovník tu nahrádza medzera. */
@media (max-width: 359px) {
    .tk-co .tk-co-steps { gap: 6px; flex-wrap: nowrap; }
    .tk-co .tk-co-steps__item { padding: 5px 10px 5px 5px; gap: 6px; font-size: 13px; }
    .tk-co .tk-co-steps__item::before { width: 24px; height: 24px; font-size: 12px; }
    .tk-co .tk-co-steps__item:not(:first-child) { margin-left: 0; }
    .tk-co .tk-co-steps__item:not(:first-child)::after { display: none; }
}