@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap";
.track-page{background:#f0f3f8;min-height:100vh;padding:4rem 1.5rem 6rem;font-family:DM Sans,sans-serif}.track-container{max-width:680px;margin:0 auto}.track-header{text-align:center;margin-bottom:2.5rem}.track-eyebrow{color:#0b5cff;text-transform:uppercase;letter-spacing:.12em;align-items:center;gap:.45rem;margin-bottom:1rem;font-size:.72rem;font-weight:700;display:inline-flex}.track-eyebrow:before{content:"";background:#0b5cff;border-radius:50%;width:6px;height:6px;display:inline-block}.track-header h1{color:#07111f;letter-spacing:-.03em;margin-bottom:.75rem;font-family:DM Serif Display,serif;font-size:clamp(2rem,5vw,2.8rem);font-weight:400;line-height:1.1}.track-header p{color:#64748b;max-width:480px;margin:0 auto;font-size:.95rem;line-height:1.7}.track-card{background:#fff;border:1px solid #e8edf5;border-radius:18px;margin-bottom:1.25rem;padding:1.75rem;box-shadow:0 2px 16px #0000000a}.track-section-label{color:#94a3b8;text-transform:uppercase;letter-spacing:.12em;margin-bottom:1.25rem;font-size:.7rem;font-weight:700}.track-form{flex-direction:column;gap:1.25rem;display:flex}.track-form-row{grid-template-columns:1fr auto 1fr;align-items:end;gap:.75rem;display:grid}.track-form-group{flex-direction:column;gap:.45rem;display:flex}.track-form-group label{color:#0f172a;letter-spacing:.01em;font-size:.82rem;font-weight:600}.track-form-group input{color:#0f172a;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:12px;outline:none;padding:.85rem 1rem;font-family:DM Sans,sans-serif;font-size:.93rem;transition:border-color .18s,box-shadow .18s,background .18s}.track-form-group input:focus{background:#fff;border-color:#0b5cff;box-shadow:0 0 0 3.5px #0b5cff1a}.track-form-group input::placeholder{color:#b0bac6}.track-form-divider{color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;text-align:center;padding-bottom:.9rem;font-size:.82rem;font-weight:600}.track-error{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:.7rem .9rem;font-size:.86rem;font-weight:600}.track-submit{color:#fff;cursor:pointer;background:#07111f;border:none;border-radius:12px;padding:.95rem 1.5rem;font-family:DM Sans,sans-serif;font-size:.9rem;font-weight:700;transition:background .18s,transform .15s,box-shadow .18s;box-shadow:0 2px 10px #07111f2e}.track-submit:hover:not(:disabled){background:#0b5cff;transform:translateY(-1px);box-shadow:0 6px 20px #0b5cff4d}.track-submit:disabled{opacity:.5;cursor:not-allowed}.track-booking-list{flex-direction:column;gap:.5rem;display:flex}.track-booking-item{cursor:pointer;text-align:left;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:12px;justify-content:space-between;align-items:center;gap:1rem;width:100%;padding:.9rem 1.1rem;font-family:DM Sans,sans-serif;transition:border-color .18s,background .18s,transform .15s;display:flex}.track-booking-item:hover{background:#fff;border-color:#0b5cff;transform:translateY(-1px)}.track-booking-item strong{color:#0f172a;margin-bottom:.2rem;font-size:.9rem;font-weight:700;display:block}.track-booking-item span{color:#94a3b8;font-size:.8rem;font-weight:500}.track-status-pill{text-transform:capitalize;white-space:nowrap;border:1px solid #0000;border-radius:999px;padding:.28rem .7rem;font-size:.72rem;font-weight:700}.track-status--pending{color:#64748b;background:#f8fafc;border-color:#64748b33}.track-status--contacted{color:#0284c7;background:#f0f9ff;border-color:#0284c733}.track-status--confirmed{color:#0b5cff;background:#eef4ff;border-color:#0b5cff2e}.track-status--assigned{color:#7c3aed;background:#f5f3ff;border-color:#7c3aed2e}.track-status--en-route{color:#d97706;background:#fffbeb;border-color:#d9770633}.track-status--arrived{color:#0891b2;background:#ecfeff;border-color:#0891b233}.track-status--completed{color:#16a34a;background:#f0fdf4;border-color:#16a34a33}.track-status--cancelled{color:#dc2626;background:#fef2f2;border-color:#dc26262e}.track-back{color:#64748b;cursor:pointer;background:0 0;border:none;align-items:center;gap:.4rem;margin-bottom:1rem;padding:0;font-family:DM Sans,sans-serif;font-size:.875rem;font-weight:600;transition:color .15s;display:inline-flex}.track-back:hover{color:#0b5cff}.track-timeline{flex-direction:column;gap:0;display:flex}.track-timeline-step{grid-template-columns:28px auto 1fr;align-items:start;gap:0 .85rem;display:grid;position:relative}.track-timeline-dot{color:#94a3b8;z-index:1;background:#fff;border:2px solid #e2e8f0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:.7rem;transition:all .2s;display:flex;position:relative}.track-timeline-step.is-done .track-timeline-dot{color:#fff;background:#0b5cff;border-color:#0b5cff}.track-timeline-step.is-current .track-timeline-dot{background:#fff;border-width:2.5px;border-color:#0b5cff;box-shadow:0 0 0 4px #0b5cff1f}.track-pulse{background:#0b5cff;border-radius:50%;width:10px;height:10px;animation:1.5s ease-in-out infinite pulse-track}@keyframes pulse-track{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.3)}}.track-timeline-line{background:#e2e8f0;grid-column:1;justify-self:center;width:2px;height:32px;margin:0 auto;transition:background .2s}.track-timeline-line.is-done{background:#0b5cff}.track-timeline-label{color:#94a3b8;grid-area:1/3;padding-top:4px;font-size:.875rem;font-weight:500}.track-timeline-step.is-done .track-timeline-label{color:#0f172a;font-weight:600}.track-timeline-step.is-current .track-timeline-label{color:#0b5cff;font-weight:700}.track-cancelled-banner{background:#fef2f2;border:1px solid #fecaca;border-radius:12px;align-items:flex-start;gap:1rem;padding:1rem 1.25rem;display:flex}.track-cancelled-banner span{color:#dc2626;flex-shrink:0;margin-top:2px;font-size:1.1rem;font-weight:700}.track-cancelled-banner strong{color:#991b1b;margin-bottom:.25rem;font-size:.9rem;font-weight:700;display:block}.track-cancelled-banner p{color:#b91c1c;font-size:.85rem;line-height:1.6}.track-details-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.track-detail-item{flex-direction:column;gap:.3rem;display:flex}.track-detail-item span{color:#94a3b8;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;font-weight:700}.track-detail-item strong{color:#0f172a;font-size:.9rem;font-weight:600;line-height:1.5}.track-detail-item--full{grid-column:1/-1}.track-driver-card{border-color:#0b5cff26}.track-driver-info{align-items:center;gap:1rem;display:flex}.track-driver-avatar{color:#0b5cff;background:#eef4ff;border:1px solid #0b5cff26;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.2rem;font-weight:800;display:flex}.track-driver-info>div{flex-direction:column;gap:.2rem;display:flex}.track-driver-info strong{color:#0f172a;letter-spacing:-.01em;font-size:.95rem;font-weight:700}.track-driver-info span{color:#64748b;font-size:.82rem;font-weight:500}.track-plate{letter-spacing:.06em;background:#f1f5f9;border-radius:5px;width:fit-content;padding:.15rem .5rem;font-family:monospace;display:inline-block;color:#475569!important;font-size:.72rem!important;font-weight:700!important}@media (max-width:600px){.track-page{padding:2.5rem 1rem 4rem}.track-form-row{grid-template-columns:1fr}.track-form-divider{text-align:left;padding:0}.track-details-grid{grid-template-columns:1fr}.track-detail-item--full{grid-column:1}}