/**
 * Magnetrix Shipment Tracking - front end styles.
 *
 * Additive only. Nothing here overrides an existing rule; every selector is
 * either a new .mxt-* class or a state on markup this plugin creates. Colours
 * come from the site's own custom properties, with literal fallbacks so the
 * plugin still looks right if it is ever used on another install.
 */

/* ---------- status colours ---------- */
.mx-status[data-tone="pending"]   { background: rgba(214,138,38,.12);  color: #A9651B; }
.mx-status[data-tone="transit"]   { background: rgba(23,110,190,.12);  color: #16619F; }
.mx-status[data-tone="out"]       { background: rgba(122,79,193,.13);  color: #6B45A8; }
.mx-status[data-tone="delivered"] { background: rgba(23,142,88,.13);   color: #147A4C; }
.mx-status[data-tone="exception"] { background: rgba(199,118,107,.16); color: #A3483C; }
.mx-status[data-tone="cancelled"] { background: rgba(94,129,127,.14);  color: #4A6462; }

/* ---------- loading spinner ---------- */
@keyframes mxt-spin { to { transform: rotate(360deg); } }
.mxt-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 9px;
  vertical-align: -2px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: currentColor;
  animation: mxt-spin .7s linear infinite;
}

/* ---------- results fade in ---------- */
@keyframes mxt-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mxt-in { animation: mxt-fade .38s cubic-bezier(.22,.61,.36,1) both; }

/* ---------- timeline ---------- */
/* The stage list reuses the existing ol[data-t-timeline]; these rules only
   describe the items this plugin inserts into it. */
.mxt-stage {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--mx-border, #DCEAEA);
  animation: mxt-fade .34s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.mxt-stage:last-child { border-bottom: 0; }

.mxt-stage__mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
  background: var(--mx-surface, #F7FCFC);
  border: 1px solid var(--mx-border, #DCEAEA);
  color: var(--mx-muted, #6C8A88);
}
.mxt-stage.is-done .mxt-stage__mark {
  background: var(--mx-accent, #20E6F2);
  border-color: var(--mx-accent, #20E6F2);
  color: var(--mx-ink, #04100F);
  font-weight: 700;
}

.mxt-stage__label {
  font-family: var(--mx-font-display, sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--mx-muted, #6C8A88);
  padding-top: 2px;
}
.mxt-stage.is-done .mxt-stage__label { color: var(--mx-ink, #04100F); }

/* ---------- shipment history ---------- */
.mxt-history { margin-top: 26px; }
.mxt-history__title {
  margin: 0 0 12px;
  font-family: var(--mx-font-mono, monospace);
  font-size: .62rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--mx-muted, #6C8A88);
}
.mxt-history__list { list-style: none; margin: 0; padding: 0; }

.mxt-event {
  display: flex;
  gap: 16px;
  padding: 13px 15px;
  border: 1px solid var(--mx-border, #DCEAEA);
  border-radius: var(--mx-r-md, 14px);
  background: #fff;
  margin-bottom: 9px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  animation: mxt-fade .34s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.mxt-event:last-child { margin-bottom: 0; }
.mxt-event:hover {
  border-color: #C6E2E2;
  box-shadow: 0 2px 5px rgba(4,16,15,.04), 0 10px 24px rgba(4,16,15,.06);
  transform: translateY(-2px);
}

.mxt-event__time {
  flex: 0 0 auto;
  min-width: 132px;
  font-family: var(--mx-font-mono, monospace);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mx-slate, #5E817F);
  padding-top: 3px;
}
.mxt-event__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mxt-event__body strong {
  font-family: var(--mx-font-display, sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--mx-ink, #04100F);
}
.mxt-event__loc { font-size: 14px; color: var(--mx-muted, #6C8A88); }

@media (max-width: 600px) {
  .mxt-event { flex-direction: column; gap: 4px; }
  .mxt-event__time { min-width: 0; padding-top: 0; }
}

/* Anyone who asked for less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  .mxt-in, .mxt-stage, .mxt-event { animation: none !important; }
  .mxt-event:hover { transform: none; }
  .mxt-spinner { animation-duration: 1.6s; }
}