/*
 * DC Logistics — skin for the TLS Tracking plugin's [TLSTrackingForm].
 *
 * The plugin is installed UNMODIFIED. This sheet is enqueued with the plugin's own
 * stylesheet ('tls-tracking-front') as a dependency, so it always prints after it
 * (inc/tracking.php explains why that is not automatic).
 *
 * Every selector is prefixed with .dcl-track, which (a) scopes the skin to our card and
 * (b) adds one class of specificity over the plugin's matching rule — enough to win
 * without !important. The one !important below answers an !important in the plugin and
 * is marked.
 *
 * Plugin markup (inc/front/widget.php, inc/front/tracking-order.php):
 *   .tlst-ajax-form
 *     .tlst-form-field > input[name=tlst_tracking_number] + input[type=submit]
 *     .tls-ajax-cont-1 (Loading…)   .tls-results   .tls-ajax-cont-2   .tls-results-2
 *   .tls-results > .message (error)  |  .tracking-order[.collapse|.nocollapse][.twostage]
 *     .collapse-header > .toggle-sign      (only when >1 order matched)
 *     .collapse-content
 *       .progress-container.status-<slug> > .progress-fill .progress-indicator .progress-labels>span×5
 *       .order-data > div > span(label) + value  …  .lmcnotice  .download>a | .message
 *
 * Covers both the single-tier (tls-tracking 1.7.x) and two-tier (1.8.x) plugins: the
 * markup is the same; two-tier only adds .twostage / .lmcnotice / .collapse.
 */

/* ── Entry row ─────────────────────────────────────────────────────────── */
.dcl-track div.tlst-form-field {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dcl-space-2);
	margin-top: 0;
	text-align: left;
}
.dcl-track div.tlst-form-field input[type=text] {
	flex: 1 1 16rem;
	width: auto;
	min-height: 52px;
	margin: 0;
	padding: 10px 14px;
	font: inherit;
	font-size: 19px;
	letter-spacing: 0.02em;
	color: var(--dcl-ink);
	background: var(--dcl-surface-alt);
	border: 1px solid var(--dcl-ink-muted);
	border-radius: var(--dcl-radius-sm);
	box-shadow: none;
}
.dcl-track div.tlst-form-field input[type=text]::placeholder { color: var(--dcl-ink-muted); opacity: 1; }
.dcl-track div.tlst-form-field input[type=text]:focus {
	outline: 3px solid var(--dcl-blue);
	outline-offset: 0;
	border-color: var(--dcl-blue);
	background: var(--dcl-surface);
}

/* Track button + the result's download link share the primary-button treatment. */
.dcl-track div.tlst-form-field input[type=submit],
.dcl-track div.download a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin: 0;
	padding: 0 28px !important; /* answers the plugin's `padding: 0 6px !important` */
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	color: var(--dcl-on-brand);
	background: var(--dcl-blue);
	border: 2px solid transparent;
	border-radius: var(--dcl-radius-sm);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s;
}
.dcl-track div.tlst-form-field input[type=submit]:hover,
.dcl-track div.download a:hover { background: var(--dcl-blue-deep); color: var(--dcl-on-brand); }
.dcl-track div.tlst-form-field input[type=submit]:focus-visible,
.dcl-track div.download a:focus-visible { outline: 3px solid var(--dcl-blue); outline-offset: 2px; }
.dcl-track .tlst-ajax-form.doing-ajax-1 div.tlst-form-field input[type=submit] { opacity: 0.6; cursor: progress; }

@media (max-width: 480px) {
	.dcl-track div.tlst-form-field input[type=submit] { flex: 1 1 100%; }
}

/* ── Loading states ────────────────────────────────────────────────────── */
.dcl-track .tlst-ajax-form .tls-ajax-cont-1,
.dcl-track .tlst-ajax-form .tls-ajax-cont-2 {
	padding: var(--dcl-space-3) 0 0;
	font-size: 17px;
	font-weight: 600;
	text-align: left;
	color: var(--dcl-ink-muted);
}
.dcl-track .tlst-ajax-form .tls-ajax-cont-1::before,
.dcl-track .tlst-ajax-form .tls-ajax-cont-2::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: var(--dcl-space-1);
	vertical-align: -2px;
	border: 2px solid var(--dcl-border);
	border-top-color: var(--dcl-blue);
	border-radius: 50%;
	animation: dcl-spin 0.8s linear infinite;
}
@keyframes dcl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.dcl-track .tlst-ajax-form .tls-ajax-cont-1::before,
	.dcl-track .tlst-ajax-form .tls-ajax-cont-2::before { animation: none; }
}

/* ── Messages (not found / errors) ─────────────────────────────────────── */
.dcl-track .tls-results:not(:empty),
.dcl-track .tls-results-2:not(:empty) { margin-top: var(--dcl-space-3); }
.dcl-track .tls-results > .message,
.dcl-track .tls-results-2:not(:empty) {
	padding: var(--dcl-space-2);
	background: var(--dcl-blue-soft);
	color: var(--dcl-ink);
	border-radius: var(--dcl-radius-sm);
	font-weight: 600;
}

/* ── Result card ───────────────────────────────────────────────────────── */
.dcl-track div.tls-results div.tracking-order {
	padding-top: var(--dcl-space-2);
	border-top: 1px solid var(--dcl-border);
}
.dcl-track div.tls-results div.tracking-order + div.tracking-order { margin-top: var(--dcl-space-2); }

/* Progress track */
.dcl-track div.tls-results div.tracking-order .progress-container {
	width: auto;
	height: 12px;
	margin: 40px 22px 72px; /* side margins keep the 44px dot inside the card at 0% / 100% */
	padding: 0;
	background: var(--dcl-blue-soft);
	border-radius: 999px;
}
.dcl-track div.tls-results div.tracking-order .progress-fill {
	height: 100%;
	padding: 0;
	background: var(--dcl-blue);
	border: 0;
	border-radius: 999px;
}
.dcl-track div.tls-results div.tracking-order .progress-indicator {
	width: 28px;
	height: 28px;
	padding: 0;
	background: var(--dcl-blue);
	border: 4px solid var(--dcl-surface);
	box-shadow: 0 0 0 2px var(--dcl-blue);
}
/* Delivered: fill and dot go deep — the one state worth marking as "done". */
.dcl-track div.tls-results div.tracking-order .status-delivered .progress-fill,
.dcl-track div.tls-results div.tracking-order .status-delivered-delivered .progress-fill,
.dcl-track div.tls-results div.tracking-order .status-delivered .progress-indicator,
.dcl-track div.tls-results div.tracking-order .status-delivered-delivered .progress-indicator {
	background: var(--dcl-blue-deep);
}
.dcl-track div.tls-results div.tracking-order .status-delivered .progress-indicator,
.dcl-track div.tls-results div.tracking-order .status-delivered-delivered .progress-indicator {
	box-shadow: 0 0 0 2px var(--dcl-blue-deep);
}

/* Step labels under the track */
.dcl-track div.tls-results div.tracking-order .progress-labels {
	top: 100%;
	margin-top: 22px;
	padding: 0;
	gap: var(--dcl-space-1);
	font-size: 14px;
	line-height: 18px;
	color: var(--dcl-ink-muted);
}
.dcl-track div.tls-results div.tracking-order div.progress-labels span {
	flex: 1 1 0;
	width: auto;
	margin: 0;
	float: none;
	font-weight: 600;
}

/* Detail rows: label / value, two columns, hairline between rows. */
.dcl-track div.tls-results div.tracking-order div.order-data {
	width: auto;
	max-width: 40rem;
	margin: 0;
	padding: 0;
}
.dcl-track div.tls-results div.tracking-order div.order-data > div:not(.lmcnotice):not(.download):not(.message) {
	display: grid;
	grid-template-columns: 11rem 1fr;
	gap: var(--dcl-space-2);
	margin: 0;
	padding: 10px 0;
	line-height: 24px;
	border-bottom: 1px solid var(--dcl-border);
}
.dcl-track div.tls-results div.tracking-order div.order-data > div > span {
	width: auto;
	margin: 0;
	float: none;
	text-align: left;
	font-weight: 600;
	color: var(--dcl-ink-muted);
}
@media (max-width: 560px) {
	.dcl-track div.tls-results div.tracking-order div.order-data > div:not(.lmcnotice):not(.download):not(.message) {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

.dcl-track div.tls-results div.tracking-order div.download {
	margin-top: var(--dcl-space-3);
	text-align: left;
}
.dcl-track div.tls-results div.tracking-order div.order-data > div.message {
	margin-top: var(--dcl-space-2);
	color: var(--dcl-ink-muted);
}

/* Two-tier: hand-off to the final-mile carrier. */
.dcl-track div.tls-results div.tracking-order .lmcnotice {
	margin-top: var(--dcl-space-3);
	padding: var(--dcl-space-2) var(--dcl-space-3);
	text-align: left;
	background: var(--dcl-blue-soft);
	border-radius: var(--dcl-radius-sm);
}
.dcl-track div.tls-results div.tracking-order .lmcnotice p { margin: 0 0 var(--dcl-space-1); }
.dcl-track div.tls-results div.tracking-order .lmcnotice a { color: var(--dcl-blue); font-size: 20px; }

/* Two-tier: several orders matched — each collapses behind a header row. */
.dcl-track div.tls-results div.tracking-order.collapse .collapse-header {
	gap: var(--dcl-space-2);
	padding: 12px var(--dcl-space-2);
	background: var(--dcl-surface-alt);
	border: 1px solid var(--dcl-border);
	border-radius: var(--dcl-radius-sm);
	color: var(--dcl-ink);
	font-weight: 600;
}
.dcl-track div.tls-results div.tracking-order.collapse .collapse-header:hover { border-color: var(--dcl-blue); }
.dcl-track div.tls-results div.tracking-order .collapse-header .toggle-sign {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	float: none;
	color: var(--dcl-blue);
	font-size: 22px;
	line-height: 1;
}
.dcl-track div.tls-results div.tracking-order.collapse .collapse-content { padding: 0; background: transparent; }

/* Narrow: labels wrap to three or four lines, so reserve more room beneath the track.
 * Phones: the plugin hides the labels under 480px; give back the room it reserved. */
@media (max-width: 720px) {
	.dcl-track div.tls-results div.tracking-order .progress-container { margin-bottom: 100px; }
	.dcl-track div.tls-results div.tracking-order .progress-labels { font-size: 13px; line-height: 16px; }
}
@media (max-width: 480px) {
	.dcl-track div.tls-results div.tracking-order .progress-container { margin-bottom: 40px; }
}