/* ============================================================
 * Tracciamento (page-tracciamento.php + view-order + orders list)
 *
 * Lato render-time emette solo placeholder vuoti con data-mz-tracking;
 * il JS (assets/js/tracciamento.js) fa fetch al thin-proxy WP e popola
 * il DOM. Il CSS qui copre i tre stati visivi:
 *   - .mz-track-loading       (skeleton + spinner)
 *   - .mz-track-card + .mz-track-timeline   (modalità "full")
 *   - .mz-track-pill         (modalità "compact" — orders list + status)
 *
 * Token discipline: ogni colore via var(), niente hex hardcoded.
 * Depth = borders (no shadows). Radius cap = --r-3 (6px).
 * ============================================================ */

.mz-track {
	background: var(--paper);
	color: var(--ink-1);
}

/* ------------------------------------------------------------
 * 1. HERO — eyebrow + display title + form ricerca
 * ------------------------------------------------------------ */
.mz-track-hero {
	padding: var(--s-7) 0 var(--s-7);
	border-bottom: 1px solid var(--border);
}
.mz-track-hero__grid {
	display: grid;
	grid-template-columns: 6fr 6fr;
	gap: var(--s-7) var(--s-8);
	align-items: end;
	margin-top: var(--s-3);
}
.mz-track-hero__title {
	font-family: var(--ff-ui);
	font-weight: 800;
	font-size: var(--t-2xl);
	line-height: var(--lh-2xl);
	letter-spacing: var(--tr-tight);
	color: var(--ink-1);
	margin: 0 0 var(--s-4);
}
.mz-track-hero__title em {
	font-style: normal;
	color: var(--brand);
}
.mz-track-hero__lede {
	font-size: var(--t-base);
	line-height: var(--lh-base);
	color: var(--ink-2);
	max-width: 56ch;
	margin: 0;
}

.mz-track-form {
	display: block;
	background: var(--paper-2);
	border: 1px solid var(--border);
	border-radius: var(--r-3);
	padding: var(--s-5) var(--s-5) var(--s-4);
}
.mz-track-form__label {
	display: block;
	font-family: var(--ff-mono);
	font-size: var(--t-xs);
	line-height: var(--lh-xs);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: var(--s-2);
}
.mz-track-form__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--s-2);
}
.mz-track-form__input {
	width: 100%;
	height: 56px;
	padding: 0 var(--s-4);
	background: var(--ctl-bg);
	border: 1px solid var(--ctl-border);
	border-radius: var(--r-2);
	color: var(--ink-1);
	font-family: var(--ff-mono);
	font-size: var(--t-md);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-feature-settings: 'tnum', 'zero';
	transition: border-color var(--d-1) var(--ease);
}
.mz-track-form__input::placeholder { color: var(--ink-4); letter-spacing: 0.06em; }
.mz-track-form__input:hover { border-color: var(--ctl-border-h); }
.mz-track-form__input:focus-visible { outline: none; border-color: var(--ink-1); }

.mz-track-form__submit {
	height: 56px;
	padding: 0 var(--s-5);
	border-radius: var(--r-2);
	font-size: var(--t-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	gap: var(--s-2);
}
.mz-track-form__submit svg { width: 16px; height: 16px; }
.mz-track-form__hint {
	display: block;
	margin-top: var(--s-3);
	font-size: var(--t-xs);
	line-height: var(--lh-sm);
	color: var(--ink-3);
}

/* ------------------------------------------------------------
 * 2. RESULT WRAPPER + LOADING STATE
 * ------------------------------------------------------------ */
.mz-track-result { padding: var(--s-8) 0; }

.mz-track-out {
	min-height: 80px;
}
.mz-track-loading {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-5);
	background: var(--paper-2);
	border: 1px solid var(--border);
	border-radius: var(--r-3);
	font-family: var(--ff-mono);
	font-size: var(--t-sm);
	text-transform: uppercase;
	letter-spacing: var(--tr-micro);
	color: var(--ink-3);
}
.mz-track-loading__spinner {
	width: 16px;
	height: 16px;
	border: 2px solid var(--border);
	border-top-color: var(--brand);
	border-radius: 50%;
	animation: mz-track-spin 800ms linear infinite;
}
@keyframes mz-track-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.mz-track-loading__spinner { animation: none; }
}

/* ------------------------------------------------------------
 * 3. CARD (modalità "full")
 * ------------------------------------------------------------ */
.mz-track-card {
	background: var(--paper);
	border: 1px solid var(--border);
	border-radius: var(--r-3);
	padding: var(--s-5) var(--s-6);
}
.mz-track-card__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-5);
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--border);
}
.mz-track-card__heading {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	min-width: 0;
}
.mz-track-card__code-label {
	font-family: var(--ff-mono);
	font-size: var(--t-xs);
	line-height: var(--lh-xs);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--ink-3);
}
.mz-track-card__code {
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ink-1);
	background: var(--paper-3);
	border-radius: var(--r-1);
	padding: var(--s-2) var(--s-3);
	display: inline-block;
	word-break: break-all;
}

.mz-track-card__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	margin: var(--s-4) 0 0;
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
}
.mz-track-card__meta-cell {
	background: var(--paper);
	padding: var(--s-3) var(--s-4);
	margin: 0;
}
.mz-track-card__meta-cell dt {
	font-family: var(--ff-mono);
	font-size: var(--t-xs);
	line-height: var(--lh-xs);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: var(--s-1);
}
.mz-track-card__meta-cell dd {
	margin: 0;
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--ink-1);
}
.mz-track-card__hint {
	margin: var(--s-4) 0 0;
	font-size: var(--t-sm);
	color: var(--ink-2);
}

/* ------------------------------------------------------------
 * 4. PILL — modificatori semantici allineati al CLASS_MAP del JS.
 *
 * Mapping classe Dashboard → modifier Manzo:
 *   success   → done       (--success)
 *   primary   → out        (--brand-ink, "in consegna")
 *   info      → transit    (--brand)
 *   warning   → giacenza   (--warning)
 *   danger    → exception  (--danger)
 *   secondary → pending    (ink-3 su paper-3)
 * ------------------------------------------------------------ */
.mz-track-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	height: 32px;
	padding: 0 var(--s-3);
	border-radius: var(--r-2);
	font-family: var(--ff-mono);
	font-size: var(--t-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid currentColor;
}
.mz-track-pill svg { width: 14px; height: 14px; }

.mz-track-pill--sm { height: 22px; padding: 0 var(--s-2); font-size: 10px; letter-spacing: 0.08em; gap: 6px; }
.mz-track-pill--sm svg { width: 12px; height: 12px; }
a.mz-track-pill { text-decoration: none; transition: opacity var(--d-1) var(--ease); }
a.mz-track-pill:hover { opacity: 0.85; }

.mz-track-pill--pending   { color: var(--ink-3);    background: var(--paper-3); }
.mz-track-pill--transit   { color: var(--brand);    background: var(--brand-tint); }
.mz-track-pill--out       { color: var(--brand-ink);background: var(--brand-tint); }
.mz-track-pill--giacenza  { color: var(--warning);  background: var(--brand-tint); }
.mz-track-pill--done      { color: var(--success);  background: color-mix(in oklch, var(--success) 8%, var(--paper)); }
.mz-track-pill--exception { color: var(--danger);   background: var(--accent-tint); }

/* Sub-text mono accanto al pill (data ultimo evento sotto, orders list) */
.mz-track-pill__sub {
	display: block;
	margin-top: var(--s-1);
	font-size: var(--t-xs);
	color: var(--ink-3);
	letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
 * 5. TIMELINE — eventi verticali, più recente in alto
 * ------------------------------------------------------------ */
.mz-track-timeline {
	list-style: none;
	padding: 0;
	margin: var(--s-7) 0 0;
}
.mz-track-event {
	position: relative;
	padding: 0 0 var(--s-5) var(--s-7);
	border-left: 1px solid var(--border);
	margin-left: var(--s-3);
}
.mz-track-event:last-child {
	padding-bottom: 0;
	border-left-color: transparent;
}
.mz-track-event__marker {
	position: absolute;
	left: -7px;
	top: 2px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--paper);
	border: 2px solid var(--ink-1);
}
.mz-track-event.is-head .mz-track-event__marker {
	background: var(--brand);
	border-color: var(--brand);
	box-shadow: 0 0 0 4px var(--brand-tint);
}
.mz-track-event__body { display: flex; flex-direction: column; gap: var(--s-1); }
.mz-track-event__time {
	font-size: var(--t-xs);
	line-height: var(--lh-xs);
	letter-spacing: 0.04em;
	color: var(--ink-3);
	text-transform: uppercase;
}
.mz-track-event__status {
	margin: 0;
	font-size: var(--t-md);
	line-height: 1.3;
	font-weight: 600;
	color: var(--ink-1);
}
.mz-track-event.is-head .mz-track-event__status { color: var(--brand); }
.mz-track-event__loc { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }

/* ------------------------------------------------------------
 * 6. EMPTY STATE — non disponibile, errori, numero non riconosciuto
 * ------------------------------------------------------------ */
.mz-track-empty {
	max-width: 56ch;
	margin: 0 auto;
	padding: var(--s-7) var(--s-5);
	text-align: center;
	background: var(--paper-2);
	border: 1px solid var(--border);
	border-radius: var(--r-3);
}
.mz-track-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	color: var(--ink-3);
	background: var(--paper-3);
	border-radius: var(--r-3);
	margin: 0 auto var(--s-4);
}
.mz-track-empty__icon svg { width: 28px; height: 28px; }
.mz-track-empty__title {
	font-size: var(--t-lg);
	line-height: var(--lh-lg);
	font-weight: 700;
	letter-spacing: var(--tr-tight);
	margin: 0 0 var(--s-3);
	color: var(--ink-1);
}
.mz-track-empty__text {
	font-size: var(--t-base);
	color: var(--ink-2);
	margin: 0;
}
.mz-track-empty__text code {
	background: var(--paper-3);
	padding: 2px 6px;
	border-radius: var(--r-1);
	font-family: var(--ff-mono);
	font-size: 0.95em;
	color: var(--ink-1);
	word-break: break-all;
}

/* ------------------------------------------------------------
 * 7. HOWTO + FOOT — blocchi statici intorno alla pagina
 * ------------------------------------------------------------ */
.mz-track-howto {
	padding: var(--s-8) 0;
	border-bottom: 1px solid var(--border);
}
.mz-track-howto__head { margin-bottom: var(--s-6); }
.mz-track-howto__title {
	margin: var(--s-2) 0 0;
	font-size: var(--t-xl);
	line-height: var(--lh-xl);
	font-weight: 700;
	letter-spacing: var(--tr-tight);
	color: var(--ink-1);
	max-width: 30ch;
}
.mz-track-howto__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	padding: 0;
	margin: 0;
	list-style: none;
}
.mz-track-howto__step {
	background: var(--paper);
	padding: var(--s-5);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.mz-track-howto__step-num {
	font-family: var(--ff-mono);
	font-size: var(--t-xs);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--ink-4);
}
.mz-track-howto__step-title {
	margin: 0;
	font-size: var(--t-lg);
	font-weight: 700;
	letter-spacing: var(--tr-tight);
	color: var(--ink-1);
}
.mz-track-howto__step-text {
	margin: 0;
	font-size: var(--t-sm);
	line-height: var(--lh-base);
	color: var(--ink-2);
}

.mz-track-foot {
	padding: var(--s-8) 0 var(--s-9);
	background: var(--paper-2);
	border-top: 1px solid var(--border);
}
.mz-track-foot__head { margin-bottom: var(--s-5); }
.mz-track-foot__title {
	margin: var(--s-2) 0 0;
	font-size: var(--t-lg);
	font-weight: 700;
	letter-spacing: var(--tr-tight);
	color: var(--ink-1);
	max-width: 36ch;
}
.mz-track-foot__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
}
.mz-track-foot__cell { background: var(--paper); padding: var(--s-5); }
.mz-track-foot__cell dt {
	font-family: var(--ff-mono);
	font-size: var(--t-xs);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: var(--s-2);
}
.mz-track-foot__cell dd { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.mz-track-foot__cell a { color: var(--brand); text-decoration: none; border-bottom: 1px solid currentColor; }
.mz-track-foot__cell a:hover { color: var(--brand-ink); }

/* ------------------------------------------------------------
 * 8. INLINE EMBED — view-order (compact card sopra agli items)
 * ------------------------------------------------------------ */
.mz-order-track {
	margin: var(--s-5) 0 var(--s-6);
	padding: var(--s-5) 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.mz-order-track__eyebrow {
	display: block;
	font-family: var(--ff-mono);
	font-size: var(--t-xs);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: var(--s-3);
}

/* ------------------------------------------------------------
 * 9. ORDERS-TABLE compact pill cell
 * ------------------------------------------------------------ */
.mz-acct-track-cell__empty { color: var(--ink-4); font-size: var(--t-sm); }

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.mz-track-hero__grid { grid-template-columns: 1fr; align-items: start; }
	.mz-track-howto__steps,
	.mz-track-foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
	.mz-track-hero { padding: var(--s-7) 0 var(--s-6); }
	.mz-track-form__row { grid-template-columns: 1fr; }
	.mz-track-form__submit { justify-content: center; }
	.mz-track-howto__steps,
	.mz-track-foot__grid { grid-template-columns: 1fr; }
	.mz-track-card { padding: var(--s-4); }
	.mz-track-card__head { flex-direction: column; align-items: flex-start; }
	.mz-track-card__meta { grid-template-columns: 1fr 1fr; }
}

/* Print: timeline collapsed, niente form */
@media print {
	.mz-track-form, .mz-track-foot, .mz-track-howto { display: none; }
	.mz-track-card, .mz-track-empty { border-color: #c0c0c0; background: #fff; }
	.mz-track-pill { background: #fff; color: #111; border-color: #111; }
	.mz-track-event__marker { background: #111; border-color: #111; box-shadow: none; }
	.mz-track-event { border-left-color: #c0c0c0; }
}