/* ============================================================
   Legend's Best — Track your order.

   One job: answer "where is my thing" for somebody who has already paid
   and is anxious. So the form is the first thing on the page, at full
   size, and everything under it is there for the moment the answer is not
   the one they wanted.

   The site's own sky blue on white. The only second colour is the red on
   the one status that means something went wrong.
   ============================================================ */

.tko-top { padding: 26px 0 10px; }
.tko-top h1 {
  margin: 10px 0 12px;
  font-family: var(--font-heading);
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink-900, #0b1220);
}
.tko-lede { margin: 0 0 26px; max-width: 56ch; font-size: 16.5px; line-height: 1.6; color: var(--gray-600, #64748b); }

/* The tracker component brings its own dark panel (css/styles.css), which
   is how it looks on the homepage. Fighting it here would give the site two
   trackers that look different, so the panel IS the card and this only
   holds it. */
.tko-card { margin: 0 0 4px; }
/* The shared tracker markup is laid out for a narrow column on the
   homepage. Here it has the room to sit on one line. */
.tko-card .track-order__form { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.tko-card .track-order__form input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 13px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  /* 16px or iOS zooms the page the moment it is tapped. */
  font: inherit;
  font-size: 16px;
}
.tko-card .track-order__form input::placeholder { color: rgba(255, 255, 255, .58); }
.tko-card .track-order__form input:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-color: transparent;
}
.tko-card .track-order__form button {
  flex: 0 0 auto;
  padding: 13px 24px;
  border: 0;
  border-radius: 13px;
  background: var(--blue-600, #0164ce);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}
.tko-card .track-order__form button:hover { background: var(--blue-700, #0059c4); }
.tko-card .track-order__form button:disabled { opacity: .6; cursor: default; }
.tko-error { margin: 12px 0 0; font-size: 14px; color: #ffd9d4; }
.tko-hint { margin: 14px 2px 0; font-size: 13px; line-height: 1.55; color: var(--gray-500, #94a3b8); }

/* ---- what each status means ---- */
.tko-h2 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: clamp(22px, 3.2vw, 31px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--ink-900, #0b1220);
}
.tko-sub { margin: 0 0 26px; max-width: 60ch; font-size: 15.5px; line-height: 1.6; color: var(--gray-600, #64748b); }
.tko-states { padding: 44px 0 10px; }

/* One line down the page, the order's own path, same device as the How it
   works page so the two read as one explanation. */
.tko-list { list-style: none; margin: 0; padding: 0; }
.tko-list li {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 18px;
  padding: 0 0 26px;
}
.tko-list li:last-child { padding-bottom: 0; }
.tko-list li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 20px;
  bottom: 2px;
  width: 2px;
  background: var(--border, #e2e8f0);
}
.tko-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--blue-600, #0164ce);
  background: #fff;
  position: relative;
  z-index: 1;
  margin-top: 3px;
}
.tko-dot--bad { border-color: #c0392b; }
.tko-list h3 { margin: 0 0 6px; font-size: 16px; font-weight: 650; color: var(--ink-900, #0b1220); }
.tko-list p { margin: 0; max-width: 66ch; font-size: 14.5px; line-height: 1.65; color: var(--gray-600, #64748b); }

/* ---- what to do ---- */
.tko-do { padding: 40px 0 60px; }
.tko-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  margin: 24px 0 0;
  background: var(--border, #e2e8f0);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 20px;
  overflow: hidden;
}
.tko-case { background: #fff; padding: 22px 24px; }
.tko-case h3 { margin: 0 0 8px; font-size: 15.5px; font-weight: 650; color: var(--ink-900, #0b1220); }
.tko-case p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--gray-600, #64748b); }
.tko-go { display: flex; flex-wrap: wrap; gap: 20px; margin: 24px 0 0; }
.tko-go a {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--blue-600, #0164ce);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.tko-go a:hover { color: var(--blue-700, #0059c4); }

@media (max-width: 620px) {
  .tko-card .track-order__form button { width: 100%; }
}