/* Golf Cart Lab - customer order tracking
   Loaded only on My Account pages by gcl-order-tracking.php.
   Palette matches the transactional email theme: navy #1f2a33, green #2f9e44. */

.gcl-track {
	margin: 0 0 28px;
}

/* ---------- action needed ---------- */

.gcl-track__alert {
	background: #fff8ec;
	border: 1px solid #f0d9ae;
	border-left: 4px solid #d98324;
	border-radius: 10px;
	padding: 16px 18px;
	margin: 0 0 22px;
}

.gcl-track__alert strong {
	display: block;
	color: #1f2a33;
	font-size: 15px;
	margin-bottom: 4px;
}

.gcl-track__alert p {
	margin: 0;
	color: #5a5245;
	font-size: 14px;
	line-height: 1.55;
}

/* ---------- progress line ---------- */

.gcl-track__steps {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	position: relative;
}

.gcl-track__step {
	position: relative;
	padding: 34px 6px 0;
	text-align: center;
	min-width: 0;
}

/* the connecting rail, drawn behind each dot */
.gcl-track__step::before {
	content: "";
	position: absolute;
	top: 11px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: #e1e6e2;
}

.gcl-track__step:first-child::before {
	display: none;
}

.gcl-track__step.is-done::before,
.gcl-track__step.is-current::before {
	background: #2f9e44;
}

.gcl-track__dot {
	position: absolute;
	top: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #d4dad6;
	box-sizing: border-box;
}

.gcl-track__step.is-done .gcl-track__dot {
	background: #2f9e44;
	border-color: #2f9e44;
}

.gcl-track__step.is-done .gcl-track__dot::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 4px;
	width: 4px;
	height: 7px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.gcl-track__step.is-current .gcl-track__dot {
	border-color: #2f9e44;
	box-shadow: 0 0 0 4px rgba(47, 158, 68, .16);
}

.gcl-track__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #8a938d;
	line-height: 1.3;
}

.gcl-track__step.is-done .gcl-track__label,
.gcl-track__step.is-current .gcl-track__label {
	color: #1f2a33;
}

.gcl-track__date {
	display: block;
	font-size: 11px;
	color: #8a938d;
	margin-top: 3px;
}

/* ---------- cards ---------- */

.gcl-track__card {
	background: #fff;
	border: 1px solid #e3e8e4;
	border-radius: 10px;
	padding: 18px 20px;
	margin: 0 0 16px;
}

.gcl-track__kicker {
	display: block;
	color: #2f9e44;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.gcl-track__rows {
	margin: 0 0 14px;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 18px;
	font-size: 14px;
}

.gcl-track__rows dt {
	color: #6b746e;
	margin: 0;
}

.gcl-track__rows dd {
	margin: 0;
	color: #1f2a33;
	font-weight: 600;
	word-break: break-all;
}

.gcl-track__btn {
	display: inline-block;
	background: #1f2a33;
	color: #fff !important;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 7px;
	transition: background .15s ease;
}

.gcl-track__btn:hover,
.gcl-track__btn:focus {
	background: #2f9e44;
	color: #fff !important;
}

/* ---------- timeline ---------- */

.gcl-track__timeline {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gcl-track__timeline li {
	position: relative;
	padding: 0 0 16px 20px;
	border-left: 2px solid #e8ece9;
}

.gcl-track__timeline li:last-child {
	padding-bottom: 0;
	border-left-color: transparent;
}

.gcl-track__timeline li::before {
	content: "";
	position: absolute;
	left: -5px;
	top: 5px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2f9e44;
}

.gcl-track__timeline time {
	display: block;
	font-size: 11px;
	color: #8a938d;
	margin-bottom: 2px;
}

.gcl-track__timeline p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #3f4a44;
}

/* ---------- narrow screens: the line goes vertical ---------- */

@media (max-width: 600px) {

	.gcl-track__steps {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.gcl-track__step {
		padding: 0 0 18px 30px;
		text-align: left;
		min-height: 24px;
	}

	.gcl-track__step:last-child {
		padding-bottom: 0;
	}

	/* Rail now runs DOWNWARD from each dot to the next one, so its colour
	   reflects the step it leaves rather than the one it arrives at. */
	.gcl-track__step::before {
		top: 18px;
		left: 7px;
		width: 2px;
		height: calc(100% - 18px);
		background: #e1e6e2;
	}

	.gcl-track__step:first-child::before {
		display: block;
	}

	.gcl-track__step:last-child::before {
		display: none;
	}

	/* A completed step has been passed through, so its outgoing rail is green.
	   The current step has not been left yet, so its outgoing rail stays grey. */
	.gcl-track__step.is-current::before {
		background: #e1e6e2;
	}

	.gcl-track__dot {
		top: 2px;
		left: 0;
		transform: none;
	}

	.gcl-track__date {
		display: inline;
		margin-left: 8px;
	}
}

/* The final step has nothing after it, so it draws no outgoing rail. Its dot
   still carries the done tick, which is what tells the customer the order
   actually finished rather than merely arriving at the last stage. */
.gcl-track__step.is-final::before {
	background: transparent;
}