:root{--crete-blue:#00a0d4;--crete-green:#2fc22b;--track-bg:#030506;--track-border:#ffffff14;--track-muted:#ffffff94}.track-section{isolation:isolate;background:radial-gradient(circle at 12% 16%, #00a0d429, transparent 34%), radial-gradient(circle at 88% 78%, #2fc22b1f, transparent 36%), radial-gradient(circle at 50% 100%, #00a0d414, transparent 36%), var(--track-bg);justify-content:center;align-items:center;min-height:100vh;padding:120px 20px 80px;display:flex;position:relative;overflow:hidden}.track-section:before{content:"";pointer-events:none;background:linear-gradient(120deg,#0000 30%,#00a0d40b,#0000 70%);animation:10s linear infinite trackSweep;position:absolute;inset:0}@keyframes trackSweep{0%{transform:translate(-100%)}to{transform:translate(100%)}}.track-card{z-index:1;border:1px solid var(--track-border);-webkit-backdrop-filter:blur(22px);background:radial-gradient(circle at 20% 16%,#00a0d424,#0000 34%),radial-gradient(circle at 90% 78%,#2fc22b1f,#0000 36%),linear-gradient(#fff1,#ffffff06),#00000094;border-radius:32px;width:min(100%,620px);padding:34px;position:relative;overflow:hidden;box-shadow:0 34px 100px #00000085,0 0 70px #00a0d414,inset 0 1px #ffffff14}.track-card:before{content:"";background:linear-gradient(90deg, transparent, var(--crete-blue), var(--crete-green), transparent);opacity:.78;height:1px;position:absolute;top:0;left:34px;right:34px}.track-card:after{content:"";filter:blur(90px);pointer-events:none;background:#2fc22b1f;border-radius:50%;width:260px;height:260px;position:absolute;bottom:-120px;right:-100px}.track-header{z-index:1;position:relative}.track-header:before{content:"Order Tracking";color:var(--crete-blue);letter-spacing:.13em;text-transform:uppercase;background:#00a0d414;border:1px solid #00a0d452;border-radius:999px;margin-bottom:16px;padding:8px 12px;font-size:11px;font-weight:900;display:inline-flex}.track-header h1{color:#fff;letter-spacing:-.05em;margin:0;font-size:clamp(30px,4vw,44px);font-weight:950;line-height:1}.track-header h1:after{content:"";background:linear-gradient(90deg, var(--crete-blue), var(--crete-green));border-radius:999px;width:76px;height:4px;margin-top:18px;display:block;box-shadow:0 0 22px #2fc22b57}.track-header p{max-width:480px;color:var(--track-muted);margin-top:18px;font-size:14px;line-height:1.7}.track-form{z-index:1;grid-template-columns:1fr auto;gap:12px;margin-top:28px;display:grid;position:relative}.track-form input{color:#fff;background:linear-gradient(#ffffff0b,#ffffff05),#00000080;border:1px solid #ffffff17;border-radius:18px;outline:none;width:100%;min-height:54px;padding:0 18px;font-size:14px;font-weight:500;transition:border-color .22s,box-shadow .22s,background .22s;box-shadow:0 18px 50px #0003,inset 0 1px #ffffff0d}.track-form input::placeholder{color:#ffffff5c}.track-form input:focus{border-color:#00a0d475;box-shadow:0 18px 50px #0000003d,0 0 0 4px #00a0d414,inset 0 1px #ffffff0d}.track-btn{color:#031008;background:linear-gradient(135deg, var(--crete-green), var(--crete-blue));white-space:nowrap;cursor:pointer;border:none;border-radius:18px;justify-content:center;align-items:center;gap:9px;min-height:54px;padding:0 20px;font-size:14px;font-weight:900;transition:transform .24s,box-shadow .24s,opacity .22s;display:inline-flex;box-shadow:0 16px 34px #00a0d438,inset 0 0 0 1px #ffffff1f}.track-btn svg{font-size:18px;transition:transform .22s}.track-btn:hover{transform:translateY(-3px);box-shadow:0 20px 38px #2fc22b38,0 14px 28px #00a0d438}.track-btn:hover svg{transform:translate(2px)}.track-btn:disabled{opacity:.58;cursor:not-allowed;transform:none;box-shadow:0 12px 24px #00a0d424,inset 0 0 0 1px #ffffff1a}.error{z-index:1;color:#ff6b6b;background:linear-gradient(#ff4d4d1a,#ff4d4d0b),#00000047;border:1px solid #ff4d4d38;border-radius:16px;margin-top:16px;padding:12px 14px;font-size:13px;line-height:1.5;position:relative}.order-result{z-index:1;-webkit-backdrop-filter:blur(16px);background:linear-gradient(#ffffff0b,#ffffff05),#0000006b;border:1px solid #ffffff14;border-radius:22px;margin-top:24px;padding:20px;position:relative;box-shadow:0 20px 54px #00000047,inset 0 1px #ffffff0d}.order-row{border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;gap:18px;min-height:42px;font-size:14px;display:flex}.order-row:last-of-type{border-bottom:none}.order-row span{color:#ffffff85}.order-row strong{color:#fff;text-align:right;font-weight:850}.status-badge{margin-top:18px}.status-inner{text-transform:capitalize;border-radius:999px;justify-content:center;align-items:center;gap:9px;width:fit-content;min-height:42px;padding:0 15px;font-size:13px;font-weight:900;display:inline-flex}.pending{color:#ffc107;background:#ffc1071f;border:1px solid #ffc10742}.paid{color:#8cff89;background:#2fc22b1f;border:1px solid #2fc22b47}.processing{color:#62dfff;background:#00a0d41f;border:1px solid #00a0d452}.enroute{color:#00c8ff;background:#00c8ff1f;border:1px solid #00c8ff47}.delivered{color:#6ee786;background:#28a7451f;border:1px solid #28a74547}.completed{color:#7dff7d;background:#78ff781f;border:1px solid #78ff7847}.cancelled{color:#ff6b6b;background:#ff4d4d1f;border:1px solid #ff4d4d47}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:600px){.track-section{align-items:flex-start;padding:100px 14px 70px}.track-card{border-radius:26px;padding:24px 18px}.track-card:before{left:24px;right:24px}.track-header h1{font-size:34px}.track-form{grid-template-columns:1fr}.track-btn{width:100%}.order-result{border-radius:20px;padding:16px}.order-row{flex-direction:column;align-items:flex-start;gap:4px;padding:10px 0;font-size:13px}.order-row strong{text-align:left}.status-inner{width:100%}}