.metro-stop-container {
            position: relative;
            padding-left: 55px; /* Space for the timeline */
            margin-bottom: 0;
        }

        /* The connecting line */
        .metro-stop-container::before {
            content: '';
            position: absolute;
            left: 20px; /* Center of the 40px circle */
            top: 20px; /* Start from center of circle */
            bottom: -20px; /* Connect to next */
            width: 4px;
            background-color: #e9ecef; /* Light gray line */
            transform: translateX(-50%);
            z-index: 0;
        }
        
        .metro-stop-container:last-child::before {
            display: none;
        }

        .metro-stop-badge {
            position: absolute;
            left: 0;
            top: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #6c757d;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            z-index: 10;
            border: 3px solid #fff; /* Gap from line */
            box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.15);
        }

        .metro-stop-card {
            background-color: #fff;
            border: 1px solid rgba(0,0,0,.125);
            border-radius: 0.5rem;
            padding: 10px 15px;
            box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
            transition: transform 0.2s;
        }
        
        .metro-stop-card:active {
            transform: scale(0.98);
        }

        /* Status colors that can be applied via JS later */
        .metro-stop-container[data-status="completed"] .metro-stop-badge { background-color: #198754; }
        .metro-stop-container[data-status="pending"] .metro-stop-badge { background-color: #6c757d; }
        .metro-stop-container[data-status="active"] .metro-stop-badge { background-color: #0d6efd; box-shadow: 0 0 0 4px rgba(13,110,253,0.25); }