.storefront-order-tracking { background: radial-gradient(circle at 8% 15%, rgba(56,189,248,.14), transparent 28rem), radial-gradient(circle at 92% 12%, rgba(236,72,153,.12), transparent 30rem), #f7f7fc; }
.fftrack, .fftrack * { box-sizing: border-box; }
.fftrack { min-height: 65vh; padding: 58px 24px 80px; color: #151a42; }
.fftrack__container { width: min(1120px, 100%); margin: 0 auto; }
.fftrack__hero { max-width: 720px; margin-bottom: 28px; }
.fftrack__hero > span { color: #7c3aed; font: 800 11px/1.2 Sora, sans-serif; letter-spacing: .16em; }
.fftrack__hero h1 { margin: 9px 0; font: 800 clamp(34px, 5vw, 54px)/1.05 Sora, sans-serif; letter-spacing: -.045em; }
.fftrack__hero p, .fftrack__lookup p, .fftrack__card p, .fftrack__card small { color: #68708f; line-height: 1.65; }
.fftrack__alert { margin-bottom: 18px; padding: 14px 16px; border: 1px solid #fecaca; border-radius: 14px; background: #fff1f2; color: #9f1239; }
.fftrack__lookup, .fftrack__card { border: 1px solid #e5e2f2; border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: 0 18px 50px rgba(25,20,70,.08); }
.fftrack__lookup { display: grid; grid-template-columns: .85fr 1.15fr; gap: 34px; padding: 30px; }
.fftrack__lookup h2, .fftrack__card h2 { margin: 0 0 9px; font: 750 22px/1.2 Sora, sans-serif; }
.fftrack__lookup form { display: grid; gap: 14px; }
.fftrack__lookup label { display: grid; gap: 7px; color: #30375d; font-size: 13px; font-weight: 700; }
.fftrack__lookup input { width: 100%; padding: 13px 14px; border: 1px solid #d9d5e8; border-radius: 12px; font: inherit; }
.fftrack__lookup button, .fftrack__whatsapp { display: inline-flex; justify-content: center; padding: 14px 18px; border: 0; border-radius: 12px; background: linear-gradient(135deg,#7c3aed,#ec4899); color: #fff; font: 800 13px/1.2 Sora,sans-serif; text-decoration: none; cursor: pointer; }
.fftrack__grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,.7fr); gap: 22px; align-items: start; }
.fftrack__card { padding: 26px; }
.fftrack__side { display: grid; gap: 14px; }
.fftrack__side .fftrack__card { display: grid; gap: 7px; }
.fftrack__side .fftrack__card > span { color: #7c3aed; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fftrack__side .fftrack__card > strong { font-size: 18px; }
.fftrack__side .fftrack__card > a { color: #7c3aed; font-weight: 800; text-decoration: none; }
.fftrack__timeline { display: grid; gap: 0; margin: 22px 0 0; padding: 0; list-style: none; }
.fftrack__timeline li { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 14px; min-height: 90px; }
.fftrack__timeline li:not(:last-child)::before { content: ''; position: absolute; left: 7px; top: 18px; bottom: -2px; width: 2px; background: #e5e2f2; }
.fftrack__timeline i { z-index: 1; width: 16px; height: 16px; margin-top: 2px; border: 3px solid #d8d4e7; border-radius: 50%; background: #fff; }
.fftrack__timeline .is-complete i { border-color: #22a86b; background: #22a86b; box-shadow: 0 0 0 5px rgba(34,168,107,.12); }
.fftrack__timeline .is-complete:not(:last-child)::before { background: #8bd4b1; }
.fftrack__timeline strong { display: block; font: 750 15px/1.3 Sora,sans-serif; }
.fftrack__timeline p { margin: 5px 0 0; font-size: 13px; }
.fftrack__pay-form { display: grid; gap: 8px; padding: 18px; border: 1px solid rgba(101,79,230,.22); border-radius: 18px; background: linear-gradient(145deg,rgba(112,87,255,.1),rgba(255,255,255,.96)); }
.fftrack__pay { min-height: 50px; border: 0; border-radius: 14px; background: #6550e6; color: #fff; font: 850 14px/1.2 Sora,sans-serif; cursor: pointer; box-shadow: 0 12px 28px rgba(101,80,230,.22); }
.fftrack__pay:hover { background: #5743d4; }
.fftrack__pay-form small { color: #62657b; line-height: 1.45; }
@media (max-width: 760px) { .fftrack { padding: 38px 16px 100px; } .fftrack__lookup, .fftrack__grid { grid-template-columns: 1fr; } .fftrack__lookup { padding: 22px; } }