/* =========================================================================
   KNIGHT — Order Tracking. Lookup form + status hero + stepper + activity
   timeline + order/shipping cards. Server-rendered from track.php.
   ========================================================================= */

.k-track { padding: 22px 0 80px; }

@keyframes kTrackPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--k-accent) 45%, transparent); }
  70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--k-accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--k-accent) 0%, transparent); }
}
@keyframes kTrackDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }

/* Title bottom spacing (typography from the shared .k-page-title) */
.k-track-title { margin-bottom: 24px; }

/* Lookup form */
.k-track-lookup { background: #fff; border: 1px solid var(--k-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(20, 19, 15, 0.04); padding: 22px 24px; margin-bottom: 28px; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.k-track-lookup__field { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
/* .k-track-lookup__field label → shared field micro-label in theme.css */
.k-track-lookup__field input { height: 50px; border: 1px solid var(--k-line); border-radius: 10px; background: #fff; padding: 0 16px; font-family: var(--k-font-body); font-size: 15px; color: var(--k-ink); outline: none; }
.k-track-lookup__field input:focus { border-color: var(--k-ink); }
.k-track-lookup__btn { font-family: var(--k-font-body); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--k-ink); color: var(--k-surface); border: none; border-radius: 10px; height: 50px; padding: 0 26px; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.k-track-lookup__btn:hover { background: var(--k-accent); color: #fff; }
.k-track-lookup__error { flex-basis: 100%; font-family: var(--k-font-body); font-size: 12px; color: var(--k-accent); }

/* Empty hint */
/* .k-track-hint / __ico / __title → shared empty/hint state in theme.css */
.k-track-hint__text { font-size: 14px; color: var(--k-muted); margin: 0; max-width: 460px; }

/* Status hero (dark) */
.k-track-hero { position: relative; overflow: hidden; background: var(--k-ink); color: var(--k-surface); border-radius: 16px; padding: 28px 30px; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.k-track-hero::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(246, 244, 240, 0.04) 0 22px, transparent 22px 44px); pointer-events: none; }
.k-track-hero__main, .k-track-hero__meta { position: relative; }
.k-track-hero__status { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.k-track-hero__dot { width: 9px; height: 9px; border-radius: 50%; animation: kTrackDot 1.4s ease-in-out infinite; }
.k-track-hero__eyebrow { font-family: var(--k-font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.k-track-hero__headline { font-family: var(--k-font-display); font-weight: 900; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.02; letter-spacing: -0.02em; }
.k-track-hero__sub { font-size: 14px; color: rgba(246, 244, 240, 0.6); margin-top: 8px; }
.k-track-hero__sub strong { color: var(--k-surface); font-weight: 700; }
.k-track-hero__meta { display: flex; gap: 36px; flex-wrap: wrap; }
.k-track-hero__k { font-family: var(--k-font-body); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246, 244, 240, 0.5); margin-bottom: 7px; }
.k-track-hero__v { font-family: var(--k-font-body); font-weight: 700; font-size: 15px; }
.k-track-hero__v a { color: color-mix(in srgb, var(--k-accent) 60%, #fff); text-decoration: none; }
.k-track-hero__v a:hover { text-decoration: underline; }

/* Stepper */
.k-track-steps-card { background: #fff; border: 1px solid var(--k-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(20, 19, 15, 0.04); padding: 34px 30px 30px; margin-bottom: 24px; overflow-x: auto; }
.k-track-steps { display: flex; min-width: 560px; }
.k-track-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.k-track-step__rail { position: relative; width: 100%; height: 38px; display: flex; align-items: center; justify-content: center; }
.k-track-step__line { position: absolute; top: 50%; transform: translateY(-50%); height: 2px; }
.k-track-step__line--l { left: 0; right: 50%; }
.k-track-step__line--r { left: 50%; right: 0; }
.k-track-step__node { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; background: var(--k-bg); border: 2px solid var(--k-line); color: var(--k-muted); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.k-track-step.is-done .k-track-step__node { background: var(--k-accent); border-color: var(--k-accent); color: #fff; }
.k-track-step.is-active .k-track-step__node { background: #fff; border-color: var(--k-accent); color: var(--k-accent); }
.k-track-step.is-failed .k-track-step__node { background: #b23f3f; border-color: #b23f3f; color: #fff; }
.k-track-step__node.pulse-active { animation: kTrackPulse 1.6s ease-out infinite; }
.k-track-step__label { text-align: center; padding: 0 6px; font-family: var(--k-font-body); font-weight: 700; font-size: 13px; color: var(--k-ink); line-height: 1.2; }
.k-track-step:not(.is-done):not(.is-active) .k-track-step__label { color: var(--k-muted); }
.k-track-step__at { font-family: var(--k-font-body); font-size: 11px; color: var(--k-muted); margin-top: -6px; min-height: 14px; }

/* Grid: activity + side */
.k-track-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.k-track-card-title { font-family: var(--k-font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; margin-bottom: 22px; }

/* Activity timeline */
.k-track-activity { background: #fff; border: 1px solid var(--k-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(20, 19, 15, 0.04); padding: 26px 28px; }
.k-track-timeline { display: flex; flex-direction: column; }
.k-track-tl { display: flex; gap: 16px; }
.k-track-tl__rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.k-track-tl__dot { width: 13px; height: 13px; border-radius: 50%; background: var(--k-bg); border: 2px solid var(--k-line); margin-top: 3px; }
.k-track-tl.is-current .k-track-tl__dot { background: var(--k-accent); border-color: var(--k-accent); }
.k-track-tl__line { width: 2px; flex: 1; min-height: 34px; background: var(--k-line); }
.k-track-tl__body { padding-bottom: 22px; flex: 1; min-width: 0; }
.k-track-tl__title { font-family: var(--k-font-body); font-weight: 600; font-size: 15px; color: var(--k-muted); line-height: 1.25; }
.k-track-tl.is-current .k-track-tl__title { font-weight: 700; color: var(--k-ink); }
.k-track-tl__stamp { font-family: var(--k-font-body); font-size: 12px; letter-spacing: 0.04em; color: var(--k-muted-2); margin-top: 4px; }

/* Side column */
.k-track-side { display: flex; flex-direction: column; gap: 24px; }
.k-track-order { background: #fff; border: 1px solid var(--k-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(20, 19, 15, 0.04); overflow: hidden; }
.k-track-order__head { padding: 22px 24px 16px; border-bottom: 1px solid var(--k-line); font-family: var(--k-font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.k-track-order__items { padding: 16px 24px; display: flex; flex-direction: column; gap: 16px; }
/* .k-track-item + __media/__qty/__info/__name/__variant/__total → shared order line item in theme.css */
.k-track-order__total { padding: 16px 24px; border-top: 1px solid var(--k-line); background: var(--k-bg); display: flex; justify-content: space-between; align-items: baseline; }
.k-track-order__total span { font-family: var(--k-font-body); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-muted); }
.k-track-order__total strong { font-family: var(--k-font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; }

.k-track-ship { background: #fff; border: 1px solid var(--k-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(20, 19, 15, 0.04); padding: 22px 24px; }
.k-track-ship__label { font-family: var(--k-font-body); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-muted); margin-bottom: 12px; }
.k-track-ship__addr { font-family: var(--k-font-body); font-weight: 600; font-size: 15px; line-height: 1.5; }
.k-track-ship__help { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-family: var(--k-font-body); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--k-accent); text-decoration: none; }
.k-track-ship__help:hover { color: var(--k-ink); }

.k-track-muted { color: var(--k-muted); font-size: 14px; }

/* RESPONSIVE */
@media (max-width: 900px) {
  /* minmax(0,1fr), not 1fr — a bare 1fr floors at min-content and lets the
     cards overflow the viewport (eating their right padding). */
  .k-track-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  /* The horizontal stepper needs ~560px; on phones the vertical "Kretanje
     pošiljke" timeline already shows the same milestones, so drop the stepper
     entirely. Removing it also kills the overflow that was eating the cards'
     right padding. */
  .k-track-steps-card { display: none; }
  .k-track { padding-bottom: 40px; }   /* trim the oversized gap before the footer */
}
@media (max-width: 560px) {
  .k-track-lookup { padding: 18px; }
  .k-track-hero { padding: 22px; }
  .k-track-activity, .k-track-ship { padding: 22px 20px; }
  .k-track-order__head, .k-track-order__items, .k-track-order__total { padding-left: 20px; padding-right: 20px; }
}