.fp-travel-map-route-tracker-ui {
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    --fp-primary-color: #ffffff; 
    --fp-secondary-color: rgba(255, 255, 255, 0.65); 
    --fp-muted-color: #94a3b8;
    --fp-soft-color: #e0f2fe; 
    --fp-background-color: transparent;

    --fp-info-color: #7dd3fc; 
    --fp-warning-color: #38bdf8; 
    --fp-danger-color: #0ea5e9; 
    --fp-accent-color: #0ea5e9; 
    --fp-text-color: #0f172a; 

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

.fp-travel-map-route-tracker-ui * {
    box-sizing: inherit;
}

.fp-travel-map-route-tracker-ui-stage {
    aspect-ratio: var(--fp-aspect-ratio);
    background: var(--fp-primary-color);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 1px solid #f1f5f9;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.08);
}

.fp-travel-map-route-tracker-ui-map-bg {
    position: absolute;
    width: 120%;
    height: 120%;
    background-image: 
        radial-gradient(circle at center, #f8fafc 1px, transparent 1px),
        linear-gradient(to right, #f1f5f9 1px, transparent 1px),
        linear-gradient(to bottom, #f1f5f9 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.8;
    z-index: 1;
}

.fp-travel-map-route-tracker-ui-ambient {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    background: radial-gradient(circle, var(--fp-soft-color) 0%, transparent 70%);
    opacity: 0.4;
    filter: blur(40px);
    animation: fp-travel-map-route-tracker-ui-breathe 6s ease-in-out infinite alternate;
    z-index: 2;
}

@keyframes fp-travel-map-route-tracker-ui-breathe {
    0% { transform: scale(1) translate(0, 0); opacity: 0.3; }
    100% { transform: scale(1.2) translate(20px, -20px); opacity: 0.6; }
}

.fp-travel-map-route-tracker-ui-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
    pointer-events: none;
}

.fp-travel-map-route-tracker-ui-path-bg {
    fill: none;
    stroke: var(--fp-soft-color);
    stroke-width: 6;
    stroke-linecap: round;
}

.fp-travel-map-route-tracker-ui-path-marching {
    fill: none;
    stroke: var(--fp-accent-color);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 1, 15;
    animation: fp-travel-map-route-tracker-ui-marching 30s linear infinite;
}

@keyframes fp-travel-map-route-tracker-ui-marching {
    from { stroke-dashoffset: 500; }
    to { stroke-dashoffset: 0; }
}

.fp-travel-map-route-tracker-ui-destination-glow {
    position: absolute;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 2;
    animation: fp-travel-map-route-tracker-ui-radar 3s linear infinite;
}

@keyframes fp-travel-map-route-tracker-ui-radar {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

.fp-travel-map-route-tracker-ui-overlay {
    position: absolute;
    z-index: 10;
    width: 85%;
    height: 85%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.fp-travel-map-route-tracker-ui-panel {
    background: var(--fp-secondary-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto;
}

.fp-travel-map-route-tracker-ui-panel.is-syncing {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--fp-warning-color);
}

.fp-travel-map-route-tracker-ui-status-tag {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fp-accent-color);
    background: var(--fp-soft-color);
    padding: 4px 10px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fp-travel-map-route-tracker-ui-dot {
    width: 6px;
    height: 6px;
    background: var(--fp-accent-color);
    border-radius: 50%;
    animation: fp-travel-map-route-tracker-ui-pulse 1.5s infinite;
}

@keyframes fp-travel-map-route-tracker-ui-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.fp-travel-map-route-tracker-ui-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
}

.fp-travel-map-route-tracker-ui-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fp-travel-map-route-tracker-ui-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--fp-muted-color);
}

.fp-travel-map-route-tracker-ui-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--fp-text-color);
    font-variant-numeric: tabular-nums;
}

.fp-travel-map-route-tracker-ui-marker {
    position: absolute;
    width: 24px;
    height: 24px;
    z-index: 5;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 4px 8px rgba(14, 165, 233, 0.4));
}

@media (max-width: 480px) {
    .fp-travel-map-route-tracker-ui-overlay { width: 90%; height: 90%; }
    .fp-travel-map-route-tracker-ui-value { font-size: 0.95rem; }
    .fp-travel-map-route-tracker-ui-panel { padding: 12px 16px; }
}

(function() {
    document.querySelectorAll('.fp-travel-map-route-tracker-ui').forEach(root => {
        const marker = root.querySelector('#fp-travel-marker');
        const path = root.querySelector('#fp-route-path');
        const timeVal = root.querySelector('#fp-time-val');
        const distVal = root.querySelector('#fp-dist-val');
        const destGlow = root.querySelector('#fp-dest-glow');
        const panels = root.querySelectorAll('.fp-travel-map-route-tracker-ui-panel');

        if (!marker || !path) return;

        let animationFrameId;
        let progress = 0.3; 
        let pathLength = path.getTotalLength();
        
        const destPoint = path.getPointAtLength(pathLength);
        destGlow.style.left = `${destPoint.x - 50}px`;
        destGlow.style.top = `${destPoint.y - 50}px`;

        function fp_travel_map_route_tracker_ui_loop() {
            if (!document.body.contains(root)) {
                cancelAnimationFrame(animationFrameId);
                observer.disconnect();
                return;
            }

            if (document.visibilityState === 'visible') {
                progress += 0.0002;
                if (progress > 0.95) progress = 0.1; 

                const point = path.getPointAtLength(progress * pathLength);
                marker.style.left = `${point.x}px`;
                marker.style.top = `${point.y}px`;

                const remainingDist = (12.4 * (1 - progress + 0.1)).toFixed(1);
                const remainingTime = Math.floor(42 * (1 - progress + 0.1));
                
                if(distVal) distVal.textContent = `${remainingDist} km`;
                if(timeVal) timeVal.textContent = `${remainingTime}m`;

                if (Math.random() > 0.995) {
                    panels.forEach(p => p.classList.add('is-syncing'));
                    setTimeout(() => {
                        panels.forEach(p => p.classList.remove('is-syncing'));
                    }, 400);
                }
            }

            animationFrameId = requestAnimationFrame(fp_travel_map_route_tracker_ui_loop);
        }

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    animationFrameId = requestAnimationFrame(fp_travel_map_route_tracker_ui_loop);
                } else {
                    cancelAnimationFrame(animationFrameId);
                }
            });
        }, { threshold: 0.1 });

        observer.observe(root);
    });
})();