/*
 * Shipment tracking: My Account → تتبع طلباتي and the tracking page.
 * Cards reuse account.css (.mx-order, .mx-status, .mx-track).
 */
.mx-trk { display: grid; gap: var(--mx-s4); }
.mx-trk__heading { margin: var(--mx-s2) 0 0; font-size: var(--mx-fs-h4); }

/* Card: <details> with the order head as its summary. */
.mx-trk__card > summary { list-style: none; cursor: pointer; }
.mx-trk__card > summary::-webkit-details-marker { display: none; }
.mx-trk__sum:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgb(33 85 201 / 25%); border-radius: var(--mx-r-md); }
.mx-trk__right { display: inline-flex; align-items: center; gap: var(--mx-s2); flex: none; }
.mx-trk__chev { color: var(--mx-muted); transition: transform .2s var(--mx-ease); }
.mx-trk__card[open] .mx-trk__chev { transform: rotate(180deg); }
.mx-trk__body .mmx-track { margin: var(--mx-s4) 0 0; border-color: var(--mx-line); border-radius: var(--mx-r-lg); }
.mx-trk__items { margin: var(--mx-s4) 0 0; font-size: var(--mx-fs-sm); line-height: 1.7; color: var(--mx-ink-2); }
.mx-trk__items span { color: var(--mx-muted); }

/* Tracking page form. */
.mx-trk--page { max-width: none; }
/* The page sits in .mx-prose: undo its reading line-height for the cards. */
.mx-page--track .mx-prose { line-height: var(--mx-lh); }
.mx-page--track .mx-prose h3.mx-trk__label { margin: var(--mx-s5) 0 0; }
.mx-trk__form { padding: var(--mx-s5); border: 1px solid var(--mx-line); border-radius: var(--mx-r-lg); background: var(--mx-surface); }
@media (min-width: 1000px) {
	/* Wide: the intro beside the fields, on one line. */
	.mx-trk__form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr); column-gap: var(--mx-s8); align-items: end; padding: var(--mx-s6) var(--mx-s8); }
	.mx-trk__intro { align-self: center; margin: 0; font-size: var(--mx-fs-lg); font-weight: 700; color: var(--mx-ink); line-height: 1.7; }
	.mx-trk__hint { grid-column: 2; }
}
.mx-trk__intro { margin: 0 0 var(--mx-s4); color: var(--mx-ink-2); }
.mx-trk__fields { display: grid; gap: var(--mx-s3); }
.mx-trk__field { display: grid; gap: 6px; font-size: var(--mx-fs-sm); font-weight: 700; }
.mx-trk__field input { width: 100%; background: #fff; }
.mx-trk__go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
@media (min-width: 640px) {
	.mx-trk__fields { grid-template-columns: 1fr 1fr auto; align-items: end; }
	.mx-trk__go { min-height: 48px; padding-inline: var(--mx-s6); }
}
.mx-trk__hint { margin: var(--mx-s3) 0 0; font-size: var(--mx-fs-sm); color: var(--mx-muted); }
.mx-trk__hint a { color: var(--mx-brand-ink); font-weight: 700; }
.mx-trk__login { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mx-s2); margin: 0; padding: var(--mx-s3) var(--mx-s4); border-radius: var(--mx-r-md); background: var(--mx-brand-soft); }
.mx-trk__login .mx-btn { margin-inline-start: auto; }
.mx-trk__error { display: flex; align-items: flex-start; gap: var(--mx-s2); margin: 0; padding: var(--mx-s3) var(--mx-s4); border-radius: var(--mx-r-md); background: var(--mx-error-soft); color: var(--mx-error); font-weight: 700; }
.mx-trk__error .mx-icon { flex: none; margin-top: 3px; }
.mx-trk__result:empty { display: none; }
.mx-trk__label { display: flex; align-items: center; gap: 6px; margin: var(--mx-s4) 0 0; font-size: var(--mx-fs-sm); font-weight: 700; color: var(--mx-ink-2); }
.mx-trk__label .mx-icon { color: var(--mx-brand-ink); }
.mx-trk__body .mx-track { margin-top: var(--mx-s3); }

/* Card body: our status and the carrier side by side when the card is wide
   (container query, so it works on the page and inside My Account). */
.mx-trk__card { container-type: inline-size; }
.mx-trk__grid { display: grid; gap: var(--mx-s4); }
.mx-trk__ours { min-width: 0; }
.mx-trk__carrier { min-width: 0; }
.mx-trk__carrier .mmx-track { margin: 0; }
.mx-trk__carrier .mx-track-note { margin: 0; }
@container (min-width: 820px) {
	.mx-trk__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: var(--mx-s6); margin-top: var(--mx-s4); }
	.mx-trk__carrier .mmx-track { height: 100%; box-sizing: border-box; }
	.mx-trk__ours { padding: var(--mx-s4) var(--mx-s5); border: 1px solid var(--mx-line); border-radius: var(--mx-r-lg); }
	.mx-trk__ours .mx-trk__label, .mx-page--track .mx-prose .mx-trk__ours h3.mx-trk__label { margin-top: 0; }
	.mx-trk__ours .mx-track { margin-bottom: 0; }
	.mx-trk__carrier .mx-track-note { height: 100%; box-sizing: border-box; }
}
@media (min-width: 1000px) {
	.mx-trk--page .mx-trk__card { padding: var(--mx-s6) var(--mx-s8); }
}