/* ==========================================================================
   ui-kasa.css (v3 "Meridian"): część wspólna koszyka, kasy, opłaty zamówienia i podziękowania.
   Wzorzec: docs/redesign/makiety/v3/final/kasa.html (style.css sekcja 17).
   Skórka na markup WooCommerce i ewa-checkout (mcc-*): pola, nonce, id i klasy bez zmian.
   Plik drukuje się PO arkuszach ewa-checkout (priorytet 9999, !important), więc reguły kasy
   mają prefiks body.ewa-ui i, gdzie wtyczka ma !important, też !important.
   Podział (budżet §6, 14 kB gzip na arkusz): tu tokeny, stepper, nagłówek, komunikaty, przycisk dalej,
   lista "w cenie", pasek płatności telefonu. Koszyk i pusty koszyk: ui-koszyk.css. Kasa i opłata zamówienia:
   ui-kasa-zamowienie.css, podziękowanie dodatkowo ui-kasa-dziekujemy.css. Ładuje je po tym pliku inc/ui/kasa.php
   (ewardega_ui_kasa_assets).
   Szablon: ui/kasa.php, hooki: inc/ui/kasa.php, JS: ui-kasa.js.
   ========================================================================== */

/* 0. Tokeny wtyczek na paletę v3 (ewa-checkout, ewa-zaliczka, Tpay dziedziczą kolory) */
body.ewa-ui .ui-kasa,
body.ewa-ui.mcc-checkout {
	--ewac-page: var(--ui-card);
	--ewac-panel: var(--ui-card);
	--ewac-canvas: var(--ui-ivory);
	--ewac-ink: var(--ui-ink);
	--ewac-ink-soft: #3b322a;
	--ewac-muted: rgba(22, 18, 14, .72);
	--ewac-dim: rgba(22, 18, 14, .64);
	--ewac-line: var(--ui-line);
	--ewac-line-2: var(--ui-line-2);
	--ewac-fill: var(--ui-ivory);
	--ewac-accent: var(--ui-ink);
	--ewac-accent-text: var(--ui-ink);
	--ewac-accent-press: var(--ui-ink);
	--ewac-accent-ring: rgba(201, 164, 106, .35);
	--ewac-ok: var(--ui-free);
	--ewac-danger: #a3261b;
	--ewac-danger-soft: rgba(163, 38, 27, .06);
	--ewac-sans: var(--ui-font);
	--ewac-r: 14px;
	--ewac-r-md: 16px;
	--ewac-r-lg: var(--ui-r-l);
	--ewac-field-h: 52px;
	--ewac-shadow-card: var(--ui-sh-1);
	--mcc-accent: var(--ui-ink);
	--mcc-accent-text: var(--ui-ink);
}
body.ewa-ui main#primary.ui-kasa { padding: 0 0 clamp(56px, 7vw, 96px) !important; margin: 0 !important; background: none !important; }
.ui-kasa { color: var(--ui-ink); }
.ui-kasa :is(h1, h2, h3) { font-family: var(--ui-font); }
.ui-kasa a:not(.ui-btn) { color: inherit; }
.ui-kasa :focus-visible { outline: 2px solid var(--ui-focus) !important; outline-offset: 2px !important; }
/* Ciemne karty (bilet koszyka i kasy): fokus jasnym złotem (token --ui-focus z ui.css §fokus) */
.ui-kasa :is(.cart_totals, .mcc-checkout__aside-inner, .ui-order) { --ui-focus: var(--ui-gold-hi); }

/* 1. Stepper i nagłówek strony ------------------------------------------- */
.ui-stepper { display: flex; align-items: center; justify-content: center; gap: 8px; padding-block: 28px 8px; margin: 0; list-style: none; }
.ui-stepper li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ui-fs-xs); font-weight: 600; color: var(--ui-ink-3); }
.ui-stepper li + li::before { content: ""; width: clamp(16px, 5vw, 56px); height: 1px; background: var(--ui-line-2); margin-right: 4px; }
.ui-stepper li.is-done + li::before { background: var(--ui-gold); }
.ui-stepper a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; text-decoration: none; }
.ui-stepper a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.ui-stepper i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ui-line-2); font-style: normal; font-variant-numeric: tabular-nums; }
.ui-stepper i .ui-ic { width: 14px; height: 14px; stroke-width: 2.2; }
.ui-stepper li.is-done { color: var(--ui-ink-2); }
.ui-stepper li.is-done i { border-color: var(--ui-gold); color: var(--ui-gold-ink); background: rgba(201, 164, 106, .12); }
.ui-stepper li[aria-current="step"] { color: var(--ui-ink); }
.ui-stepper li[aria-current="step"] i { border-color: var(--ui-ink); background: var(--ui-ink); color: var(--ui-snow); }
/* Etykiety: od 480 px pełne ("Koszyk / Dane i płatność / Potwierdzenie"), telefon krótkie ("Koszyk / Dane / Gotowe") */
.ui-stepper__s { display: none; }
@media (max-width: 479px) {
	.ui-stepper { gap: 6px; }
	.ui-stepper li { gap: 6px; }
	.ui-stepper li + li::before { width: clamp(10px, 4vw, 24px); margin-right: 2px; }
	.ui-stepper__s { display: inline; }
	/* Runda 3 nocy (pkt 8): telefon zawsze krótko ("Koszyk / Dane / Gotowe") w koszyku i kasie; pełna nazwa zostaje dla czytnika */
	.ui-stepper__s + .ui-stepper__f { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.ui-kasa-hd { display: grid; justify-items: center; gap: 8px; text-align: center; margin: 12px auto 28px; max-width: 40em; }
.ui-kasa-hd h1 { margin: 0; }
body.ewa-ui main.ui-kasa { min-height: 62svh; }
.ui-kasa-hd__lead { font-size: var(--ui-fs-s); color: var(--ui-ink-2); text-wrap: pretty; margin: 0; }

/* 2. Komunikaty WooCommerce (błędy walidacji, informacje) ----------------- */
body.ewa-ui .ui-kasa :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
	position: relative; box-sizing: border-box !important; width: 100% !important; max-width: none !important; margin: 0 0 20px !important;
	padding: 16px 18px 16px 56px !important; list-style: none; border: 1px solid var(--ui-line) !important; border-radius: var(--ui-r) !important;
	background: var(--ui-card) !important; color: var(--ui-ink) !important; font-size: var(--ui-fs-s) !important; line-height: 1.5; box-shadow: var(--ui-sh-1) !important;
}
body.ewa-ui .ui-kasa :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::before {
	content: "i" !important; position: absolute !important; left: 18px !important; top: 15px !important; display: grid !important; place-items: center;
	width: 24px; height: 24px; border-radius: 50%; font-family: var(--ui-font) !important; font-size: 13px !important; font-weight: 700; line-height: 1;
	color: var(--ui-snow) !important; background: var(--ui-ink) !important;
}
body.ewa-ui .ui-kasa .woocommerce-error { border-color: rgba(163, 38, 27, .35) !important; background: #fdf5f2 !important; }
body.ewa-ui .ui-kasa .woocommerce-error::before { content: "!" !important; background: #a3261b !important; }
body.ewa-ui .ui-kasa .woocommerce-message::before { content: "" !important; background: var(--ui-gold) !important; box-shadow: inset 0 0 0 7px var(--ui-gold), inset 0 0 0 12px var(--ui-card); }
body.ewa-ui .ui-kasa .woocommerce-error li { margin: 0; padding: 2px 0; list-style: none; color: var(--ui-ink-2); }
body.ewa-ui .ui-kasa .woocommerce-error li a { color: #a3261b; font-weight: 600; text-decoration-color: rgba(163, 38, 27, .35); }
body.ewa-ui .ui-kasa .woocommerce-error li + li { border-top: 1px solid rgba(163, 38, 27, .12); padding-top: 6px; margin-top: 4px; }
body.ewa-ui .ui-kasa .woocommerce-error a { text-decoration: underline; text-underline-offset: 3px; }
body.ewa-ui .ui-kasa :is(.woocommerce-message, .woocommerce-info) .button { float: none !important; margin: 8px 0 0 !important; }
body.ewa-ui .ui-kasa a.remove {
	display: grid !important; place-items: center; width: 44px !important; height: 44px !important; border-radius: 50% !important;
	font-size: 1.5rem !important; font-weight: 300 !important; line-height: 1 !important; color: var(--ui-ink-3) !important; background: transparent !important; text-decoration: none;
	transition: background-color var(--ui-t1), color var(--ui-t1);
}
body.ewa-ui .ui-kasa a.remove:hover { color: #a3261b !important; background: rgba(163, 38, 27, .08) !important; }
.ui-kasa .ui-dark .ui-split, .ui-kasa .cart_totals .ui-split, .ui-kasa .ui-order .ui-split { background: var(--ui-hair); }
.ui-kasa .cart_totals .ui-split i, .ui-kasa .ui-order .ui-split i { background: var(--ui-snow); }
body.ewa-ui .ui-kasa :is(a.checkout-button, #place_order) {
	display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100% !important; min-height: 58px !important; margin: 0 !important; padding: 12px 28px !important;
	border: 1px solid var(--ui-orange) !important; border-radius: 999px !important; float: none !important;
	font: 600 1.0313rem/1.15 var(--ui-font) !important; letter-spacing: -.005em !important; text-transform: none !important; text-align: center; text-decoration: none !important;
	color: var(--ui-on-orange) !important; background: var(--ui-orange) !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 12px 28px -14px rgba(239, 133, 11, .8) !important;
	transition: background-color var(--ui-t1), box-shadow var(--ui-t2) var(--ui-ease), transform var(--ui-t1) var(--ui-ease) !important;
}
body.ewa-ui .ui-kasa :is(a.checkout-button, #place_order):hover { background: var(--ui-orange-hi) !important; border-color: var(--ui-orange-hi) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 16px 34px -14px rgba(239, 133, 11, .9) !important; }
.ui-kasa .ui-secure { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 0; font-size: var(--ui-fs-xs); line-height: 1.45; color: var(--ui-ink-3); text-align: center; }
.ui-kasa .ui-secure .ui-ic { flex: none; width: 18px; height: 18px; color: var(--ui-gold-ink); }
/* Lista "w cenie" pod biletem: równy rytm (odstęp 10 px, ikona przy pierwszej linii). Telefon: cel 44 px na samym linku
   (dopełnienie pionowe elementu inline nie zmienia wysokości wiersza), bez nakładki na cały wiersz, która zachodziła
   na punkt wyżej (odbiór kasy 2026-10-12, runda 3, pkt 9). */
.ui-kasa-perks { display: grid; gap: 10px; margin: 0; padding: 0 4px; list-style: none; font-size: var(--ui-fs-s); line-height: 1.45; color: var(--ui-ink-2); }
.ui-kasa-perks li { position: relative; display: flex; gap: 12px; align-items: flex-start; min-height: 0; }
.ui-kasa-perks .ui-ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ui-gold-ink); }
.ui-kasa-perks a { display: inline; min-height: 0; padding-block: calc((44px - 1.375em) / 2); font-weight: 600; color: var(--ui-ink); }

/* 7. Ruch: bez animacji przy ograniczonym ruchu ---------------------------- */
@media (prefers-reduced-motion: reduce) { .ui-kasa *, .ui-kasa *::before, .ui-kasa *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }

/* 12. Domknięcie v3 (QA globalne) ------------------------------------------ */
/* Komunikat "dodano do koszyka": jasna karta jak toast systemu, check w złotym kółku; na koszyku bez linku do tej samej strony */
body.ewa-ui .ui-kasa .woocommerce-message { border: 1px solid var(--ui-line) !important; outline: 0 !important; }
body.ewa-ui .ui-kasa .woocommerce-message::before {
	content: "" !important; box-shadow: none !important; color: transparent !important;
	background: var(--ui-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0907' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat !important;
}

/* Telefon: pasek płatności przyklejony do dołu (ui-kasa.js), wygląd jak pasek zakupu kursu (ui.css). Bez JS go nie ma. */
.ui-kbar {
	--ui-focus: var(--ui-gold-hi);
	position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
	padding: 10px var(--ui-g) calc(10px + var(--ui-safe));
	color: var(--ui-snow); background: var(--ui-noir-2); border-top: 1px solid var(--ui-hair);
	box-shadow: 0 -24px 48px -28px rgba(0, 0, 0, .55);
	transform: translateY(calc(100% + 24px)); visibility: hidden;
	transition: transform var(--ui-t3) var(--ui-ease-sheet), visibility 0s var(--ui-t3);
}
.ui-kbar.is-on { transform: none; visibility: visible; transition: transform var(--ui-t3) var(--ui-ease-sheet), visibility 0s; }
.ui-kbar > div { display: grid; gap: 2px; min-width: 0; }
.ui-kbar small { font-size: var(--ui-fs-xs); color: var(--ui-snow-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-kbar b { font-size: 1.375rem; font-weight: 300; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; }
.ui-kbar .ui-btn { flex: none; min-height: 48px; padding: 0 20px; }
@media (min-width: 1024px) { .ui-kbar { display: none; } }
@media (prefers-reduced-motion: reduce) { .ui-kbar, .ui-kbar.is-on { transition: visibility 0s; } }

/* Toast "Zaktualizowano" (ui-kasa.js) nad paskiem płatności na telefonie */
body.ui-kbar-on .ui-toast { bottom: calc(88px + var(--ui-safe)); }
/* Toast koszyka w jednej linii ("Zaktualizowano: 2 miejsca") */
body.ewa-ui .ui-toast [data-toast-t] { white-space: nowrap; }
@keyframes ui-ksplit { from { scale: 0 1; } }

/* Toast motywu na koszyku i kasie: treść poza drzewem dostępności i innerText, dopóki toast nie jest widoczny
   (pkt 5; obejście w arkuszu kasy, właściwa poprawka w footer-ui.php i ui.js to propozycja do fundamentu).
   Wyjście: treść znika dopiero po wygaszeniu. */
body.ewa-ui:is(.woocommerce-cart, .woocommerce-checkout) .ui-toast:not(.is-on) > * { visibility: hidden; transition: visibility 0s linear var(--ui-t2); }
/* Komunikat sukcesu Woo dostaje fokus skryptem (czytnik go odczyta); to nie jest kontrolka, więc bez obrysu fokusu,
   który na kasie obrysowywał całą kartę komunikatu */
body.ewa-ui .ui-kasa .woocommerce-message:focus-visible, body.ewa-ui.mcc-checkout .ui-kasa .woocommerce-message[tabindex]:focus-visible { outline: 0 !important; }

/* 18. Elewacja 2.2 (noc, runda 3) ------------------------------------------ */
/* Status "Ostatnie miejsca" stoi: przy kwotach i rezerwacji zero pętli (§6: maks. jedna widoczna pętla, tylko z data-anim;
   §3.0: pulsu nie ma w inwentarzu). Kropka zostaje statyczna. Dotyczy pustego koszyka i biletu; sheet i szufladę gasi ui-zakup.css. */
.ui-kasa .ui-st--last::before { animation: none; }