/* =========================================================
   TIVOLI — cart.css
   /koszyk/ — ETAP 5. Loaded only on that page (see
   inc/enqueue.php), same conditional pattern as menu.css.
   ========================================================= */

/* ---------- Banner (shares markup/classes with order.css;
   duplicated here on purpose — cart.css and order.css are never
   loaded on the same page, so there is no real conflict, and this
   avoids introducing a cross-file CSS dependency for ~15 lines). ---------- */
.order-banner {
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-md);
	font-size: var(--fs-small);
}

.order-banner--success {
	background: var(--color-green-100);
	color: var(--color-green-800);
}

.order-banner--error {
	background: var(--color-red-soft);
	color: var(--color-red);
}

/* ---------- Empty state ---------- */
.cart-empty {
	max-width: 480px;
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-2xl) 0;
}

.cart-empty__text {
	color: var(--color-text-muted);
	font-size: var(--fs-lead);
}

/* ---------- Layout ---------- */
.cart-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--space-xl);
	align-items: start;
}

@media (max-width: 900px) {
	.cart-layout {
		grid-template-columns: 1fr;
	}
}

.cart-items {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	min-width: 0;
}

/* ---------- Cart line item ---------- */
.cart-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md);
	background: var(--color-cream-soft);
	border-radius: var(--radius-md);
	padding: var(--space-md);
}

.cart-item__media {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--color-green-100);
	color: var(--color-green-700);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cart-item__media svg {
	width: 22px;
	height: 22px;
}

.cart-item__info {
	flex: 1;
	min-width: 160px;
}

.cart-item__name {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 600;
}

.cart-item__size,
.cart-item__unit-price {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

/* Pizza pół na pół (inc/half-half.php) — cała linia koszyka musi być
   natychmiast odróżnialna od zwykłej pizzy: ramka + tło w tonie gold
   (ten sam ton co wyróżnienie w panelu pracownika/e-mailu), obie
   połówki jako osobne, czytelne linie zamiast jednego "Rozmiar: …". */
.cart-item--half-half {
	border: 1.5px solid var(--color-gold);
	background: var(--color-gold-soft);
}

.cart-item__name--half-half {
	color: var(--color-gold-deep);
}

.cart-item__half-half-line {
	font-size: var(--fs-small);
	color: var(--color-ink);
}

.cart-item__size-form select {
	padding: 0.5em 0.6em;
	border: 1.5px solid var(--color-cream-line);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	font-size: 0.85rem;
	max-width: 180px;
}

/* Cart-wide AJAX (audyt UX, 2026-08) — krótka blokada podczas żądania
   fetch() (assets/js/cart-ops.js); przywracane automatycznie, bo cała
   linia koszyka jest zaraz potem podmieniana świeżym render z serwera. */
.cart-item__size-form select:disabled,
.cart-item__remove-form button:disabled {
	opacity: 0.6;
	cursor: default;
}

.cart-item__qty-form {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
}

/* ETAP 17F (§1) — [ − ] ilość [ + ] stepper. Buttons are real 44×44px
   touch targets; the number field keeps native keyboard support
   (arrow keys/typing) and stays the single source of truth submitted
   as "ilosc" — same field, same form, same handler as before.

   The −/+ buttons rely on onclick JS to do anything (stepDown/stepUp
   + dispatch "change"); without JS they'd sit there inert and
   confusing next to the <noscript> "Aktualizuj" fallback button. Kept
   hidden by default (base rules below = the no-JS state: a plain
   bordered number input with its native browser spinner) and only
   switched to the enhanced layout under the existing `.js` class that
   main.js already adds to <html> the moment it runs — same
   progressive-enhancement signal the rest of the theme already relies
   on, not a new mechanism. */
.qty-stepper__field {
	display: flex;
}

.qty-stepper__input {
	width: 4em;
	height: 44px;
	border: 1.5px solid var(--color-cream-line);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	text-align: center;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-ink);
}

.qty-stepper__input:focus-visible {
	outline: none;
	border-color: var(--color-green-700);
	box-shadow: 0 0 0 3px var(--color-green-100);
}

.qty-stepper__btn {
	display: none;
}

.js .qty-stepper {
	display: flex;
	align-items: stretch;
	border: 1.5px solid var(--color-cream-line);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	overflow: hidden;
}

.js .qty-stepper__btn {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--color-green-700);
	background: var(--color-cream-soft);
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.js .qty-stepper__btn:hover {
	background: var(--color-green-100);
}

.js .qty-stepper__btn:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--color-green-700);
}

.js .qty-stepper__btn--minus {
	border-right: 1.5px solid var(--color-cream-line);
}

.js .qty-stepper__btn--plus {
	border-left: 1.5px solid var(--color-cream-line);
}

.js .qty-stepper__input {
	width: 2.6em;
	border: none;
	border-radius: 0;
	background: transparent;
	/* Custom −/+ buttons replace the native spinner arrows. */
	-moz-appearance: textfield;
	appearance: textfield;
}

.js .qty-stepper__input::-webkit-outer-spin-button,
.js .qty-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.js .qty-stepper__input:focus-visible {
	border-color: transparent;
	box-shadow: inset 0 0 0 2px var(--color-green-700);
}

.cart-item__line-total {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--color-green-700);
	white-space: nowrap;
	min-width: 90px;
	text-align: right;
}

/* ETAP 17F (§1) — audyt: link było tylko podkreślonym tekstem bez
   paddingu, więc rzeczywisty obszar kliknięcia był dużo mniejszy niż
   44px. Padding rozszerza dotykowy cel bez powiększania samego tekstu
   ani nadawania mu wagi wizualnej głównego CTA (nadal mały, czerwony,
   podkreślony — jednoznaczny, ale nie dominujący). */
.cart-item__remove {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--space-2xs);
	margin-inline: calc(var(--space-2xs) * -1);
	color: var(--color-red);
	font-size: var(--fs-small);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.cart-item__remove:hover {
	color: var(--color-ink);
}

.cart-item__remove:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--color-red-soft), 0 0 0 4px var(--color-red);
	border-radius: var(--radius-sm);
}

/* ---------- Sosy do pizzy (ETAP 22) ---------- */
/* Umieszczona wewnątrz .cart-items (patrz page-koszyk.php) — zwykły
   blok w normalnym przepływie kolumny, nie osobny element grida, więc
   .cart-layout (grid 2-kolumnowy powyżej) nie wymaga żadnej zmiany.
   Stepper +/- reużywa .qty-stepper/.qty-stepper__btn/.qty-stepper__input
   (style już zdefiniowane wyżej dla ilości pizzy) — zero duplikowania
   wyglądu przycisków, tylko nowy układ wokół nich. */
.pizza-sauces {
	background: var(--color-cream-soft);
	border: 1.5px solid var(--color-cream-line);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.pizza-sauces__title {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
}

.pizza-sauces__info {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	margin: 0;
}

.pizza-sauces__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.pizza-sauces__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.pizza-sauces__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	flex-wrap: wrap;
	background: var(--color-white);
	border-radius: var(--radius-sm);
	padding: var(--space-xs) var(--space-sm);
}

.pizza-sauces__name {
	font-weight: 500;
	color: var(--color-ink);
}

.pizza-sauces__counter {
	border-top: 1px solid var(--color-cream-line);
	padding-top: var(--space-sm);
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

.pizza-sauces__counter-line {
	font-weight: 600;
	color: var(--color-ink);
	margin: 0;
}

.pizza-sauces__status-line {
	font-size: var(--fs-small);
	font-weight: 600;
	margin: 0;
}

.pizza-sauces__status-line--success {
	color: var(--color-green-800);
}

.pizza-sauces__status-line--attention {
	color: var(--color-gold-deep);
}

.pizza-sauces__sup-line {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	margin: 0;
}

@media (max-width: 480px) {
	.pizza-sauces {
		padding: var(--space-sm);
	}

	.pizza-sauces__row {
		padding: var(--space-2xs) var(--space-xs);
	}
}

/* ---------- Alergeny (zwijana sekcja) ---------- */
/* Natywny <details>/<summary> — treść współdzielona z
   .allergen-notice (order.css, blok na Zamów online) przez
   tivoli_allergen_notice_text() (inc/template-tags.php); ta reguła
   dotyczy wyłącznie chrome/rozwijania w koszyku, nigdy samej treści. */
.allergen-accordion {
	border: 1.5px solid var(--color-cream-line);
	border-radius: var(--radius-md);
	background: var(--color-white);
	overflow: hidden;
}

.allergen-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	width: 100%;
	min-height: 44px;
	padding: 0.7em 0.9em;
	cursor: pointer;
	list-style: none;
}

.allergen-accordion__summary::-webkit-details-marker {
	display: none;
}

.allergen-accordion__label {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--color-gold-deep);
}

.allergen-accordion__summary:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--color-gold-deep);
	border-radius: var(--radius-sm);
}

.allergen-accordion__chevron {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--color-gold-deep);
	transition: transform var(--dur-fast) var(--ease-out);
}

.allergen-accordion[open] .allergen-accordion__chevron {
	transform: rotate(180deg);
}

.allergen-accordion__text {
	margin: 0;
	padding: 0 0.9em 0.9em;
	color: var(--color-text-muted);
	/* Jawna wartość (nie współdzielony token --fs-small, użyty w kilkunastu
	   innych miejscach tego pliku) — na wyraźną prośbę użytkownika o
	   konkretny rozmiar czytelności tego akapitu, niezależny od reszty
	   koszyka. */
	font-size: 14px;
	line-height: 1.6;
}

@media (max-width: 480px) {
	.allergen-accordion__summary {
		padding: 0.6em 0.75em;
	}

	.allergen-accordion__text {
		padding: 0 0.75em 0.75em;
	}
}

/* ---------- Summary ---------- */
.cart-summary {
	background: var(--color-cream-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	position: sticky;
	top: calc(var(--space-lg) + 80px);
}

.cart-summary__title {
	font-size: var(--fs-h4);
}

.cart-summary__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 1.05rem;
}

/* Ten sam selektor .cart-summary__row już ustawia display:flex, więc ma
   równą specyficzność z natywną regułą przeglądarki [hidden]{display:none}
   -- bez tej reguły atrybut hidden (ustawiany przez cart-sauces.js na
   wierszach "Dodatkowe sosy"/"Opłata SUP") byłby po cichu ignorowany. */
.cart-summary__row[hidden] {
	display: none;
}

.cart-summary__amount {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--color-green-700);
}

.cart-summary__note {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

/* ETAP 16C — orientacyjny czas oczekiwania (tylko gdy lokal/sposób
   realizacji są już wybrane w sesji checkoutu). ETAP 17B (audyt 17A,
   ustalenie A6) — teraz zawiera odznakę .badge (17C: scentralizowane
   w components.css, wcześniej lokalna .channel-status), stąd flex
   zamiast zwykłego tekstu. */
.cart-summary__wait {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

/* ETAP 17C — odznaka dostępny/tymczasowo niedostępny
   (tivoli_render_channel_status_badge(), inc/order-availability.php)
   przeniesiona z lokalnej kopii tutaj do współdzielonej
   .badge/.badge--tone-success/error w components.css (zawsze
   ładowanego przed tym plikiem). */

.cart-summary .btn {
	width: 100%;
}