/* Track Orders — approved Figma layout */
.ff-track-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 48px 64px 72px;
    color: #111;
}

.ff-track-page > h1 {
    font-family: Poppins, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
}

.ff-track-lookup { margin-top: 56px; }
.ff-track-lookup h2 { font-size: 18px; font-weight: 700; line-height: 26px; }
.ff-track-lookup > p { margin: 4px 0 16px; color: #505050; font-size: 12px; line-height: 18px; letter-spacing: 0; }
.ff-track-lookup form { max-width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 220px; gap: 12px; }
.ff-track-lookup input,
.ff-track-lookup button { height: 44px; border-color: #bdbdbd; font-family: Poppins, sans-serif; font-size: 12px; }
.ff-track-lookup button { border-color: #111; font-weight: 600; }

.ff-track-status { margin-top: 56px; }
.ff-track-facts { padding-bottom: 22px; border-bottom: 1px solid #d6d6d6; }
.ff-track-facts p { gap: 4px; font-size: 12px; line-height: 18px; }
.ff-track-facts p strong { font-size: 14px; font-weight: 600; }
.ff-track-facts p span { color: #626262; }
.ff-track-facts b { font-size: 14px; }
.ff-track-timeline { margin-top: 28px; }
.ff-track-timeline > div { gap: 5px; }
.ff-track-timeline > div > span { width: 34px; height: 34px; border-color: #b5b5b5; font-size: 12px; }
.ff-track-timeline > div.is-done > span { border-color: #111; background: #111; color: #fff; }
.ff-track-timeline > div:not(:last-child)::after { top: 16px; left: calc(50% + 23px); width: calc(100% - 46px); background: #b5b5b5; }
.ff-track-timeline strong { font-size: 12px; font-weight: 600; }
.ff-track-timeline small { color: #686868; font-size: 10px; line-height: 14px; }

.ff-track-details { grid-template-columns: minmax(0, 1.55fr) minmax(380px, 1fr); gap: 24px; margin-top: 56px; align-items: start; }
.ff-track-order > h2,
.ff-track-side h2 { margin-bottom: 16px; font-size: 18px; font-weight: 700; line-height: 26px; }
.ff-track-order article { min-height: 136px; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 18px; padding: 14px; border-color: #d9d9d9; }
.ff-track-order article + article { margin-top: 12px; }
.ff-track-order article > img { width: 104px; height: 106px; object-fit: contain; }
.ff-track-order article small { color: #666; font-size: 10px; }
.ff-track-order article h3 { max-width: 340px; margin: 4px 0; font-size: 14px; font-weight: 700; line-height: 19px; }
.ff-track-order article p { color: #444; font-size: 11px; line-height: 16px; }
.ff-track-order article > strong { align-self: center; font-size: 14px; font-weight: 700; }
.ff-track-side { grid-template-columns: 1fr 1fr; gap: 12px; }
.ff-track-side section { min-height: 232px; padding: 18px; border-color: #d9d9d9; }
.ff-track-side section > strong { font-size: 13px; font-weight: 700; }
.ff-track-side section > p,
.ff-track-side section > a { margin: 10px 0 0; color: #444; font-size: 11px; line-height: 18px; }
.ff-track-side section > a { display: inline-block; color: #111; font-weight: 500; }

@media (max-width: 1024px) {
    .ff-track-page { padding: 40px 32px 64px; }
    .ff-track-details { display: grid; grid-template-columns: 1fr; gap: 32px; }
    .ff-track-side { order: -1; }
}

@media (max-width: 640px) {
    .ff-track-page { padding: 28px 16px 48px; }
    .ff-track-page > h1 { font-size: 24px; line-height: 32px; }
    .ff-track-lookup { margin-top: 34px; }
    .ff-track-lookup form { grid-template-columns: 1fr; gap: 10px; }
    .ff-track-lookup input, .ff-track-lookup button { height: 42px; }
    .ff-track-facts { grid-template-columns: 1fr 1fr; gap: 14px; }
    .ff-track-facts p:last-child { grid-column: 1 / -1; }
    .ff-track-timeline { margin-left: 0; }
    .ff-track-timeline > div:not(:last-child)::after { top: 31px; left: 16px; width: 1px; height: 38px; }
    .ff-track-details { margin-top: 40px; gap: 28px; }
    .ff-track-side { grid-template-columns: 1fr; gap: 12px; }
    .ff-track-side section { min-height: auto; padding: 16px; }
    .ff-track-order article { min-height: 112px; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; padding: 10px; }
    .ff-track-order article > img { width: 74px; height: 88px; }
    .ff-track-order article h3 { font-size: 12px; line-height: 16px; }
    .ff-track-order article > strong { grid-column: 2; justify-self: start; align-self: start; font-size: 12px; }
}