/* ==========================================================================
   ORDER TRACKING  (form + result)
   Signature: a paper shipping label with a perforated tear line
   ========================================================================== */

.track-page {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0 2rem;
}

.track-page__routes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.track-page__routes path {
    fill: none;
    stroke: rgba(20, 80, 63, .12);
    stroke-width: 1.2;
    stroke-dasharray: 5 9;
}

.track-page .container { position: relative; }

.track-shell {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 1.8rem;
    align-items: start;
}

/* --------------------------------------------------------------------------
   LABEL CARD
   -------------------------------------------------------------------------- */
.label-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 2.2rem;
    box-shadow: var(--shadow-lg);
}

.label-card__head { margin-bottom: 1.6rem; }

.label-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(20, 80, 63, .12);
    padding: .38rem .7rem;
    border-radius: 100px;
    margin-bottom: 1rem;
}

.label-card__head h1 {
    font-size: clamp(28px, 4vw, 40px);
    letter-spacing: -.035em;
    margin-bottom: .6rem;
}
.label-card__head p { font-size: 15px; max-width: 46ch; margin: 0; }

/* alert */
.track-alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: var(--danger-soft);
    border: 1px solid rgba(166, 45, 45, .18);
    color: var(--danger);
    border-radius: var(--r-md);
    padding: .85rem 1rem;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 1.3rem;
}
.track-alert svg { flex-shrink: 0; margin-top: 2px; }

/* form */
.track-form { display: flex; flex-direction: column; gap: 1.1rem; }

.field label {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: .45rem;
}

.field__box {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field__box:hover { border-color: #D5DBE1; }
.field__box:focus-within {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.field__icon {
    position: absolute;
    left: .95rem;
    color: var(--ink-3);
    pointer-events: none;
}

.field__input {
    width: 100%;
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--mono);
    font-size: 15px;
    letter-spacing: .04em;
    color: var(--ink);
    padding: .95rem 1rem .95rem 2.9rem;
}
.field__input::placeholder { color: #B4BBC3; letter-spacing: .02em; }

.field__hint {
    display: block;
    margin-top: .5rem;
    font-size: 12.5px;
    color: var(--ink-3);
}

.track-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    align-self: flex-start;
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: 100px;
    padding: .88rem 1.6rem;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 24px -12px rgba(20, 80, 63, .75);
    transition: all .22s var(--ease);
}
.track-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }

/* perforation — the signature detail */
.label-card__perf {
    position: relative;
    height: 1px;
    margin: 2rem -2.2rem 1.5rem;
    background-image: linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
    background-size: 16px 1px;
}
.label-card__perf::before,
.label-card__perf::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--canvas);
    border: 1px solid var(--line);
    transform: translateY(-50%);
}
.label-card__perf::before { left: -11px; }
.label-card__perf::after { right: -11px; }

.label-card__stub { display: flex; flex-direction: column; gap: .8rem; }
.barcode { width: 100%; max-width: 260px; height: 34px; color: var(--ink); opacity: .82; }

.stub__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.stub__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(21, 112, 79, .16);
}

/* --------------------------------------------------------------------------
   JOURNEY (aside)
   -------------------------------------------------------------------------- */
.journey {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 1.9rem;
}

.journey__title {
    font-size: 19px;
    letter-spacing: -.02em;
    padding-bottom: 1rem;
    margin-bottom: 1.3rem;
    border-bottom: 1px solid var(--line-soft);
}

.journey__list { list-style: none; margin: 0; padding: 0; position: relative; }

.journey__item {
    position: relative;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: .9rem;
    padding-bottom: 1.5rem;
}
.journey__item:last-child { padding-bottom: 0; }
.journey__item::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 40px;
    bottom: 6px;
    width: 1px;
    background-image: linear-gradient(180deg, var(--line) 0 5px, transparent 5px 10px);
    background-size: 1px 10px;
}
.journey__item:last-child::before { display: none; }

.journey__node {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent-soft);
    border: 1px solid rgba(20, 80, 63, .14);
    color: var(--accent);
}

.journey__item h3 { font-size: 15.5px; margin: .35rem 0 .25rem; letter-spacing: -.02em; }
.journey__item p { font-size: 13.5px; margin: 0; }

.journey__help {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px dashed var(--line);
}
.journey__help p { font-size: 13.5px; margin: 0 0 .3rem; }
.journey__help a { font-size: 14px; font-weight: 600; color: var(--accent); }
.journey__help a:hover { color: var(--accent-hover); }

@media (max-width: 991.98px) {
    .track-shell { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .label-card { padding: 1.5rem; }
    .label-card__perf { margin-inline: -1.5rem; }
    .track-btn { width: 100%; }
}

/* ==========================================================================
   RESULT PAGE
   ========================================================================== */
.track-page--result { padding-bottom: 3rem; }

.result-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 2.2rem;
    box-shadow: var(--shadow-lg);
}

.result-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--line-soft);
}
.result-head__id h1 {
    font-size: clamp(24px, 3.4vw, 34px);
    letter-spacing: -.03em;
    margin-bottom: .7rem;
}

.tracking-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: .35rem .8rem;
    margin: 0;
}
.tracking-chip span {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tracking-chip code {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .45rem .9rem;
    border-radius: 100px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink-2);
    white-space: nowrap;
}
.status-badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    font-style: normal;
}
.status-badge.is-pending    { color: var(--brass);  background: var(--brass-soft);  border-color: rgba(169, 132, 63, .2); }
.status-badge.is-processing { color: #8A5A00;       background: #FDF3E1;            border-color: rgba(138, 90, 0, .18); }
.status-badge.is-shipped    { color: #1D4E89;       background: #EAF1FA;            border-color: rgba(29, 78, 137, .18); }
.status-badge.is-delivered,
.status-badge.is-completed  { color: var(--success); background: var(--accent-soft); border-color: rgba(20, 80, 63, .18); }
.status-badge.is-cancelled  { color: var(--danger);  background: var(--danger-soft); border-color: rgba(166, 45, 45, .18); }

/* product row */
.result-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.8rem;
    align-items: start;
    padding: 1.8rem 0;
}

.product-shot {
    margin: 0;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: linear-gradient(160deg, #FAFBFC, #F1F3F5);
}
.product-shot img { width: 100%; height: 100%; object-fit: cover; }

.product-info h2 { font-size: 23px; letter-spacing: -.025em; margin-bottom: .6rem; }

.detail-list { margin: 1.2rem 0 0; }
.detail-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--line-soft);
}
.detail-row dt {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-top: 2px;
}
.detail-row dd { margin: 0; font-size: 14.5px; color: var(--ink); }

/* progress */
.progress-block { padding-top: .5rem; }
.progress-block__title { font-size: 19px; margin-bottom: 1.8rem; }

.track-line {
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: relative;
    margin: 0;
    padding: 0;
}
.track-line::before,
.track-line::after {
    content: "";
    position: absolute;
    top: 27px;
    left: 0;
    height: 2px;
    border-radius: 2px;
}
.track-line::before { right: 0; background: var(--line); }
.track-line::after {
    width: var(--progress, 0%);
    background: var(--accent);
    transition: width .8s var(--ease);
}

.track-line__step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .6rem;
    padding-inline: .3rem;
}

.track-line__node {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--line);
    color: var(--ink-3);
    transition: all .3s var(--ease);
}

/* The drawings are line art, so they need a little more weight to stay
   legible once the node is this size. */
.track-line__icon [stroke-width="1.7"] { stroke-width: 1.9; }
.track-line__icon [stroke-width="1.8"] { stroke-width: 2; }

/* stages already passed: filled, icon reversed out */
.track-line__step.is-done .track-line__node {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* the stage the parcel is at now */
.track-line__step.is-current .track-line__node {
    background: var(--surface);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 5px var(--accent-soft);
}

/* small tick tucked into the corner of a completed stage, so the stage
   icon stays readable and the tick still marks it as finished */
.track-line__tick {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: 2px solid var(--surface);
}

.track-line__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: -.01em;
}
.track-line__step.is-done .track-line__label,
.track-line__step.is-current .track-line__label { color: var(--ink); }

.track-line__now {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 100px;
    padding: .2rem .55rem;
}

.cancelled-note {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    background: var(--danger-soft);
    border: 1px solid rgba(166, 45, 45, .18);
    border-radius: var(--r-md);
    padding: 1.1rem 1.2rem;
    color: var(--danger);
}
.cancelled-note svg { flex-shrink: 0; margin-top: 2px; }
.cancelled-note strong { display: block; font-size: 15px; margin-bottom: .2rem; }
.cancelled-note p { margin: 0; font-size: 13.5px; color: var(--danger); opacity: .85; }

/* actions */
.result-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.2rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--line);
}

.ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: .7rem 1.25rem;
    transition: all .2s var(--ease);
}
.ghost-btn:hover { border-color: var(--ink); background: var(--surface-2); }

.text-link {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--line);
}
.text-link:hover { color: var(--accent); text-decoration-color: currentColor; }

@media (max-width: 767.98px) {
    .result-card { padding: 1.5rem; }
    .result-grid { grid-template-columns: 1fr; }
    .product-shot { max-width: 240px; }
    .detail-row { grid-template-columns: 1fr; gap: .2rem; }
    .track-line { grid-auto-flow: row; gap: 1.4rem; }
    .track-line::before, .track-line::after { display: none; }
    .track-line__step { flex-direction: row; text-align: left; align-items: center; }
    .result-actions { flex-direction: column; align-items: stretch; }
    .ghost-btn { justify-content: center; }
    .text-link { text-align: center; }
}

/* ==========================================================================
   STEP ICON ANIMATIONS

   Only the stage the parcel is actually at animates. Running all five at
   once turns the page into a fairground, and a moving icon is how the eye
   is told "you are here".

   Every keyframe below is switched off under prefers-reduced-motion, which
   is handled by the global rule at the foot of this file.
   ========================================================================== */

.track-line__icon { overflow: visible; }

/* ---- Pending : the hourglass turns over ---------------------------- */
@keyframes ic-hourglass-turn {
    0%,  55%  { transform: rotate(0deg); }
    75%, 100% { transform: rotate(180deg); }
}

.track-line__step.is-current .ic-hourglass {
    transform-origin: 12px 12px;
    animation: ic-hourglass-turn 3.2s cubic-bezier(.65, 0, .35, 1) infinite;
}

/* ---- Approved : the ring breathes around the tick ------------------ */
@keyframes ic-approve-ring {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.18); opacity: .45; }
}

.track-line__step.is-current .ic-approve__ring {
    transform-origin: 12px 12px;
    animation: ic-approve-ring 1.9s ease-in-out infinite;
}

/* ---- Processing : the lid lifts, pauses, drops --------------------- */
@keyframes ic-box-lid {
    0%,  20%  { transform: translateY(0); }
    45%, 65%  { transform: translateY(-3.2px); }
    90%, 100% { transform: translateY(0); }
}

.track-line__step.is-current .ic-box__lid {
    animation: ic-box-lid 2.4s ease-in-out infinite;
}

/* ---- Shipped : the van rolls, wheels turn -------------------------- */
@keyframes ic-van-drive {
    0%, 100% { transform: translateX(-1.4px); }
    50%      { transform: translateX(1.4px); }
}

@keyframes ic-wheel-spin {
    to { transform: rotate(360deg); }
}

.track-line__step.is-current .ic-van {
    animation: ic-van-drive 1.6s ease-in-out infinite;
}

.track-line__step.is-current .ic-van__wheel {
    animation: ic-wheel-spin 1.1s linear infinite;
}

/* ---- Delivered : the parcel drops into the hand -------------------- */
/* The parcel never fades out completely — a frozen frame should still
   show a package arriving, not an empty pair of hands. */
@keyframes ic-parcel-drop {
    0%        { transform: translateY(-4.5px); opacity: .3; }
    30%, 70%  { transform: translateY(0);      opacity: 1; }
    100%      { transform: translateY(-4.5px); opacity: .3; }
}

@keyframes ic-hand-catch {
    0%, 20%, 100% { transform: translateY(0); }
    34%           { transform: translateY(1.4px); }
    48%           { transform: translateY(0); }
}

.track-line__step.is-current .ic-hand__parcel {
    animation: ic-parcel-drop 2.8s ease-in-out infinite;
}

.track-line__step.is-current .ic-hand {
    animation: ic-hand-catch 2.8s ease-in-out infinite;
}

/* When the order is complete there is no "current" stage, so the final
   Delivered node would sit still. Animate it there too, since that is the
   one the reader is looking at. */
.track-line.is-complete .track-line__step:last-child .ic-hand__parcel {
    animation: ic-parcel-drop 2.8s ease-in-out infinite;
}
.track-line.is-complete .track-line__step:last-child .ic-hand {
    animation: ic-hand-catch 2.8s ease-in-out infinite;
}

/* Any other finished Delivered stage shows the parcel resting in the hand
   rather than an empty pair of hands. */
.track-line__step.is-done:not(:last-child) .ic-hand__parcel {
    transform: translateY(0);
    opacity: 1;
}