.timeline-steps::after,.timeline-steps::before{top:28px;left:0;height:3px;content:'';position:absolute}:root{--success-color:#10b981;--danger-color:#ef4444;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1);--radius-md:0.5rem;--radius-lg:1rem}.click-shop-tracking-wrapper{max-width:900px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif}.tracking-form-container{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:2rem;margin-bottom:2rem;border:1px solid var(--gray-200)}.tracking-title{font-size:1.75rem;font-weight:700;margin-bottom:1.5rem;color:var(--gray-800);text-align:center;background:linear-gradient(135deg,var(--gray-800) 0,var(--primary-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.tracking-form{display:flex;flex-direction:column;gap:1.25rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:600;color:var(--gray-700);font-size:.875rem;text-transform:uppercase;letter-spacing:.5px}.tracking-input{padding:.875rem 1rem;border:2px solid var(--gray-200);border-radius:var(--radius-md);font-size:1rem;transition:.2s;background:#fff}.tracking-input:focus{outline:0;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(37,99,235,.1)}.tracking-button{background:var(--primary-color);color:#fff;padding:1rem 1.75rem;border:none;border-radius:var(--radius-md);font-size:1rem;font-weight:600;cursor:pointer;transition:.2s;margin-top:.5rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.tracking-button:hover{background:var(--button-hover-color);transform:translateY(-1px);box-shadow:var(--shadow-md)}.tracking-button:active{transform:translateY(0)}.compact-layout .tracking-form-container{padding:1.5rem}.compact-layout .form-row{display:flex;gap:1rem;flex-wrap:wrap}.compact-layout .form-group{flex:1;min-width:180px}.tracking-result{margin-top:2rem;border-radius:var(--radius-lg);animation:.4s fadeIn}.tracking-result.error{background:linear-gradient(135deg,#fef2f2 0,#fee2e2 100%);border-left:4px solid var(--danger-color);color:#991b1b;padding:1.25rem}.tracking-result.success{background:0 0}.order-details{background:#fff;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--gray-300)}.order-summary{background:linear-gradient(135deg,var(--gray-800) 0,#111827 100%);color:#fff;padding:1.75rem;margin-bottom:1.5rem}.order-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}.order-id{font-size:1.5rem;font-weight:700;letter-spacing:-.5px}.order-date{color:var(--gray-400);font-size:.875rem}.order-total{font-size:1.125rem;font-weight:600;margin-top:.5rem}.order-status{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:2rem;font-size:.875rem;font-weight:600;background:rgba(255,255,255,.1);backdrop-filter:blur(10px)}.status-timeline{margin:2rem 1.5rem;position:relative}.timeline-steps{display:flex;justify-content:space-between;position:relative;gap:.5rem}.timeline-steps::before{right:0;background:var(--gray-200);z-index:1}.timeline-steps::after{background:linear-gradient(90deg,var(--success-color),#34d399);z-index:2;transition:width .3s;width:var(--progress-width,0%)}.step,.step-icon{position:relative}.step{flex:1;text-align:center;z-index:3;cursor:default}.step-icon{width:56px;height:56px;background:#fff;border:3px solid var(--gray-200);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto .75rem;transition:.3s}.step-icon svg{width:28px;height:28px;stroke-width:1.8}.step.completed .step-icon{border-color:var(--success-color);background:var(--success-color)}.step.completed .step-icon svg{stroke:white;color:#fff}.step.active .step-icon{border-color:#03da1f;background:#fff;box-shadow:0 0 0 4px rgba(4,210,25,.2);animation:2s infinite pulse}.step.active .step-icon svg{stroke:#03da1f;color:#03da1f}.step-content{margin-top:.5rem}.step-label{font-weight:700;font-size:.875rem;color:var(--gray-700);margin-bottom:.25rem}.info-label,.step-description{font-size:.75rem;color:var(--gray-500)}.step.completed .step-label{color:var(--success-color)}.step.active .step-label{color:#03da1f}.personal-info{background:var(--gray-100);border-radius:var(--radius-lg);padding:1.5rem;margin:1.5rem;border:1px solid var(--gray-200)}.order-items h4,.personal-info h4,.shipping-info h4{font-size:1.125rem;font-weight:700;margin-bottom:1rem;color:var(--gray-800);display:flex;align-items:center;gap:.5rem}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.info-item{background:#fff;padding:1rem;border-radius:var(--radius-md);border:1px solid var(--gray-200)}.items-table,.product-image{border-radius:var(--radius-md)}.info-label{text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:.25rem}.info-value{font-size:1rem;color:var(--gray-800);font-weight:500;word-break:break-word}.cancelled-refunded-section,.order-items,.shipping-info{margin:1.5rem}.items-table{width:100%;border-collapse:collapse;background:#fff;overflow:hidden;box-shadow:var(--shadow-sm)}.items-table td,.items-table th{padding:1rem;text-align:left;border-bottom:1px solid var(--gray-200)}.items-table th{background:var(--gray-100);font-weight:600;color:var(--gray-700);font-size:.875rem}.product-info{display:flex;align-items:center;gap:1rem}.product-image{width:56px;height:56px;object-fit:cover;background:var(--gray-100)}.tracking-button.loading{position:relative;color:transparent}.tracking-button.loading::after{content:'';position:absolute;width:20px;height:20px;top:50%;left:50%;margin-left:-10px;margin-top:-10px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;animation:.8s linear infinite spin}.status-card{display:flex;gap:20px;padding:30px;border-radius:12px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.1);align-items:center}.cancelled-card{border-left:4px solid #f44336;background:linear-gradient(135deg,#fff 0,#fff5f5 100%)}.refunded-card{border-left:4px solid #ff9800;background:linear-gradient(135deg,#fff 0,#fff9f0 100%)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--primary-color) 10%,transparent)}70%{box-shadow:0 0 0 10px rgba(37,99,235,0)}100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}}@media (max-width:768px){.click-shop-tracking-wrapper{padding:10px}.tracking-form-container{padding:1.25rem}.tracking-title{font-size:1.5rem}.compact-layout .form-row{flex-direction:column}.timeline-steps{flex-direction:column;gap:1.5rem;position:relative;padding-left:2rem}.timeline-steps::before{top:0;bottom:0;left:20px;right:auto;width:3px;height:auto}.timeline-steps::after{top:0;left:20px;right:auto;width:3px;height:var(--progress-height,0%);background:linear-gradient(180deg,var(--success-color),#34d399)}.step{display:flex;align-items:flex-start;text-align:left;gap:1rem;position:relative}.step-icon{width:44px;height:44px;margin:0;flex-shrink:0}.step-icon svg{width:22px;height:22px}.step-content{flex:1;margin-top:0}.step-label{font-size:.875rem;font-weight:700}.step-description{font-size:.75rem}.order-header{flex-direction:column;align-items:flex-start}.info-grid{grid-template-columns:1fr}.items-table{display:block;overflow-x:auto;white-space:nowrap}.order-items,.personal-info,.status-timeline{margin:1rem}}@media print{.tracking-button,.tracking-form{display:none}.tracking-result{margin:0;padding:0}.order-summary{background:#f5f5f5;color:#000}.timeline-steps::after,.timeline-steps::before{background:#ddd}}