/**
 * checkout.css — vlastník: NÁKUP (mapa v inc/enqueue.php, zadanie IMPL.md).
 * Systém: docs/DESIGN.md. Mobil najprv; spoločné komponenty sú v components.css.
 * Návrh: eshop/Pokladna_{M,D}, Dakujeme_{M,D}, Sledovanie_{M,D}.dc.html.
 * Načítava sa na pokladni, ďakovnej stránke aj pri sledovaní objednávky.
 */

body.woocommerce-checkout,
body.page-sledovanie-objednavky { background: var(--tk-canvas-alt); }

/* ------------------------------------------------------------------ *
 * Rozloženie pokladne
 * ------------------------------------------------------------------ */
.tk-co {
    padding-block: 0 48px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tk-co__head { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }

.tk-co__title {
    margin: 0;
    font-family: var(--tk-font-display);
    font-weight: var(--tk-fw-heavy);
    letter-spacing: var(--tk-ls-display);
    font-size: 26px;
    line-height: 1.05;
}

/*
 * Ukazovateľ krokov. Nahradil podnadpis, takže hlavička neporástla.
 *
 * Krok NIE je roztiahnutý na polovicu šírky (`flex: 1 1 0` tam bolo do
 * 6. 10. 2026 večer). Dve pilulky cez celú stránku vyzerali ako formulárové
 * polia, nie ako ukazovateľ postupu. Šírka je preto podľa obsahu.
 */
.tk-co-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: tkstep;
    flex-wrap: wrap;
}

.tk-co-steps__item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;             /* dotykový cieľ */
    padding: 6px 16px 6px 8px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--tk-muted);
    font-size: 14px;
    font-weight: var(--tk-fw-semi);
    line-height: 1.2;
    cursor: pointer;
}

.tk-co-steps__item::before {
    counter-increment: tkstep;
    content: counter(tkstep);
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--tk-tint);
    color: var(--tk-muted);
    font-size: 13px;
}

/* Spojovník medzi krokmi, aby to čítalo ako postupnosť, nie ako dve tlačidlá. */
.tk-co-steps__item:not(:first-child) { margin-left: 22px; position: relative; }

.tk-co-steps__item:not(:first-child)::after {
    content: '';
    position: absolute;
    left: -17px;
    top: 50%;
    width: 12px;
    height: 1px;
    background: var(--tk-line);
}

.tk-co-steps__item.is-current {
    background: var(--tk-navy);
    border-color: var(--tk-navy);
    color: #fff;
}

.tk-co-steps__item.is-current::before { background: #fff; color: var(--tk-navy); }
.tk-co-steps__item.is-done { color: var(--tk-navy); }
.tk-co-steps__item.is-done::before { background: var(--tk-accent); color: #fff; }

/* Panely krokov. Bez JS sú viditeľné oba a pokladňa funguje po starom. */
.tk-step--plain { display: block; }

.tk-co-pane { display: flex; flex-direction: column; gap: 16px; }
.tk-co-pane[hidden] { display: none; }

.tk-co-pane__nav { display: flex; flex-direction: column; gap: 10px; }

.tk-co-pane__error {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--tk-danger);
}

.tk-co-pane__error[hidden] { display: none; }
.tk-co-pane__nav--next #tk-co-next { width: 100%; }
.tk-co-pane__nav--back { margin-bottom: -4px; align-items: flex-start; }
.tk-co-pane__nav--back #tk-co-back { align-self: flex-start; gap: 6px; }

.tk-co__form { display: grid; gap: 20px; margin: 0; }
.tk-co__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tk-co__aside { min-width: 0; }

/*
 * Hlásenia, ktoré WooCommerce vkladá DOVNÚTRA formulára.
 *
 * Pri zlyhanej validácii robí jeho checkout.js
 * `$('form.checkout').prepend('<div class="woocommerce-NoticeGroup…">')`.
 * Náš formulár je dvojstĺpcová mriežka, takže hlásenie zabralo prvú bunku,
 * karty sa posunuli do pravého stĺpca a súhrn objednávky spadol o riadok
 * nižšie — pokladňa vyzerala rozbito (Samo 6. 10. 2026).
 *
 * Preto musí všetko, čo sa do formulára takto dostane, ísť cez obe bunky.
 */
.tk-co__form > .woocommerce-NoticeGroup,
.tk-co__form > .woocommerce-error,
.tk-co__form > .woocommerce-message,
.tk-co__form > .woocommerce-info {
    grid-column: 1 / -1;
}

/* Hlásenia WooCommerce nad formulárom */
.tk-co .woocommerce-NoticeGroup,
.tk-co .woocommerce-error,
.tk-co .woocommerce-message,
.tk-co .woocommerce-info { margin: 0; }

.tk-co .woocommerce-error {
    list-style: none;
    padding: 14px 18px;
    border-radius: 18px;
    background: var(--tk-danger-bg);
    color: var(--tk-danger);
    border: 0;
    font-weight: var(--tk-fw-semi);
}
.tk-co .woocommerce-error::before { display: none; }
.tk-co .woocommerce-error li { margin: 2px 0; }

/* ------------------------------------------------------------------ *
 * Rozbaľovací súhrn (mobil)
 * ------------------------------------------------------------------ */
.tk-co-mini {
    margin-inline: calc(var(--tk-gutter) * -1);
    background: var(--tk-canvas);
    border-bottom: 1px solid var(--tk-line);
}

.tk-co-mini__bar {
    list-style: none;
    min-height: 56px;
    padding: 0 var(--tk-gutter);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--tk-tint);
    font-weight: var(--tk-fw-bold);
    font-size: 15px;
    cursor: pointer;
}
.tk-co-mini__bar::-webkit-details-marker { display: none; }
.tk-co-mini__label { flex-grow: 1; }
.tk-co-mini[open] .tk-co-mini__label { text-decoration: underline; }
.tk-co-mini__items { padding: 18px var(--tk-gutter); }

/* ------------------------------------------------------------------ *
 * Karty krokov
 * ------------------------------------------------------------------ */
.tk-co-card {
    background: var(--tk-canvas);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.tk-co .tk-step {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--tk-font-display);
    font-weight: var(--tk-fw-heavy);
    font-size: 21px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--tk-text);
    border: 0;
}
.tk-co .tk-step::after { display: none; }

.tk-co .tk-step__num {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--tk-navy);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--tk-font-mono);
    font-size: 15px;
    letter-spacing: 0;
}

/* WooCommerce vlastné nadpisy v kartách */
.tk-co .woocommerce-billing-fields > h3,
.tk-co .woocommerce-additional-fields > h3 { display: none; }

/* ------------------------------------------------------------------ *
 * Polia (výstup woocommerce_form_field)
 * ------------------------------------------------------------------ */
.tk-co-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.tk-co.tk-co .form-row {
    margin: 0;
    padding: 0;
    width: auto;
    float: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.tk-co.tk-co .form-row::before,
.tk-co.tk-co .form-row::after { display: none; }

.tk-co.tk-co .form-row label:not(.tk-terms__label):not(.checkbox) {
    margin: 0;
    font-size: 14px;
    font-weight: var(--tk-fw-bold);
    line-height: 1.3;
    color: var(--tk-text);
}

.tk-co.tk-co .form-row .required { color: var(--tk-danger); text-decoration: none; border: 0; }
.tk-co.tk-co .form-row .optional { font-weight: var(--tk-fw-medium); color: var(--tk-text-muted); }
.tk-co.tk-co .woocommerce-input-wrapper { display: block; position: relative; }

.tk-co.tk-co .form-row input.input-text,
.tk-co.tk-co .form-row textarea,
.tk-co.tk-co .form-row select,
.tk-co.tk-co .select2-container .select2-selection--single {
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    border: 1.5px solid var(--tk-line-strong);
    border-radius: var(--tk-r-input);
    padding: 13px 16px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    color: var(--tk-text);
    background: var(--tk-canvas);
    box-shadow: none;
}

.tk-co.tk-co .form-row textarea { min-height: 96px; resize: vertical; }

.tk-co.tk-co .select2-container .select2-selection--single { display: flex; align-items: center; padding-block: 0; }
.tk-co.tk-co .select2-container .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.4; color: var(--tk-text); }
.tk-co.tk-co .select2-container .select2-selection--single .select2-selection__arrow { height: 100%; right: 10px; }

.tk-co.tk-co .form-row input.input-text:focus,
.tk-co.tk-co .form-row textarea:focus,
.tk-co.tk-co .form-row select:focus,
.tk-co.tk-co .select2-container--focus .select2-selection--single {
    outline: 3px solid var(--tk-periwinkle);
    outline-offset: 1px;
    border-color: var(--tk-accent);
}

.tk-co.tk-co .form-row.woocommerce-invalid input.input-text,
.tk-co.tk-co .form-row.woocommerce-invalid select,
.tk-co.tk-co .form-row.woocommerce-invalid .select2-selection { border-color: var(--tk-danger); }
.tk-co.tk-co .form-row.woocommerce-invalid label { color: var(--tk-danger); }

.tk-co.tk-co .form-row .description {
    margin: 0;
    padding: 0;
    background: none;
    color: var(--tk-text-muted);
    font-size: 13px;
    line-height: 1.5;
    position: static;
    display: block !important; /* WooCommerce popis skrýva, kým pole nemá fokus */
}
.tk-co.tk-co .form-row .description::before { display: none; }

/* Heslo: vlastné „Zobraziť", nie oko z WooCommerce */
.tk-co.tk-co .show-password-input { display: none; }
.tk-co-pw__wrap { position: relative; display: block; }
.tk-co-pw__wrap input { padding-right: 96px !important; }
.tk-co-pw__toggle {
    position: absolute;
    right: 6px;
    top: 4px;
    height: 44px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: var(--tk-fw-bold);
    font-size: 14px;
    color: var(--tk-accent);
    cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * Karta 1: Účet
 * ------------------------------------------------------------------ */
.tk-co-account__switch { height: 54px; }
.tk-co-account__pane { display: flex; flex-direction: column; gap: 16px; }
.tk-co-account__pane[hidden] { display: none; }
.tk-co-account__hint { margin: 0; font-size: 14px; }
.tk-co-account__who { margin: 0; color: var(--tk-text-body); }
.tk-co-account__login-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.tk-co-account__login-row a { font-weight: var(--tk-fw-semi); font-size: 14.5px; }

/* ------------------------------------------------------------------ *
 * Karta 2: firma
 * ------------------------------------------------------------------ */
.tk-co-firm {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: var(--tk-fw-bold);
    font-size: 15px;
    color: var(--tk-text);
    cursor: pointer;
    align-self: flex-start;
}

.tk-co-firm__input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.tk-co-firm__track {
    width: 48px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--tk-well);
    box-shadow: var(--tk-well-shadow);
    position: relative;
    transition: background var(--tk-dur-fast) ease;
}

.tk-co-firm__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--tk-knob-shadow);
    transition: transform var(--tk-dur-spring) var(--tk-ease-spring);
}

.tk-co-firm__input:checked + .tk-co-firm__track { background: var(--tk-accent); box-shadow: none; }
.tk-co-firm__input:checked + .tk-co-firm__track .tk-co-firm__knob { transform: translateX(20px); }
.tk-co-firm__input:focus-visible + .tk-co-firm__track { outline: 3px solid var(--tk-periwinkle); outline-offset: 2px; }
.tk-co-firm__fields[hidden] { display: none; }

/* ------------------------------------------------------------------ *
 * Voľby dopravy a platby (karty s rádiom)
 * ------------------------------------------------------------------ */
.tk-ship-table,
.tk-ship-table tbody,
.tk-ship-table tr,
.tk-ship-table td {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    width: auto;
}

.tk-ship-table tbody {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
.tk-ship-table tr:not(.tk-ship-opt) { grid-column: 1 / -1; }
.tk-ship-empty td { color: var(--tk-text-muted); font-size: 15px; }

.tk-pay__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tk-pay { background: none; border-radius: 0; }
.tk-pay__box {
    margin: 8px 0 0;
    padding: 14px 16px;
    background: var(--tk-canvas-alt);
    border-radius: 16px;
    font-size: 14px;
}
.tk-pay__box::before { display: none; }

/*
 * Platobný formulár Stripe.
 *
 * Od verzie 10.5 si Stripe vzhľad polí v iframe **odvodzuje sám** z našej
 * stránky: plugin si do formulára vloží skrytý `input.input-text`, prečíta
 * jeho vypočítaný štýl a podľa neho nastaví Elements. Náš web ale štýluje
 * `.tk-input`, nie `.input-text`, takže Stripe čítal predvolený vzhľad
 * prehliadača — odtiaľ to sivé pole s ostrými rohmi (Samo 5. 10. 2026).
 *
 * Preto tu nestačí obaliť iframe. Treba dať `.input-text` v pokladni ten istý
 * vzhľad ako `.tk-input`; Stripe ho potom prevezme do svojich polí sám.
 */
.tk-pay__box .input-text,
#wc-stripe-upe-form .input-text,
#wc-stripe-hidden-style-input {
    box-sizing: border-box;
    min-height: 52px;
    border: 1.5px solid var(--tk-line-strong);
    border-radius: var(--tk-r-input);
    padding: 13px 16px;
    font-family: var(--tk-font-body, inherit);
    font-size: 16px;
    color: var(--tk-text);
    background: var(--tk-canvas);
}

/*
 * Kontajner pluginu: náš papier namiesto sivého rámu.
 *
 * `.tk-pay__box` samo o sebe nestačí — WooCommerce má vlastné `.payment_box`
 * s rovnakou špecificitou a načítava sa po nás, takže vyhralo jeho sivé
 * `#EFEFEF` (overené na živej pokladni 5. 10. 2026). Preto `.tk-pay` navyše.
 */
.tk-pay .tk-pay__box {
    background: var(--tk-canvas-alt);
    border-radius: 16px;
}

.tk-pay__box .wc-upe-form,
.tk-pay__box #wc-stripe-upe-form,
.tk-pay__box .wc-stripe-upe-element {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* Hlásenie „Test mode" nech nevyzerá ako cudzí prvok. */
.tk-pay__box .wc-stripe-test-mode-notice,
.tk-pay__box .woocommerce-info {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--tk-canvas);
    border: 1px solid var(--tk-line-strong);
    font-size: 13px;
    line-height: 1.5;
    color: var(--tk-text-muted);
}

/*
 * Expresná platba (Link, Apple Pay, Google Pay) nad formulárom.
 *
 * Plugin ukazuje kontajner aj „— ALEBO —" inline štýlom `display: block`,
 * keď mu Stripe ohlási dostupnú metódu, aj keď sa tlačidlo nevykreslí
 * (ostrá pokladňa 20. 10. 2026: prázdne miesto a osirelý oddeľovač).
 * Kontajner sa NEskladá na nulu – v zloženom Stripe tlačidlo nevykreslí
 * (iframe 8 px, overené naživo). Keď tlačidlo do 8 s nepríde, ostrovček
 * v `inc/nakup-pokladna.php` nastaví `data-tk-ece="off"` a kontajner sa
 * skryje. `!important` je naschvál — prebíja inline štýl pluginu.
 */
.tk-co[data-tk-ece="off"] #wc-stripe-express-checkout-element {
    display: none !important;
}
.tk-co:not([data-tk-ece="on"]) #wc-stripe-express-checkout-button-separator {
    display: none !important;
}

/* Chybová hláška Stripe v našej červenej, nie v prehliadačovej. */
.tk-pay__box #wc-stripe-upe-errors:not(:empty) {
    margin-top: 10px;
    font-size: 14px;
    color: var(--tk-danger, #C2341D);
}

.tk-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1.5px solid var(--tk-line-strong);
    border-radius: 18px;
    background: var(--tk-canvas);
    cursor: pointer;
    min-height: 44px;
    transition: border-color var(--tk-dur-fast) ease, box-shadow var(--tk-dur-fast) ease;
}

.tk-choice:has(.tk-choice__radio:checked),
.tk-choice:has(input[type="hidden"]) {
    border: 2.5px solid var(--tk-navy);
    box-shadow: var(--tk-sticker-shadow-sm);
    padding: 15px;
}

.tk-choice__radio,
.tk-co input.tk-choice__radio {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--tk-accent);
    flex-shrink: 0;
}

.tk-choice__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 8px;
    flex-grow: 1;
    min-width: 0;
}

.tk-choice__name { font-size: 15.5px; line-height: 1.35; order: 1; }
.tk-choice__sub,
.tk-ship-note {
    order: 3;
    flex-basis: 100%;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--tk-text-muted);
}

.tk-ship-badge {
    order: 2;
    display: inline-block;
    background: var(--tk-periwinkle);
    color: var(--tk-navy);
    border: 2px solid var(--tk-navy);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: var(--tk-fw-bold);
    transform: rotate(-2deg);
}

.tk-ship-rule {
    order: 4;
    flex-basis: 100%;
    margin-top: 4px;
    background: var(--tk-tint);
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 13.5px;
    font-weight: var(--tk-fw-semi);
    color: var(--tk-navy);
}

/* Poznámka Najrýchlejšie len pri zvolenej možnosti */
.tk-choice:not(:has(.tk-choice__radio:checked)):not(:has(input[type="hidden"])) .tk-ship-rule { display: none; }

.tk-choice__price { font-size: 15px; white-space: nowrap; flex-shrink: 0; }
.tk-choice__price .amount { font: inherit; }
.tk-choice__icon { color: var(--tk-accent); flex-shrink: 0; display: flex; }

/* Pole SPS Balíkovo (Tabky_Shipping) pod voľbami */
/*
 * Výber miesta nie je samostatné pole kdesi pod zoznamom, ale panel, ktorý
 * vizuálne visí na zvolenej doprave (Samo 6. 10. 2026: „to by som chcel
 * krajšie zapracovať"). Odsadenie zľava a prúžok v akcentnej farbe hovoria,
 * že patrí k voľbe nad ním.
 */
.tk-ship-point {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: -2px 0 0 14px;
    padding: 12px 14px;
    border-left: 2px solid var(--tk-accent);
    border-radius: 0 12px 12px 0;
    background: var(--tk-tint);
}

.tk-ship-point[hidden] { display: none; }
.tk-ship-point .tk-field-hint { margin: 0; }

/* Popisok s poznámkou „povinné" namiesto hviezdičky — tá sa vykresľovala
 * ako `abbr` s bodkovaným podčiarknutím a vyzerala ako preklep. */
.tk-pickup-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-size: 13.5px;
}

.tk-pickup-label em {
    font-style: normal;
    font-weight: var(--tk-fw-medium);
    font-size: 12.5px;
    color: var(--tk-muted);
}

/* Vybrané miesto a tlačidlo vedľa seba. Na mobile pod sebou. */
.tk-pickup-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tk-pickup-row .tk-pickup-chosen { flex: 1 1 220px; min-width: 0; }
.tk-pickup-btn { flex: 0 0 auto; }

/* Výdajné miesto z widgetu Packety aj SPS */
.tk-ship-point #tk-packeta-open,
.tk-ship-point #tk-sps-open { align-self: flex-start; }

/*
 * Mapa SPS Balíkovo v prekryve cez celú obrazovku, aby sa správala rovnako
 * ako mapa Packety — na mobile aj na počítači. Widget kreslí dovnútra a iframe
 * vkladá BEZ výšky, takže bez týchto pravidiel je mapa vysoká nula pixelov
 * a vyzerá to, že sa nenačítala. `!important` je tu preto, že widget si štýly
 * píše inline a prebil by nás.
 */
.tk-sps-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(10, 26, 53, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.tk-sps-modal[hidden] { display: none; }

.tk-sps-modal__panel {
    background: var(--tk-canvas);
    border-radius: 16px;
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tk-sps-modal__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--tk-line);
    font-size: 15px;
}

.tk-sps-modal__close {
    appearance: none;
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: var(--tk-muted);
    /* Dotykový cieľ, nie len krížik. */
    min-width: 44px;
    min-height: 44px;
}

.tk-sps-modal__close:hover { color: var(--tk-navy); }

.tk-sps-map { flex: 1 1 auto; min-height: 460px; }
.tk-sps-map iframe {
    display: block !important;
    width: 100% !important;
    height: 460px !important;
    min-height: 460px !important;
    border: 0 !important;
}
.tk-sps-map > div { width: 100%; }

/* Kým je mapa otvorená, stránka pod ňou sa nescrolluje. */
body.tk-no-scroll { overflow: hidden; }

@media (max-width: 782px) {
    .tk-sps-modal { padding: 0; }
    .tk-sps-modal__panel { max-width: none; height: 100%; max-height: 100%; border-radius: 0; }
    .tk-sps-map { min-height: 0; }
    .tk-sps-map iframe { height: 100% !important; min-height: 70vh !important; }
}

.tk-sps-manual { display: flex; flex-direction: column; gap: 6px; }
.tk-sps-manual[hidden] { display: none; }

.tk-pickup-chosen {
    margin: 0;
    background: var(--tk-canvas);
    border: 1px solid var(--tk-line);
    border-radius: 10px;
    padding: 8px 12px 8px 32px;
    font-size: 13.5px;
    font-weight: var(--tk-fw-medium);
    line-height: 1.45;
    color: var(--tk-navy);
    position: relative;
}

/* Špendlík, nech je na prvý pohľad jasné, že ide o miesto na mape. */
.tk-pickup-chosen::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 11px;
    width: 10px;
    height: 10px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--tk-accent);
}

.tk-pickup-error {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--tk-danger);
}

.tk-pickup-chosen[hidden],
.tk-pickup-error[hidden] { display: none; }

.tk-co-notes { margin-top: 4px; }

/* ------------------------------------------------------------------ *
 * Súhrn
 * ------------------------------------------------------------------ */
.tk-co-summary {
    background: var(--tk-canvas);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-card);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 24px 50px rgba(10, 26, 53, .08);
}

.tk-co-summary__title {
    margin: 0;
    font-family: var(--tk-font-display);
    font-weight: var(--tk-fw-heavy);
    letter-spacing: var(--tk-ls-display);
    font-size: 24px;
    line-height: 1.1;
}

.tk-co-sum { display: flex; flex-direction: column; gap: 14px; }
.tk-co-sum__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tk-co-sum__item { display: flex; gap: 14px; align-items: center; }

.tk-co-sum__thumb {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 18px;
    background: var(--tk-canvas-alt);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.tk-co-sum__thumb img { width: 66px; height: 66px; object-fit: contain; margin: 0; }

.tk-co-sum__info { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.tk-co-sum__name { font-size: 15px; line-height: 1.3; }
.tk-co-sum__qty { font-size: 13px; color: var(--tk-text-muted); }
.tk-co-sum__qty .amount { font-weight: inherit; }
.tk-co-sum__price { font-size: 15px; white-space: nowrap; }
.tk-co-sum__price .amount,
.tk-co-sum__row .amount { font: inherit; }

.tk-co-sum__row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.tk-co-sum__ship-name { color: var(--tk-text-body); }
.tk-co-sum__strong { font-weight: var(--tk-fw-bold); white-space: nowrap; }

.tk-co-sum__total {
    border-top: 1px solid var(--tk-line);
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.tk-co-sum__total > b:first-child { font-size: 18px; }
.tk-co-sum__total-value,
.tk-co-sum__total-value .amount {
    font-family: var(--tk-font-display);
    font-weight: var(--tk-fw-heavy);
    letter-spacing: var(--tk-ls-display);
    font-size: 28px;
    line-height: 1;
}
.tk-co-sum__note { margin: -6px 0 0; }

/* Súhlas a tlačidlo */
.tk-place-order { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
/*
 * V prvom kroku sa Objednať skrýva. `!important` tu je naschvál: WooCommerce
 * má na `.place-order` vlastné pravidlo s rovnakou špecifickosťou a v poradí
 * je za nami, takže bez neho `hidden` neplatí.
 */
.tk-co .tk-place-order[hidden] { display: none !important; }
.tk-terms .form-row { margin: 0; }
.tk-terms__label {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--tk-text-body);
    cursor: pointer;
    min-height: 44px;
    font-weight: var(--tk-fw-regular);
}
.tk-co .tk-terms__input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--tk-accent); flex-shrink: 0; }
.tk-co .tk-terms .required { display: none; }

.woocommerce .tk-co button.tk-place-order__btn,
.tk-co .tk-place-order__btn {
    width: 100%;
    min-height: 60px;
    border-radius: 18px;
    font-size: 17px;
    font-weight: var(--tk-fw-bold);
    background: var(--tk-accent);
    color: #fff;
    padding: 0 20px;
    border: var(--tk-sticker-border);
    box-shadow: var(--tk-sticker-shadow);
}
.woocommerce .tk-co button.tk-place-order__btn:hover { background: var(--tk-accent-hover); color: #fff; }

.tk-place-order__secure {
    margin: 0;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.45;
    color: var(--tk-text-muted);
}
.tk-place-order__secure .tk-icon { flex-shrink: 0; }

/* Lepiaca lišta so súčtom (mobil) */
.tk-co-bar__sum { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.tk-co-bar__label { font-size: 13px; color: var(--tk-text-muted); }
.tk-co-bar .tk-sticky-cta__price .amount { font: inherit; }
.tk-co-bar .tk-btn { flex: 0 0 auto; }

/* Blokovanie počas AJAXu: WooCommerce dáva bielu vrstvu, stačí jemnejšia */
.tk-co .blockUI.blockOverlay { background: rgba(255, 255, 255, .6) !important; border-radius: var(--tk-r-card); }

/* ------------------------------------------------------------------ *
 * Tablet a desktop
 * ------------------------------------------------------------------ */
@media (min-width: 640px) {
    .tk-co-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tk-co-grid .form-row-wide.tk-co-notes { grid-column: 1 / -1; }
    /* Dopravy ostávajú pod sebou aj na širokom (Samo 5. 10. 2026).
       V dvoch stĺpcoch mala každá možnosť inak dlhý popis, karty sa
       rozišli na výšku a tretia zostala sama pod prvou. */
    .tk-co-card { padding: 28px; gap: 18px; }
    .tk-co .tk-step { font-size: 24px; }
}

@media (min-width: 1024px) {
    .tk-co { padding-block: 20px 72px; }
    .tk-co-mini { display: none; }
    .tk-co__head { padding-top: 0; }
    /* 56 px bolo na pokladni zbytočne veľa — hlavička tlačila obsah pod fold. */
    .tk-co__title { font-size: 34px; }
    .tk-co-steps__item { font-size: 15px; }
    .tk-co__form { grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; align-items: start; }
    .tk-co__aside { position: sticky; top: calc(var(--tk-header-h, 76px) + 24px); }
    .tk-co-summary { padding: 26px; }
    .tk-co-sum__total-value,
    .tk-co-sum__total-value .amount { font-size: 32px; }
    .tk-co-bar { display: none; }
}

/* Astra dáva súhrnu a nadpisu pokladne 45 % šírky, float a rám */
.woocommerce-page.woocommerce-checkout .tk-co form #order_review,
.woocommerce-page.woocommerce-checkout .tk-co form #order_review_heading,
.woocommerce-page.woocommerce-checkout .tk-co #customer_details,
.woocommerce .tk-co #customer_details {
    width: auto;
    float: none;
    border: 0;
    padding: 0;
    margin: 0;
}
.woocommerce-page.woocommerce-checkout .tk-co #customer_details { display: flex; flex-direction: column; gap: 16px; }
.woocommerce .tk-co .col2-set .col-1,
.woocommerce .tk-co .col2-set .col-2 { width: auto; float: none; }
.woocommerce-page.woocommerce-checkout .tk-co form #order_review_heading,
.woocommerce-page.woocommerce-checkout .tk-co form #order_review {
    border-width: 0 !important;
    padding: 0 !important;
}

/* Popisky „(voliteľné)" — návrh má „(nepovinné)" priamo v názve poľa */
.tk-co.tk-co .form-row .optional { display: none; }

/* ================================================================== *
 * Ďakovná stránka (Dakujeme_M, Dakujeme_D)
 * ================================================================== */
body.woocommerce-order-received { background: var(--tk-canvas); }

.tk-ty { padding-block: 28px 48px; }
.tk-ty__grid { display: flex; flex-direction: column; gap: 26px; }
.tk-ty__main,
.tk-ty__side { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.tk-ty__side { gap: 20px; }

.tk-ty__head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

.tk-ty__stamp {
    display: inline-block;
    background: #fff;
    border-radius: 14px;
    padding: 6px 14px;
    font-family: var(--tk-font-display);
    font-weight: var(--tk-fw-heavy);
    font-size: 16px;
    letter-spacing: 0;
    transform: rotate(-3deg);
    animation: tk-ty-stamp .5s var(--tk-ease-spring) both;
}
.tk-ty__stamp--paid { background: var(--tk-periwinkle); }
.tk-ty__stamp--fail { background: var(--tk-danger-bg); color: var(--tk-danger); }

@keyframes tk-ty-stamp {
    from { transform: rotate(-12deg) scale(1.6); opacity: 0; }
    to   { transform: rotate(-3deg) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .tk-ty__stamp { animation: none; } }

.tk-ty__title {
    margin: 0;
    font-family: var(--tk-font-display);
    font-weight: var(--tk-fw-heavy);
    letter-spacing: var(--tk-ls-display);
    font-size: 34px;
    line-height: 1.02;
}
.tk-ty__lead { margin: 0; font-size: 17px; line-height: 1.55; color: var(--tk-text-body); }
.tk-ty__lead b { color: var(--tk-text); overflow-wrap: anywhere; }

.tk-ty__next { display: flex; flex-direction: column; gap: 18px; }
.tk-ty__h2,
.tk-ty__h3 {
    margin: 0;
    font-family: var(--tk-font-display);
    font-weight: var(--tk-fw-heavy);
    letter-spacing: var(--tk-ls-display);
    font-size: 24px;
    line-height: 1.1;
}
.tk-ty__h3 { font-size: 20px; }

.tk-ty-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tk-ty-steps__item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding-bottom: 20px;
    position: relative;
}
.tk-ty-steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 44px;
    bottom: 0;
    width: 2px;
    background: #E1E3F0;
}
.tk-ty-steps__item:last-child { padding-bottom: 0; }
.tk-ty-steps__num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tk-tint);
    color: var(--tk-accent);
    display: grid;
    place-items: center;
    font-family: var(--tk-font-mono);
    font-weight: var(--tk-fw-bold);
    position: relative;
    z-index: 1;
}
.tk-ty-steps__item.is-current .tk-ty-steps__num { background: var(--tk-accent); color: #fff; }
.tk-ty-steps__text { padding-top: 10px; font-size: 16px; line-height: 1.5; color: var(--tk-text-body); }
.tk-ty-steps__text b { color: var(--tk-text); }

.tk-ty__actions { margin: 0; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* Platobné údaje */
.tk-ty-pay__body { display: flex; flex-direction: column; gap: 18px; }
.tk-ty-pay__qr {
    align-self: center;
    width: 200px;
    height: 200px;
    padding: 12px;
    box-sizing: content-box;
    border: 1px solid var(--tk-line);
    border-radius: 18px;
    background: #fff;
    display: block;
}
.tk-ty-pay__qr svg { width: 100%; height: 100%; display: block; }
.tk-ty-pay__rows { margin: 0; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; min-width: 0; }
.tk-ty-pay__row {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #EEF0F6;
    padding-bottom: 10px;
}
.tk-ty-pay__cell { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.tk-ty-pay__cell dt { margin: 0; }
.tk-ty-pay__cell dd { margin: 0; font-weight: var(--tk-fw-bold); font-size: 16px; overflow-wrap: anywhere; }
.tk-ty-pay__copy {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--tk-puff-bg, var(--tk-canvas-alt));
    box-shadow: var(--tk-puff-shadow);
    font: inherit;
    font-size: 13.5px;
    font-weight: var(--tk-fw-bold);
    color: var(--tk-accent);
    cursor: pointer;
}
.tk-ty-pay__copy.is-copied { color: var(--tk-success); }
.tk-ty-pay__note { margin: 0; }
.tk-ty-pay .tk-btn { align-self: flex-start; }

.tk-ty-paid__row { display: flex; align-items: center; gap: 12px; }
.tk-ty-paid__icon { color: var(--tk-success); display: flex; }
.tk-ty-paid__label { font-size: 17px; flex-grow: 1; }
.tk-ty-paid__sum { font-weight: var(--tk-fw-bold); }
.tk-ty-paid__sum .amount { font: inherit; }
.tk-ty-paid__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tk-text-body); }

.tk-ty-order { box-shadow: none; padding: 22px; gap: 12px; }
.tk-ty-order .tk-co-sum__thumb { width: 60px; height: 60px; border-radius: 16px; }
.tk-ty-order .tk-co-sum__thumb img { width: 54px; height: 54px; }
.tk-ty-order .tk-co-sum__total-value,
.tk-ty-order .tk-co-sum__total-value .amount { font-size: 24px; }
.tk-ty-order .tk-co-sum__note { margin: 0; }

@media (min-width: 640px) {
    .tk-ty-pay__body { flex-direction: row; align-items: flex-start; gap: 22px; }
}

@media (min-width: 1024px) {
    .tk-ty { padding-block: 56px 80px; }
    .tk-ty__grid { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 56px; align-items: start; }
    .tk-ty__main { gap: 40px; }
    .tk-ty__title { font-size: 52px; }
    .tk-ty__lead { font-size: 19px; }
    .tk-ty__stamp { font-size: 20px; }
    .tk-ty__h2 { font-size: 28px; }
    .tk-ty-pay { padding: 28px; }
}

/* Mobil: platobné údaje hneď pod nadpisom, kroky až za nimi */
@media (max-width: 1023px) {
    .tk-ty__main { display: contents; }
    .tk-ty__head { order: 1; }
    .tk-ty__side { order: 2; }
    .tk-ty__next { order: 3; }
}

/* ================================================================== *
 * Sledovanie objednávky (Sledovanie_M, Sledovanie_D)
 * ================================================================== */
body.page-sledovanie-objednavky { background: var(--tk-canvas); }

.tk-track {
    padding-block: 28px 56px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.tk-track > * { width: 100%; max-width: 1000px; box-sizing: border-box; }

.tk-track__title {
    margin: 0;
    font-family: var(--tk-font-display);
    font-weight: var(--tk-fw-heavy);
    letter-spacing: var(--tk-ls-display);
    font-size: 34px;
    line-height: 1.02;
}
.tk-track__lead { margin: -10px 0 0; font-size: 17px; color: var(--tk-text-body); }

.tk-track__form { display: grid; gap: 14px; margin: 0; }
.tk-track__form .tk-field { margin: 0; }
.tk-track__submit { min-height: 52px; }

.tk-track__error {
    background: var(--tk-danger-bg);
    border-radius: 20px;
    padding: 18px;
    color: var(--tk-danger);
    font-weight: var(--tk-fw-semi);
    line-height: 1.5;
}

.tk-track__result {
    background: var(--tk-canvas);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-card);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 0 24px 50px rgba(10, 26, 53, .08);
}
.tk-track__result-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tk-track__h2 {
    margin: 0;
    font-family: var(--tk-font-display);
    font-weight: var(--tk-fw-heavy);
    letter-spacing: var(--tk-ls-display);
    font-size: 24px;
}

.tk-track-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tk-track-steps::before,
.tk-track-steps::after {
    content: "";
    position: absolute;
    left: 12.5%;
    top: 19px;
    height: 4px;
    border-radius: 4px;
}
.tk-track-steps::before { right: 12.5%; background: var(--tk-well); }
.tk-track-steps::after {
    width: var(--tk-track-fill, 0%);
    background: var(--tk-accent);
    transform-origin: left;
    animation: tk-track-grow .9s var(--tk-ease-grow, ease-out) both;
}
@keyframes tk-track-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .tk-track-steps::after { animation: none; } }

.tk-track-steps__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    min-width: 0;
}
.tk-track-steps__dot {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--tk-canvas);
    border: 2px solid var(--tk-line-strong);
    color: var(--tk-text-muted);
    display: grid;
    place-items: center;
    font-family: var(--tk-font-mono);
    font-weight: var(--tk-fw-bold);
}
.tk-track-steps__item.is-done .tk-track-steps__dot { background: var(--tk-accent); border-color: var(--tk-accent); color: #fff; }
.tk-track-steps__item.is-current .tk-track-steps__dot { box-shadow: 0 0 0 5px var(--tk-periwinkle); }
.tk-track-steps__label { font-weight: var(--tk-fw-bold); font-size: 14px; color: var(--tk-text-muted); }
.tk-track-steps__item.is-done .tk-track-steps__label { color: var(--tk-text); }
.tk-track-steps .tk-field-hint { margin: 0; }

.tk-track__parcel {
    margin: 0;
    background: var(--tk-canvas-alt);
    border-radius: 20px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    line-height: 1.5;
}
.tk-track__parcel-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--tk-accent);
    background: var(--tk-puff-bg, #fff);
    box-shadow: var(--tk-puff-shadow);
    flex-shrink: 0;
}
.tk-track__parcel--empty > span:last-child { flex: 1 1 200px; color: var(--tk-text-body); }
.tk-track__parcel-body { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.tk-track__parcel-body .tk-field-hint { margin: 0; }
.tk-track__parcel-num { font-weight: var(--tk-fw-bold); font-size: 17px; overflow-wrap: anywhere; }
.tk-track__parcel-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tk-track__parcel-actions a { display: inline-flex; align-items: center; text-decoration: none; }

.tk-track__more { margin: 0; font-size: 15px; }
.tk-track__links { display: flex; gap: 12px; flex-wrap: wrap; }

@media (min-width: 768px) {
    .tk-track__form { grid-template-columns: 220px minmax(0, 1fr) auto; align-items: end; }
    .tk-track__result { padding: 30px; }
    .tk-track__h2 { font-size: 28px; }
    .tk-track-steps__label { font-size: 15px; }
}

@media (min-width: 1024px) {
    .tk-track { padding-block: 56px 80px; gap: 28px; }
    .tk-track__title { font-size: 60px; }
    .tk-track__lead { font-size: 19px; margin-top: -12px; }
}

.tk-company-note { display: block; margin-top: 6px; font-size: 13.5px; color: var(--tk-text-muted); }

/*
 * Našeptávač adresy v poli „Ulica a číslo".
 *
 * Zoznam je v toku nad poľom absolútne, aby neposúval ostatné polia mriežky.
 */
.tk-adr { position: relative; }
.tk-adr__list {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--tk-canvas);
    border: 1.5px solid var(--tk-line-strong);
    border-radius: var(--tk-r-input);
    box-shadow: 0 18px 40px rgba(10, 26, 53, .14);
    max-height: 280px;
    overflow-y: auto;
}
.tk-adr__list[hidden] { display: none; }
.tk-adr__opt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
}
.tk-adr__opt:hover,
.tk-adr__opt:focus { background: var(--tk-canvas-alt); outline: none; }
.tk-adr__opt b { font-size: 15px; color: var(--tk-text); }
.tk-adr__opt span { font-size: 13px; color: var(--tk-text-muted); }

/* Odstup od hlavičky Astry rieši checkout-layout.css (#primary bez okrajov). */

/* Prihlásenie cez Google: biele s okrajom, nie sivá plocha. Sivé tlačidlo
 * vyzeralo ako neaktívne a nepripomínalo tlačidlo, aké ľudia od Googlu poznajú. */
.tk-co .tk-google,
.tk-co-account .tk-google {
    background: var(--tk-canvas);
    border: 1px solid var(--tk-line);
    color: var(--tk-navy);
    box-shadow: none;
}

.tk-co .tk-google:hover,
.tk-co-account .tk-google:hover { background: var(--tk-tint); border-color: var(--tk-navy); }

/* ------------------------------------------------------------------ *
 * Predobjednávka (univerzálna tabuľka): riadok pod názvom položky
 * a upozornenie na dve zásielky. Rovnaké pravidlá má `cart.css`.
 * ------------------------------------------------------------------ */
.tk-preorder-note {
    font-size: 13px;
    font-weight: var(--tk-fw-semi);
    color: var(--tk-accent);
}

.tk-split-notice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--tk-r-card-sm);
    background: var(--tk-tint);
    font-size: 15px;
    line-height: 1.5;
    color: var(--tk-text-body);
}
.tk-split-notice .tk-icon { flex-shrink: 0; margin-top: 2px; color: var(--tk-accent); }
.tk-co-sum__split { font-size: 14px; }
.tk-track__split { margin-top: 4px; }