/* =========================================================================
   Chubby Chair — order tracking page (form + 4-step timeline).
   Mirrors app/track/page.tsx: centered title, pill lookup form,
   size-10 circles, 60px connectors, 180px stage width, #34c759 reached state.
   ========================================================================= */

.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 #e5e5e5; /* neutral-200 */
	border-radius: var(--radius); /* rounded-2xl (16px) */
	background: #fff;
	padding: 0.25rem; /* p-1 */
}

.cc-track-submit {
	height: 3rem;            /* h-12 */
	padding-inline: 1.25rem; /* px-5 */
	border: 0;
	border-radius: var(--radius-sm); /* rounded-xl (12px) */
	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;
	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 {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem; /* gap-6 */
}

.cc-track-step {
	display: flex;
	align-items: flex-start;
}

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

.cc-track-dot {
	width: 2.5rem;  /* size-10 */
	height: 2.5rem;
	border-radius: 9999px;
	display: grid;
	place-items: center;
	background: #e5e5e5; /* neutral-200 */
}
.cc-track-dot.is-reached {
	background: #34c759;
}
.cc-track-dot svg { display: block; }

.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 {
	height: 0.25rem;  /* h-1 */
	width: 60px;
	margin-top: 18px; /* mt-[18px] */
	border-radius: 9999px;
	background: #e5e5e5; /* neutral-200 */
	flex: none;
}
.cc-track-connector.is-reached {
	background: #34c759;
}

/* ------------------------------------------------- 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: 768px) {
	.cc-track-title { font-size: 2.25rem; }

	.cc-track-stages {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.cc-track-step {
		flex-direction: column;
		align-items: center;
	}
	.cc-track-col { width: 100%; }
	.cc-track-connector {
		width: 0.25rem;
		height: 40px;
		margin-top: 0;
		margin-inline: auto;
	}
}