/* ==========================================================================
   /urmareste-comanda only — the order lookup on the shared light "shop" layout
   (/shop.css). Linked after it. The form and the result are main.js initTrack():
   it renders .track-result__*, .track-facts, .track-steps / .track-step--{done,
   current,upcoming}, .track-note, .track-awb (+ .btn.btn--outline) and
   .link-tertiary into [data-track-result]; they are styled here, light, for this
   page only (the old dark block left styles.css on 2026-10-31).
   ========================================================================== */

/* one narrow column for the hero, the form and the result */
.t-wrap { width: min(880px, 100% - 2 * var(--s-gutter)); }

/* ---------- hero ---------- */
.t-hero { padding: clamp(20px, 3vw, 40px) 0 clamp(24px, 3vw, 36px); }
.t-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 14px; font-weight: 500; color: var(--s-soft); }
.t-crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--s-line-2); }
.t-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--s-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.t-crumbs a:hover { text-decoration-thickness: 2px; }
.t-crumbs [aria-current] { color: var(--s-muted); }
.t-hero .s-h1 { margin-top: 6px; }
.t-hero .s-h1 .s-accent { display: block; margin-top: 2px; }

/* ---------- the lookup card ---------- */
.track { padding: 0 0 var(--s-section); }
.track-card {
  padding: clamp(20px, 3vw, 32px); border-radius: 18px;
  background: var(--s-card); border: 1px solid var(--s-line); box-shadow: var(--s-shadow-lg);
}
.track-card .lead__grid { margin-top: 0; gap: 16px; }
.track-card .field__label { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--s-ink); }
.track-card .field__input {
  min-height: 50px; padding: 12px 14px; font-size: 16px; color: var(--s-ink);
  background: var(--s-card); border: 1px solid var(--s-line-2); border-radius: 10px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.track-card .field__input::placeholder { color: var(--s-soft); }
.track-card .field__input:hover { border-color: rgba(48, 33, 25, .4); }
.track-card .field__input:focus { border-color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-ink); }
.track-card .field__input:focus-visible { outline: 3px solid var(--s-ink); outline-offset: 2px; }
.track-card .field.is-invalid .field__input { border-color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-ink); background: var(--s-kraft-tint); }
.track-card .field__err { font-size: 14px; color: var(--s-ink); }
.track-card .lead__actions { margin-top: 22px; gap: 10px 20px; }
.track-card__hint { font-size: 14px; line-height: 1.45; color: var(--s-muted); }
/* the submit is an s-btn: the cup shows while main.js marks it .is-loading */
.track-card__btn .btn__cup { display: none; position: relative; width: 14px; height: 16px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 4px 4px; overflow: hidden; }
.track-card__btn .btn__cup::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: currentColor; transform: scaleY(0); transform-origin: bottom; animation: cupfill 1.2s var(--ease) infinite; }
.track-card__btn.is-loading { pointer-events: none; opacity: .85; }
.track-card__btn.is-loading .btn__cup { display: inline-block; }
.track-card .lead__msg { margin-top: 16px; padding: 12px 16px; border: 0; border-radius: 12px; background: var(--s-kraft-tint); color: var(--s-ink); font-size: 15px; }

/* ---------- the result (main.js render()) ---------- */
.track-result {
  margin-top: 20px; padding: clamp(20px, 3vw, 32px); border-radius: 18px; outline: none;
  background: var(--s-card); border: 1px solid var(--s-line); box-shadow: var(--s-shadow-lg);
}
.track-result .caption { font-size: 12px; letter-spacing: .12em; color: var(--s-soft); }
.track-result__ref { margin-top: 4px; font-size: clamp(28px, 1.3rem + 1.2vw, 38px); letter-spacing: .04em; color: var(--s-ink); overflow-wrap: anywhere; }
.track-result__status { margin-top: 8px; font-family: var(--font-edit); font-style: italic; font-size: clamp(19px, 1rem + .4vw, 22px); line-height: 1.4; color: var(--s-ink); }

.track-facts {
  margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--s-line);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px 24px;
}
.track-facts div { min-width: 0; }
.track-facts dt { font-size: 13px; font-weight: 500; color: var(--s-soft); }
.track-facts dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; color: var(--s-ink); overflow-wrap: anywhere; }

/* timeline: done = espresso dot with a check, current = ringed dot, upcoming = empty dot; dashed line ahead */
.track-steps { margin-top: 28px; padding: 22px 20px 20px; border-radius: 14px; background: var(--s-bg); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.track-step { position: relative; padding: 40px 12px 0 0; }
.track-step::before {
  content: ""; position: absolute; top: 13px; left: 34px; right: 6px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--s-line-2) 0 6px, transparent 6px 12px);
}
.track-step:last-child::before { display: none; }
.track-step--done::before { background: var(--s-ink); }
.track-step__dot {
  position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--s-line-2); background: var(--s-card); color: var(--s-bg); font-size: 14px; font-weight: 700; line-height: 1;
}
.track-step--done .track-step__dot { background: var(--s-ink); border-color: var(--s-ink); }
.track-step--done .track-step__dot::after { content: "✓"; }
.track-step--current .track-step__dot { border-color: var(--s-ink); box-shadow: 0 0 0 4px var(--s-kraft-tint); }
.track-step--current .track-step__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--s-ink); }
.track-step__label { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--s-soft); }
.track-step--done .track-step__label, .track-step--current .track-step__label { color: var(--s-ink); }
.track-step__note { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--s-muted); }

.track-note { margin-top: 22px; padding: 12px 16px; border-radius: 12px; background: var(--s-kraft-tint); color: var(--s-ink); font-size: 15px; line-height: 1.5; }

.track-awb {
  margin-top: 22px; padding: 18px 20px; border-radius: 14px; background: var(--s-kraft-tint);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
}
.track-awb > div { min-width: 0; }
.track-awb__num { margin-top: 2px; font-family: var(--font-display); font-size: 26px; letter-spacing: .06em; line-height: 1.2; color: var(--s-ink); overflow-wrap: anywhere; }
.track-awb__hint { margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--s-muted); max-width: 46ch; }
.track-awb .btn {
  min-height: 52px; padding: 8px 24px; border-radius: 12px; font-size: 16px; line-height: 1.2;
  background: var(--s-card); color: var(--s-ink); border: 1px solid var(--s-line-2); white-space: normal; text-align: center;
}
.track-awb .btn:hover { background: var(--s-card); border-color: var(--s-ink); }

.track-result__again { margin-top: 16px; }
.track-result .link-tertiary {
  color: var(--s-ink); font-weight: 600; border-bottom: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.track-result .link-tertiary:hover { text-decoration-thickness: 2px; }

/* ---------- where else ---------- */
.track-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1080px; margin: 0 auto; }
.track-place {
  display: flex; flex-direction: column; padding: 22px; border-radius: 16px;
  background: var(--s-card); border: 1px solid var(--s-line); box-shadow: var(--s-shadow);
}
.track-place__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: var(--s-kraft-tint); color: var(--s-ink); }
.track-place__icon svg { width: 22px; height: 22px; }
.track-place .s-card__text { margin-top: 6px; font-size: 15px; line-height: 1.55; }
.track-place__link { margin-top: auto; padding-top: 8px; }
.track-place__link .s-link { gap: 6px; }
.track-more__help { margin-top: 28px; text-align: center; font-size: 15px; color: var(--s-muted); }
.track-more__help .s-link { font-size: 15px; }

/* ---------- responsive ---------- */
@media (max-width: 899px) {
  .track-more__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 719px) {
  .track-card .lead__actions .s-btn { width: 100%; }
  .track-card__hint { width: 100%; }
  .track-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .track-steps { grid-template-columns: minmax(0, 1fr); margin-top: 22px; padding: 18px 16px; }
  .track-step { padding: 0 0 22px 44px; min-height: 28px; }
  .track-step::before {
    top: 34px; bottom: 6px; left: 13px; right: auto; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--s-line-2) 0 6px, transparent 6px 12px);
  }
  .track-step--done::before { background: var(--s-ink); }
  .track-step:last-child { padding-bottom: 0; }
  .track-step__label { padding-top: 4px; }
  .track-awb { padding: 16px; }
  .track-awb .btn { width: 100%; }
}