/* Custom Scrollbar for dropdowns and container */
.route-dropdown::-webkit-scrollbar,
#results-area::-webkit-scrollbar {
    width: 6px;
}

.route-dropdown::-webkit-scrollbar-track,
#results-area::-webkit-scrollbar-track {
    background: transparent;
}

.route-dropdown::-webkit-scrollbar-thumb,
#results-area::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.dark .route-dropdown::-webkit-scrollbar-thumb,
.dark #results-area::-webkit-scrollbar-thumb {
    background: #475569;
}

/* Route Timeline Line */
.step-line {
    position: absolute;
    left: 17px;
    /* Centers under the 8x8 icon in a 24px container */
    top: 24px;
    bottom: -16px;
    width: 2px;
    z-index: 1;
}

.step-item:last-child .step-line {
    display: none;
}

/* Badge colors for Map Lines */
.bg-tj {
    background-color: #E74C3C;
}

.text-tj {
    color: #E74C3C;
}

.bg-mrt {
    background-color: #3498DB;
}

.text-mrt {
    color: #3498DB;
}

.bg-krl {
    background-color: #9B59B6;
}

.text-krl {
    color: #9B59B6;
}

.bg-angkot {
    background-color: #F39C12;
}

.text-angkot {
    color: #F39C12;
}

.bg-walk {
    background-color: #95A5A6;
}

.text-walk {
    color: #95A5A6;
}

/* Subtle pulse for active route search */
@keyframes soft-pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

.loading-route {
    animation: soft-pulse 1.5s infinite ease-in-out;
}