/* Flick Parcel Tracker — red edition */
.fpt, .fpt * { font-family:'Hind Siliguri',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; box-sizing:border-box; }
.fpt {
    --white:#fff; --ink:#0a0a0a; --red:#ff0000; --red-d:#c40000; --red-deep:#8f0000;
    --red-t:rgba(255,0,0,.06); --red-t2:rgba(255,0,0,.12); --red-b:rgba(255,0,0,.22);
    --emerald:#10b981; --emerald-d:#059669; --emerald-t:rgba(16,185,129,.1);
    --muted:#6b7280; --border:#e8e9ed; --bg:#f8f8fa;
    width:100%; max-width:640px; margin:32px auto; padding:0 14px;
}

/* ---------- Search ---------- */
.fpt-search {
    background:var(--white); border:1px solid var(--border); border-radius:18px;
    padding:40px 32px 32px; text-align:center; position:relative; overflow:hidden;
    box-shadow:0 16px 48px rgba(0,0,0,.06);
}
.fpt-search::before { content:''; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--red) 0%,var(--red-d) 55%,var(--ink) 100%); }
.fpt-badge {
    width:64px; height:64px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center;
    background:var(--red-t); border:2px solid var(--red-b); border-radius:50%; color:var(--red);
    animation:fptFloat 3.2s ease-in-out infinite;
}
@keyframes fptFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.fpt-title { font-size:26px; font-weight:700; color:var(--ink); margin:0 0 8px; letter-spacing:-.3px; }
.fpt-sub { font-size:14px; font-weight:500; color:var(--muted); margin:0 0 26px; line-height:1.65; }
.fpt-inputwrap { display:flex; gap:0; border:2.5px solid var(--ink); border-radius:13px; padding:3px; transition:border-color .25s, box-shadow .25s; }
.fpt-inputwrap.focus { border-color:var(--red); box-shadow:0 0 0 5px var(--red-t); }
.fpt-input { flex:1; min-width:0; height:52px; border:none; background:transparent; padding:0 16px; font-size:16px; font-weight:600; color:var(--ink); outline:none; letter-spacing:.5px; }
.fpt-input::placeholder { font-weight:500; color:#b6b9c2; letter-spacing:1px; }
.fpt-btn {
    height:52px; padding:0 32px; background:var(--red); color:#fff; border:none; border-radius:10px;
    font-size:15px; font-weight:700; cursor:pointer; white-space:nowrap;
    transition:background .2s, transform .15s; font-family:inherit;
}
.fpt-btn:hover { background:var(--red-d); transform:translateY(-1px); }
.fpt-btn:active { transform:translateY(0) scale(.98); }
.fpt-btn:disabled { background:var(--muted); cursor:not-allowed; transform:none; }
.fpt-hint { font-size:12px; font-weight:500; color:var(--muted); margin:13px 0 0; }

/* ---------- Results ---------- */
.fpt-results { margin-top:26px; }
.fpt-card {
    background:var(--white); border:1px solid var(--border); border-radius:18px;
    padding:30px 28px; margin-bottom:20px; box-shadow:0 12px 44px rgba(0,0,0,.05);
    animation:fptCardIn .45s cubic-bezier(.22,.9,.35,1.1) both;
    position:relative; overflow:hidden;
    transition:transform .25s, box-shadow .25s;
}
.fpt-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--red),var(--ink)); }
.fpt-card:hover { transform:translateY(-3px); box-shadow:0 18px 54px rgba(0,0,0,.09); }
.fpt-count {
    font-size:14px; font-weight:700; color:var(--ink); margin:0 0 14px; text-align:center;
    animation:fptCardIn .4s both;
}
.fpt-count b { color:var(--red); }
@keyframes fptCardIn { from{opacity:0; transform:translateY(16px) scale(.985)} to{opacity:1; transform:none} }

.fpt-card-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; border-bottom:2.5px solid var(--ink); padding-bottom:16px; margin-bottom:24px; }
.fpt-oid { font-size:18px; font-weight:700; color:var(--ink); }
.fpt-oid span { color:var(--red); }
.fpt-pill {
    padding:7px 17px; border-radius:30px; font-size:12.5px; font-weight:700; color:#fff;
    background:var(--ink); letter-spacing:.3px; animation:fptPillIn .5s .15s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes fptPillIn { from{opacity:0; transform:scale(.6)} to{opacity:1; transform:scale(1)} }
.fpt-pill-done { background:var(--emerald-d); }
.fpt-pill-cancel { background:var(--red-deep); }

/* ---------- Progress bar ---------- */
.fpt-track { display:flex; justify-content:space-between; position:relative; margin:6px 2px 32px; }
.fpt-track::before { content:''; position:absolute; top:11px; left:22px; right:22px; height:3.5px; border-radius:3px; background:var(--border); z-index:0; }
.fpt-fill {
    position:absolute; top:11px; left:22px; height:3.5px; border-radius:3px; z-index:0;
    background:var(--red); width:0;
    animation:fptFill 1s .3s cubic-bezier(.25,.8,.35,1) forwards;
    max-width:calc(100% - 44px);
}
.fpt-track.all-done .fpt-fill { background:var(--emerald); }
@keyframes fptFill { to { width:var(--fill,0%); } }
.fpt-step { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; flex:1; text-align:center; }
.fpt-node {
    width:24px; height:24px; border-radius:50%; background:#fff;
    border:3.5px solid var(--border); transition:all .3s;
    animation:fptNodeIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
.fpt-step:nth-child(1) .fpt-node{animation-delay:.05s} .fpt-step:nth-child(2) .fpt-node{animation-delay:.15s}
.fpt-step:nth-child(3) .fpt-node{animation-delay:.25s} .fpt-step:nth-child(4) .fpt-node{animation-delay:.35s}
@keyframes fptNodeIn { from{opacity:0; transform:scale(.3)} to{opacity:1; transform:scale(1)} }
.fpt-step.done .fpt-node { background:var(--red); border-color:var(--red); position:relative; }
.fpt-step.done .fpt-node::after {
    content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:12px; font-weight:700; line-height:1;
}
.fpt-track.all-done .fpt-step .fpt-node::after { content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; }
.fpt-step.active .fpt-node {
    background:var(--red); border-color:var(--red);
    box-shadow:0 0 0 6px var(--red-t2); animation:fptNodeIn .4s cubic-bezier(.34,1.56,.64,1) both, fptPulse 1.7s .5s infinite;
}
@keyframes fptPulse { 0%,100%{box-shadow:0 0 0 6px rgba(255,0,0,.14)} 50%{box-shadow:0 0 0 11px rgba(255,0,0,.04)} }
.fpt-step.cancel .fpt-node { background:var(--red-deep); border-color:var(--red-deep); }
.fpt-track.all-done .fpt-node { background:var(--emerald); border-color:var(--emerald); }
.fpt-step-label { font-size:11.5px; color:var(--muted); margin-top:9px; font-weight:700; max-width:76px; line-height:1.3; }
.fpt-step.done .fpt-step-label, .fpt-step.active .fpt-step-label, .fpt-step.cancel .fpt-step-label { color:var(--ink); }

/* ---------- Detail grid ---------- */
.fpt-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }
.fpt-cell {
    background:var(--bg); border-left:4px solid var(--red); border-radius:0 10px 10px 0;
    padding:15px 17px; display:flex; flex-direction:column;
    animation:fptCellIn .4s both;
}
.fpt-cell:nth-child(1){animation-delay:.1s} .fpt-cell:nth-child(2){animation-delay:.17s}
.fpt-cell:nth-child(3){animation-delay:.24s} .fpt-cell:nth-child(4){animation-delay:.31s}
@keyframes fptCellIn { from{opacity:0; transform:translateX(-8px)} to{opacity:1; transform:none} }
.fpt-k { font-size:11px; text-transform:uppercase; color:var(--muted); font-weight:700; letter-spacing:.5px; margin-bottom:5px; }
.fpt-v { font-size:16px; font-weight:700; color:var(--ink); line-height:1.4; }
.fpt-v.fpt-addr { font-size:14px; font-weight:600; }
.fpt-vs { font-size:13px; font-weight:600; color:var(--muted); margin-top:2px; }

/* ---------- Items ---------- */
.fpt-items { margin-top:16px; background:var(--bg); border-radius:12px; padding:15px 17px; animation:fptCellIn .4s .35s both; }
.fpt-items-head { font-size:11px; text-transform:uppercase; color:var(--muted); font-weight:700; letter-spacing:.5px; margin-bottom:9px; }
.fpt-item { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0; border-bottom:1px dashed #e3e4e9; }
.fpt-item:last-child { border-bottom:none; padding-bottom:0; }
.fpt-item-name { font-size:14px; font-weight:600; color:var(--ink); line-height:1.45; }
.fpt-item-qty { font-size:13px; font-weight:700; color:var(--red-d); white-space:nowrap; }

/* ---------- Tracking code strip ---------- */
.fpt-code-strip {
    margin-top:16px; display:flex; align-items:center; flex-wrap:wrap; gap:10px;
    background:var(--red-t); border:1.5px dashed var(--red-b); border-radius:12px; padding:13px 16px;
    animation:fptCellIn .4s .4s both;
}
.fpt-code-label { font-size:12px; font-weight:700; color:var(--red-deep); text-transform:uppercase; letter-spacing:.4px; }
.fpt-code { background:#fff; border:1px solid var(--red-b); border-radius:7px; padding:5px 12px; font-size:14px; font-weight:700; letter-spacing:.6px; color:var(--ink); font-family:inherit; }
.fpt-copy {
    margin-left:auto; background:var(--ink); color:#fff; border:none; border-radius:7px;
    padding:7px 16px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;
    transition:background .2s, transform .15s;
}
.fpt-copy:hover { background:var(--red); }
.fpt-copy:active { transform:scale(.96); }
.fpt-copy.copied { background:var(--emerald-d); }

/* ---------- Live badge ---------- */
.fpt-live {
    margin-top:18px; display:inline-flex; align-items:center; gap:9px;
    font-size:12.5px; font-weight:700; color:var(--emerald-d);
    background:var(--emerald-t); border:1px solid rgba(16,185,129,.25);
    padding:7px 14px; border-radius:30px;
}
.fpt-dot { width:8px; height:8px; border-radius:50%; background:var(--emerald); animation:fptLive 1.5s infinite; }
@keyframes fptLive { 0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)} 70%{box-shadow:0 0 0 8px rgba(16,185,129,0)} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0)} }

/* ---------- Timeline ---------- */
.fpt-timeline-wrap { margin-top:28px; padding-top:24px; border-top:1px solid var(--border); }
.fpt-tl-head { font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--ink); margin:0 0 22px; }
.fpt-tl { position:relative; padding-left:28px; }
.fpt-tl::before { content:''; position:absolute; left:7px; top:8px; bottom:8px; width:2.5px; border-radius:2px; background:linear-gradient(180deg,var(--red) 0%,var(--border) 40%); }
.fpt-tl-item { position:relative; padding-bottom:24px; animation:fptTlIn .45s both; }
.fpt-tl-item:nth-child(1){animation-delay:.1s} .fpt-tl-item:nth-child(2){animation-delay:.2s}
.fpt-tl-item:nth-child(3){animation-delay:.3s} .fpt-tl-item:nth-child(4){animation-delay:.4s}
.fpt-tl-item:nth-child(5){animation-delay:.5s} .fpt-tl-item:nth-child(n+6){animation-delay:.6s}
@keyframes fptTlIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
.fpt-tl-item:last-child { padding-bottom:0; }
.fpt-tl-node {
    position:absolute; left:-28px; top:3px; width:16px; height:16px; border-radius:50%;
    background:#d6d8de; border:3.5px solid #fff; box-shadow:0 0 0 1px #d6d8de;
}
.fpt-tl-item.done .fpt-tl-node { background:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.fpt-tl-item.active .fpt-tl-node {
    background:var(--red); box-shadow:0 0 0 5px var(--red-t2);
    animation:fptTlPulse 1.7s infinite;
}
@keyframes fptTlPulse { 0%,100%{box-shadow:0 0 0 5px rgba(255,0,0,.14)} 50%{box-shadow:0 0 0 9px rgba(255,0,0,.04)} }
.fpt-tl-item.cancel .fpt-tl-node { background:var(--red-deep); box-shadow:0 0 0 1px var(--red-deep); }
.fpt-tl-title { font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.45; }
.fpt-tl-item.active .fpt-tl-title { color:var(--red-d); }
.fpt-tl-sub {
    font-size:13px; color:var(--red-deep); font-weight:700; margin-top:5px;
    background:var(--red-t); border:1px solid var(--red-b);
    display:inline-block; padding:4px 12px; border-radius:8px;
}
.fpt-tl-time { font-size:12px; font-weight:600; color:var(--muted); margin-top:5px; }

/* ---------- States ---------- */
.fpt-error {
    background:#fff2f2; border:1.5px solid #ffc4c4; color:var(--red-d); border-radius:12px;
    padding:17px; text-align:center; font-weight:700; animation:fptShake .4s;
}
@keyframes fptShake { 0%,100%{transform:none} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.fpt-loading { height:180px; border-radius:18px; background:linear-gradient(100deg,var(--bg) 30%,#eef0f4 50%,var(--bg) 70%); background-size:200% 100%; animation:fptShim 1.1s infinite; }
@keyframes fptShim { from{background-position:200% 0} to{background-position:-200% 0} }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){ .fpt *{animation:none !important; transition:none !important;} }

/* ---------- Mobile ---------- */
@media (max-width:560px){
    .fpt { margin:20px auto; }
    .fpt-search { padding:32px 20px 26px; border-radius:16px; }
    .fpt-title { font-size:23px; }
    .fpt-inputwrap { flex-direction:column; border:none; padding:0; gap:10px; }
    .fpt-inputwrap.focus { box-shadow:none; }
    .fpt-input { border:2.5px solid var(--ink); border-radius:12px; height:52px; }
    .fpt-btn { width:100%; border-radius:12px; }
    .fpt-card { padding:22px 17px; border-radius:16px; }
    .fpt-grid { grid-template-columns:1fr; }
    .fpt-track { margin:4px 0 28px; }
    .fpt-track::before { left:16px; right:16px; top:10px; }
    .fpt-node { width:22px; height:22px; }
    .fpt-step-label { font-size:9.5px; max-width:64px; }
    .fpt-tl { padding-left:24px; }
    .fpt-tl-node { left:-24px; }
    .fpt-tl-title { font-size:14.5px; }
}
@media (max-width:380px){ .fpt-step-label { font-size:8.5px; max-width:52px; } }