/* ============================================================
   DHL Tracking — demo experience
   Clean, brand-aligned tracking animation + results.
   Scoped under .dhx-* so it never collides with DHL's own CSS.
   Brand tokens: red #d40511, yellow #ffcc00.
   ============================================================ */

:root {
  --dhx-red: #d40511;
  --dhx-red-dark: #b30410;
  --dhx-yellow: #ffcc00;
  --dhx-ink: #323232;
  --dhx-muted: #6b6b6b;
  --dhx-line: #e3e3e3;
  --dhx-line-strong: #c9c9c9;
  --dhx-bg-soft: #f7f7f7;
  --dhx-green: #3a8a3f;
}

/* ---- Demo tracking-number suggestions (sits under the input) ---- */
.dhx-demo-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1rem;
  margin: 1.4rem 0 0;
  font-family: inherit;
}
.dhx-demo-hint__label {
  font-size: 1.4rem;
  color: var(--dhx-muted);
  font-weight: 700;
  margin: 0;
}
.dhx-chip {
  appearance: none;
  border: .1rem solid var(--dhx-line-strong);
  background: #fff;
  color: var(--dhx-ink);
  font-family: inherit;
  font-size: 1.4rem;
  line-height: 1;
  padding: .9rem 1.4rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.dhx-chip:hover {
  border-color: var(--dhx-red);
  box-shadow: 0 .2rem .8rem rgba(212, 5, 17, .12);
}
.dhx-chip:active { transform: translateY(.1rem); }
.dhx-chip:focus-visible { outline: .2rem solid var(--dhx-red); outline-offset: .2rem; }
.dhx-chip__num { font-weight: 700; letter-spacing: .02em; }
.dhx-chip__dot {
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  flex: 0 0 auto;
}
.dhx-chip__dot--transit  { background: var(--dhx-yellow); }
.dhx-chip__dot--delivered{ background: var(--dhx-green); }
.dhx-chip__dot--pickup   { background: var(--dhx-line-strong); }

/* ---- Result card ---- */
.dhx-result {
  font-family: inherit;
  color: var(--dhx-ink);
  border: .1rem solid var(--dhx-line);
  border-radius: .6rem;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 .2rem 1.6rem rgba(0, 0, 0, .06);
  opacity: 0;
  transform: translateY(1.2rem);
  animation: dhx-card-in .45s cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes dhx-card-in {
  to { opacity: 1; transform: none; }
}

.dhx-result__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem 1.2rem;
  padding: 2rem 2.4rem;
  border-bottom: .1rem solid var(--dhx-line);
  border-top: .4rem solid var(--dhx-yellow);
}
.dhx-result__num {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dhx-muted);
  font-weight: 700;
}
.dhx-result__num strong {
  display: block;
  font-size: 2rem;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--dhx-ink);
  margin-top: .3rem;
}
.dhx-result__status {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: 1.5rem;
  font-weight: 700;
  padding: .7rem 1.3rem;
  border-radius: 999px;
  background: var(--dhx-bg-soft);
  white-space: nowrap;
}
.dhx-result__status::before {
  content: "";
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: var(--dhx-muted);
}
.dhx-result__status--transit   { color: #8a6d00; background: #fff7da; }
.dhx-result__status--transit::before   { background: var(--dhx-yellow); }
.dhx-result__status--delivered { color: #246328; background: #eaf5ea; }
.dhx-result__status--delivered::before { background: var(--dhx-green); }
.dhx-result__status--pickup    { color: #555; }

/* ---- alert / note banner ---- */
.dhx-note {
  display: flex; align-items: flex-start; gap: 1rem;
  margin: 1.6rem 2.4rem 0; padding: 1.3rem 1.6rem;
  border-radius: .8rem; font-size: 1.45rem; line-height: 1.45; border: .1rem solid;
}
.dhx-note__dot { width: .9rem; height: .9rem; border-radius: 50%; margin-top: .5rem; flex: 0 0 auto; }
.dhx-note--info    { background: #eef4ff; border-color: #c9ddff; color: #1c4a99; }
.dhx-note--info .dhx-note__dot    { background: #2f6fed; }
.dhx-note--success { background: #eaf6ec; border-color: #bfe3c6; color: #246328; }
.dhx-note--success .dhx-note__dot { background: #3a8a3f; }
.dhx-note--warning { background: #fff7e6; border-color: #ffe2a6; color: #8a5b00; }
.dhx-note--warning .dhx-note__dot { background: #e8a200; }
.dhx-note--delay   { background: #fdeef0; border-color: #f6c6cd; color: #a31221; }
.dhx-note--delay .dhx-note__dot   { background: #d40511; }

/* ---- Route progress with moving vehicle ---- */
.dhx-route {
  padding: 3.4rem 2.4rem 2rem;
}
.dhx-route__track {
  position: relative;
  height: .6rem;
  border-radius: 999px;
  background: var(--dhx-line);
  margin: 4.2rem 1.2rem 0;
}
.dhx-route__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dhx-red), #ef3b2c);
  transition: width 1.6s cubic-bezier(.5, .1, .25, 1);
}
.dhx-route__van {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: var(--dhx-red);
  color: var(--dhx-yellow);
  display: grid;
  place-items: center;
  box-shadow: 0 .3rem 1rem rgba(212, 5, 17, .35);
  transition: left 1.6s cubic-bezier(.5, .1, .25, 1);
  z-index: 2;
}
.dhx-route__van svg { width: 2.4rem; height: 2.4rem; display: block; }
.dhx-route.is-delivered .dhx-route__van {
  animation: dhx-van-park .5s ease 1.6s both;
}
@keyframes dhx-van-park { 50% { transform: translate(-50%, -70%); } }

/* stage markers */
.dhx-route__stages {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
}
.dhx-stage {
  position: relative;
  width: 0;
  display: flex;
  justify-content: center;
}
.dhx-stage__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #fff;
  border: .3rem solid var(--dhx-line-strong);
  transition: border-color .3s ease, background .3s ease;
}
.dhx-stage.is-done .dhx-stage__dot { border-color: var(--dhx-red); background: var(--dhx-red); }
.dhx-stage.is-current .dhx-stage__dot {
  border-color: var(--dhx-red);
  background: #fff;
  box-shadow: 0 0 0 .4rem rgba(212, 5, 17, .18);
}
.dhx-stage__label {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dhx-muted);
  white-space: nowrap;
  text-align: center;
}
.dhx-stage.is-done .dhx-stage__label,
.dhx-stage.is-current .dhx-stage__label { color: var(--dhx-ink); }

.dhx-route__ends {
  display: flex;
  justify-content: space-between;
  margin: 1.6rem 0 .2rem;
  font-size: 1.3rem;
}
.dhx-route__ends span { color: var(--dhx-muted); }
.dhx-route__ends strong { color: var(--dhx-ink); display: block; font-size: 1.5rem; margin-top: .2rem; }
.dhx-route__ends > div:last-child { text-align: right; }

/* ---- Detail grid ---- */
.dhx-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .1rem;
  background: var(--dhx-line);
  border-top: .1rem solid var(--dhx-line);
  border-bottom: .1rem solid var(--dhx-line);
}
.dhx-details__cell {
  background: #fff;
  padding: 1.6rem 2.4rem;
}
.dhx-details__k { display: block; font-size: 1.2rem; color: var(--dhx-muted); text-transform: uppercase; letter-spacing: .03em; }
.dhx-details__v { display: block; font-size: 1.6rem; font-weight: 700; margin-top: .4rem; }

/* ---- Event timeline ---- */
.dhx-timeline {
  padding: 2.4rem 2.4rem 2.8rem;
}
.dhx-timeline__title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 1.8rem;
}
.dhx-event {
  position: relative;
  padding: 0 0 2rem 3rem;
  opacity: 0;
  transform: translateX(-.8rem);
  animation: dhx-event-in .4s ease forwards;
}
@keyframes dhx-event-in { to { opacity: 1; transform: none; } }
.dhx-event::before { /* connector line */
  content: "";
  position: absolute;
  left: .6rem;
  top: 1.6rem;
  bottom: -.4rem;
  width: .2rem;
  background: var(--dhx-line);
}
.dhx-event:last-child::before { display: none; }
.dhx-event::after { /* dot */
  content: "";
  position: absolute;
  left: 0;
  top: .3rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #fff;
  border: .3rem solid var(--dhx-line-strong);
}
.dhx-event--current::after { border-color: var(--dhx-red); background: var(--dhx-red); }
.dhx-event__title { font-size: 1.5rem; font-weight: 700; margin: 0; }
.dhx-event--current .dhx-event__title { color: var(--dhx-red); }
.dhx-event__meta { font-size: 1.35rem; color: var(--dhx-muted); margin: .3rem 0 0; }
.dhx-event__time { font-size: 1.3rem; color: var(--dhx-muted); margin: .2rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  .dhx-result, .dhx-event { animation: none; opacity: 1; transform: none; }
  .dhx-route__fill, .dhx-route__van { transition: none; }
}