:root {
      --primary: #0a0a0a;
      --accent: #d4a853;
      --accent-hover: #c49a3e;
      --light-bg: #fafafa;
      --white: #ffffff;
      --text-dark: #1a1a1a;
      --text-muted: #6b7280;
      --border-light: #e5e7eb;
      --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.06);
      --radius-sm: 10px;
      --radius-md: 14px;
      --radius-lg: 20px;
      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      --danger: #dc2626;
      --success: #059669;
      --warning: #f59e0b;
      --info: #2563eb;
    }

    /* ========== BREADCRUMB ========== */
    .breadcrumb-section {
      background: var(--white); padding: 14px 0; border-bottom: 1px solid var(--border-light);
    }
    .breadcrumb-nav { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #6b7280; }
    .breadcrumb-nav a { color: #6b7280; text-decoration: none; transition: var(--transition); }
    .breadcrumb-nav a:hover { color: var(--accent); }
    .breadcrumb-nav .separator { color: #d1d5db; }
    .breadcrumb-nav .current { color: var(--primary); font-weight: 600; }

    /* ========== TRACK SECTION ========== */
    .track-section { padding: 40px 0; }
    .track-hero {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border-radius: var(--radius-lg); padding: 40px; text-align: center;
      margin-bottom: 30px; border: 1px solid var(--border-light);
    }
    .track-hero h2 { font-weight: 800; font-size: 1.8rem; margin-bottom: 8px; }
    .track-hero p { color: #6b7280; margin-bottom: 24px; }
    .track-input-group {
      display: flex; gap: 12px; max-width: 600px; margin: 0 auto;
      flex-wrap: wrap; justify-content: center;
    }
    .track-input-group input {
      flex: 1; min-width: 250px; padding: 14px 20px; border: 2px solid var(--border-light);
      border-radius: 50px; font-size: 0.9rem; font-weight: 600; outline: none;
      letter-spacing: 0.5px; transition: var(--transition);
    }
    .track-input-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212,168,83,0.08); }
    .track-input-group input.is-invalid { border-color: var(--danger); }
    .btn-track {
      background: var(--accent); color: #000; font-weight: 700; padding: 14px 32px;
      border-radius: 50px; border: none; cursor: pointer; transition: var(--transition);
      font-size: 0.9rem; white-space: nowrap; display: flex; align-items: center; gap: 8px;
    }
    .btn-track:hover { background: var(--accent-hover); box-shadow: 0 6px 20px rgba(212,168,83,0.3); }
    .btn-track.loading { pointer-events: none; opacity: 0.7; }
    .btn-track .spinner-border { width: 16px; height: 16px; border-width: 2px; display: none; }
    .btn-track.loading .spinner-border { display: inline-block; }

    /* Multiple Orders */
    .order-history-section { margin-bottom: 30px; }
    .recent-orders-header {
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
    }
    .recent-lookup { display: flex; gap: 8px; flex-wrap: wrap; }
    .recent-lookup input {
      padding: 10px 16px; border: 2px solid var(--border-light); border-radius: 50px;
      font-size: 0.85rem; min-width: 220px; outline: none; transition: var(--transition);
    }
    .recent-lookup input:focus { border-color: var(--accent); }
    .btn-load-recent {
      background: var(--primary); color: #fff; border: none; padding: 10px 18px;
      border-radius: 50px; font-weight: 700; font-size: 0.82rem; cursor: pointer;
      display: flex; align-items: center; gap: 6px; transition: var(--transition); white-space: nowrap;
    }
    .btn-load-recent:hover { background: #1f2937; }
    .btn-load-recent.loading { opacity: 0.7; pointer-events: none; }
    .btn-load-recent .spinner-border { width: 14px; height: 14px; border-width: 2px; display: none; }
    .btn-load-recent.loading .spinner-border { display: inline-block; }
    .recent-placeholder { color: #9ca3af; font-size: 0.88rem; text-align: center; padding: 20px; }
    .status-confirmed { background: #f0fdf4; color: #16a34a; }
    .order-card {
      background: var(--white); border-radius: var(--radius-lg); padding: 20px 24px;
      border: 1px solid var(--border-light); margin-bottom: 14px; cursor: pointer;
      transition: var(--transition); box-shadow: var(--card-shadow);
    }
    .order-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: #d1d5db; }
    .order-card .order-header {
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 10px; margin-bottom: 10px;
    }
    .order-card .order-id { font-weight: 800; font-size: 1rem; color: var(--primary); }
    .order-card .order-date { font-size: 0.8rem; color: #6b7280; }
    .status-badge {
      display: inline-block; padding: 5px 14px; border-radius: 20px;
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
    }
    .status-processing { background: #eff6ff; color: #2563eb; }
    .status-shipped { background: #fefce8; color: #d4a853; }
    .status-delivered { background: #ecfdf5; color: #059669; }
    .status-cancelled { background: #fef2f2; color: #dc2626; }
    .order-card .order-summary-row {
      display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.82rem; color: #6b7280;
    }
    .order-card .order-summary-row span { display: flex; align-items: center; gap: 4px; }

    /* Tracking Result */
    .tracking-result { display: none; }
    .tracking-result.active { display: block; }

    .tracking-card {
      background: var(--white); border-radius: var(--radius-lg); padding: 30px;
      border: 1px solid var(--border-light); margin-bottom: 24px;
      box-shadow: var(--card-shadow);
    }
    .tracking-card .order-info {
      display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
      margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border-light);
    }
    .tracking-card .order-info-item { text-align: center; flex: 1; min-width: 120px; }
    .tracking-card .order-info-item .info-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: #9ca3af; font-weight: 600; }
    .tracking-card .order-info-item .info-value { font-weight: 700; font-size: 0.9rem; color: var(--primary); margin-top: 4px; }

    /* Timeline */
    .timeline { position: relative; padding-left: 40px; }
    .timeline::before {
      content: ''; position: absolute; left: 18px; top: 0; bottom: 0;
      width: 2px; background: var(--border-light);
    }
    .timeline-item {
      position: relative; padding-bottom: 28px;
    }
    .timeline-item:last-child { padding-bottom: 0; }
    .timeline-item .timeline-icon {
      position: absolute; left: -40px; top: 0; width: 38px; height: 38px;
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 1rem; z-index: 2;
    }
    .timeline-item.completed .timeline-icon { background: #ecfdf5; color: var(--success); border: 2px solid var(--success); }
    .timeline-item.current .timeline-icon { background: #fefce8; color: var(--accent); border: 2px solid var(--accent); animation: pulse 2s infinite; }
    .timeline-item.upcoming .timeline-icon { background: #f9fafb; color: #d1d5db; border: 2px solid #e5e7eb; }
    @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212,168,83,0.4); } 50% { box-shadow: 0 0 0 12px rgba(212,168,83,0); } }
    .timeline-item .timeline-content h6 { font-weight: 700; font-size: 0.9rem; margin-bottom: 2px; }
    .timeline-item .timeline-content p { font-size: 0.78rem; color: #6b7280; margin: 0; }
    .timeline-item .timeline-content .time-stamp { font-size: 0.7rem; color: #9ca3af; }

    /* Map placeholder */
    .map-placeholder {
      background: #f3f4f6; border-radius: var(--radius-md); height: 200px;
      display: flex; align-items: center; justify-content: center;
      margin-top: 20px; border: 2px dashed #d1d5db;
      font-size: 0.9rem; color: #9ca3af;
    }

    /* Product List in Tracking */
    .tracking-products {
      display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px;
    }
    .tracking-product-item {
      display: flex; align-items: center; gap: 10px; background: #f9fafb;
      padding: 10px 14px; border-radius: var(--radius-sm);
    }
    .tracking-product-item img {
      width: 40px; height: 40px; border-radius: 8px; object-fit: cover;
    }
    .tracking-product-item .tp-name { font-weight: 600; font-size: 0.82rem; }
    .tracking-product-item .tp-qty { font-size: 0.75rem; color: #6b7280; }

    @media (max-width: 768px) {
      .track-hero { padding: 24px 16px; }
      .track-hero h2 { font-size: 1.4rem; }
      .tracking-card { padding: 20px; }
      .timeline { padding-left: 30px; }
      .timeline::before { left: 12px; }
      .timeline-item .timeline-icon { left: -30px; width: 28px; height: 28px; font-size: 0.8rem; }
    }