/* ============================================================
           📦 ORDER DETAILS MODAL — تتبّع وتفاصيل الطلب
           ============================================================ */

        /* Override base modal-custom for full-page details */
        #order-details-modal {
            background: linear-gradient(180deg, #fafdfb 0%, #f1f9f4 100%);
            padding: 0 !important;
        }
        #order-details-modal::before { display: none; } /* hide default drag handle */

        /* ---------- Hero header (gradient changes by status) ---------- */
        .od-hero {
            position: relative;
            padding: 16px 18px 56px;
            color: #fff;
            overflow: hidden;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            transition: background .4s ease;
        }
        .od-hero.preparing  { background: linear-gradient(135deg, #7c2d12 0%, #ea580c 100%); }
        .od-hero.ready      { background: linear-gradient(135deg, #78350f 0%, #d97706 100%); }
        .od-hero.shipping   { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); }
        .od-hero.delivered  { background: linear-gradient(135deg, #064e3b 0%, var(--brand) 100%); }
        .od-hero.cancelled  { background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 100%); }
        .od-hero.issue      { background: linear-gradient(135deg, #831843 0%, #be123c 100%); }

        .od-hero::before {
            content: ''; position: absolute; top: -70px; left: -50px;
            width: 240px; height: 240px; border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%);
            pointer-events: none;
        }
        .od-hero::after {
            content: ''; position: absolute; bottom: -90px; right: -40px;
            width: 200px; height: 200px; border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 70%);
            pointer-events: none;
        }

        .od-hero-top {
            display: flex; justify-content: space-between; align-items: center;
            position: relative; z-index: 2;
        }
        .od-hero-close, .od-order-id-pill {
            display: inline-flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.18);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            color: #fff; transition: all .25s;
            border: 1px solid rgba(255,255,255,0.18);
        }
        .od-hero-close {
            width: 38px; height: 38px; border-radius: 13px;
        }
        .od-hero-close:hover { background: rgba(255,255,255,0.3); transform: rotate(90deg); }
        .od-order-id-pill {
            gap: 6px; padding: 6px 12px; border-radius: 999px;
            font-size: 0.7rem; font-weight: 800;
            font-family: 'SF Mono', Menlo, Consolas, monospace;
        }

        .od-hero-main {
            display: flex; align-items: center; gap: 14px;
            margin-top: 18px;
            position: relative; z-index: 2;
        }

        .od-hero-ring {
            position: relative; flex-shrink: 0;
            width: 64px; height: 64px; border-radius: 50%;
            background: rgba(255,255,255,0.96);
            display: flex; align-items: center; justify-content: center;
            color: #0f172a;
            box-shadow: 0 10px 28px -6px rgba(0,0,0,0.35);
        }
        .od-hero-ring::before {
            content: ''; position: absolute; inset: -5px;
            border-radius: 50%;
            background: conic-gradient(rgba(255,255,255,0.95) 80%, rgba(255,255,255,0.18) 0);
            animation: spin 2.5s linear infinite;
            z-index: -1;
        }
        .od-hero.delivered .od-hero-ring::before {
            animation: none;
            background: conic-gradient(rgba(255,255,255,1) 100%, rgba(255,255,255,0.18) 0);
        }
        .od-hero.cancelled .od-hero-ring::before { animation: none; opacity: 0.5; }

        .od-hero-title { font-size: 1.4rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; }
        .od-hero-from { font-size: 0.78rem; opacity: 0.85; font-weight: 600; margin-top: 3px; }
        .od-hero-from .place { font-weight: 800; opacity: 1; }

        .od-hero-eta-bar {
            margin-top: 18px; display: flex; align-items: center;
            justify-content: space-between; gap: 12px;
            padding: 12px 14px; border-radius: 16px;
            background: rgba(255,255,255,0.13);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.22);
            position: relative; z-index: 2;
        }
        .od-hero-eta-bar .label { font-size: 0.6rem; font-weight: 800; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.05em; }
        .od-hero-eta-bar .time { font-size: 1.1rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; margin-top: 2px; }
        .od-hero-eta-bar .substat {
            padding: 6px 12px; border-radius: 999px;
            background: rgba(255,255,255,0.96); color: #0f172a;
            font-size: 0.7rem; font-weight: 800; line-height: 1;
            white-space: nowrap;
        }

        /* ---------- Stepper (overlapping the hero/body) ---------- */
        .od-stepper {
            margin: -36px 14px 0; padding: 16px 18px;
            border-radius: 22px;
            background: #fff;
            box-shadow: 0 14px 32px -10px rgba(15,23,42,0.18), 0 4px 10px rgba(15,23,42,0.04);
            position: relative; z-index: 5;
            border: 1px solid #f1f5f9;
        }
        .od-steps {
            display: flex; justify-content: space-between; align-items: flex-start;
            position: relative;
        }
        .od-step {
            flex: 1; display: flex; flex-direction: column; align-items: center;
            gap: 6px; position: relative; z-index: 2;
        }
        .od-step-dot {
            width: 30px; height: 30px; border-radius: 50%;
            background: #f8fafc; border: 2px solid #e2e8f0;
            color: #94a3b8;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.78rem; transition: all .35s;
        }
        .od-step.reached .od-step-dot {
            background: var(--brand); border-color: var(--brand); color: #fff;
            box-shadow: 0 4px 10px -2px rgba(0,184,148,0.35);
        }
        .od-step.current .od-step-dot {
            background: #fff; border-color: var(--brand); color: var(--brand);
            box-shadow: 0 0 0 4px rgba(0,184,148,0.18), 0 4px 10px -2px rgba(0,184,148,0.4);
            animation: stepPulse 1.6s ease-in-out infinite;
        }
        .od-step.cancelled .od-step-dot {
            background: #fee2e2; border-color: #fecaca; color: #dc2626;
        }
        @keyframes stepPulse {
            0%, 100% { box-shadow: 0 0 0 4px rgba(0,184,148,0.18), 0 4px 10px -2px rgba(0,184,148,0.4); }
            50% { box-shadow: 0 0 0 8px rgba(0,184,148,0.07), 0 4px 10px -2px rgba(0,184,148,0.4); }
        }
        .od-step .lbl {
            font-size: 0.65rem; font-weight: 800; color: #94a3b8;
            text-align: center; line-height: 1.25; max-width: 64px;
        }
        .od-step.reached .lbl { color: var(--brand-dark); }
        .od-step.current .lbl { color: var(--brand-dark); }

        .od-step-rail {
            position: absolute; top: 14px; right: 14%; left: 14%; height: 3px;
            background: #f1f5f9; border-radius: 2px; z-index: 1;
            overflow: hidden;
        }
        .od-step-rail-fill {
            height: 100%; background: var(--brand);
            border-radius: 2px;
            width: 0; transition: width 0.6s cubic-bezier(.34,1.56,.64,1);
        }

        /* ---------- Content shell ---------- */
        .od-content {
            flex: 1; overflow-y: auto;
            padding: 18px 14px 28px;
        }

        .od-section-title {
            display: flex; align-items: center; gap: 8px;
            margin: 4px 4px 10px; font-size: 0.72rem; font-weight: 800;
            color: #475569; text-transform: uppercase; letter-spacing: 0.06em;
        }
        .od-section-title i { color: var(--brand); font-size: 0.74rem; }

        /* ---------- Driver card ---------- */
        .od-driver-card {
            background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
            border: 1px solid #d1fae5; border-radius: 22px;
            padding: 14px;
            box-shadow: var(--shadow-sm);
            display: flex; align-items: center; gap: 12px;
        }
        .od-driver-avatar {
            position: relative; flex-shrink: 0;
            width: 54px; height: 54px; border-radius: 50%;
            background: linear-gradient(135deg, var(--brand), var(--brand-dark));
            color: #fff;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.4rem;
            box-shadow: 0 8px 18px -4px rgba(0,184,148,0.45);
        }
        .od-driver-avatar::after {
            content: ''; position: absolute; bottom: -2px; left: -2px;
            width: 14px; height: 14px; border-radius: 50%;
            background: #22c55e; border: 2.5px solid #fff;
            animation: pulseAvail 1.5s infinite;
        }
        @keyframes pulseAvail {
            0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
            70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
            100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
        }
        .od-driver-body { flex: 1; min-width: 0; line-height: 1.2; }
        .od-driver-name { font-weight: 900; font-size: 0.98rem; color: #0f172a; }
        .od-driver-role {
            font-size: 0.7rem; color: var(--brand-dark); font-weight: 800;
            margin-top: 3px; display: inline-flex; align-items: center; gap: 4px;
        }
        .od-driver-actions { display: flex; gap: 8px; flex-shrink: 0; }
        .od-driver-btn {
            width: 42px; height: 42px; border-radius: 13px;
            display: flex; align-items: center; justify-content: center;
            transition: all .2s;
            box-shadow: 0 4px 10px -2px rgba(15,23,42,0.12);
            font-size: 1rem;
        }
        .od-driver-btn.whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; }
        .od-driver-btn.call { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }
        .od-driver-btn:hover { transform: translateY(-2px); }
        .od-driver-btn:active { transform: scale(0.95); }

        /* ---------- Live tracking map ---------- */
        .od-map-wrapper {
            background: #fff; border-radius: 22px; padding: 12px;
            border: 1px solid #f1f5f9; box-shadow: var(--shadow-sm);
        }
        .od-map-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 10px; padding: 0 4px;
        }
        .od-map-title {
            display: flex; align-items: center; gap: 8px;
            font-size: 0.82rem; font-weight: 800; color: #0f172a;
        }
        .od-live-dot {
            position: relative; width: 8px; height: 8px; border-radius: 50%;
            background: #ef4444;
        }
        .od-live-dot::before {
            content: ''; position: absolute; inset: -4px; border-radius: 50%;
            background: rgba(239,68,68,0.45);
            animation: pulseAvail 1.4s infinite;
        }
        .od-live-tag {
            font-size: 0.62rem; font-weight: 800; color: #b91c1c;
            padding: 3px 9px; border-radius: 999px;
            background: #fee2e2; border: 1px solid #fecaca;
            text-transform: uppercase; letter-spacing: 0.06em;
        }
        .od-map-canvas {
            width: 100%; height: 220px; border-radius: 16px;
            background: #e2e8f0; overflow: hidden; position: relative;
        }
        .od-map-info-bar {
            margin-top: 12px; display: grid; grid-template-columns: 1fr 1px 1fr;
            gap: 10px; padding: 12px 8px;
            background: #f8fafc; border-radius: 14px;
            border: 1px solid #f1f5f9;
        }
        .od-map-info-bar .divider { background: #e2e8f0; }
        .od-map-info-bar .stat { text-align: center; }
        .od-map-info-bar .stat .lbl { font-size: 0.6rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
        .od-map-info-bar .stat .val { font-size: 0.92rem; font-weight: 900; color: var(--brand-dark); margin-top: 3px; letter-spacing: -0.01em; }

        /* ---------- Address card ---------- */
        .od-address-card {
            background: #fff; border: 1px solid #f1f5f9; border-radius: 22px;
            padding: 14px; box-shadow: var(--shadow-sm);
            display: flex; align-items: flex-start; gap: 12px;
        }
        .od-address-pin {
            width: 44px; height: 44px; border-radius: 13px;
            background: linear-gradient(135deg, #fee2e2, #fecaca);
            color: #dc2626;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.05rem; flex-shrink: 0;
        }
        .od-address-card .name { font-weight: 800; font-size: 0.95rem; color: #0f172a; line-height: 1.2; }
        .od-address-card .street { font-size: 0.78rem; color: #64748b; font-weight: 600; margin-top: 3px; line-height: 1.45; }

        /* ---------- Items card ---------- */
        .od-items-card {
            background: #fff; border: 1px solid #f1f5f9; border-radius: 22px;
            padding: 14px; box-shadow: var(--shadow-sm);
        }
        .od-items-header {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 6px; padding-bottom: 12px;
            border-bottom: 1px dashed #e2e8f0;
        }
        .od-items-header .title { font-weight: 800; font-size: 0.94rem; color: #0f172a; }
        .od-items-count {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 4px 10px; border-radius: 999px;
            background: var(--brand-soft); color: var(--brand-dark);
            font-size: 0.7rem; font-weight: 800;
        }

        .od-item {
            display: flex; align-items: center; gap: 12px;
            padding: 10px 4px;
        }
        .od-item + .od-item { border-top: 1px solid #f8fafc; }
        .od-item-thumb {
            width: 48px; height: 48px; border-radius: 13px;
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; overflow: hidden;
        }
        .od-item-thumb img { width: 38px; height: 38px; object-fit: contain; }
        .od-item-thumb.bundle { background: linear-gradient(135deg, #fff7ed, #fed7aa); color: var(--orange); font-size: 1.1rem; }
        .od-item-thumb.unav { background: #fef2f2; color: #f87171; }
        .od-item-body { flex: 1; min-width: 0; line-height: 1.2; }
        .od-item-name {
            font-weight: 800; font-size: 0.88rem; color: #0f172a;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .od-item-name.unavailable { text-decoration: line-through; color: #94a3b8; }
        .od-item-meta { font-size: 0.7rem; color: #64748b; font-weight: 700; margin-top: 3px; }
        .od-item-warning {
            margin-top: 5px; font-size: 0.62rem; color: #b91c1c; font-weight: 800;
            display: inline-flex; align-items: center; gap: 4px;
            padding: 3px 8px; border-radius: 999px;
            background: #fef2f2; border: 1px solid #fecaca;
        }
        /* Per-item picking status notes (substituted/partial/missing) */
        .od-item-note {
            margin-top: 6px; font-size: 0.7rem; font-weight: 700; line-height: 1.5;
            padding: 6px 8px; border-radius: 10px;
            border-width: 1px; border-style: solid;
        }
        .od-item-note .mt-1 { margin-top: 4px; }
        .od-item-note i { margin-left: 3px; }
        .od-note-amber  { background: #fffbeb; color: #78350f; border-color: #fde68a; }
        .od-note-orange { background: #fff7ed; color: #7c2d12; border-color: #fed7aa; }
        .od-note-red    { background: #fef2f2; color: #7f1d1d; border-color: #fecaca; }

        /* Top-of-list financial banners */
        .od-banner {
            display: flex; align-items: center; gap: 8px;
            padding: 10px 14px; border-radius: 14px;
            font-size: 0.8rem; font-weight: 800;
            margin-bottom: 10px;
            border-width: 1px; border-style: solid;
        }
        .od-banner i { font-size: 1rem; }
        .od-banner-emerald { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
        .od-banner-orange  { background: #fff7ed; color: #7c2d12; border-color: #fed7aa; }
        .od-banner-blue    { background: #eff6ff; color: #1e3a8a; border-color: #bfdbfe; }
        .od-item-price {
            font-weight: 800; font-size: 0.95rem; color: var(--brand-dark);
            flex-shrink: 0; letter-spacing: -0.01em;
        }
        .od-item-price.unavailable { color: #94a3b8; text-decoration: line-through; }

        /* ---------- Payment card ---------- */
        .od-payment-card {
            background: linear-gradient(180deg, #ffffff 0%, #fafdfb 100%);
            border: 1px solid #f1f5f9; border-radius: 22px;
            padding: 14px;
            box-shadow: var(--shadow-sm);
        }
        .od-payment-card .row {
            display: flex; justify-content: space-between; align-items: center;
            padding: 5px 0; font-size: 0.85rem;
        }
        .od-payment-card .row .lbl { color: #64748b; font-weight: 600; }
        .od-payment-card .row .val { color: #0f172a; font-weight: 800; }

        .od-payment-method-pill {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 5px 11px; border-radius: 999px;
            background: #fff7ed; color: #c2410c;
            font-size: 0.72rem; font-weight: 800;
            border: 1px solid #fed7aa;
        }
        .od-payment-method-pill.card { background: var(--brand-soft); color: var(--brand-dark); border-color: rgba(0,184,148,0.25); }

        .od-payment-divider {
            height: 1px; background: linear-gradient(to left, transparent, #e2e8f0, transparent);
            margin: 10px 0 8px;
        }
        .od-payment-card .total-row {
            display: flex; justify-content: space-between; align-items: center;
            padding-top: 4px;
        }
        .od-payment-card .total-row .lbl { font-weight: 800; color: #0f172a; font-size: 0.92rem; }
        .od-payment-card .total-row .val {
            font-weight: 900; font-size: 1.4rem; color: var(--brand-dark);
            letter-spacing: -0.025em;
        }
        .od-payment-card .total-row .val .currency { font-size: 0.72rem; opacity: 0.7; margin-right: 3px; }

        .od-cash-note {
            margin-top: 12px; padding: 10px 12px; border-radius: 14px;
            background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
            border: 1px solid rgba(234,88,12,0.22);
            color: #9a3412; font-size: 0.74rem; font-weight: 700;
            display: flex; align-items: center; gap: 8px;
        }
        .od-cash-note i { color: #ea580c; flex-shrink: 0; }

        /* ---------- Upsell ---------- */
        .od-upsell-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 0 4px; margin-bottom: 10px;
        }
        .od-upsell-header h3 { font-weight: 800; font-size: 1rem; color: #0f172a; }
        .od-upsell-tag {
            font-size: 0.7rem; font-weight: 800; color: var(--brand-dark);
            padding: 4px 10px; border-radius: 999px; background: var(--brand-soft);
            display: inline-flex; align-items: center; gap: 4px;
        }

        /* ---------- Support / Order ID card ---------- */
        .od-support-card {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border: 1px solid #bae6fd; border-radius: 22px;
            padding: 14px;
        }
        .od-support-row {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 12px;
        }
        .od-support-row .label {
            font-size: 0.65rem; font-weight: 800; color: #075985;
            text-transform: uppercase; letter-spacing: 0.06em;
        }
        .od-support-row .id-code {
            padding: 6px 12px; border-radius: 10px;
            background: rgba(255,255,255,0.85); color: #0c4a6e;
            font-family: 'SF Mono', Menlo, Consolas, monospace;
            font-weight: 800; font-size: 0.8rem;
            border: 1px dashed rgba(7,89,133,0.3);
            cursor: pointer; transition: background .2s;
        }
        .od-support-row .id-code:hover { background: #fff; }
        .od-support-btn {
            width: 100%; padding: 12px;
            background: #fff; border: 1px solid #bae6fd; border-radius: 14px;
            font-weight: 800; font-size: 0.85rem; color: #075985;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            transition: all .2s;
        }
        .od-support-btn:hover { background: #f0f9ff; border-color: #7dd3fc; color: #0c4a6e; transform: translateY(-1px); }
        .od-support-btn:active { transform: scale(0.98); }
        .od-support-btn i { color: var(--brand); }
        /* ============ Orders Page ============ */
        .orders-hero {
            position: relative;
            border-radius: 26px;
            background: linear-gradient(135deg, #022c22 0%, #064e3b 50%, var(--brand-dark) 100%);
            box-shadow: 0 18px 40px -12px rgba(2,44,34,0.4);
            overflow: hidden;
            isolation: isolate;
            padding: 18px;
            margin-bottom: 16px;
        }
        .orders-hero-deco {
            position: absolute; inset: 0;
            background:
                radial-gradient(circle at 80% 20%, rgba(74,176,79,0.4), transparent 45%),
                radial-gradient(circle at 10% 90%, rgba(0,184,148,0.35), transparent 50%);
            pointer-events: none;
        }
        .orders-hero-pattern {
            position: absolute; inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M30 30c0-8 6-14 14-14s14 6 14 14-6 14-14 14-14-6-14-14z'/%3E%3C/g%3E%3C/svg%3E");
            opacity: 0.7;
            pointer-events: none;
        }
        .orders-hero-icon {
            width: 50px; height: 50px;
            border-radius: 16px;
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.18);
            display: flex; align-items: center; justify-content: center;
            color: #fde047;
            font-size: 1.3rem;
            box-shadow: 0 6px 18px -4px rgba(253,224,71,0.3);
        }
        .orders-hero-stat {
            position: relative;
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 14px;
            padding: 10px 8px;
            text-align: center;
            transition: all .25s;
        }
        .orders-hero-stat.highlight {
            background: linear-gradient(135deg, rgba(253,224,71,0.18), rgba(74,176,79,0.18));
            border-color: rgba(253,224,71,0.3);
        }
        .orders-hero-stat .value {
            display: block;
            font-size: 1.45rem;
            font-weight: 900;
            color: #fff;
            letter-spacing: -0.02em;
            line-height: 1;
            margin-bottom: 4px;
        }
        .orders-hero-stat .label {
            display: block;
            font-size: 0.65rem;
            font-weight: 700;
            color: rgba(255,255,255,0.7);
            letter-spacing: 0.02em;
        }
        .orders-stat-pulse {
            display: inline-block;
            width: 6px; height: 6px;
            background: #34d399;
            border-radius: 50%;
            animation: orders-pulse 1.6s infinite;
        }
        @keyframes orders-pulse {
            0%, 100% { opacity: 0.4; transform: scale(0.85); }
            50% { opacity: 1; transform: scale(1.15); }
        }

        /* Filter Tabs */
        .orders-filter-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 14px;
            overflow-x: auto;
            padding: 2px 1px;
            scroll-behavior: smooth;
        }
        .orders-tab {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 9px 14px;
            background: #fff;
            border: 1.5px solid #e2e8f0;
            border-radius: 999px;
            font-size: 0.82rem;
            font-weight: 700;
            color: #475569;
            white-space: nowrap;
            transition: all .25s;
            cursor: pointer;
            flex-shrink: 0;
        }
        .orders-tab i { font-size: 0.78rem; }
        .orders-tab:hover { border-color: var(--brand); color: var(--brand-dark); }
        .orders-tab.active {
            background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
            border-color: transparent;
            color: #fff;
            box-shadow: 0 6px 16px -4px rgba(0,184,148,0.4);
        }
        .orders-tab-count {
            background: rgba(15,23,42,0.08);
            color: inherit;
            font-size: 0.65rem;
            font-weight: 800;
            padding: 2px 7px;
            border-radius: 999px;
            min-width: 20px;
            text-align: center;
        }
        .orders-tab.active .orders-tab-count {
            background: rgba(255,255,255,0.25);
            color: #fff;
        }
        .orders-tab-pulse {
            width: 7px; height: 7px;
            background: #f97316;
            border-radius: 50%;
            box-shadow: 0 0 0 0 rgba(249,115,22,0.7);
            animation: orders-pulse-tab 1.8s infinite;
        }
        .orders-tab.active .orders-tab-pulse { background: #fde047; box-shadow: 0 0 0 0 rgba(253,224,71,0.7); }
        @keyframes orders-pulse-tab {
            0% { box-shadow: 0 0 0 0 rgba(249,115,22,0.7); }
            70% { box-shadow: 0 0 0 6px rgba(249,115,22,0); }
            100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
        }

        /* Order Card */
        .oc-card {
            position: relative;
            background: #fff;
            border-radius: 22px;
            padding: 16px;
            border: 1.5px solid rgba(241,245,249,0.85);
            box-shadow: 0 4px 14px -4px rgba(15,23,42,0.06);
            cursor: pointer;
            transition: all .25s cubic-bezier(.34,1.56,.64,1);
            overflow: hidden;
        }
        .oc-card::before {
            content: '';
            position: absolute;
            top: 0; right: 0;
            width: 4px; height: 100%;
            background: linear-gradient(180deg, transparent, transparent);
            transition: background .3s;
        }
        .oc-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -6px rgba(15,23,42,0.12); border-color: var(--brand-soft); }
        .oc-card:active { transform: scale(0.99); }
        .oc-card.oc-active::before { background: linear-gradient(180deg, var(--brand), var(--brand-dark)); }
        .oc-card.oc-cancelled { opacity: 0.7; background: #fafafa; }
        .oc-card.oc-cancelled::before { background: linear-gradient(180deg, #ef4444, #dc2626); }

        .oc-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .oc-status-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px 5px 10px;
            border-radius: 999px;
            font-size: 0.72rem;
            font-weight: 800;
            position: relative;
        }
        .oc-status-pill i { font-size: 0.72rem; }
        .oc-status-pulse {
            width: 6px; height: 6px;
            border-radius: 50%;
            box-shadow: 0 0 0 0 currentColor;
            animation: oc-status-ping 1.8s infinite;
        }
        @keyframes oc-status-ping {
            0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.5); transform: scale(0.85); }
            70% { box-shadow: 0 0 0 6px transparent; transform: scale(1.1); }
            100% { box-shadow: 0 0 0 0 transparent; transform: scale(0.85); }
        }
        .oc-date {
            font-size: 0.7rem;
            color: #94a3b8;
            font-weight: 700;
        }

        .oc-body {
            display: flex;
            gap: 12px;
            align-items: center;
            margin-bottom: 10px;
        }
        .oc-items {
            display: flex;
            flex-shrink: 0;
        }
        .oc-item-thumb {
            width: 44px; height: 44px;
            border-radius: 14px;
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            border: 2px solid #fff;
            display: flex; align-items: center; justify-content: center;
            color: #94a3b8;
            font-size: 0.95rem;
            box-shadow: 0 2px 6px rgba(15,23,42,0.06);
            overflow: hidden;
            margin-right: -10px;
        }
        .oc-item-thumb:first-child { margin-right: 0; }
        .oc-item-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
        .oc-item-thumb.oc-more {
            background: linear-gradient(135deg, var(--brand-soft), #d1fae5);
            color: var(--brand-dark);
            font-size: 0.72rem;
            font-weight: 800;
        }
        .oc-sub {
            font-size: 0.86rem;
            font-weight: 700;
            color: #1e293b;
            line-height: 1.3;
            margin-bottom: 3px;
        }
        .oc-meta {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.7rem;
            color: #94a3b8;
            font-weight: 600;
            flex-wrap: wrap;
        }
        .oc-meta-sep { opacity: 0.5; }
        .oc-address {
            font-size: 0.72rem;
            color: #64748b;
            font-weight: 600;
            background: #f8fafc;
            padding: 7px 10px;
            border-radius: 10px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .oc-address i { color: var(--brand); font-size: 0.7rem; }

        .oc-progress {
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 8px 0 12px;
        }
        .oc-step {
            width: 14px; height: 14px;
            border-radius: 50%;
            background: #f1f5f9;
            border: 2px solid #e2e8f0;
            position: relative;
            flex-shrink: 0;
            transition: all .25s;
        }
        .oc-step-line {
            flex: 1; height: 2px;
            background: #e2e8f0;
            transition: background .25s;
        }
        .oc-step.reached {
            background: var(--brand);
            border-color: var(--brand-dark);
            box-shadow: 0 0 0 3px rgba(0,184,148,0.18);
        }
        .oc-step.reached + .oc-step-line { background: var(--brand); }
        .oc-step.current {
            animation: oc-step-pulse 1.4s infinite;
        }
        @keyframes oc-step-pulse {
            0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(0,184,148,0.2); }
            50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(0,184,148,0); }
        }

        .oc-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px dashed #e2e8f0;
            padding-top: 12px;
        }
        .oc-total {
            font-size: 1.25rem;
            font-weight: 900;
            color: #0f172a;
            letter-spacing: -0.02em;
        }
        .oc-track-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            background: linear-gradient(135deg, var(--brand-soft), #d1fae5);
            color: var(--brand-dark);
            font-size: 0.78rem;
            font-weight: 800;
            border-radius: 12px;
            border: 1px solid rgba(0,184,148,0.18);
            transition: all .2s;
        }
        .oc-track-btn:hover { background: var(--brand); color: #fff; }
        .oc-card.oc-cancelled .oc-track-btn { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }

        /* Empty state */
        .orders-empty {
            background: #fff;
            border-radius: 26px;
            padding: 40px 24px;
            text-align: center;
            border: 1.5px dashed #e2e8f0;
        }
        .orders-empty-icon {
            width: 88px; height: 88px;
            margin: 0 auto 20px;
            border-radius: 26px;
            background: linear-gradient(135deg, var(--brand-soft) 0%, #d1fae5 100%);
            color: var(--brand-dark);
            display: flex; align-items: center; justify-content: center;
            font-size: 2.4rem;
            box-shadow: 0 10px 26px -6px rgba(0,184,148,0.25), inset 0 -2px 0 rgba(0,184,148,0.1);
            border: 4px solid #fff;
        }