.track-order-page{min-height:100vh;background:linear-gradient(135deg,#f7f8fc,#e8f4f8);font-family:Poppins,sans-serif}.track-navbar{background:white;box-shadow:0 2px 20px rgba(0,0,0,.1);border-bottom:1px solid #e2e8f0;position:sticky;top:0;z-index:100}.nav-container{max-width:1200px;margin:0 auto;padding:15px 20px;justify-content:space-between;gap:20px}.nav-container,.nav-left{display:flex;align-items:center}.nav-left{flex:1}.logo-section{display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .3s ease}.logo-section:hover{transform:scale(1.05)}.nav-logo{border-radius:8px;background:white;padding:5px;box-shadow:0 2px 8px rgba(0,0,0,.1)}.brand-name{font-size:20px;font-weight:700;color:#2d3748;background:linear-gradient(135deg,#99BD98,#6b8e6a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.nav-center{flex:2;text-align:center}.page-title{margin:0;font-size:22px;font-weight:600;color:#4a5568}.nav-right{flex:1;display:flex;justify-content:flex-end}.home-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;background:linear-gradient(135deg,#99BD98,#81a880);color:white;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none}.home-btn:hover{background:linear-gradient(135deg,#81a880,#99BD98);transform:translateY(-2px);box-shadow:0 4px 15px rgba(153,189,152,.3)}.home-btn i{font-size:16px}.track-container{max-width:800px;margin:0 auto;padding:40px 20px}.track-header{text-align:center;margin-bottom:40px}.track-header h1{font-size:36px;font-weight:700;color:#2d3748;margin:0 0 15px;background:linear-gradient(135deg,#99BD98,#6b8e6a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.track-header p{font-size:16px;color:#6b7280;margin:0;line-height:1.6}.track-form{background:white;padding:30px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.1);margin-bottom:30px;border:1px solid #e2e8f0}.form-group{margin-bottom:25px}.form-group label{display:block;font-size:14px;font-weight:600;color:#374151;margin-bottom:8px}.form-group input{width:100%;padding:15px 18px;border:2px solid #e5e7eb;border-radius:12px;font-size:16px;transition:all .3s ease;background:#fafafa;color:#374151}.form-group input:focus{outline:none;border-color:#99BD98;box-shadow:0 0 0 3px rgba(153,189,152,.1);background:white}.form-group input.error{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.1)}.track-btn{width:100%;padding:16px 24px;background:linear-gradient(135deg,#99BD98,#81a880);color:white;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:10px;text-transform:uppercase;letter-spacing:.5px}.track-btn:hover:not(:disabled){background:linear-gradient(135deg,#81a880,#99BD98);transform:translateY(-2px);box-shadow:0 8px 25px rgba(153,189,152,.3)}.track-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.error-message{background:#fef2f2;color:#dc2626;padding:12px 16px;border-radius:8px;margin-top:15px;display:flex;align-items:center;gap:8px;font-weight:500;border:1px solid #fecaca}.sample-data{background:#f8f9fa;padding:20px;border-radius:12px;margin-bottom:30px;border:1px solid #e9ecef}.sample-data h4{margin:0 0 15px;color:#495057;font-size:16px;font-weight:600}.sample-orders{display:flex;flex-direction:column;gap:10px}.sample-order{background:white;padding:12px 16px;border-radius:8px;border:1px solid #dee2e6;display:flex;align-items:center;justify-content:space-between;font-size:14px}.sample-order strong{color:#99BD98;font-weight:700}.status{padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.status.delivered{background:#c6f6d5;color:#22543d}.status.shipped{background:#d1fae5;color:#065f46}.status.processing{background:#fde68a;color:#b45309}.order-details{background:white;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.1);overflow:hidden;border:1px solid #e2e8f0}.order-header{background:linear-gradient(135deg,#99BD98,#81a880);color:white;padding:25px}.order-info{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.order-info h2{margin:0;font-size:24px;font-weight:700}.order-status{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3)}.order-meta p{margin:5px 0;opacity:.9;font-size:14px}.tracking-section{padding:30px 25px;border-bottom:1px solid #f1f3f4}.tracking-section h3{margin:0 0 25px;color:#2d3748;font-size:18px;font-weight:600}.timeline-item,.tracking-timeline{position:relative}.timeline-item{display:flex;align-items:flex-start;gap:15px;margin-bottom:20px}.timeline-item:not(:last-child):after{content:"";position:absolute;left:12px;top:30px;width:2px;height:calc(100% + 10px);background:#e5e7eb}.timeline-item.completed:not(:last-child):after{background:#99BD98}.timeline-marker{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;z-index:1;position:relative}.timeline-item.completed .timeline-marker{background:#99BD98;color:white}.timeline-item.pending .timeline-marker{background:#e5e7eb;color:#9ca3af}.timeline-content h4{margin:0 0 5px;color:#2d3748;font-size:16px;font-weight:600}.timeline-content p{margin:0;color:#6b7280;font-size:14px}.order-items{padding:30px 25px;border-bottom:1px solid #f1f3f4}.order-items h3{margin:0 0 20px;color:#2d3748;font-size:18px;font-weight:600}.items-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.item-card{background:#f8f9fa;border:1px solid #e9ecef;border-radius:12px;padding:16px;display:flex;gap:15px;transition:all .3s ease}.item-card:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,.1);border-color:#99BD98}.item-image{width:60px;height:60px;border-radius:8px;overflow:hidden;background:white;display:flex;align-items:center;justify-content:center;flex-shrink:0}.item-image img{width:100%;height:100%;object-fit:cover}.item-details{flex:1}.item-details h4{margin:0 0 8px;color:#2d3748;font-size:14px;font-weight:600}.item-weight{background:#e2e8f0;color:#4a5568;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;margin-bottom:8px;display:inline-block}.item-pricing{display:flex;justify-content:space-between;align-items:center}.item-price{color:#99BD98;font-weight:600;font-size:14px}.item-quantity{color:#6b7280;font-size:12px}.delivery-info{padding:30px 25px}.delivery-info h3{margin:0 0 20px;color:#2d3748;font-size:18px;font-weight:600}.delivery-details{display:grid;grid-template-columns:1fr 1fr;gap:30px}.delivery-address h4,.delivery-timing h4{margin:0 0 10px;color:#4a5568;font-size:14px;font-weight:600}.delivery-address p,.delivery-timing p{margin:0;color:#2d3748;font-size:14px;line-height:1.5}@media (max-width:768px){.nav-container{padding:12px 15px;gap:10px}.nav-center{flex:3}.brand-name,.page-title{font-size:18px}.home-btn span{display:none}.home-btn{padding:8px 12px;min-width:40px}.track-container{padding:20px 15px}.track-header h1{font-size:28px}.order-header,.track-form{padding:20px}.order-info{flex-direction:column;align-items:flex-start;gap:10px}.delivery-info,.order-items,.tracking-section{padding:20px}.delivery-details,.items-grid{grid-template-columns:1fr}.delivery-details{gap:20px}.sample-order{flex-direction:column;align-items:flex-start;gap:8px}}@media (max-width:480px){.nav-container{padding:10px 12px}.nav-left,.nav-right{flex:0}.nav-center{flex:1}.page-title{font-size:16px}.brand-name{display:none}.nav-logo{width:32px;height:32px}.track-container{padding:15px 10px}.track-form{padding:15px}.item-card{flex-direction:column;text-align:center}.item-image{width:80px;height:80px;margin:0 auto}.item-pricing{justify-content:center;gap:15px}}