/* Order Tracker - front end.
   Palette: White, Royal Blue, Grey (tints of each only). */
.otk-wrap {
	--otk-blue: #4169e1;
	--otk-blue-soft: rgba(65, 105, 225, 0.1);
	--otk-blue-ring: rgba(65, 105, 225, 0.18);
	--otk-ink: #2f3542;
	--otk-grey: #6b7280;
	--otk-line: #e3e6ea;
	--otk-bg: #f5f6f8;
	--otk-white: #fff;
	max-width: 760px;
	margin: 0 auto;
	color: var(--otk-grey);
	font-size: 16px;
	line-height: 1.5;
}
.otk-wrap *,
.otk-wrap *::before,
.otk-wrap *::after { box-sizing: border-box; }

.otk-wrap .otk-card {
	background: var(--otk-white);
	border: 1px solid var(--otk-line);
	border-radius: 14px;
	padding: 28px;
	margin: 0 0 18px;
	box-shadow: 0 1px 2px rgba(47, 53, 66, 0.04);
}

/* Search ------------------------------------------------------------ */
.otk-wrap .otk-title { margin: 0 0 6px; font-size: 26px; line-height: 1.25; color: var(--otk-ink); font-weight: 700; }
.otk-wrap .otk-sub { margin: 0 0 20px; color: var(--otk-grey); }
.otk-wrap .otk-form { display: flex; gap: 10px; margin: 0; }
.otk-wrap .otk-input {
	flex: 1;
	min-width: 0;
	height: 50px;
	padding: 0 16px;
	font-size: 16px;
	color: var(--otk-ink);
	background: var(--otk-white);
	border: 1.5px solid var(--otk-line);
	border-radius: 10px;
	box-shadow: none;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.otk-wrap .otk-input::placeholder { color: #9aa1ac; }
.otk-wrap .otk-input:focus { border-color: var(--otk-blue); box-shadow: 0 0 0 4px var(--otk-blue-ring); }
.otk-wrap .otk-btn {
	height: 50px;
	padding: 0 26px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var(--otk-blue);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: filter .15s, transform .05s;
	text-transform: none;
	letter-spacing: 0;
}
.otk-wrap .otk-btn:hover { filter: brightness(0.93); }
.otk-wrap .otk-btn:active { transform: translateY(1px); }
.otk-wrap .otk-btn:focus-visible { outline: 3px solid var(--otk-blue-ring); outline-offset: 2px; }
.otk-wrap .otk-btn[disabled] { opacity: .7; cursor: progress; }
.otk-wrap .otk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.otk-wrap .otk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.otk-wrap .otk-notice {
	margin: 0 0 18px;
	padding: 14px 16px;
	color: var(--otk-ink);
	background: var(--otk-bg);
	border-left: 4px solid var(--otk-blue);
	border-radius: 8px;
}

/* Order card -------------------------------------------------------- */
.otk-wrap .otk-order-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 26px; }
.otk-wrap .otk-eyebrow { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--otk-grey); }
.otk-wrap .otk-order-no { margin: 0; font-size: 22px; line-height: 1.2; color: var(--otk-ink); font-weight: 700; }
.otk-wrap .otk-mini-title { margin: 0; font-size: 18px; color: var(--otk-ink); font-weight: 700; }

.otk-pill {
	display: inline-block;
	padding: 5px 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	color: #4169e1;
	background: rgba(65, 105, 225, 0.1);
	border-radius: 999px;
}
.otk-pill--delivered { color: #fff; background: #4169e1; }
.otk-pill--cancelled { color: #6b7280; background: #eceef1; }

/* Stepper (horizontal on desktop) ----------------------------------- */
.otk-wrap .otk-steps { display: flex; margin: 0 0 8px; padding: 0; list-style: none; }
.otk-wrap .otk-step { position: relative; flex: 1; margin: 0; padding: 0 4px; text-align: center; list-style: none; }
.otk-wrap .otk-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 15px;
	left: calc(50% + 22px);
	width: calc(100% - 44px);
	height: 2px;
	background: var(--otk-line);
}
.otk-wrap .otk-step.is-done:not(:last-child)::after { background: var(--otk-blue); }
.otk-wrap .otk-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0 auto 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--otk-grey);
	background: var(--otk-white);
	border: 2px solid var(--otk-line);
	border-radius: 50%;
}
.otk-wrap .is-done .otk-dot { color: #fff; background: var(--otk-blue); border-color: var(--otk-blue); }
.otk-wrap .is-current .otk-dot { border-color: var(--otk-blue); box-shadow: 0 0 0 5px var(--otk-blue-ring); }
.otk-wrap .is-current:not(.is-done) .otk-dot { color: var(--otk-blue); }
.otk-wrap .otk-step-label { display: block; font-size: 13px; line-height: 1.3; color: var(--otk-grey); }
.otk-wrap .is-current .otk-step-label { color: var(--otk-ink); font-weight: 700; }
.otk-wrap .is-done .otk-step-label { color: var(--otk-ink); }

.otk-wrap .otk-cancelled { margin: 0 0 8px; padding: 14px 16px; color: var(--otk-grey); background: var(--otk-bg); border-radius: 10px; }
.otk-wrap .otk-message { margin: 18px 0 0; padding: 14px 16px; color: var(--otk-ink); background: var(--otk-blue-soft); border-radius: 10px; }

/* Meta -------------------------------------------------------------- */
.otk-wrap .otk-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 20px; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--otk-line); }
.otk-wrap .otk-meta dt { margin: 0 0 2px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--otk-grey); }
.otk-wrap .otk-meta dd { margin: 0; color: var(--otk-ink); font-weight: 600; }

/* History ----------------------------------------------------------- */
.otk-wrap .otk-details { margin-top: 20px; }
.otk-wrap .otk-details summary { cursor: pointer; color: var(--otk-blue); font-weight: 600; font-size: 14px; }
.otk-wrap .otk-timeline { margin: 14px 0 0; padding: 0 0 0 18px; list-style: none; border-left: 2px solid var(--otk-line); }
.otk-wrap .otk-timeline li { position: relative; margin: 0 0 14px; padding-left: 14px; color: var(--otk-ink); }
.otk-wrap .otk-timeline li::before { content: ""; position: absolute; left: -24px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--otk-blue); border: 2px solid var(--otk-white); }
.otk-wrap .otk-timeline span { display: block; font-size: 13px; color: var(--otk-grey); }
.otk-wrap .otk-timeline em { display: block; font-size: 14px; font-style: normal; color: var(--otk-grey); }

.otk-wrap .otk-link-row { margin: 18px 0 0; }
.otk-wrap .otk-link { color: var(--otk-blue); font-weight: 600; text-decoration: none; }
.otk-wrap .otk-link:hover { text-decoration: underline; }

/* Mobile: vertical stepper ------------------------------------------ */
@media (max-width: 640px) {
	.otk-wrap .otk-card { padding: 20px; }
	.otk-wrap .otk-form { flex-direction: column; }
	.otk-wrap .otk-input { flex: none; width: 100%; }
	.otk-wrap .otk-btn { width: 100%; }
	.otk-wrap .otk-title { font-size: 22px; }

	.otk-wrap .otk-steps { flex-direction: column; }
	.otk-wrap .otk-step { display: flex; align-items: center; gap: 14px; padding: 0 0 22px; text-align: left; }
	.otk-wrap .otk-step:last-child { padding-bottom: 0; }
	.otk-wrap .otk-step:not(:last-child)::after { top: 38px; bottom: 6px; left: 15px; width: 2px; height: auto; }
	.otk-wrap .otk-dot { margin: 0; flex: none; }
	.otk-wrap .otk-step-label { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.otk-wrap * { transition: none !important; }
}