/* SpeedLine Tracking — front-end shortcode styles (Phase 2) */

.sl-tracking {
	/* No hardcoded brand color/radius by default — these fall back to the
	   active theme's own color palette (block themes expose color presets
	   as CSS custom properties; classic themes don't, so currentColor is
	   the last resort, which at least matches the surrounding text rather
	   than clashing with it). Settings → Appearance overrides these by
	   defining --sl-accent / --sl-radius on this same selector with higher
	   specificity via an inline <style> block — see class-shortcode.php. */
	--sl-accent: var(--wp--preset--color--primary, var(--wp--preset--color--contrast, currentColor));
	--sl-radius: 4px;
	--sl-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sl-surface: #fff;
	--sl-surface-muted: #f6f7f7;
	--sl-border: rgba(0, 0, 0, 0.12);
	--sl-text-muted: #6b7280;
	/* No max-width: whatever container this is placed in (a Gutenberg column,
	   an Elementor widget area, a plain page) already controls the available
	   width — this just fills it and relies on its own padding so content
	   doesn't touch the container's edges. Named as a size container so the
	   mobile-stack breakpoint further down can respond to how much width
	   THIS widget actually has, not the browser viewport — relevant exactly
	   because it can now end up in a narrow column at any viewport size. */
	container-type: inline-size;
	container-name: sl-tracking;
	font-size: 1rem;
	padding: 1.5em;
	background: var(--sl-surface);
	border: 1px solid var(--sl-border);
	border-radius: calc(var(--sl-radius) + 8px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 28px -16px rgba(0, 0, 0, 0.18);
	box-sizing: border-box;
}

.sl-tracking *,
.sl-tracking *::before,
.sl-tracking *::after {
	box-sizing: inherit;
}

.sl-tracking__form {
	display: flex;
	gap: 0.5em;
}

.sl-tracking__input {
	/* flex-basis 0% (not "auto") so the button's width — whether its
	   content-sized default or an explicit --sl-button-width percentage —
	   is what the input's share is computed relative to; the form's `gap`
	   is already excluded from that distribution automatically. */
	flex: 1 1 0%;
	min-width: 0;
	padding: 0.7em 0.9em;
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius);
	font-size: 1em;
	background: var(--sl-surface);
	transition: border-color 0.2s var(--sl-ease), box-shadow 0.2s var(--sl-ease);
}

.sl-tracking__input:focus-visible {
	outline: none;
	border-color: var(--sl-accent);
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.25); /* fallback for browsers without color-mix() */
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sl-accent) 25%, transparent);
}

.sl-tracking__input:disabled,
.sl-tracking__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.sl-tracking__submit:disabled:hover {
	filter: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.sl-tracking__submit.is-loading {
	position: relative;
	color: transparent; /* hides the label; the spinner below takes its place */
}

.sl-tracking__submit.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.1em;
	height: 1.1em;
	margin: -0.55em 0 0 -0.55em;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: sl-spin 0.7s linear infinite;
}

.sl-tracking__submit {
	/* Default: size to its own label + padding, like a normal button. Only
	   takes a fixed share of the form's width if Settings → Appearance sets
	   --sl-button-width (e.g. "20%") — see class-shortcode.php. */
	flex: 0 0 var(--sl-button-width, auto);
	padding: 0.7em 1.4em;
	border: none;
	border-radius: var(--sl-radius);
	background: var(--sl-accent);
	color: #fff;
	font-size: 1em;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	transition: filter 0.2s var(--sl-ease), transform 0.1s var(--sl-ease), box-shadow 0.2s var(--sl-ease);
}

.sl-tracking__submit:hover {
	filter: brightness(0.9);
	box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.35);
}

.sl-tracking__submit:active {
	transform: scale(0.97);
	filter: brightness(0.85);
}

.sl-tracking__submit:focus-visible {
	outline: 2px solid var(--sl-accent);
	outline-offset: 2px;
}

.sl-tracking__result:empty {
	margin: 0;
}

.sl-tracking__result-heading {
	margin: 1.5em 0 0.2em;
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--sl-text-muted);
	text-transform: uppercase;
}

.sl-tracking__summary {
	margin: 0 0 0.5em;
	font-size: 0.98em;
	line-height: 1.5;
}

.sl-tracking__vendor {
	margin: 0 0 1em;
	font-size: 0.88em;
	color: var(--sl-text-muted);
}

.sl-tracking__message {
	margin: 1.5em 0 0;
	color: var(--sl-text-muted);
}

.sl-tracking__message--error {
	color: #d63638;
}

.sl-tracking__retry {
	display: block;
	margin: 0.6em 0 0;
	padding: 0.4em 0.9em;
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius);
	background: var(--sl-surface);
	color: inherit;
	font-size: 0.9em;
	cursor: pointer;
	transition: border-color 0.2s var(--sl-ease), background 0.2s var(--sl-ease);
}

.sl-tracking__retry:hover {
	border-color: var(--sl-accent);
	background: var(--sl-surface-muted);
}

.sl-tracking__spinner {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.5em;
	vertical-align: -0.15em;
	border: 2px solid var(--sl-border);
	border-top-color: var(--sl-accent);
	border-radius: 50%;
	animation: sl-spin 0.7s linear infinite;
}

.sl-tracking__steps {
	/* Single source of truth for the dot's diameter, shared by both the dot
	   itself and the line's centering math below — keeping them derived
	   from one value is what guarantees they can't drift apart. (They
	   previously used independent `em` values, and the dot's own
	   `font-size` override silently changed what ITS `em`s resolved
	   against, desyncing it from the line — a real, now-fixed bug.) */
	--sl-dot-size: 24px;
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 1.5em 0 0.5em;
	padding: 0;
}

.sl-tracking__step {
	flex: 1;
	text-align: center;
	padding-top: calc(var(--sl-dot-size) + 10px);
	position: relative;
	color: var(--sl-text-muted);
}

.sl-tracking__step::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	width: var(--sl-dot-size);
	height: var(--sl-dot-size);
	margin-left: calc(var(--sl-dot-size) / -2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	line-height: 1;
	color: transparent;
	background: var(--sl-surface-muted);
	border: 2px solid var(--sl-border);
	border-radius: 50%;
	transition: background 0.25s var(--sl-ease), border-color 0.25s var(--sl-ease);
}

.sl-tracking__step::after {
	content: "";
	position: absolute;
	/* Half the dot's own diameter minus half the line's 2px thickness —
	   centers the line exactly on the dot's vertical center regardless of
	   what --sl-dot-size is tuned to later. */
	top: calc(var(--sl-dot-size) / 2 - 1px);
	left: 50%;
	z-index: 0;
	width: 100%;
	height: 2px;
	background: var(--sl-border);
	transition: background 0.3s var(--sl-ease);
}

.sl-tracking__step:last-child::after {
	display: none;
}

.sl-tracking__step.is-complete {
	color: var(--sl-accent);
	animation: sl-step-in 0.4s var(--sl-ease) both;
}

.sl-tracking__step.is-complete:nth-child(2) {
	animation-delay: 0.12s;
}

.sl-tracking__step.is-complete:nth-child(3) {
	animation-delay: 0.24s;
}

.sl-tracking__step.is-complete::before {
	content: "✓";
	background: var(--sl-accent);
	border-color: var(--sl-accent);
	color: #fff;
}

/* Line fill is deliberately its OWN state, not tied to is-complete on the
   step it starts from — a step can be complete (its own dot reached)
   while the step AFTER it hasn't been, and the line between them needs to
   reflect that instead of jumping to fully filled early. See
   tracking.js's lineFillFor() for how is-line-full / is-line-half get
   assigned. */
.sl-tracking__step.is-line-full::after {
	background: var(--sl-accent);
}

.sl-tracking__step.is-line-half::after {
	background: linear-gradient(to right, var(--sl-accent) 50%, var(--sl-border) 50%);
}

.sl-tracking__step-label {
	display: block;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.sl-tracking__step-date {
	display: block;
	font-size: 0.82em;
	margin-top: 0.2em;
	color: var(--sl-text-muted);
}

.sl-tracking__updated {
	margin: 1.25em 0 0;
	font-size: 0.82em;
	color: var(--sl-text-muted);
}

	.sl-tracking__message,
	.sl-tracking__result-heading,
	.sl-tracking__summary,
	.sl-tracking__vendor,
	.sl-tracking__steps {
	animation: sl-fade-up 0.3s var(--sl-ease) both;
}

@keyframes sl-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes sl-step-in {
	from {
		opacity: 0;
		transform: translateY(6px) scale(0.9);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes sl-fade-up {
	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* WordPress core's own screen-reader-text rule, duplicated defensively —
   most themes define this utility class, but not all do, and this widget
   shouldn't depend on the active theme happening to provide it. */
.sl-tracking .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.sl-tracking__step.is-complete,
	.sl-tracking__message,
	.sl-tracking__result-heading,
	.sl-tracking__summary,
	.sl-tracking__vendor,
	.sl-tracking__steps,
	.sl-tracking__spinner {
		animation: none !important;
	}

	.sl-tracking__submit,
	.sl-tracking__input {
		transition: none !important;
	}
}

@media (max-width: 420px) {
	.sl-tracking {
		padding: 1.1em;
	}

	.sl-tracking__form {
		flex-direction: column;
	}

	.sl-tracking__input,
	.sl-tracking__submit {
		/* The button-width ratio is a horizontal-layout concept (flex-basis
		   in a row). Once stacked into a column, flex-basis would apply to
		   height instead — reset both to full-width blocks regardless of
		   any --sl-button-width override. */
		flex: 1 1 auto;
		width: 100%;
	}

	/* Three columns of label + date text get tight fast at this width —
	   a smaller dot and smaller type keep "Registered"/"Pakistan" and a
	   full date from wrapping awkwardly inside each ~90px column. */
	.sl-tracking__steps {
		--sl-dot-size: 20px;
	}

	.sl-tracking__step-label {
		font-size: 0.82em;
	}

	.sl-tracking__step-date {
		font-size: 0.72em;
	}
}

/* Now that .sl-tracking has no max-width of its own, a page builder can drop
   it into a narrow column at ANY viewport size — a viewport media query
   alone wouldn't catch that on an otherwise-wide screen. Respond to the
   widget's own rendered width instead. Mirrors the media query above rule
   for rule (a plain CSS limitation — @media and @container can't share a
   body without a preprocessor), so keep the two in sync if either changes. */
@container sl-tracking (max-width: 380px) {
	.sl-tracking {
		padding: 1.1em;
	}

	.sl-tracking__form {
		flex-direction: column;
	}

	.sl-tracking__input,
	.sl-tracking__submit {
		flex: 1 1 auto;
		width: 100%;
	}

	.sl-tracking__steps {
		--sl-dot-size: 20px;
	}

	.sl-tracking__step-label {
		font-size: 0.82em;
	}

	.sl-tracking__step-date {
		font-size: 0.72em;
	}
}