.fp-gig-economy-live-map-route-tracker-ui {
    /* ━━━━━━━━━━━━━━━━━━
       LAYOUT & SIZING SYSTEM
       ━━━━━━━━━━━━━━━━━━ */
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    /* ━━━━━━━━━━━━━━━━━━
       COLOR SYSTEM (Violet Clean SaaS / Apple Style)
       ━━━━━━━━━━━━━━━━━━ */
    --fp-primary-color: #F5F5F7; /* Abu Sangat Terang (Apple Light Gray) */
    --fp-secondary-color: #E5E5EA; /* Subtle Borders/Shapes */
    --fp-muted-color: #8E8E93; /* Muted Text */
    --fp-soft-color: #1C1C1E; /* Hitam (Black) */
    --fp-background-color: transparent;

    --fp-info-color: #5E5CE6; /* Violet Tech */
    --fp-warning-color: #BF5AF2; /* Purple Accent */
    --fp-danger-color: #FF375F; /* Pink/Red Accent */
    --fp-accent-color: #5E5CE6; /* Violet Tech Main Accent */

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    position: relative;
    background-color: var(--fp-background-color);
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.fp-gig-economy-live-map-route-tracker-ui * {
    box-sizing: border-box;
}

/* ━━━━━━━━━━━━━━━━━━
   STAGE & LAYER 1 (BREATHING)
   ━━━━━━━━━━━━━━━━━━ */
.fp-gig-economy-live-map-route-tracker-ui-stage {
    position: relative;
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    background-color: var(--fp-primary-color);
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Layer 1: Subtle Base Breathing */
    animation: fp-gig-economy-live-map-route-tracker-ui-breathe 6s ease-in-out infinite alternate;
}

@keyframes fp-gig-economy-live-map-route-tracker-ui-breathe {
    0% { box-shadow: 0 10px 30px rgba(94, 92, 230, 0.05); }
    100% { box-shadow: 0 20px 50px rgba(94, 92, 230, 0.12); }
}

/* Clean Map Background Pattern */
.fp-gig-economy-live-map-route-tracker-ui-map-bg {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 50% 50%, var(--fp-secondary-color) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.8;
    z-index: 1;
}

/* ━━━━━━━━━━━━━━━━━━
   HEADER
   ━━━━━━━━━━━━━━━━━━ */
.fp-gig-economy-live-map-route-tracker-ui-header {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.fp-gig-economy-live-map-route-tracker-ui-live-dot {
    width: 8px;
    height: 8px;
    background-color: var(--fp-accent-color);
    border-radius: 50%;
    animation: fp-gig-economy-live-map-route-tracker-ui-pulse 2s infinite;
}

.fp-gig-economy-live-map-route-tracker-ui-header-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fp-soft-color);
    letter-spacing: -0.01em;
}

/* ━━━━━━━━━━━━━━━━━━
   MAP & ROUTE SVG
   ━━━━━━━━━━━━━━━━━━ */
.fp-gig-economy-live-map-route-tracker-ui-map-area {
    flex-grow: 1;
    position: relative;
    z-index: 5;
}

.fp-gig-economy-live-map-route-tracker-ui-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Layer 2: Dash-Array Stroke Marching */
.fp-gig-economy-live-map-route-tracker-ui-route {
    fill: none;
    stroke: var(--fp-accent-color);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 8 12;
    stroke-dashoffset: 0;
    animation: fp-gig-economy-live-map-route-tracker-ui-march 1.5s linear infinite;
    opacity: 0.8;
    transition: stroke-width 0.3s ease, filter 0.3s ease;
}

.fp-gig-economy-live-map-route-tracker-ui-route-bg {
    fill: none;
    stroke: var(--fp-secondary-color);
    stroke-width: 6;
    stroke-linecap: round;
}

@keyframes fp-gig-economy-live-map-route-tracker-ui-march {
    0% { stroke-dashoffset: 40; }
    100% { stroke-dashoffset: 0; }
}

/* Markers */
.fp-gig-economy-live-map-route-tracker-ui-worker,
.fp-gig-economy-live-map-route-tracker-ui-client {
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.fp-gig-economy-live-map-route-tracker-ui-client {
    width: 16px;
    height: 16px;
    background-color: var(--fp-soft-color);
    border: 3px solid #FFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.fp-gig-economy-live-map-route-tracker-ui-worker {
    width: 24px;
    height: 24px;
    background-color: var(--fp-accent-color);
    border: 4px solid #FFF;
    box-shadow: 0 4px 12px rgba(94, 92, 230, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: left, top;
}

.fp-gig-economy-live-map-route-tracker-ui-worker::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background-color: var(--fp-accent-color);
    opacity: 0.2;
    animation: fp-gig-economy-live-map-route-tracker-ui-pulse 2s infinite;
}

@keyframes fp-gig-economy-live-map-route-tracker-ui-pulse {
    0% { transform: scale(0.8); opacity: 0.4; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ━━━━━━━━━━━━━━━━━━
   FOOTER CARD
   ━━━━━━━━━━━━━━━━━━ */
.fp-gig-economy-live-map-route-tracker-ui-footer {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
    transition: all 0.3s ease;
}

.fp-gig-economy-live-map-route-tracker-ui-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fp-gig-economy-live-map-route-tracker-ui-time {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fp-soft-color);
    line-height: 1;
    letter-spacing: -0.02em;
}

.fp-gig-economy-live-map-route-tracker-ui-desc {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--fp-muted-color);
}

.fp-gig-economy-live-map-route-tracker-ui-avatar {
    width: 48px;
    height: 48px;
    background-color: var(--fp-secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFF;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.fp-gig-economy-live-map-route-tracker-ui-avatar svg {
    width: 24px;
    height: 24px;
    fill: var(--fp-muted-color);
}

/* ━━━━━━━━━━━━━━━━━━
   LAYER 3: REACTIVE SPIKE
   ━━━━━━━━━━━━━━━━━━ */
.fp-gig-economy-live-map-route-tracker-ui-spike .fp-gig-economy-live-map-route-tracker-ui-route {
    stroke-width: 5;
    filter: drop-shadow(0 0 6px var(--fp-accent-color));
}

.fp-gig-economy-live-map-route-tracker-ui-spike .fp-gig-economy-live-map-route-tracker-ui-worker {
    transform: translate(-50%, -50%) scale(1.3);
    background-color: #FFF;
    border-color: var(--fp-accent-color);
}

.fp-gig-economy-live-map-route-tracker-ui-spike .fp-gig-economy-live-map-route-tracker-ui-footer {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(94, 92, 230, 0.15);
    border-color: rgba(94, 92, 230, 0.3);
}

/* Responsive Adjustments */
@media (max-width: 400px) {
    .fp-gig-economy-live-map-route-tracker-ui-footer { bottom: 16px; left: 16px; right: 16px; padding: 16px; }
    .fp-gig-economy-live-map-route-tracker-ui-time { font-size: 1.25rem; }
}

(function() {
    const instances = document.querySelectorAll('.fp-gig-economy-live-map-route-tracker-ui');

    instances.forEach(root => {
        if (root.dataset.fpInitialized) return;
        root.dataset.fpInitialized = 'true';

        const stage = root.querySelector('.fp-gig-economy-live-map-route-tracker-ui-stage');
        const path = root.querySelector('#fp-gig-economy-live-map-route-tracker-ui-path');
        const workerMarker = root.querySelector('#fp-gig-economy-live-map-route-tracker-ui-worker-marker');
        const etaText = root.querySelector('#fp-gig-economy-live-map-route-tracker-ui-eta');
        
        if (!stage || !path || !workerMarker || !etaText) return;

        let pathLength = 0;
        // Wait for SVG render to get accurate length
        setTimeout(() => {
            pathLength = path.getTotalLength();
        }, 50);

        let rafId;
        let isVisible = true;
        let lastTime = 0;
        let timeAccumulator = 0;
        let spikeTimer = 0;

        // Route Progress (0.0 to 1.0)
        let routeProgress = 0.1;
        let targetProgress = 0.85;

        // Intersection Observer
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => isVisible = entry.isIntersecting);
        }, { threshold: 0.1 });
        observer.observe(root);

        function fp_gig_economy_live_map_route_tracker_ui_loop(timestamp) {
            if (!document.body.contains(root)) {
                cancelAnimationFrame(rafId);
                observer.disconnect();
                return;
            }

            if (document.visibilityState === 'hidden' || !isVisible || pathLength === 0) {
                lastTime = timestamp;
                rafId = requestAnimationFrame(fp_gig_economy_live_map_route_tracker_ui_loop);
                return;
            }

            if (!lastTime) lastTime = timestamp;
            const dt = timestamp - lastTime;
            lastTime = timestamp;

            timeAccumulator += dt;
            spikeTimer += dt;

            // 1. Move the worker slowly along the SVG path
            if (routeProgress < targetProgress) {
                // Very slow movement
                routeProgress += 0.0002; 
            } else {
                // Reset for demo purposes
                routeProgress = 0.1;
            }

            // Get coordinates at current progress
            const point = path.getPointAtLength(routeProgress * pathLength);
            
            // SVG coordinates are 0-100 (viewBox). Convert to % for absolute positioning.
            workerMarker.style.left = `${point.x}%`;
            workerMarker.style.top = `${point.y}%`;

            // Update ETA text dynamically based on progress
            const remainingProgress = 1 - routeProgress;
            const estimatedMinutes = Math.max(1, Math.ceil(remainingProgress * 10));
            etaText.textContent = `${estimatedMinutes} min`;

            // 2. Layer 3: Reactive Spike (Simulating Location Ping / Data Sync)
            if (spikeTimer > 4000) {
                spikeTimer = 0;
                stage.classList.add('fp-gig-economy-live-map-route-tracker-ui-spike');
                
                setTimeout(() => {
                    if (stage) stage.classList.remove('fp-gig-economy-live-map-route-tracker-ui-spike');
                }, 600);
            }

            rafId = requestAnimationFrame(fp_gig_economy_live_map_route_tracker_ui_loop);
        }

        rafId = requestAnimationFrame(fp_gig_economy_live_map_route_tracker_ui_loop);
    });
})();