.asf-tracking {
	--asf-bg: #050a12;
	--asf-card: #0b1220;
	--asf-card-2: #0f1929;
	--asf-border: rgba(255,255,255,.08);
	--asf-text: #f4f7fb;
	--asf-muted: #8794a8;
	--asf-blue: #1b47cb;
	--asf-blue-2: #0b5bd3;
	--asf-green: #24d17e;

	width: 100%;
	max-width: 1250px;
	margin: 40px auto;
	padding: 0;
	color: var(--asf-text);
	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
}


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.asf-tracking-hero {
	position: relative;
	overflow: hidden;
	padding: 55px;
	border: 1px solid var(--asf-border);
	border-radius: 24px;
	background:
		radial-gradient(
			circle at 80% 10%,
			rgba(22,119,255,.20),
			transparent 32%
		),
		linear-gradient(
			135deg,
			#050a12 0%,
			#091529 100%
		);
	box-shadow:
		0 30px 80px rgba(0,0,0,.35);
}


.asf-tracking-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border: 1px solid rgba(36,209,126,.22);
	border-radius: 999px;
	background: rgba(36,209,126,.07);
	color: #67e6a3;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
}


.asf-tracking-badge span,
.asf-live-label span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--asf-green);
	box-shadow:
		0 0 0 4px rgba(36,209,126,.10),
		0 0 15px rgba(36,209,126,.7);
}


.asf-tracking-hero h2 {
	margin: 18px 0 10px;
	font-size: clamp(32px, 5vw, 52px);
	line-height: 1.05;
	letter-spacing: -1.8px;
	color: #fff;
}


.asf-tracking-hero p {
	max-width: 650px;
	margin: 0 0 30px;
	color: var(--asf-muted);
	font-size: 16px;
	line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| SEARCH
|--------------------------------------------------------------------------
*/

.asf-tracking-form {
	display: flex;
	gap: 12px;
	max-width: 780px;
}


.asf-search-box {
	flex: 1;
	position: relative;
}


.asf-search-box svg {
	position: absolute;
	top: 50%;
	left: 18px;
	width: 21px;
	height: 21px;
	transform: translateY(-50%);
	fill: none;
	stroke: #6d7b90;
	stroke-width: 1.8;
}


.asf-search-box input {
	width: 100%;
	height: 58px;
	box-sizing: border-box;
	padding: 0 18px 0 52px !important;
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 13px !important;
	outline: none;
	background: rgba(0,0,0,.30);
	color: #fff;
	font-size: 16px;
	transition: .2s ease;
}


.asf-search-box input::placeholder {
	color: #657287;
}


.asf-search-box input:focus {
	border-color: rgba(22,119,255,.75);
	box-shadow:
		0 0 0 4px rgba(22,119,255,.10);
}


.asf-track-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 58px;
	padding: 0 24px !important;
	border: 0 !important;
	border-radius: 13px;
	background:
		linear-gradient(
			135deg,
			#2084ff,
			#0755c9
		);
	color: #fff !important;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .5px;
	cursor: pointer;
	box-shadow:
		0 10px 30px rgba(22,119,255,.25);
	transition: .2s ease;
}


.asf-track-button:hover {
	transform: translateY(-1px);
	box-shadow:
		0 14px 35px rgba(22,119,255,.35);
}


.asf-track-button:disabled {
	opacity: .65;
	cursor: wait;
}


.asf-track-button svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}


.asf-track-button.is-loading span:after {
	content: "...";
}


/*
|--------------------------------------------------------------------------
| MESSAGE
|--------------------------------------------------------------------------
*/

.asf-search-message {
	min-height: 22px;
	margin-top: 12px;
	color: #8fa0b7;
	font-size: 13px;
}


.asf-search-message.is-error {
	color: #ff7373;
}


/*
|--------------------------------------------------------------------------
| RESULTS
|--------------------------------------------------------------------------
*/

.asf-results {
	margin-top: 24px;
}


.asf-load-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 28px 30px;
	border: 1px solid var(--asf-border);
	border-radius: 20px 20px 0 0;
	background: var(--asf-card);
}


.asf-eyebrow,
.asf-route-label {
	color: #637188;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.5px;
}


.asf-load-header h3 {
	margin: 5px 0;
	color: #fff;
	font-size: 27px;
}


.asf-customer {
	color: #8491a5;
	font-size: 14px;
}


.asf-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 13px;
	border: 1px solid rgba(36,209,126,.18);
	border-radius: 999px;
	background: rgba(36,209,126,.06);
	color: #6ce6a5;
	font-size: 12px;
	text-transform: uppercase;
}


.asf-status > span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--asf-green);
}


/*
|--------------------------------------------------------------------------
| ROUTE
|--------------------------------------------------------------------------
*/

.asf-route-card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	padding: 30px;
	border-right: 1px solid var(--asf-border);
	border-bottom: 1px solid var(--asf-border);
	border-left: 1px solid var(--asf-border);
	background: #080f1b;
}


.asf-route-stop {
	position: relative;
	padding-left: 34px;
}


.asf-route-stop:before {
	content: "";
	position: absolute;
	left: 0;
	top: 27px;
	width: 12px;
	height: 12px;
	border: 3px solid #1680ff;
	border-radius: 50%;
	background: #07101c;
	box-sizing: border-box;
	z-index: 2;
}


.asf-route-stop:nth-of-type(3):before {
	border-color: #24d17e;
}


.asf-route-line {
	position: absolute;
	left: 35px;
	top: 49px;
	width: 1px;
	height: 85px;
	background:
		linear-gradient(
			to bottom,
			#1680ff,
			#24d17e
		);
}


.asf-route-stop strong {
	display: block;
	margin-top: 5px;
	color: #fff;
	font-size: 18px;
}


.asf-route-stop div:not(.asf-route-label) {
	margin-top: 5px;
	color: #8491a5;
	font-size: 13px;
	line-height: 1.5;
}


.asf-route-stop small {
	display: block;
	margin-top: 8px;
	color: #5f6d82;
	font-size: 12px;
}


/*
|--------------------------------------------------------------------------
| INFO CARDS
|--------------------------------------------------------------------------
*/

.asf-info-grid {
	display: grid;
	grid-template-columns:
		repeat(4, 1fr);
	border-right: 1px solid var(--asf-border);
	border-bottom: 1px solid var(--asf-border);
	border-left: 1px solid var(--asf-border);
}


.asf-info-card {
	padding: 24px;
	border-right: 1px solid var(--asf-border);
	background: var(--asf-card);
}


.asf-info-card:last-child {
	border-right: 0;
}


.asf-info-icon {
	margin-bottom: 13px;
	color: #2486ff;
	font-size: 20px;
}


.asf-info-card span {
	display: block;
	color: #637188;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.2px;
}


.asf-info-card strong {
	display: block;
	margin-top: 5px;
	color: #fff;
	font-size: 15px;
}


/*
|--------------------------------------------------------------------------
| MAIN GRID
|--------------------------------------------------------------------------
*/

.asf-main-grid {
	display: grid;
	grid-template-columns:
		minmax(0, 1.5fr)
		minmax(330px, .8fr);
	gap: 18px;
	margin-top: 18px;
}


.asf-map-card,
.asf-truck-card {
	overflow: hidden;
	border: 1px solid var(--asf-border);
	border-radius: 20px;
	background: var(--asf-card);
}


.asf-card-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 15px;
	padding: 22px 24px;
	border-bottom: 1px solid var(--asf-border);
}


.asf-card-heading h4 {
	margin: 4px 0 0;
	color: #fff;
	font-size: 18px;
}


.asf-live-label {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #738198;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 1.3px;
}


.asf-live-label span {
	width: 5px;
	height: 5px;
}


.asf-last-update {
	color: #637188;
	font-size: 11px;
}


/*
|--------------------------------------------------------------------------
| MAP
|--------------------------------------------------------------------------
*/

.asf-map {
	width: 100%;
	height: 440px;
	background: #070c14;
}


.asf-map .leaflet-control-zoom a {
	border: 1px solid rgba(255,255,255,.10) !important;
	background: #0c1523 !important;
	color: #fff !important;
}


.asf-map-location {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 13px 18px;
	border-top: 1px solid var(--asf-border);
	color: #7d8ba0;
	font-size: 12px;
}


.asf-map-location span {
	color: var(--asf-green);
}


.asf-map-location strong {
	color: #c6cfdb;
	font-weight: 500;
}


/*
|--------------------------------------------------------------------------
| TRUCK
|--------------------------------------------------------------------------
*/

.asf-truck-card {
	padding-bottom: 22px;
}


.asf-truck-status {
	padding: 6px 9px;
	border-radius: 6px;
	background: rgba(36,209,126,.08);
	color: #5ce09b;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
}


.asf-truck-name {
	padding: 24px 24px 8px;
	color: #fff;
	font-size: 25px;
	font-weight: 700;
}


.asf-truck-specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	padding: 12px 24px 20px;
}


.asf-truck-specs div {
	padding: 13px 0;
	border-bottom: 1px solid rgba(255,255,255,.06);
}


.asf-truck-specs span,
.asf-vin-box span,
.asf-driver-box span,
.asf-live-stats span {
	display: block;
	margin-bottom: 4px;
	color: #627086;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 1.1px;
	text-transform: uppercase;
}


.asf-truck-specs strong,
.asf-vin-box strong,
.asf-driver-box strong {
	color: #dce3ec;
	font-size: 13px;
}


.asf-vin-box,
.asf-driver-box {
	margin: 0 24px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255,255,255,.06);
}


.asf-vin-box strong {
	font-family: monospace;
	letter-spacing: .5px;
}


.asf-live-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	margin: 20px 24px 0;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.06);
	border-radius: 12px;
	background: rgba(255,255,255,.04);
}


.asf-live-stats > div {
	padding: 16px;
	background: rgba(255,255,255,.015);
}


.asf-live-stats strong {
	color: #fff;
	font-size: 25px;
}


.asf-live-stats small {
	color: #65738a;
	font-size: 10px;
}


/*
|--------------------------------------------------------------------------
| TRUCK MAP MARKER
|--------------------------------------------------------------------------
*/

.asf-truck-marker-wrapper {
	background: transparent;
	border: 0;
}


.asf-truck-marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: #126eea;
	box-shadow:
		0 0 0 7px rgba(18,110,234,.18),
		0 8px 25px rgba(0,0,0,.5);
	color: #fff;
	font-size: 18px;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

	.asf-tracking-hero {
		padding: 35px 25px;
	}

	.asf-main-grid {
		grid-template-columns: 1fr;
	}

	.asf-info-grid {
		grid-template-columns: 1fr 1fr;
	}

	.asf-info-card:nth-child(2) {
		border-right: 0;
	}

	.asf-info-card:nth-child(-n+2) {
		border-bottom: 1px solid var(--asf-border);
	}

}


@media (max-width: 650px) {

	.asf-tracking {
		margin: 20px auto;
	}

	.asf-tracking-hero {
		padding: 28px 18px;
		border-radius: 18px;
	}

	.asf-tracking-hero h2 {
		font-size: 34px;
	}

	.asf-tracking-form {
		flex-direction: column;
	}

	.asf-track-button {
		width: 100%;
	}

	.asf-load-header {
		align-items: flex-start;
		flex-direction: column;
		padding: 22px;
	}

	.asf-route-card {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.asf-route-line {
		display: none;
	}

	.asf-info-grid {
		grid-template-columns: 1fr 1fr;
	}

	.asf-info-card {
		padding: 18px;
	}

	.asf-map {
		height: 340px;
	}

}