/*!
 * GuyBet Logistics · package-status rail  v1.6.2  ([atl_status_rail], Track page only)
 * The stages a package moves through, in the plugin's order. When the rail first comes into
 * view a parcel travels it once and each stage lights as it passes. Without motion (reduced
 * motion, the Elementor editor, no JavaScript) every stage shows lit, with the parcel at the end.
 * Named atl-status-rail, not atl-rail: the plugin's atl.css styles its own .atl-rail and loads late on Track.
 */

.atl-status-rail {
	--atl-status-rail-d: 4200ms;
	--atl-status-rail-start: 500ms;
	--atl-status-rail-gap: 12px;
	position: relative;
	padding-top: 4px;
}

.atl-status-rail__stages {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0 var(--atl-status-rail-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.atl-status-rail__stage {
	--atl-at: calc(var(--atl-status-rail-start) + var(--k, 0) * var(--atl-status-rail-d) / 6);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 0;
	text-align: center;
}

.atl-status-rail__node {
	position: relative;
	z-index: 1;
	flex: none;
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border: 2px solid var(--e-global-color-signal, #0DC600);
	border-radius: 50%;
	background-color: var(--e-global-color-signal, #0DC600);
	transition: background-color 300ms ease var(--atl-at), border-color 300ms ease var(--atl-at);
}

.atl-status-rail__label {
	max-width: 14ch;
	font-size: 14px;
	line-height: 1.35;
	color: #fff;
	transition: color 300ms ease var(--atl-at);
}

/* The line between the first and last nodes (their centres sit half a column in). */
.atl-status-rail__track {
	position: absolute;
	top: 10px;
	left: calc((100% - 6 * var(--atl-status-rail-gap)) / 14);
	right: calc((100% - 6 * var(--atl-status-rail-gap)) / 14);
	border-top: 2px dashed var(--e-global-color-ink700, #22352B);
}
.atl-status-rail__track::before {
	content: "";
	position: absolute;
	inset: -2px 0 auto 0;
	border-top: 2px dashed var(--e-global-color-signal, #0DC600);
	clip-path: inset(0); /* an explicit end state, so the line draws instead of jumping from "none" */
	transition: clip-path var(--atl-status-rail-d) linear var(--atl-status-rail-start);
}

/* The parcel: a full-length layer with the dot at its far end, moved by translate. */
.atl-status-rail__parcel {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: 0;
}
.atl-status-rail__parcel::after {
	content: "";
	position: absolute;
	top: -6px;
	right: -6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--e-global-color-signalhi, #38E024);
	box-shadow: 0 0 0 6px rgba(var(--atl-signal-rgb, 13, 198, 0), .25);
}

/* Before the rail is seen: stages unlit, line undrawn, parcel hidden. */
.atl-motion .atl-status-rail:not(.is-in) .atl-status-rail__node {
	border-color: var(--e-global-color-mutedd, #A7B8AE);
	background-color: var(--e-global-color-ink950, #07100C);
}
.atl-motion .atl-status-rail:not(.is-in) .atl-status-rail__label { color: var(--e-global-color-mutedd, #A7B8AE); }
.atl-motion .atl-status-rail:not(.is-in) .atl-status-rail__track::before { clip-path: inset(0 100% 0 0); }
.atl-motion .atl-status-rail:not(.is-in) .atl-status-rail__parcel { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
	.atl-motion .atl-status-rail.is-in .atl-status-rail__parcel { animation: atl-status-rail-go var(--atl-status-rail-d) linear var(--atl-status-rail-start) both; }
}

@keyframes atl-status-rail-go { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes atl-status-rail-go-y { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* Phones: the stages stack, and the rail runs down the left. */
@media (max-width: 767px) {
	.atl-status-rail__stages {
		grid-template-columns: 1fr;
		grid-auto-rows: 28px;
		gap: 0;
	}
	.atl-status-rail__stage {
		flex-direction: row;
		text-align: left;
	}
	.atl-status-rail__label { max-width: none; }
	.atl-status-rail__track {
		top: 18px;
		bottom: 14px;
		left: 6px;
		right: auto;
		border-top: 0;
		border-left: 2px dashed var(--e-global-color-ink700, #22352B);
	}
	.atl-status-rail__track::before {
		inset: 0 auto 0 -2px;
		border-top: 0;
		border-left: 2px dashed var(--e-global-color-signal, #0DC600);
	}
	.atl-motion .atl-status-rail:not(.is-in) .atl-status-rail__track::before { clip-path: inset(0 0 100% 0); }
	.atl-status-rail__parcel {
		top: 0;
		left: -1px;
		width: 0;
		height: 100%;
	}
	.atl-status-rail__parcel::after {
		top: auto;
		right: auto;
		bottom: -6px;
		left: -6px;
	}
	.atl-motion .atl-status-rail.is-in .atl-status-rail__parcel { animation-name: atl-status-rail-go-y; }
}

@media (prefers-reduced-motion: reduce) {
	.atl-status-rail__node, .atl-status-rail__label, .atl-status-rail__track::before { transition: none !important; }
}