Shipping Tracker Widget

<div class="ws-shipping-widget rounded-2xl border p-6 max-w-md mx-auto"
     style="background: var(--ws-shipping-widget-bg); color: var(--ws-shipping-widget-text); border-color: var(--ws-shipping-widget-border);">

  <div class="flex items-center justify-between mb-6">
    <h2 class="text-lg font-semibold tracking-tight"
        style="color: var(--ws-shipping-widget-text);">Order #WS-2847</h2>
    <span class="text-xs font-medium rounded-full px-2.5 py-0.5"
          style="background: color-mix(in oklch, var(--ws-shipping-widget-accent) 12%, transparent); color: var(--ws-shipping-widget-accent);">In Transit</span>
  </div>

  <!-- Progress Steps -->
  <div class="relative flex items-start justify-between mb-8" role="list" aria-label="Shipping progress">

    <!-- Connecting line (background) -->
    <div class="absolute top-3 left-3 right-3 h-0.5"
         style="background: var(--ws-shipping-widget-border);" aria-hidden="true"></div>
    <!-- Connecting line (progress) -->
    <div class="absolute top-3 left-3 h-0.5"
         style="width: 58%; background: var(--ws-shipping-widget-accent);" aria-hidden="true"></div>

    <!-- Step 1: Ordered (done) -->
    <div class="relative flex flex-col items-center gap-1.5 z-10" role="listitem">
      <div class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold text-white"
           style="background: var(--ws-shipping-widget-success);" aria-hidden="true">✓</div>
      <span class="text-xs font-medium" style="color: var(--ws-shipping-widget-text-soft);">Ordered</span>
      <span class="text-[10px]" style="color: var(--ws-shipping-widget-text-muted);">Mar 18</span>
    </div>

    <!-- Step 2: Shipped (done) -->
    <div class="relative flex flex-col items-center gap-1.5 z-10" role="listitem">
      <div class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold text-white"
           style="background: var(--ws-shipping-widget-success);" aria-hidden="true">✓</div>
      <span class="text-xs font-medium" style="color: var(--ws-shipping-widget-text-soft);">Shipped</span>
      <span class="text-[10px]" style="color: var(--ws-shipping-widget-text-muted);">Mar 19</span>
    </div>

    <!-- Step 3: In Transit (current) -->
    <div class="relative flex flex-col items-center gap-1.5 z-10" role="listitem" aria-current="step">
      <div class="w-6 h-6 rounded-full flex items-center justify-center"
           style="background: var(--ws-shipping-widget-accent); box-shadow: 0 0 0 4px color-mix(in oklch, var(--ws-shipping-widget-accent) 20%, transparent);"
           aria-hidden="true">
        <span class="w-2 h-2 rounded-full bg-[var(--ws-color-surface)]"></span>
      </div>
      <span class="text-xs font-semibold" style="color: var(--ws-shipping-widget-accent);">In Transit</span>
      <span class="text-[10px]" style="color: var(--ws-shipping-widget-text-muted);">Now</span>
    </div>

    <!-- Step 4: Delivered (upcoming) -->
    <div class="relative flex flex-col items-center gap-1.5 z-10" role="listitem">
      <div class="w-6 h-6 rounded-full border-2 flex items-center justify-center"
           style="border-color: var(--ws-shipping-widget-border); background: var(--ws-shipping-widget-bg);"
           aria-hidden="true">
        <span class="w-2 h-2 rounded-full" style="background: var(--ws-shipping-widget-border);"></span>
      </div>
      <span class="text-xs font-medium" style="color: var(--ws-shipping-widget-text-muted);">Delivered</span>
      <span class="text-[10px]" style="color: var(--ws-shipping-widget-text-muted);">Mar 25</span>
    </div>

  </div>

  <!-- Details -->
  <div class="rounded-xl border p-4 space-y-2"
       style="border-color: var(--ws-shipping-widget-border);">
    <div class="flex items-center justify-between">
      <span class="text-sm font-medium" style="color: var(--ws-shipping-widget-text-soft);">Estimated delivery</span>
      <span class="text-sm font-semibold" style="color: var(--ws-shipping-widget-text);">March 25, 2026</span>
    </div>
    <div class="flex items-center justify-between">
      <span class="text-sm font-medium" style="color: var(--ws-shipping-widget-text-soft);">Carrier</span>
      <span class="text-sm" style="color: var(--ws-shipping-widget-text);">DHL Express</span>
    </div>
    <div class="flex items-center justify-between">
      <span class="text-sm font-medium" style="color: var(--ws-shipping-widget-text-soft);">Tracking</span>
      <span class="text-sm font-mono tabular-nums" style="color: var(--ws-shipping-widget-accent);">1Z999AA10...</span>
    </div>
  </div>
</div>