/* =========================================================================
   Chubby Chair — order tracking page (form + 4-step timeline).
   Matches Figma node 38:146: centered title, pill lookup form, exact exported
   stage artwork, 180px stage columns, and 141px connecting rules.
   ========================================================================= */

.cc-track-page {
	padding-block: 4rem; /* py-16 */
}

.cc-track {
	display: flex;
	flex-direction: column;
	gap: 4rem; /* gap-16 */
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
}

/* --------------------------------------------------------------- header */
.cc-track-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem; /* gap-8 */
}

.cc-track-title {
	font-size: 3rem;        /* text-5xl */
	line-height: 1.1;
	font-weight: 800;       /* font-extrabold */
	text-align: center;
	margin: 0;
}

/* ---------------------------------------------------------------- form */
.cc-track-form {
	width: 100%;
	max-width: 600px;
	display: flex;
	align-items: center;
	gap: 1.25rem; /* gap-5 */
	border: 1px solid #eee; /* Figma neutral-200 */
	border-radius: var(--radius); /* rounded-2xl (16px) */
	background: #fff;
	padding: 0.25rem; /* p-1 */
	direction: ltr;
}

.cc-track-submit {
	height: 3rem;            /* h-12 */
	padding-inline: 1.25rem; /* px-5 */
	border: 0;
	border-radius: 1rem;
	background: #000;
	color: #fff;
	font-weight: 700;
	font-family: inherit;
	font-size: 1rem;
	cursor: pointer;
	transition: opacity .2s ease;
	white-space: nowrap;
}
.cc-track-submit:hover { opacity: .9; }
.cc-track-submit:disabled { opacity: .5; cursor: default; }

.cc-track-input {
	flex: 1;
	height: 3rem; /* h-12 */
	border: 0;
	background: transparent;
	padding-inline: 1rem; /* px-4 */
	text-align: right;
	direction: rtl;
	outline: none;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	color: inherit;
}
.cc-track-input::placeholder { opacity: .6; }

.cc-track-error {
	color: #dc2626; /* red-600 */
	font-size: .875rem;
	margin: 0;
}

/* ------------------------------------------------------------- timeline */
.cc-track-timeline {
	display: flex;
	justify-content: center;
}

.cc-track-stages {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 180px);
	column-gap: 23px;
	align-items: flex-start;
	width: 789px;
}

.cc-track-step {
	position: relative;
	width: 180px;
}

.cc-track-col {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem; /* gap-5 */
	width: 180px;
}

.cc-track-dot {
	position: relative;
	width: 2.5rem;  /* size-10 */
	height: 2.5rem;
	flex: 0 0 2.5rem;
}

.cc-track-dot__circle {
	display: block;
	width: 40px;
	height: 40px;
}

.cc-track-dot__check {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 15.5452px;
	height: 11.3786px;
	transform: translate(-50%, -50%);
}

.cc-track-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem; /* gap-2 */
}

.cc-track-label {
	font-weight: 700;
	font-size: 1rem;
	margin: 0;
}

.cc-track-date {
	font-size: 1rem;
	font-weight: 500;
	opacity: .6;
	margin: 0;
}

.cc-track-connector {
	position: absolute;
	z-index: 0;
	left: 119px;
	top: 18.5px;
	width: 141px;
	height: 3px;
}

.cc-track-connector img {
	display: block;
	width: 141px;
	height: 3px;
}

/* ------------------------------------------------- order view variant */
.cc-track--order {
	gap: 1.5rem;
	margin-top: 2rem;
}
.cc-track--order .cc-track-timeline {
	justify-content: flex-start;
}
.cc-track-code-line {
	font-size: 1rem;
	margin: 0;
}
.cc-track-code-line span { font-weight: 700; letter-spacing: .05em; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 899px) {
	.cc-track-page {
		padding-block: 3rem;
	}

	.cc-track {
		gap: 3rem;
	}

	.cc-track-title {
		font-size: clamp(2rem, 9vw, 2.5rem);
	}

	.cc-track-form {
		width: 100%;
		max-width: 600px;
		gap: .5rem;
	}

	.cc-track-input {
		min-width: 0;
		padding-inline: .75rem;
	}

	.cc-track-stages {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: min(100%, 360px);
		gap: 0;
	}
	.cc-track-step {
		width: 100%;
		flex-direction: column;
		align-items: center;
	}
	.cc-track-col { width: 100%; }
	.cc-track-connector {
		position: relative;
		left: auto;
		top: auto;
		width: 3px;
		height: 40px;
		margin: 10px auto;
	}
	.cc-track-connector img {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 40px;
		height: 3px;
		transform: translate(-50%, -50%) rotate(90deg);
	}
}

@media (max-width: 479px) {
	.cc-track-page {
		padding-block: 2.5rem 3rem;
	}

	.cc-track-head {
		gap: 1.5rem;
	}

	.cc-track-title {
		font-size: 2rem;
	}

	.cc-track-submit {
		padding-inline: 1rem;
	}

	.cc-track-input {
		font-size: .875rem;
	}
}