:root{
  --tracking-green:var(--primary,#16a34a);
  --tracking-green-dark:var(--primary-dark,#0f7a35);
  --tracking-soft:#f5f8f3;
  --tracking-text:#18221b;
  --tracking-muted:#718078;
  --tracking-border:#e4ebe4;
}

.tracking-page{
  min-height:70vh;
  padding:42px 18px 80px;
  background:
    radial-gradient(circle at 8% 5%,rgba(163,190,76,.13),transparent 25%),
    radial-gradient(circle at 92% 10%,rgba(249,115,22,.08),transparent 22%),
    #f6f8f5;
}
.tracking-container{width:min(1120px,100%);margin:0 auto}

.tracking-search-card,
.tracking-result{
  background:#fff;
  border:1px solid rgba(31,65,42,.08);
  box-shadow:0 18px 55px rgba(28,55,35,.09);
}
.tracking-search-card{border-radius:28px;padding:30px}
.tracking-search-copy{max-width:680px;margin-bottom:22px}
.tracking-eyebrow,.tracking-order-kicker,.tracking-section-kicker{
  display:block;color:var(--tracking-green-dark);font-size:11px;font-weight:900;letter-spacing:1.8px;margin-bottom:6px
}
.tracking-search-copy h1{margin:0 0 7px;color:var(--tracking-text);font-size:clamp(27px,3vw,40px);font-weight:900;letter-spacing:-1px}
.tracking-search-copy p{margin:0;color:var(--tracking-muted);font-size:15px;font-weight:600}
.tracking-search-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:14px;align-items:end}
.tracking-field{display:flex;flex-direction:column;gap:7px;margin:0}
.tracking-field>span{font-size:13px;color:#37453c;font-weight:800}
.tracking-field input{
  width:100%;height:54px;border:1.5px solid #dfe7e0;border-radius:15px;background:#fbfcfb;
  padding:0 16px;color:#172019;font-size:15px;font-weight:700;outline:none;transition:.2s ease
}
.tracking-field input:focus{border-color:var(--tracking-green);box-shadow:0 0 0 4px rgba(22,163,74,.11);background:#fff}
.tracking-submit{
  height:54px;border:0;border-radius:15px;padding:0 21px;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(135deg,var(--tracking-green),var(--tracking-green-dark));color:#fff;font-size:14px;font-weight:900;
  box-shadow:0 12px 24px rgba(22,163,74,.22);white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease
}
.tracking-submit:hover{transform:translateY(-2px);box-shadow:0 16px 29px rgba(22,163,74,.27)}
.tracking-submit svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.tracking-alert{display:flex;align-items:center;gap:11px;border-radius:15px;padding:13px 15px;margin:0 0 18px;font-size:14px;font-weight:800}
.tracking-alert-danger{background:#fff1f2;border:1px solid #fecdd3;color:#9f1239}
.tracking-alert-icon{display:grid;place-items:center;flex:0 0 27px;height:27px;border-radius:50%;background:#e11d48;color:#fff;font-weight:900}

.tracking-result{margin-top:25px;border-radius:32px;overflow:hidden}
.tracking-order-header{
  display:flex;justify-content:space-between;align-items:center;gap:25px;padding:32px 34px 26px;
  background:linear-gradient(135deg,#fff,#f7fbf5);border-bottom:1px solid var(--tracking-border)
}
.tracking-order-title h2{margin:0 0 11px;color:var(--tracking-text);font-size:clamp(27px,3vw,39px);font-weight:900;letter-spacing:-1px}
.tracking-code-line{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:var(--tracking-muted);font-size:13px;font-weight:700}
.tracking-code-line strong{display:inline-flex;padding:7px 11px;border:1px dashed #b9c8bc;border-radius:10px;background:#fff;color:#26372b;font-size:13px;letter-spacing:.5px}
.tracking-status-badge{display:flex;align-items:center;gap:13px;min-width:215px;padding:15px 18px;border-radius:17px;background:#edf8e9;border:1px solid #d2eac9;color:#164e2a}
.tracking-status-badge small{display:block;color:#5f7565;font-size:11px;font-weight:800;margin-bottom:2px}
.tracking-status-badge strong{display:block;font-size:16px;font-weight:900}
.tracking-status-dot{position:relative;flex:0 0 14px;height:14px;border-radius:50%;background:var(--tracking-green);box-shadow:0 0 0 6px rgba(22,163,74,.13)}
.tracking-status-dot:after{content:"";position:absolute;inset:-6px;border:1px solid rgba(22,163,74,.35);border-radius:50%;animation:trackingPulse 1.9s infinite}
.tracking-status-cancelled .tracking-status-badge{background:#fff1f2;border-color:#fecdd3;color:#9f1239}
.tracking-status-cancelled .tracking-status-dot{background:#e11d48;box-shadow:0 0 0 6px rgba(225,29,72,.12)}
.tracking-status-delivered .tracking-status-badge{background:#ecfdf5;border-color:#a7f3d0}
@keyframes trackingPulse{0%{transform:scale(.75);opacity:.9}100%{transform:scale(1.5);opacity:0}}

.tracking-status-message{margin:26px 34px 0;padding:18px 20px;display:flex;align-items:center;gap:15px;border-radius:18px;background:#f1f9ed;border:1px solid #d9ebd0;color:#1e512b}
.tracking-status-message-icon{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:14px;background:var(--tracking-green);color:#fff;font-size:16px;font-weight:900;box-shadow:0 8px 18px rgba(22,163,74,.2)}
.tracking-status-message strong{display:block;margin-bottom:2px;font-size:16px;font-weight:900}
.tracking-status-message p{margin:0;color:#55705c;font-size:14px;font-weight:700;line-height:1.45}
.tracking-status-out_for_delivery .tracking-status-message{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.tracking-status-out_for_delivery .tracking-status-message-icon{background:#f97316;box-shadow:0 8px 18px rgba(249,115,22,.2)}
.tracking-status-delivered .tracking-status-message{background:#ecfdf5;border-color:#a7f3d0}
.tracking-status-cancelled .tracking-status-message{background:#fff1f2;border-color:#fecdd3;color:#9f1239}
.tracking-status-cancelled .tracking-status-message-icon{background:#e11d48;box-shadow:0 8px 18px rgba(225,29,72,.18)}

.tracking-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:20px 34px 0}
.tracking-summary-card{display:flex;align-items:center;gap:12px;min-height:90px;padding:15px;border:1px solid var(--tracking-border);border-radius:17px;background:#fff}
.tracking-summary-icon{display:grid;place-items:center;flex:0 0 41px;height:41px;border-radius:13px;background:#f0f5ed;color:var(--tracking-green-dark)}
.tracking-summary-icon svg,.tracking-preference-chip svg,.tracking-refresh-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tracking-summary-card small{display:block;margin-bottom:3px;color:var(--tracking-muted);font-size:11px;font-weight:800}
.tracking-summary-card strong{display:block;color:#243229;font-size:14px;font-weight:900;line-height:1.3}
.tracking-summary-total{background:linear-gradient(135deg,#f7fbf5,#fff)}
.tracking-summary-total strong{font-size:17px;color:var(--tracking-green-dark)}
.tracking-payment-unpaid,.tracking-payment-pending{color:#c2410c!important}
.tracking-payment-paid{color:#15803d!important}

.tracking-preferences{display:flex;flex-wrap:wrap;gap:9px;padding:16px 34px 0}
.tracking-preference-chip{display:flex;align-items:center;gap:8px;min-height:38px;padding:8px 12px;border:1px solid #e4ebe4;border-radius:999px;background:#f8faf8;color:#59685f;font-size:12px;font-weight:700}
.tracking-preference-chip svg{width:17px;height:17px;color:var(--tracking-green-dark)}
.tracking-preference-chip strong{color:#26372b;font-weight:900}
.tracking-discount-chip{background:#ecfdf5;border-color:#bbf7d0;color:#166534}
.tracking-discount-chip strong{color:#15803d}

.tracking-section{margin:27px 34px 0;padding:25px;border:1px solid var(--tracking-border);border-radius:23px;background:#fff}
.tracking-section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:23px}
.tracking-section-heading h3{margin:0;color:var(--tracking-text);font-size:21px;font-weight:900;letter-spacing:-.3px}
.tracking-live-label,.tracking-item-count{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:#f1f8ed;color:#276038;font-size:11px;font-weight:900}
.tracking-live-label i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.14);animation:trackingBlink 1.3s infinite alternate}
@keyframes trackingBlink{to{opacity:.35}}

.tracking-progress{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;padding:0;margin:0}
.tracking-progress li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 7px}
.tracking-progress li:not(:last-child):after{content:"";position:absolute;z-index:0;top:20px;left:calc(50% + 23px);width:calc(100% - 46px);height:3px;border-radius:3px;background:#e1e7e1}
.tracking-progress li.is-done:not(:last-child):after{background:var(--tracking-green)}
.tracking-step-marker{position:relative;z-index:1;display:grid;place-items:center;width:42px;height:42px;border:3px solid #e1e7e1;border-radius:50%;background:#fff;color:#94a09a;font-size:13px;font-weight:900}
.tracking-progress li.is-done .tracking-step-marker{border-color:var(--tracking-green);background:var(--tracking-green);color:#fff}
.tracking-progress li.is-current .tracking-step-marker{border-color:var(--tracking-green);background:#fff;color:var(--tracking-green-dark);box-shadow:0 0 0 7px rgba(22,163,74,.11)}
.tracking-step-copy{margin-top:11px}
.tracking-step-copy strong{display:block;color:#526059;font-size:12px;font-weight:900;line-height:1.25}
.tracking-step-copy small{display:block;margin-top:3px;color:#99a39e;font-size:10px;font-weight:700}
.tracking-progress li.is-done .tracking-step-copy strong,.tracking-progress li.is-current .tracking-step-copy strong{color:#1e4e2b}
.tracking-progress li.is-current .tracking-step-copy small{color:var(--tracking-green-dark)}

.tracking-products-list{display:flex;flex-direction:column;gap:10px}
.tracking-product-row{display:grid;grid-template-columns:65px minmax(0,1fr) auto;align-items:center;gap:14px;padding:11px;border:1px solid #edf1ed;border-radius:17px;background:#fbfcfb;transition:.18s ease}
.tracking-product-row:hover{border-color:#d8e4d8;transform:translateY(-1px);box-shadow:0 8px 20px rgba(38,68,45,.06)}
.tracking-product-image{position:relative;width:65px;height:65px;border-radius:14px;background:#fff;border:1px solid #e7ede7;display:grid;place-items:center;overflow:visible}
.tracking-product-image img{width:100%;height:100%;object-fit:contain;padding:6px;border-radius:13px}
.tracking-product-image>span{display:grid;place-items:center;width:100%;height:100%;color:#9aac9e}
.tracking-product-image svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tracking-product-image b{position:absolute;right:-7px;bottom:-5px;display:grid;place-items:center;min-width:27px;height:27px;padding:0 5px;border:2px solid #fff;border-radius:999px;background:var(--tracking-green-dark);color:#fff;font-size:10px;font-weight:900;box-shadow:0 5px 10px rgba(25,91,44,.2)}
.tracking-product-info{min-width:0}
.tracking-product-info strong{display:block;color:#243028;font-size:14px;font-weight:900;line-height:1.35}
.tracking-product-info small{display:block;margin-top:5px;color:#829087;font-size:11px;font-weight:700}
.tracking-product-total{color:#1e3525;font-size:14px;font-weight:900;white-space:nowrap}

.tracking-refresh-note{display:flex;align-items:center;gap:13px;margin:22px 34px 32px;padding:15px 17px;border-radius:17px;background:#f7faf7;border:1px dashed #cfdccf;color:#4f6155}
.tracking-refresh-icon{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:12px;background:#eaf4e6;color:var(--tracking-green-dark)}
.tracking-refresh-note strong{display:block;color:#314238;font-size:13px;font-weight:900}
.tracking-refresh-note span{display:block;margin-top:2px;font-size:11px;font-weight:700}
.tracking-cancelled-alert{margin:0}

@media(max-width:900px){
  .tracking-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tracking-progress-section{overflow:hidden}
}

@media(max-width:700px){
  .tracking-page{padding:20px 11px 70px}
  .tracking-search-card{padding:21px 17px;border-radius:22px}
  .tracking-search-copy{margin-bottom:17px}
  .tracking-search-copy h1{font-size:28px}
  .tracking-search-form{grid-template-columns:1fr;gap:11px}
  .tracking-submit{width:100%}
  .tracking-result{margin-top:17px;border-radius:24px}
  .tracking-order-header{align-items:flex-start;flex-direction:column;padding:23px 18px 20px}
  .tracking-order-title h2{font-size:29px}
  .tracking-status-badge{width:100%;min-width:0}
  .tracking-status-message{margin:17px 15px 0;padding:15px}
  .tracking-status-message-icon{flex-basis:38px;height:38px;border-radius:12px}
  .tracking-summary-grid{grid-template-columns:1fr 1fr;gap:8px;padding:14px 15px 0}
  .tracking-summary-card{align-items:flex-start;min-height:96px;padding:12px;flex-direction:column;gap:8px}
  .tracking-summary-icon{flex-basis:34px;width:34px;height:34px;border-radius:10px}
  .tracking-summary-icon svg{width:18px;height:18px}
  .tracking-summary-total strong{font-size:15px}
  .tracking-preferences{padding:13px 15px 0;gap:7px}
  .tracking-preference-chip{width:100%;border-radius:14px;align-items:flex-start;flex-wrap:wrap}
  .tracking-preference-chip span{margin-right:auto}
  .tracking-section{margin:18px 15px 0;padding:18px 14px;border-radius:19px}
  .tracking-section-heading{align-items:flex-end;margin-bottom:18px}
  .tracking-section-heading h3{font-size:19px}
  .tracking-progress{display:flex;flex-direction:column;gap:0}
  .tracking-progress li{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;text-align:left;gap:12px;min-height:65px;padding:0}
  .tracking-progress li:not(:last-child):after{top:42px;left:20px;width:3px;height:23px}
  .tracking-step-marker{width:40px;height:40px}
  .tracking-step-copy{margin:0}
  .tracking-step-copy strong{font-size:13px}
  .tracking-step-copy small{font-size:10px}
  .tracking-product-row{grid-template-columns:57px minmax(0,1fr);gap:11px;padding:10px}
  .tracking-product-image{width:57px;height:57px}
  .tracking-product-total{grid-column:2;justify-self:start;margin-top:-3px;color:var(--tracking-green-dark)}
  .tracking-product-info small{font-size:10px}
  .tracking-refresh-note{margin:18px 15px 24px;padding:13px}
}

@media(max-width:390px){
  .tracking-summary-grid{grid-template-columns:1fr}
  .tracking-summary-card{min-height:0;flex-direction:row;align-items:center}
  .tracking-preference-chip strong{width:100%;padding-left:25px}
  .tracking-item-count{font-size:10px}
}