/* 800Sport Order Tracking: customer tracking page + My Account timeline */

.t8ot-front{
	--t8-font: Inter, -apple-system, system-ui, sans-serif;
	--t8-ink: #0b0b0c;
	--t8-text: #18181b;
	--t8-muted: #71717a;
	--t8-card: #f4f4f5;
	--t8-line: rgba(24,24,27,.08);
	--t8-radius: 12px;
	/* timeline colours (light surfaces) */
	--fg: #0b0b0c;
	--fg-soft: #52525b;
	--fg-faint: #a1a1aa;
	--track: rgba(24,24,27,.12);
	--node-done-bg: #0b0b0c;
	--node-done-fg: #fff;
	--glass: #f4f4f5;
	--glass-line: rgba(24,24,27,.08);
	font-family: var(--t8-font); color: var(--t8-text);
	display: grid; gap: 16px; width: 100%; box-sizing: border-box;
}
.t8ot-front *, .t8ot-front *::before, .t8ot-front *::after{ box-sizing: border-box; }
.t8ot-front :where(h1, h2, p, ol, ul, li, address, form, label, section){ margin: 0; padding: 0; }
.t8ot-front li{ list-style: none; }
.t8ot-front li::marker{ content: none; }
.t8ot-front a, .t8ot-front a:hover, .t8ot-front a:focus{ text-decoration: none !important; box-shadow: none; }
.t8ot-front svg{ width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- hero (dark) ---------- */
.t8ot-hero{
	--fg: #fff; --fg-soft: rgba(255,255,255,.66); --fg-faint: rgba(255,255,255,.38);
	--track: rgba(255,255,255,.14); --node-done-bg: #fff; --node-done-fg: #0b0b0c;
	--glass: rgba(255,255,255,.06); --glass-line: rgba(255,255,255,.12);
	position: relative; overflow: hidden; isolation: isolate;
	padding: 30px 20px 26px; border-radius: var(--t8-radius); color: #fff;
	background:
		radial-gradient(80% 90% at 100% 0%, rgba(255,255,255,.10), transparent 60%),
		linear-gradient(150deg, #17171a 0%, #0b0b0c 55%, #000 100%);
	animation: t8ot-rise .6s cubic-bezier(.2,.7,.2,1) both;
}
.t8ot-hero::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1px solid rgba(255,255,255,.08); }
.t8ot-eyebrow{ display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.t8ot-h1{ margin-top: 12px !important; font-family: var(--t8-font); font-weight: 700; font-size: 32px; line-height: 1.05; letter-spacing: -.045em; color: #fff; }
.t8ot-grad{
	background: linear-gradient(90deg, rgb(255 255 255) 0%, rgb(39 35 36) 150%);
	-webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.t8ot-lead{ margin-top: 12px !important; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.66); max-width: 56ch; }
.t8ot-hint{ margin-top: 14px !important; font-size: 12.5px; color: rgba(255,255,255,.45); }

/* form */
.t8ot-form{ display: grid; gap: 12px; margin-top: 22px !important; }
.t8ot-field label{ display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.75); }
.t8ot-field input{
	width: 100%; height: 50px; padding: 0 16px; border-radius: 12px; font: 500 15px/1 var(--t8-font); color: #fff;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); outline: none; box-shadow: none;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.t8ot-field input::placeholder{ color: rgba(255,255,255,.35); }
.t8ot-field input:focus{ border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.09); box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
.t8ot-error{
	margin-top: 14px !important; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5;
	background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #fecaca;
	animation: t8ot-shake .4s ease;
}

/* buttons */
.t8ot-btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 24px; border: 0; border-radius: 999px;
	font: 600 15px/1 var(--t8-font); letter-spacing: -.01em; cursor: pointer; white-space: nowrap;
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.t8ot-btn:hover{ transform: translateY(-2px); }
.t8ot-btn--light{ background: #fff; color: #0b0b0c !important; }
.t8ot-btn--light:hover{ box-shadow: 0 12px 26px -12px rgba(255,255,255,.5); }
.t8ot-btn--dark{ background: #0b0b0c; color: #fff !important; }
.t8ot-hero .t8ot-btn--dark{ background: #fff; color: #0b0b0c !important; }

/* result hero */
.t8ot-hero-top{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.t8ot-pill{ padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #fff; }
.t8ot-pill.is-delivered{ background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.4); color: #bbf7d0; }
.t8ot-pill.is-cancelled{ background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.4); color: #fecaca; }

/* ---------- journey ---------- */
.t8ot-journey{ margin-top: 22px; }
.t8ot-bar{ height: 4px; border-radius: 4px; background: var(--track); overflow: hidden; margin-bottom: 26px; }
.t8ot-bar span{
	display: block; height: 100%; width: var(--t8ot-progress, 0%); border-radius: inherit;
	background: linear-gradient(90deg, var(--fg-faint), var(--fg));
	transform-origin: left; animation: t8ot-grow 1.4s cubic-bezier(.2,.7,.2,1) .25s both;
}

.t8ot-timeline{ display: grid; }
.t8ot-step{ position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding-bottom: 22px; }
.t8ot-step:last-child{ padding-bottom: 0; }

/* connector (track + animated fill) */
.t8ot-step:not(:last-child)::before,
.t8ot-step:not(:last-child)::after{ content: ""; position: absolute; left: 16px; top: 38px; bottom: 4px; width: 2px; border-radius: 2px; }
.t8ot-step:not(:last-child)::before{ background: var(--track); }
.t8ot-step.is-done:not(:last-child)::after{
	background: var(--fg); transform-origin: top;
	animation: t8ot-fill-y .5s ease-out both; animation-delay: calc(var(--i) * .35s + .45s);
}

/* nodes */
.t8ot-node{
	position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
	border: 1.5px solid var(--track); color: var(--node-done-fg);
	animation: t8ot-pop .45s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(var(--i) * .35s + .2s);
}
.t8ot-node svg{ position: absolute; width: 16px; height: 16px; stroke-width: 2.4; opacity: 0; stroke-dasharray: 24; stroke-dashoffset: 24; }
.t8ot-step.is-done .t8ot-node{ background: var(--node-done-bg); border-color: var(--node-done-bg); }
.t8ot-step.is-done .t8ot-node svg{ opacity: 1; animation: t8ot-draw .4s ease-out both; animation-delay: calc(var(--i) * .35s + .4s); }
.t8ot-step.is-current .t8ot-node{ border-color: var(--fg); }
.t8ot-step.is-current .t8ot-node::before{ content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--fg); }
.t8ot-step.is-current .t8ot-node::after{
	content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 2px solid var(--fg);
	animation: t8ot-pulse 1.8s ease-out infinite; animation-delay: calc(var(--i) * .35s + .6s);
}
.t8ot-step.is-done:last-child .t8ot-node{ box-shadow: 0 0 0 6px rgba(34,197,94,.18), 0 0 24px rgba(34,197,94,.35); }

/* step text */
.t8ot-step-text{ padding-top: 5px; animation: t8ot-fade-up .5s ease-out both; animation-delay: calc(var(--i) * .35s + .25s); }
.t8ot-step-text strong{ display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--fg); }
.t8ot-step.is-upcoming .t8ot-step-text strong{ color: var(--fg-faint); }
.t8ot-step-desc{ display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--fg-soft); }
.t8ot-step.is-upcoming .t8ot-step-desc{ color: var(--fg-faint); }
.t8ot-step time{ display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--fg-soft); padding: 3px 8px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); }

/* tracking card */
.t8ot-card.t8ot-tracking-card{
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
	margin-top: 24px; padding: 16px 18px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-line);
	animation: t8ot-fade-up .5s ease-out 1.3s both;
}
.t8ot-label{ display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-soft); }
.t8ot-tn{ display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.t8ot-tn b{ font-size: 20px; font-weight: 700; letter-spacing: .02em; color: var(--fg); word-break: break-all; }
.t8ot-copy{
	display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 999px; cursor: pointer;
	background: transparent; border: 1px solid var(--glass-line); color: var(--fg-soft); font: 600 12px/1 var(--t8-font);
	transition: color .2s, border-color .2s;
}
.t8ot-copy svg{ width: 14px; height: 14px; }
.t8ot-copy:hover, .t8ot-copy.is-copied{ color: var(--fg); border-color: var(--fg); }

/* ---------- details grid (light cards) ---------- */
.t8ot-grid{ display: grid; gap: 16px; }
.t8ot-card{ padding: 22px 20px; border-radius: var(--t8-radius); background: var(--t8-card); }
.t8ot-grid .t8ot-card{ animation: t8ot-rise .6s cubic-bezier(.2,.7,.2,1) .15s both; }
.t8ot-h2{ font-family: var(--t8-font); font-weight: 700; font-size: 20px; letter-spacing: -.03em; color: var(--t8-ink); margin-bottom: 14px !important; }
.t8ot-items li{ display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--t8-line); }
.t8ot-items li:first-child{ border-top: 0; padding-top: 0; }
.t8ot-thumb img{ width: 56px !important; height: 56px !important; object-fit: contain; border-radius: 10px; background: #fff; display: block; }
.t8ot-item-name{ font-size: 14px; font-weight: 600; color: var(--t8-ink); line-height: 1.35; }
.t8ot-item-name small{ display: block; margin-top: 2px; font-weight: 500; color: var(--t8-muted); font-size: 12.5px; }
.t8ot-item-total{ font-size: 14px; font-weight: 600; white-space: nowrap; }
.t8ot-total{ display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--t8-line); font-size: 14px; color: var(--t8-muted); }
.t8ot-total b{ font-size: 18px; color: var(--t8-ink); }
.t8ot-address{ font-style: normal; font-size: 14.5px; line-height: 1.65; color: var(--t8-text); }
.t8ot-again{ display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-weight: 600; font-size: 14px; color: var(--t8-ink) !important; }
.t8ot-front .t8ot-again:hover{ text-decoration: underline !important; text-underline-offset: 3px; }
.t8ot-cancelled{ color: var(--t8-text); }

/* My Account (light) */
.t8ot-account{ margin-bottom: 28px; padding: 22px 20px; border-radius: var(--t8-radius); background: var(--t8-card); display: block; }
.t8ot-account .t8ot-journey{ margin-top: 6px; }
.t8ot-account .t8ot-card.t8ot-tracking-card{ background: #fff; }

/* ---------- animations ---------- */
@keyframes t8ot-rise{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }
@keyframes t8ot-fade-up{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
@keyframes t8ot-grow{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
@keyframes t8ot-fill-y{ from{ transform: scaleY(0); } to{ transform: scaleY(1); } }
@keyframes t8ot-fill-x{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
@keyframes t8ot-pop{ from{ opacity: 0; transform: scale(.4); } to{ opacity: 1; transform: none; } }
@keyframes t8ot-draw{ to{ stroke-dashoffset: 0; } }
@keyframes t8ot-pulse{ 0%{ transform: scale(1); opacity: .7; } 100%{ transform: scale(1.75); opacity: 0; } }
@keyframes t8ot-shake{ 0%,100%{ transform: none; } 25%{ transform: translateX(-5px); } 75%{ transform: translateX(5px); } }

@media (prefers-reduced-motion: reduce){
	.t8ot-front *, .t8ot-front *::before, .t8ot-front *::after{ animation: none !important; transition: none !important; }
	.t8ot-node svg{ stroke-dashoffset: 0; }
}

/* ---------- tablet + desktop ---------- */
@media (min-width: 768px){
	.t8ot-hero{ padding: 48px 40px 36px; }
	.t8ot-h1{ font-size: 46px; }
	.t8ot-form{ grid-template-columns: 1fr 1.2fr auto; align-items: end; max-width: 860px; }
	.t8ot-grid{ grid-template-columns: 1.5fr 1fr; align-items: start; }
	.t8ot-card{ padding: 28px; }

	/* horizontal timeline */
	.t8ot-timeline{ grid-template-columns: repeat(4, minmax(0,1fr)); }
	.t8ot-step{ grid-template-columns: 1fr; justify-items: start; gap: 14px; padding: 0 16px 0 0; }
	.t8ot-step:not(:last-child)::before,
	.t8ot-step:not(:last-child)::after{ left: 44px; right: 10px; top: 16px; bottom: auto; width: auto; height: 2px; }
	.t8ot-step.is-done:not(:last-child)::after{ transform-origin: left; animation-name: t8ot-fill-x; }
	.t8ot-step-text{ padding-top: 0; }
	.t8ot-journey.is-compact .t8ot-step-desc{ display: none; }
}
@media (min-width: 1025px){
	.t8ot-hero{ padding: 60px 56px 42px; }
	.t8ot-h1{ font-size: clamp(46px, 4vw, 58px); }
}