/* =========================================================
   TIVOLI — account.css
   Rejestracja / logowanie / reset hasła / Moje konto.
   Loaded only on those 4 pages (see inc/enqueue.php), same
   conditional pattern as menu.css / contact.css.
   ========================================================= */

/* ---------- Auth pages (rejestracja/logowanie/reset-hasla) ---------- */
.auth-card {
	max-width: 460px;
	margin-inline: auto;
	background: var(--color-cream-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-lg);
}

.auth-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.auth-card__footnote {
	margin-top: var(--space-md);
	text-align: center;
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

.auth-card__footnote a {
	color: var(--color-green-700);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.auth-card__footnote a:hover {
	color: var(--color-green-900);
}

/* ---------- Form fields (shared: auth pages + Moje konto) ---------- */
.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
}

.form-field label {
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--color-text-muted);
}

.form-field input {
	padding: 0.75em 1em;
	border: 1.5px solid var(--color-cream-line);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-ink);
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

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

/* ---------- Pokaż/ukryj hasło (audyt UX, 2026-08 — assets/js/main.js) ----------
   Owija tylko samo <input>, nigdy <label> — JS przenosi pole do tego
   wrappera bez zrywania powiązania label[for]/input#id. Przycisk ma
   pełną wysokość pola i min. ~44px szerokości (touch target na mobile). */
.password-field {
	position: relative;
}

.password-field input {
	width: 100%;
	padding-right: 2.75em;
}

.password-toggle {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 2.75em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	color: var(--color-text-muted);
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-out);
}

.password-toggle:hover {
	color: var(--color-green-700);
}

.password-toggle:focus-visible {
	outline: 2px solid var(--color-green-700);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.password-toggle svg {
	width: 1.25em;
	height: 1.25em;
}

/* ETAP 17G — pole wymagane, ten sam wzorzec co checkout.css (ETAP 17F,
   celowe duplikowanie między plikami CSS ładowanymi na różnych stronach,
   patrz komentarz w checkout.css). Gwiazdka jest wyłącznie wizualnym
   wzmocnieniem natywnego required/aria-required na samym polu. */
.form-field--required label::after {
	content: ' *';
	color: var(--color-gold-deep);
	font-weight: 700;
}

.form-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	cursor: pointer;
}

.form-checkbox input {
	width: 1.1em;
	height: 1.1em;
	accent-color: var(--color-green-700);
}

.form-actions {
	margin-top: var(--space-2xs);
}

.form-actions .btn {
	width: 100%;
}

.form-message {
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-sm);
	font-size: var(--fs-small);
	margin-bottom: var(--space-md);
}

.form-message--error {
	background: var(--color-red-soft);
	color: var(--color-red);
}

.form-message--success {
	background: var(--color-green-100);
	color: var(--color-green-800);
}

.form-message--info {
	background: var(--color-cream-deep);
	color: var(--color-gold-deep);
	border: 1px solid var(--color-cream-line);
}

/* ---------- Moje konto — layout ---------- */
.account-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--space-xl);
	align-items: start;
}

@media (max-width: 768px) {
	.account-layout {
		grid-template-columns: 1fr;
		/* ETAP 17G — mniejszy odstęp niż desktopowe --space-xl: na
		   mobile nav siedzi jako kompaktowy pasek tuż nad treścią (patrz
		   niżej), nie jako osobna, "ciężka" sekcja strony. */
		gap: var(--space-md);
	}
}

.account-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	background: var(--color-cream-soft);
	border-radius: var(--radius-md);
	padding: var(--space-sm);
}

.account-nav__link {
	display: block;
	padding: 0.75em 1em;
	border-radius: var(--radius-sm);
	font-weight: 600;
	color: var(--color-text-muted);
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.account-nav__link:hover {
	background: var(--color-cream-deep);
	color: var(--color-ink);
}

.account-nav__link.is-active {
	background: var(--color-green-700);
	color: var(--color-cream);
}

.account-nav__link--logout {
	margin-top: var(--space-xs);
	border-top: 1px solid var(--color-cream-line);
	padding-top: 1em;
	color: var(--color-red);
}

/* ETAP 17G — audyt wykazał, że na telefonie klient widział pełną,
   pionową listę 6 pozycji (5 linków + wyloguj) NAD treścią, zanim
   dotarł do właściwej zawartości sekcji. Zamieniona na poziomy pasek
   zakładek z przewijaniem OGRANICZONYM DO TEGO PASKA — .account-nav
   nigdy nie powoduje przewijania całej strony w poziomie (overflow-x
   jest tylko na tym jednym, wewnętrznym elemencie). Ta reguła MUSI
   siedzieć PO bazowych regułach .account-nav__list/__link powyżej —
   przy równej specyficzności selektorów o kolejności w kaskadzie
   decyduje kolejność w pliku, nie sama obecność media query. */
@media (max-width: 768px) {
	.account-nav__list {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.account-nav__list::-webkit-scrollbar {
		display: none;
	}

	.account-nav__link {
		flex: 0 0 auto;
		white-space: nowrap;
		padding: 0.7em 1.1em;
	}

	.account-nav__link--logout {
		margin-top: 0;
		margin-left: var(--space-xs);
		padding-top: 0.7em;
		padding-left: var(--space-sm);
		border-top: none;
		border-left: 1px solid var(--color-cream-line);
	}
}

.account-content {
	min-width: 0; /* wsparcie dla grida: bez tego kolumna 1fr rosnie do naturalnej szerokosci .form-row */
	background: var(--color-cream-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-lg);
}

.account-content h2 {
	font-size: var(--fs-h4);
	margin-bottom: var(--space-md);
}

.account-data__section-title {
	margin-top: var(--space-xl);
}

.account-empty-state {
	color: var(--color-text-muted);
	text-align: center;
	padding: var(--space-lg) 0;
}

.account-empty-state__cta {
	display: flex;
	justify-content: center;
	margin-top: var(--space-sm);
}

/* ---------- Dashboard ("Przegląd") — ETAP 17G ---------- */
.account-dashboard__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
}

@media (max-width: 640px) {
	.account-dashboard__grid {
		grid-template-columns: 1fr;
	}
}

.account-dashboard__card {
	background: var(--color-white);
	border: 1px solid var(--color-cream-line);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	min-width: 0;
}

.account-dashboard__card--order {
	grid-column: 1 / -1;
	align-items: flex-start;
	gap: var(--space-2xs);
}

.account-dashboard__card--order .btn {
	margin-top: var(--space-2xs);
}

.account-dashboard__card--link {
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.account-dashboard__card--link:hover {
	border-color: var(--color-green-700);
	box-shadow: var(--shadow-sm);
}

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

.account-dashboard__card-title {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--color-ink);
}

.account-dashboard__card-hint {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

.account-dashboard__order-number {
	font-weight: 600;
	color: var(--color-ink);
}

.account-dashboard__order-date {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

.account-dashboard__order-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-top: 0.2em;
}

.account-dashboard__order-total {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--color-green-700);
	margin-top: 0.2em;
}

.account-empty-state--card {
	padding: 0;
	text-align: left;
}

/* ---------- Order list ---------- */
.order-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.order-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	background: var(--color-white);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-cream-line);
}

/* ETAP 17G — audyt wykazał, że 6 niezależnych flex-dzieci (numer, data,
   2 odznaki, suma, przycisk) mogły zawijać się nierówno w okolicach
   480-768px (np. pojedyncza odznaka osamotniona w wierszu) — flex-wrap
   bez grupowania jest "zachłanny" i nieprzewidywalny. Naprawione
   grupowaniem w dwa kontenery (.order-row__info / .order-row__meta),
   każdy zawija się jako spójna całość zamiast 6 niezależnych elementów. */
.order-row__info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	min-width: 0;
}

.order-row__meta {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-left: auto;
}

.order-row__number {
	font-weight: 600;
	color: var(--color-ink);
}

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

.order-row__total {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--color-green-700);
	white-space: nowrap;
}

@media (max-width: 480px) {
	.order-row {
		flex-direction: column;
		align-items: stretch;
	}

	.order-row__meta {
		margin-left: 0;
		justify-content: space-between;
	}
}

/* ---------- Account content header (title + action button) ---------- */
.account-content__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.account-content__header h2 {
	margin-bottom: 0;
}

/* ---------- Saved addresses ---------- */
.address-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
}

@media (max-width: 768px) {
	.address-grid {
		grid-template-columns: 1fr;
	}
}

.address-card {
	position: relative;
	background: var(--color-white);
	border: 1px solid var(--color-cream-line);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.address-card--default {
	border-color: var(--color-gold);
	box-shadow: 0 0 0 1px var(--color-gold);
}

.address-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	margin-bottom: var(--space-3xs);
}

.address-card__label {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 600;
}

.address-card__name {
	font-weight: 600;
}

.address-card__line {
	color: var(--color-text-muted);
	font-size: 0.95rem;
}

.address-card__notes {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	font-style: italic;
	margin-top: var(--space-3xs);
}

.address-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-top: var(--space-sm);
}

.address-card__actions form {
	display: contents;
}

/* ETAP 17G — operacja destrukcyjna nie powinna wtapiać się w klaster
   "Edytuj"/"Ustaw jako domyślny": zachowany czerwony kolor (już był),
   dodane odsunięcie na koniec wiersza akcji, żeby wizualnie stało
   osobno od pozostałych, niedestrukcyjnych akcji. */
.address-card__delete {
	color: var(--color-red);
	border-color: var(--color-red);
	margin-left: auto;
}

.address-card__delete .btn__fill {
	background: var(--color-red);
}

.account-addresses__limit {
	margin-top: var(--space-md);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	text-align: center;
}

/* ---------- Address form: multi-field rows ---------- */
.form-row {
	display: flex;
	gap: var(--space-sm);
	min-width: 0;
}

.form-row .form-field {
	flex: 1;
	min-width: 0; /* sans this, inputs refuse to shrink below their natural content width */
}

.form-row .form-field--grow {
	flex: 2;
}

.form-row .form-field input {
	width: 100%;
	min-width: 0;
}

@media (max-width: 640px) {
	.form-row {
		flex-direction: column;
	}
}

/* ---------- Status badge tones (ETAP 9) — a shared 4-value colour
   vocabulary (neutral/attention/success/error) reused by BOTH the
   payment-status badge (tivoli_get_payment_status_css_class()) and the
   fulfillment-status badge (tivoli_get_order_fulfillment_display()) in
   inc/order-statuses.php. The two axes still show entirely separate
   label text/data (never merged) — only the colour language is shared,
   so a customer reads "green = good, gold = in progress, red = did not
   go through" consistently across both badges instead of two unrelated
   ad-hoc palettes.
   ETAP 17C — the actual `.badge--tone-*` rules used to live here as
   their own local copy (components.css is always loaded before this
   file in the cascade, but this file deliberately didn't reach into
   its modifier names). Centralized into components.css instead (same
   values, zero visual change) once the same 4 tones were needed a
   third time for ETAP 17B's channel-availability badges — three
   near-identical local copies was the actual maintainability problem,
   not the cross-file reference itself. ---------- */

/* ---------- Order detail (single order view, ETAP 9) ---------- */
.order-detail__date {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	margin-bottom: var(--space-sm);
}

.order-detail__statuses {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-bottom: var(--space-lg);
}

.order-detail__section {
	padding-block: var(--space-md);
	border-bottom: 1px solid var(--color-cream-line);
}

.order-detail__section:last-of-type {
	border-bottom: none;
}

.order-detail__section h3 {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: var(--space-2xs);
}

.order-detail__lines {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.order-detail__line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-sm);
	font-size: 0.95rem;
}

.order-detail__line-info {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	color: var(--color-ink);
}

.order-detail__line-name {
	font-weight: 600;
}

.order-detail__line-meta,
.order-detail__line-qty {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}

/* Sosy do pizzy (ETAP 22) — ten sam wygląd co .order-detail__date powyżej. */
.order-detail__sauces {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	margin: -0.5em 0 0;
}

.order-detail__line-total {
	white-space: nowrap;
	font-weight: 600;
}

.order-detail__totals {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	padding-top: var(--space-sm);
	border-top: 1px dashed var(--color-cream-line);
}

.order-detail__totals-row {
	display: flex;
	justify-content: space-between;
}

.order-detail__totals-row--total {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--color-green-700);
	margin-top: 0.3em;
}

/* ---------- Timeline realizacji (ETAP 11, "Moje konto" -> szczegóły
   zamówienia) — pionowa lista kroków, żeby nigdy nie ryzykować
   poziomego przewijania na 375px (świadomie nie horyzontalny stepper).
   Reużywa istniejącą paletę --color-green-700 (done) / --color-gold*
   (current) / --color-cream-line (upcoming) / --color-red (cancelled)
   zamiast wprowadzać nowe kolory. ---------- */
.order-timeline {
	list-style: none;
	margin: 0 0 var(--space-md);
	padding: 0;
}

.order-timeline__step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	padding-bottom: var(--space-md);
}

.order-timeline__step:last-child {
	padding-bottom: 0;
}

.order-timeline__step:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 18px;
	bottom: -2px;
	width: 2px;
	background: var(--color-cream-line);
}

.order-timeline__dot {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-top: 0.15em;
	border-radius: var(--radius-full);
	background: var(--color-cream-deep);
	border: 2px solid var(--color-cream-line);
	position: relative;
	z-index: 1;
}

.order-timeline__label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.95rem;
	color: var(--color-text-muted);
}

.order-timeline__step--done .order-timeline__dot {
	background: var(--color-green-700);
	border-color: var(--color-green-700);
}

.order-timeline__step--done .order-timeline__label {
	color: var(--color-ink);
}

.order-timeline__step--done:not(:last-child)::before {
	background: var(--color-green-700);
}

.order-timeline__step--current .order-timeline__dot {
	background: var(--color-gold);
	border-color: var(--color-gold-deep);
	box-shadow: 0 0 0 4px var(--color-gold-soft);
}

.order-timeline__step--current .order-timeline__label {
	color: var(--color-ink);
	font-weight: 600;
}

.order-timeline__step--cancelled .order-timeline__dot {
	background: var(--color-red);
	border-color: var(--color-red);
}

.order-timeline__step--cancelled .order-timeline__label {
	color: var(--color-red);
	font-weight: 600;
}

.order-timeline__eta {
	display: inline-block;
	margin: 0 0 var(--space-md);
	padding: var(--space-3xs) var(--space-sm);
	background: var(--color-gold-soft);
	color: var(--color-gold-deep);
	border-radius: var(--radius-sm);
	font-size: 0.9rem;
	font-weight: 600;
}