.tracking-page {
	min-height: 75vh;
	padding: 45px 18px 70px;
	color: #142e59;
	background: radial-gradient(circle at 90% 5%, rgba(255,120,23,.09), transparent 25%), #f3f6fb;
}

.tracking-container {
	width: min(940px, 100%);
	margin: 0 auto;
}

.tracking-header {
	margin-bottom: 25px;
	text-align: center;
}

.tracking-header-icon {
	display: grid;
	width: 54px;
	height: 54px;
	margin: 0 auto 12px;
	place-items: center;
	color: #fff;
	background: linear-gradient(135deg, #ff8b32, #ff6810);
	border-radius: 16px;
	font-size: 21px;
	box-shadow: 0 9px 21px rgba(255,104,16,.25);
}

.tracking-eyebrow {
	color: #ff7817;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tracking-header h1 {
	margin: 6px 0 8px;
	color: #142e59;
	font-size: clamp(28px, 5vw, 42px);
}

.tracking-header p {
	max-width: 590px;
	margin: auto;
	color: #718096;
}

.tracking-search-card,
.tracking-result {
	background: #fff;
	border: 1px solid #dfe6ef;
	border-radius: 20px;
	box-shadow: 0 13px 38px rgba(20,45,84,.09);
}

.tracking-search-card {
	padding: 20px;
}

.tracking-form {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	align-items: end;
	gap: 13px;
}

.tracking-field label {
	display: block;
	margin-bottom: 7px;
	color: #314866;
	font-size: 11px;
	font-weight: 800;
}

.tracking-field > div {
	position: relative;
}

.tracking-field i {
	position: absolute;
	top: 50%;
	left: 14px;
	color: #8793a4;
	transform: translateY(-50%);
}

.tracking-field input {
	width: 100%;
	height: 46px;
	padding: 0 13px 0 40px;
	color: #173565;
	background: #f9fbfe;
	border: 1px solid #ced8e6;
	border-radius: 10px;
	box-sizing: border-box;
}

	.tracking-field input:focus {
		background: #fff;
		border-color: #ff7817;
		outline: none;
		box-shadow: 0 0 0 4px rgba(255,120,23,.11);
	}

.tracking-form button {
	height: 46px;
	padding: 0 18px;
	color: #fff;
	background: #173565;
	border: 0;
	border-radius: 10px;
	font-weight: 800;
	cursor: pointer;
}

.tracking-error,
.tracking-instructions {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 18px;
	padding: 16px;
	border-radius: 13px;
}

.tracking-error {
	color: #991b1b;
	background: #fff1f2;
	border: 1px solid #fecaca;
}

	.tracking-error strong,
	.tracking-error p {
		display: block;
		margin: 0;
	}

	.tracking-error p {
		margin-top: 3px;
		font-size: 12px;
	}

.tracking-instructions {
	justify-content: center;
	color: #53657b;
	background: #edf3fa;
}

.tracking-result {
	margin-top: 20px;
	padding: 25px;
}

.tracking-result-header {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e5ebf3;
}

	.tracking-result-header span {
		color: #718096;
		font-size: 10px;
		text-transform: uppercase;
	}

	.tracking-result-header h2 {
		margin: 5px 0;
		color: #142e59;
	}

	.tracking-result-header p {
		margin: 0;
		color: #7b8798;
		font-size: 11px;
	}

.customer-status {
	align-self: flex-start;
	padding: 8px 12px;
	border-radius: 999px;
	font-weight: 800;
}

	.customer-status.status-completed,
	.customer-status.status-confirmed {
		color: #166534;
		background: #dcfce7;
	}

	.customer-status.status-cancelled {
		color: #991b1b;
		background: #fee2e2;
	}

.tracking-progress {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin: 25px 0;
}

.tracking-step {
	position: relative;
	text-align: center;
}

	.tracking-step::before {
		position: absolute;
		top: 15px;
		left: -50%;
		width: 100%;
		height: 3px;
		content: "";
		background: #dce3ec;
	}

	.tracking-step:first-child::before {
		display: none;
	}

	.tracking-step > span {
		position: relative;
		z-index: 2;
		display: grid;
		width: 31px;
		height: 31px;
		margin: auto;
		place-items: center;
		color: #7b8798;
		background: #e9eef4;
		border-radius: 50%;
		font-size: 10px;
		font-weight: 800;
	}

	.tracking-step strong {
		display: block;
		margin-top: 7px;
		color: #7b8798;
		font-size: 9px;
	}

.completed-step::before,
.completed-step > span {
	color: #fff;
	background: #20a75a;
}

.completed-step strong {
	color: #176b3e;
}

.tracking-customer-summary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 11px;
	margin-bottom: 20px;
}

	.tracking-customer-summary div {
		padding: 12px;
		background: #f8faff;
		border-radius: 10px;
	}

	.tracking-customer-summary span,
	.tracking-customer-summary strong {
		display: block;
	}

	.tracking-customer-summary span {
		color: #7b8798;
		font-size: 9px;
		text-transform: uppercase;
	}

	.tracking-customer-summary strong {
		margin-top: 4px;
		overflow-wrap: anywhere;
	}

.tracking-items {
	display: grid;
	gap: 10px;
}

.tracking-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	background: #fbfcff;
	border: 1px solid #e0e7f0;
	border-radius: 12px;
}

.tracking-item-icon {
	display: grid;
	width: 41px;
	height: 41px;
	flex: 0 0 41px;
	place-items: center;
	color: #ff7817;
	background: #fff0e5;
	border-radius: 11px;
}

.tracking-item-main {
	min-width: 0;
	flex: 1;
}

	.tracking-item-main > span {
		color: #7b8798;
		font-size: 9px;
	}

	.tracking-item-main h3 {
		margin: 3px 0 7px;
		color: #142e59;
		font-size: 14px;
	}

.tracking-item-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	color: #65748a;
	font-size: 9px;
}

.tracking-item-reference {
	color: #64748b;
	font-size: 9px;
}

.tracking-help {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 20px;
	padding: 15px;
	color: #14532d;
	background: #ecfff4;
	border-radius: 12px;
}

	.tracking-help > i {
		color: #20a75a;
		font-size: 24px;
	}

	.tracking-help div {
		flex: 1;
	}

	.tracking-help strong,
	.tracking-help p {
		display: block;
		margin: 0;
	}

	.tracking-help p {
		margin-top: 3px;
		font-size: 10px;
	}

	.tracking-help a {
		padding: 9px 13px;
		color: #fff;
		background: #20a75a;
		border-radius: 9px;
		font-size: 10px;
		font-weight: 800;
		text-decoration: none;
	}

@media (max-width: 700px) {
	.tracking-form,
	.tracking-customer-summary {
		grid-template-columns: 1fr;
	}

		.tracking-form button {
			width: 100%;
		}

	.tracking-progress {
		overflow-x: auto;
	}

	.tracking-step {
		min-width: 80px;
	}

	.tracking-result-header,
	.tracking-help {
		align-items: flex-start;
		flex-direction: column;
	}

		.tracking-help a {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
		}

	.tracking-item {
		align-items: flex-start;
	}

	.tracking-item-reference {
		display: none;
	}
}