/**
 * FleetSmart Order Tracking — customer-facing styles.
 */

:root {
	--fsot-brand:        #2FD03A;       /* matches Builders Megastore green */
	--fsot-brand-dark:   #25a82e;
	--fsot-ink:          #0f172a;
	--fsot-muted:        #64748b;
	--fsot-border:       #e5e7eb;
	--fsot-card:         #ffffff;
	--fsot-soft:         #f8fafc;
}

.fsot-tracking {
	max-width: 980px;
	margin: 1.5rem auto;
	font-family: inherit;
	color: var(--fsot-ink);
}

/* ----------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */
.fsot-tracking__header {
	margin-bottom: 1rem;
}
.fsot-tracking__title {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 700;
}

/* ----------------------------------------------------------------------
 * Hero — friendly status line with icon
 * ---------------------------------------------------------------------- */
.fsot-hero {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	background: var(--fsot-card);
	border: 1px solid var(--fsot-border);
	border-radius: 12px;
	margin-bottom: 1.25rem;
	transition: background .3s ease;
}
.fsot-hero__icon {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(47, 208, 58, .12);
	color: var(--fsot-brand-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}
.fsot-hero__text {
	flex: 1;
	min-width: 0;
}
.fsot-hero__headline {
	margin: 0 0 .15rem;
	font-size: 1.15rem;
	font-weight: 700;
}
.fsot-hero__subhead {
	margin: 0;
	color: var(--fsot-muted);
	font-size: .92rem;
	line-height: 1.4;
}

/* Stage-specific hero accent */
.fsot-stage-delivered .fsot-hero {
	background: linear-gradient(135deg, rgba(47, 208, 58, .08), rgba(47, 208, 58, .02));
	border-color: rgba(47, 208, 58, .35);
}

/* ----------------------------------------------------------------------
 * Three-stage timeline
 * ---------------------------------------------------------------------- */
.fsot-timeline {
	--fsot-progress: 0%;
	position: relative;
	padding: 2.5rem 1.25rem 1.5rem;
	background: var(--fsot-card);
	border: 1px solid var(--fsot-border);
	border-radius: 12px;
	margin-bottom: 1.25rem;
}

.fsot-timeline__track {
	position: absolute;
	left: calc(1.25rem + 22px);
	right: calc(1.25rem + 22px);
	top: calc(2.5rem + 22px);
	height: 4px;
	background: var(--fsot-border);
	border-radius: 4px;
	overflow: hidden;
}
.fsot-timeline__fill {
	height: 100%;
	width: var(--fsot-progress);
	background: var(--fsot-brand);
	border-radius: 4px;
	transition: width 1s cubic-bezier(.4,.2,.2,1);
}

.fsot-timeline__steps {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.fsot-step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--fsot-muted);
	min-width: 0;
}

.fsot-step__dot {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--fsot-soft);
	border: 3px solid var(--fsot-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: transparent;
	margin-bottom: .55rem;
	transition: all .35s ease;
	position: relative;
	z-index: 2;
}

.fsot-step__check {
	opacity: 0;
	transition: opacity .25s ease;
}

.fsot-step.is-done .fsot-step__dot {
	background: var(--fsot-brand);
	border-color: var(--fsot-brand);
	color: #fff;
}
.fsot-step.is-done .fsot-step__check {
	opacity: 1;
}

.fsot-step.is-active .fsot-step__dot {
	background: #fff;
	border-color: var(--fsot-brand);
	box-shadow: 0 0 0 6px rgba(47, 208, 58, .15);
	color: var(--fsot-brand);
	animation: fsot-pulse 2s ease-in-out infinite;
}

@keyframes fsot-pulse {
	0%, 100% { box-shadow: 0 0 0 6px rgba(47, 208, 58, .15); }
	50%      { box-shadow: 0 0 0 10px rgba(47, 208, 58, .05); }
}

.fsot-step__label {
	font-size: .85rem;
	font-weight: 600;
	color: var(--fsot-muted);
	max-width: 130px;
}
.fsot-step.is-done .fsot-step__label,
.fsot-step.is-active .fsot-step__label {
	color: var(--fsot-ink);
}

/* The moving van — sits on the track */
.fsot-van {
	position: absolute;
	left: var(--fsot-progress);
	top: calc(2.5rem - 4px);
	transform: translateX(-50%);
	color: var(--fsot-brand-dark);
	transition: left 1.2s cubic-bezier(.4,.2,.2,1);
	z-index: 3;
	pointer-events: none;
	opacity: 0;
}
.fsot-stage-out_for_delivery .fsot-van {
	opacity: 1;
	animation: fsot-bobble 1.2s ease-in-out infinite;
}
.fsot-stage-received .fsot-van { opacity: 0; }
.fsot-stage-delivered .fsot-van { opacity: 0; }

@keyframes fsot-bobble {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%      { transform: translateX(-50%) translateY(-3px); }
}

/* ----------------------------------------------------------------------
 * Map area — only meaningful during "out for delivery"
 * ---------------------------------------------------------------------- */
.fsot-map-wrap {
	background: var(--fsot-card);
	border: 1px solid var(--fsot-border);
	border-radius: 12px;
	overflow: hidden;
	transition: opacity .3s ease, max-height .3s ease;
}

.fsot-stage-received .fsot-map-wrap,
.fsot-stage-delivered .fsot-map-wrap {
	display: none;
}

.fsot-tracking__map {
	position: relative;
	height: 420px;
	width: 100%;
	background: #f3f4f6;
}

.fsot-tracking__loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	color: var(--fsot-muted);
	font-size: .95rem;
	pointer-events: none;
	z-index: 1000;
}

.fsot-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid #d1d5db;
	border-top-color: var(--fsot-brand);
	border-radius: 50%;
	animation: fsot-spin 1s linear infinite;
	display: inline-block;
}
@keyframes fsot-spin {
	to { transform: rotate(360deg); }
}

.fsot-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.25rem;
	align-items: center;
	padding: .9rem 1.25rem;
	border-top: 1px solid var(--fsot-border);
}
.fsot-meta__address {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	color: var(--fsot-ink);
	font-size: .92rem;
	flex: 1 1 auto;
	min-width: 0;
}
.fsot-meta__address svg { color: var(--fsot-brand-dark); flex: none; }
.fsot-meta__updated {
	margin: 0;
	color: var(--fsot-muted);
	font-size: .82rem;
}

/* ----------------------------------------------------------------------
 * Errors
 * ---------------------------------------------------------------------- */
.fsot-tracking__error {
	margin: 1rem 0 0;
	padding: .75rem 1rem;
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
	border-radius: 8px;
	font-size: .9rem;
}

.fsot-error {
	margin: 1rem 0;
	padding: 1rem 1.25rem;
	background: #fef9c3;
	color: #854d0e;
	border: 1px solid #fde68a;
	border-radius: 8px;
}

/* ----------------------------------------------------------------------
 * Guest order lookup form (unchanged)
 * ---------------------------------------------------------------------- */
.fsot-lookup {
	max-width: 480px;
	margin: 1.5rem auto;
	padding: 1.75rem 2rem;
	background: #fff;
	border: 1px solid var(--fsot-border);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.fsot-lookup__title { margin: 0 0 .5rem; font-size: 1.4rem; line-height: 1.2; }
.fsot-lookup__intro { margin: 0 0 1.25rem; color: var(--fsot-muted); font-size: .95rem; }
.fsot-lookup__error {
	margin: 0 0 1rem;
	padding: .65rem .85rem;
	background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
	border-radius: 6px; font-size: .9rem;
}
.fsot-lookup__row { display: block; margin: 0 0 1rem; }
.fsot-lookup__row label {
	display: block;
	margin-bottom: .35rem;
	font-weight: 600;
	font-size: .9rem;
	color: var(--fsot-ink);
}
.fsot-lookup__row input[type="text"],
.fsot-lookup__row input[type="email"] {
	width: 100%;
	padding: .65rem .8rem;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 1rem;
	box-sizing: border-box;
	background: #fff;
	color: var(--fsot-ink);
}
.fsot-lookup__row input:focus {
	outline: none;
	border-color: var(--fsot-brand);
	box-shadow: 0 0 0 3px rgba(47, 208, 58, .15);
}
.fsot-lookup__submit {
	width: 100%;
	padding: .7rem 1rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

/* ----------------------------------------------------------------------
 * WooCommerce "your delivery vehicle" block on order details page
 * ---------------------------------------------------------------------- */
.fsot-order-vehicle {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--fsot-soft);
	border: 1px solid var(--fsot-border);
	border-radius: 8px;
}
.fsot-order-vehicle h2 { margin-top: 0; font-size: 1.1rem; }

.leaflet-popup-content { font-size: .9rem; line-height: 1.4; }

/* ----------------------------------------------------------------------
 * Mobile
 * ---------------------------------------------------------------------- */
@media (max-width: 640px) {
	.fsot-tracking__title { font-size: 1.2rem; }
	.fsot-hero { padding: .9rem 1rem; }
	.fsot-hero__icon { flex-basis: 44px; width: 44px; height: 44px; }
	.fsot-hero__headline { font-size: 1.02rem; }
	.fsot-hero__subhead { font-size: .85rem; }
	.fsot-timeline { padding: 2rem 1rem 1.25rem; }
	.fsot-timeline__track { top: calc(2rem + 18px); left: calc(1rem + 18px); right: calc(1rem + 18px); }
	.fsot-step__dot { width: 36px; height: 36px; }
	.fsot-step__label { font-size: .75rem; }
	.fsot-van svg { width: 44px; height: auto; }
	.fsot-van { top: calc(2rem - 4px); }
	.fsot-tracking__map { height: 320px; }
}